OZZU CSS comp tricks and tips

I have decided that it would be easier for you all to learn from my mistakes seeing that I am the first one to start to tackle the CSS comp ... or so it seems, so I'm going to share a few things with you that I've learned through this to make it a bit easier for you ...

1. If you don't want the two divs ("headerTop" and "headerBottom") to take up 0px of vertical space (like I wanted to do), bad luck, IE6 doesn't do that, the minimum I could get a div to be was 8px, but I used 10px to be sure.

2. For the "legend" icons that show you which icon means what ("no new posts","new posts","locked forum") I used one image containing all three icons and made the padding of the list more to space the text properly

3. Fixed width (what I tried first) seems almost impossible because there is no container div for the right and the left column together ("div.left" and "div#allrightcontent") ... except if you use absolute positioning and place it all on the left hand side of the screen.

4. For some reason if you use absolute positioning for the left hand side column, the footer part moves all the way up till right under the nav-bar.

5. IE6 and FF interprets padding differently if you have a div that is 200px wide and you add 20px padding to it, it will be 240px in FF and it would still be 200px in IE with 20px padding inside ... So what I would suggest is to add the padding to the text inside the div instead of to the div itsself ...

If there are any more that I find, I will add them, and if you have any to add, please do so ...

Good thread r_t. I really admire your effort here.

1. Have you tried display:none; ?

4. Absolute positioning removes the element from the render flow.

5. This is the infamous box-model. The one FF uses is the one that is W3C correct. It is not analogous to a real world box. For the W3C, a box is measured by it's content. Padding, border and margin all go outside the width.

I prefer IE6's, where the width is measured from the borders, but that's not the one we get moving forward. http://www.w3.org/TR/REC-CSS2/box.html



*Note*
The CSS-3 spec has been in development for nearly 10 years. Hopefully...hopefully, one day we will benefit from all that it promises.

I have a question. Why in the world can't they order the divs in the way they are on the page? How do I get the ad that's in the header up where it's supposed to be if it appears in the html after the nav?

Sorry if I made some kind of newbie mistake But I just can't figure it out.

Are you talking about the 3FN.net ad?, if you are, here is my solution: I used absolute positioning to make it always stay in the top-right of the page, the code looks like this:

Update ... Display:none; does the trick if you want to make a div 0px in height. Thanks dM ... that's good for future use ... But now I have already fixed this with a bit of a workaround ...

Like position:absolute; a float also takes an element out of the render flow. This can be managed with clear:both; in the elements that follow. Like so...
http://www.myirmo.com/bogey

Excelent. thanks Mr RT, sir

And we must not forget our friend digitalMedia

Well, the element shouldn't render at all - not just 0px in height.

What was your workaround?

Splitting the image up into 3 pieces vertically ... and put it into the 3 divs ...

I tried to use rounded corners in the Nav.
Looks good till you see it in IE. :S

FF: http://www.onyx-design.net/test/ozzu1/99.jpg
IE7: http://www.onyx-design.net/test/ozzu1/993.jpg

I was stumped on this one for a while, too. Then, I tried something that I was absolutely certain wasn't going to work at all... but it did... and even validated.

I just treated the 'body' as if it were a wrapper div:



I'm not sure why or how it worked, but it did the trick.

This may help you in your rounded corner venture:

http://www.cssplay.co.uk/boxes/snazzy2.html
http://www.cssplay.co.uk/boxes/chunky.html
http://www.cssplay.co.uk/boxes/snazzy.html

Yeah, I do that all the time , well, not to get something to 0px, but treat body as it was a wrapper div...

another one I forgot to mention, thanks to spork I remembered:
there is this:

And this:

which looks the same, but as a matter of fact isn't (notice the capitals), so the following CSS will not work

instead, you'll have to do it like follows:

Yeah, I wasn't sure if he meant to do that or not. Either way, the solution you posted is the exact one I used, so even if dM doesn't change it, it's no big deal.