strange problem with Firefox and div elements

Discussion in 'CSS' started by gtka, Apr 17, 2008.

  1. #1
    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
     
    gtka, Apr 17, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Stomme poes, Apr 18, 2008 IP
  3. gtka

    gtka Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thank you! i think it worked!
    However its really strange and CSS gets me angry with all these weird things:D
     
    gtka, Apr 18, 2008 IP
  4. Svenson

    Svenson Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Svenson, Apr 18, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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).
     
    Stomme poes, Apr 29, 2008 IP
  6. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #6
    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
     
    Hades, May 1, 2008 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    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
     
    kk5st, May 1, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    Stomme poes, May 1, 2008 IP