Hi new to the forum here. I have been playing around with different techniques I have been reading about. In the page below the Lime Green div box clears the other divs in Firefox but not IE7. How could I fix that? Thanks. http://www.conceptpro.biz/test/Main.html
Tried both suggestions above and still the same results. Any other ideas on what I am doing wrong. Thanks
Your code is very strange with all those <b>'s... and the lime thing IS below everyone else in every browser I looked in, so it IS clearing properly. What do you want it to look like? IE6 makes all those little b's really long while modern browsers don't. Instead of ASCII art, this looks like HTML art. Y'know, like what crazy Japanese dudes do: http://www.youtube.com/watch?v=ELZAU0Ohfdk
WOW so much for getting away from tables. Back to my problem, in IE7 the lime green box does not clear and is overlayed on the divs above it.
Hmmm, I see it. IE6 is letting nav_container grow to contain the b's inside, that's why that looks goofy. IE7 is obeying the height: 40px. It's hard to read the code, so the best I can do is guess that IE7 wants clear: both instead of just clear: left. I've seen Paul O'Brien do this for clearing even though everything is only floated left, I think maybe for this reason. So, sorta what Ninja said, except he said it on the wrong element, and nobody needs to say display: block on divs (they're already blocks). He also warned me once that in IE, floats can't clear floats. Element isn't floated, but if it was, you'd have to do something else to enclose your floats. When I can't see what's going on in a piece of code, I take out all the stuff I know has nothing to do with the problem, and keep reducing until I can't see the problem any more. So, I had a heck of a time trying to read the part with the b's to see if all the divs were closed (I wondered if nav_container was closed properly). Tips: Make your starting tags line up with the same amount of indentation as your end tags, like you did with the element part of your code. Try not to mix deprecated HTML stuff like "align" with floats. You might want to read some articles by Paul, cause floats are tricky sometimes: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 and http://www.search-this.com/2007/09/05/lets-be-clear-about-this/ which you'll surely run into at some point. If you have a local library nearby, see if they have HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. It was invaluable to getting my head straight with CSS for positioning big chunks of stuff on a page. The quality of the HTML will also affect the CSS, so that you know.
To make those B shrink in IE, I'd suggest setting font-size:1px on them. IE won't normally let empty elements be shorter than the font-size. That said I'd also suggest NESTING them instead of throwing classes at them like crazy. See my little tutorial on that sort of thing: http://battletech.hopto.org/html_tutorials/rounded_css_borders/ Because this: <b class="top"><b><b><b><b><b><b><b></b></b></b></b></b></b></b></b> beats the tar out of blowing all those class declarations on it. You could then use margin and negative margins to do your little 'wave'. As to clearing, I would advise AGAINST a clearing DIV as they are rarely if ever needed. I would simply set overflow:hidden on #nav_container to wrap floats in standards compliant browsers, then trip haslayout so floats are wrapped in IE. (width:100% is good if you aren't setting margins/padding on the horizontal, otherwise zoom:1; though that doesn't validate) Oh, and to save yourself some effort you really might want to start condensing your properties - for example: .b1 { display: block; width:90%; height:1px; margin:5px auto 0; font-size:1px; background:#FFF; border:solid #FFF; border-width:0 2px; } Code (markup):