Hi, im new to CSS, i m using the ASP.NET framework and i created a page that looks fine in IE 6. But when i tried the Firefox 2 , it has strange behavor Well, here is the simple css code body { padding: 0; background: #FFFFFF; font: normal .7em Tahoma, Arial, Helvetica, sans-serif; color: #666666; } #form1 { } #wrapper { width: 820px; background-color: Black; } #logo1 { float:left; width: 200px; height: 150px; background-image: url(Images/img1.jpg); /*background-color:#ECDBC1;*/ } #logo2 { float:right; width:607px; height:150px; background-image: url(Images/sea.JPG); /*background-color: #688BC5;*/ } Code (markup): The html code is: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div id="wrapper"> <div id="logo1"> test1 </div> <div id="logo2"> test2 </div> </div> </form> </body> </html> HTML: The results in Firefox and IE respectively are: http://img440.imageshack.us/img440/428/ffnn1.jpg http://img440.imageshack.us/img440/9075/iect7.jpg Why firefox has the above behavour? i mean, the div "wrapper" has two nested logos, so its make sense to have a black colored background
Um, mostly it's that IE is incorrectly wrapping #wrapper around the two floats. Now you'd think that's the right behaviour, but actually floats are supposed to pop out. Containers do not naturally wrap floats. The container can't actually see the bottom of the floats. It thinks it's empty. You can either use one of the float clearing methods from PIE (positioniseverything.com) or, if you said #wrapper { width: blah; background-color: blah; overflow: hidden; } then the #wrapper will wrap the floats. But I see your floats are a fixed height. If they stay that way, you can just set a height on #wrapper that's larger than the floats. Or, if there's something else inside the #wrapper that comes after the floats, you can set it to "clear: both;" in the CSS and by clearing the two floats, makes the #wrapper now acknowledge them. It'll wrap automatically. However there is an IE bug where if the clearing thing is also floated, then it won't clear. Stupid, but that's how it is. The thing that clears which comes after the floats can't be a float itself in IE. Fortunately, IE's the one with the bug that wraps floats anyway, so they're not cleared, but they'll mostly look like it. So you're okay either way.
thank you! i think it worked! However its really strange and CSS gets me angry with all these weird things
Heres a tip, design for Firefox first. Then go back and fix the errors in IE6, also use a separate css file and conditional comments to load IE6 specific hacks.
Well, doing that might also be more work than you need to do... better to have the both (or all 5 major) browsers open, and check in all of them... though I'll admit I'm lazy and don't check after every single change unless I'm at the later stages of building... If you're aware of the major IE bugs, you can write "for standards" and deal with IE6 at the same time. But check in all of them at once. Sometimes everyone looks okay and only one browser shows an error (I've had Opera, IE7 and Safari do this for me, showing a real error that everyone else ignored).
I do not agree with that. I used to do that and I had about an extra kb worth of hacks. It's much better to code keeping in mind all of the problems in all browsers. The last couple of sites that I've coded have been hack free. I code for Opera, not firefox, and after every big thing, check in each browser. (Header, Content, Sidebar, Footer). I find that to be the best way to code, and once you've learned what causes what problems, you usually just code psat them. I also don't agree with using two different CSS files. One larger file loads faster than 2 smaller files. Just my two cents.. Regards, Nick If you set a height of 1% height:1%; Code (markup): combined with overflow hidden, it fixes that stupid float bug or whatever it is called. Regards, Nick
I'd be careful about that. A fixed height and hidden overflow will leave you with part of your content lost. See enclosing float elements for an explanation and a variety of methods to achieve the desired result. cheers, gary
Setting height: 1% is merely to trigger Haslayout, and you can do that with a wet width as well--- which you do usually find with a container and floats. They usually all have widths. Floats just being floated get Haslayout too. You can (illegally) set zoom:1 for a Haslayout trigger whos affect you don't see. There's a few choices out there. Overflow:hidden is like my favourite clearing method but it's got to be used carefully because it's called overflow:hidden and not overflow:clear-floats... set a height or width on the element and the overflow will get hidden. There's something about the whole content:"." thing that just seems too complicated for the simple job its doing, so I try to avoid it.