css <div> and headache!!

  n0mad 14:54 06 Dec 2007
Locked

I doubt this is the first time this has been asked, but I can't find any relevant earlier postings.

I have decided to be good and move towards css for page layout. (That was the easy part). I have my page in three divs - a header, a content (with a table to get the left margin - it works so I can't be bothered to change it) and a footer. These three are contained within a page div as a wrapper.
However, when the browser horizontal size (IE6 and IE7) is made smaller the divs don't all 'shrink' together. The header has a wide image so it 'overflows' first, then the content and finally the footer. The right margin develops 'steps'.

I'd like to stop this so the widest div determines the overal size. Any suggestions.
To see what I mean you can go here: click here

  Kemistri 15:54 06 Dec 2007

I'll take a look at the CSS files shortly, but my immediate thought is that you have not yet grasped percentage layouts. Ditch that table ASAP; it does not help and is deprecated for good reasons. A site such as this should be fully WCAG compliant.

In the meantime, click here and sort out your HTML!

  Kemistri 15:55 06 Dec 2007

Oh, and FAQs should not have an apostrophe.

  Kemistri 16:02 06 Dec 2007

Oh dear... click here

Did you know that when your site is viewed and resized in a standards-compliant browser, it works fine? You will need to start down the road of cross-platform development and bug-fixing, but you will make that process considerably easier if you fix your output first.

  n0mad 16:36 06 Dec 2007

Kemistri,
Thanks for your feedback - I'm aware of some of the issues you highlight but these don't solve the problem!! If I can resolve the <div> issues, then the table can go. Unless/until I can the table stays!!
Each browser has its own peculiarities with handling css2 - amazing it has become a standard!!
Which 'standards compliant browser' are you using? IE6 and IE7 are the most popular, so I need a 'fix' for these anyway.

  Kemistri 17:46 06 Dec 2007

I develop in FF2, check in Safari on a Mac, then debug for IE6 and 7 - I keep one PC with IE6 just for that purpose. With good coding, you shouldn't need to do too much debugging, if any. With experience, you can avoid most of the common problems before they occur. If you want to debug, you really should fix up your code first; it WILL make it a lot easier. Most designers test and debug from a very early stage in their coding so that errors come to light quickly and the causes are much more apparent. That's one of the advantages of writing your own code by hand.

That four div (including the table) layout is a straightforward one. Maybe it will help if you draft a new four div skeleton and start adding to it as needed, testing frequently as you go. Build the framework first, test it, then start filling it.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

Is this the future of VR and AR?

Best iPad buying guide 2017

Comment regarder le Bureau des L├ęgendes en ligne ?