[Mediaman_12]

Well as Google has started to rate Sites that validate over ones that don't, I hav decided to start coading using CSS layout.
I am managing quite well but have struck up aginst two problems.

Development pages

1. Things are diferentely sized in IE (V6 PC) to Mozilla, (this leads to the bigger problem).
2. Most of the pages are 'acceptable' in Mozilla, except the ones linked from the side nav (example)
these are slightly different to the rest as the text block in the centere has a load of left margin (in the css) to get away from the edge. because of the size difference between IE and Mozz it it looks a mess.
Has anyone got any ideas?

[philzilla]

Originally posted by Mediaman_12:
Has anyone got any ideas?

"give up" is the idea i usually have, when browsers act up like that. it's so damn annoying, trying to get the same results in each browser.

here's an article about using CSS in page layouts. maybe it'll be of some use?

[Simon Mundy]

Originally posted by Mediaman_12:
Well as Google has started to rate Sites that validate over ones that don't, I hav decided to start coading using CSS layout.
I am managing quite well but have struck up aginst two problems.

Development pages

1. Things are diferentely sized in IE (V6 PC) to Mozilla, (this leads to the bigger problem).
2. Most of the pages are 'acceptable' in Mozilla, except the ones linked from the side nav (example)
these are slightly different to the rest as the text block in the centere has a load of left margin (in the css) to get away from the edge. because of the size difference between IE and Mozz it it looks a mess.
Has anyone got any ideas?

You don't need to make a page in full CSS to make it validate. You can create fully HTML 4.01 compliant pages without using CSS for positioning, and in some cases it is preferable! (Especially if you require Netscape 4 compatibility)

Having said that, I much prefer your approach to web page layout these days, as I have read some very enlightening articles lately about seperating content from layout.

If you're serious about making validated pages and reducing the use of unnecessary tables within your layout, there's a few things you can do to your page, and a few things to be wary of:

- Ditch Netscape 4 support. If people continue to use a 5-6 year old browser with poor standards support, it's their fault if they can't see the layout you intended. If they can still get to the content in a reasonably logical way then kudos to you for designing a gracefully degrading layout!

- Watch out for differences in the CSS Box Model rendering. IE 5.5 and IE 6 have seperate ways of dealing with the width of Boxes (although IE6 is closer to Mozilla). Basically, if you tell IE5.5 that a DIV is 600px wide, has a 10px padding on the left and right, and has a 1px border each side, the physical room inside your DIV is only 578px. Give the same specs to IE6 or Mozilla, and the inside width is 600px PLUS 20px padding PLUS 2px border = total 622px!!! That's why you get unexpected results if you're not careful. The solution? You can read about it at http://www.tantek.com/CSS/Examples/boxmodelhack.html

- Use the display: block style to advantage. Because of a 'bug' in Mozilla, a good practice is to give the IMG tag a style of display: block (it resolves a whitespace problem). It also provides a nice way to avoid using tables, as you've done in the side nav. Don't use a single column table, nor use BR's between each element. Just put these IMG's side-by-side in your source code, and give them a white border style as well. Cleaner and smarter code.

- It looks like you're using the width 100% and float tags to centre your content. This won't work as expected in IE5 for Mac (because of a hidden 15px margin bug, it always adds horizontal scroll bars to any element that has a 100% width). A simpler solution would be to wrap the whole layout in a DIV that has (for example) a width of 700px, and has left and right margins set to auto. Then nest a DIV within that with position:abolsute and width:700px. That means any element within that second DIV will use an absolute position, but relative to the position of the 1st DIV! Simple centering with precision control.

Hope this helps as a starting point. It may be easier to answer any other Qs more specifically.

A couple of other useful bookmarks in my Safari favourites:

- http://www.westciv.com/style_master/...owser_support/
- http://www.macedition.com/cb/
- http://www.glish.com/css/

Cheers!

[Millennium]

Originally posted by Simon Mundy:
You don't need to make a page in full CSS to make it validate. You can create fully HTML 4.01 compliant pages without using CSS for positioning, and in some cases it is preferable! (Especially if you require Netscape 4 compatibility)

That's something a lot of people don't realize: it's possible to make a page's code valid without making it structural. I still think it's preferable to lay your code out structurally, but it's not strictly necessary. This said, Google does reward structural-code pages somewhat (in particular, keywords in header tags and table headers are given more weight). A quick run through MacTidy will get your code up to spec, usually with no change in appearance at all.

By the way, a new CSS hack has recently been discovered which will make dealing with the box model troubles much easier. If you prefix any property name with a hash, IE/Windows will obey the rule, but everything else (Mozilla, Safari, Opera, IE/Mac, and even Netscape4) will ignore it. This is actually a bug in IE/Win, but it has its uses.

To make this work, put the "special IE rule" after the "real" rule. So, for example:

Code:
.sample {
    width: 100px;
    #width: 50px;
}

This will make tags with class "sample" 100 pixels wide in everything but IE/Win, and 50px wide in IE/Win. This makes the hack ideal for dealing with IE's broken box model and font keyword-sizing issues.

[Simon Mundy]

Originally posted by Millennium:
By the way, a new CSS hack has recently been discovered which will make dealing with the box model troubles much easier. If you prefix any property name with a hash, IE/Windows will obey the rule, but everything else (Mozilla, Safari, Opera, IE/Mac, and even Netscape4) will ignore it. This is actually a bug in IE/Win, but it has its uses.

To make this work, put the "special IE rule" after the "real" rule. So, for example:

Code:
.sample {
    width: 100px;
    #width: 50px;
}

This will make tags with class "sample" 100 pixels wide in everything but IE/Win, and 50px wide in IE/Win. This makes the hack ideal for dealing with IE's broken box model and font keyword-sizing issues.

That's lovely! Will give it a go tonight. Does this mean IE6 will obey the correct (read Mozilla) width?

[snotnose]

all good stuff above! anyone got any link on the google validation ranking on hand?

[Millennium]

Originally posted by Simon Mundy:
That's lovely! Will give it a go tonight. Does this mean IE6 will obey the correct (read Mozilla) width?

On further examination of this, I'm afraid it doesn't look like it will. Unfortunately, it's vulnerable to the hack.

The answer to this is to put IE6 into Quirks mode, by using a half-DOCTYPE (don't include the URL at the end of the DOCTYPE). The page will still validate, but IE6 will go into Quirks mode, so that it will use the broken box model (which, in this particular case, you want it to do, because it will be using the CSS for that model). This will also put Gecko and Safari into Quirks mode, but their Quirks modes don't break the box model, and they still aren't susceptible to the bug anyway, so they will still be the correct size.