IE Double Margin and Nav trouble...Whats Up With That?

Discussion in 'HTML & Website Design' started by rbro21, Apr 23, 2008.

  1. #1
    So I have this site:

    http://artillerymedia.com/allmand/info/

    css here:
    http://artillerymedia.com/allmand/style.css

    It is perfectly fine in FF on Mac+PC and Safari, but for some reason on IE it's rendering the content with a double margin-left. It was also doing that with my navigation (I aslo can't figure out why the drop down's don't work) but I fixed it with a {display: inline;} tag for the float. I've applied the {display: inline;} tag to the other content elements but haven't had any luck. What have I done wrong? Please help if you can!

    Cheers!
     
    rbro21, Apr 23, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, first, you don't have to float everything in sight : )

    Second, I don't see you clearing your floats. Am I missing that?

    
    #content {
    	width: 1000px;
    	background-image: url(images/content_bg.jpg);
    	background-repeat:repeat-y;
    	padding: 0;
    	float: left; <-- this isn't needed
    	display: inline;
    }
    
    #left {
    	padding-top: 10px;
    	margin-left: 95px;
    	width: 590px;
    	w\idth: 590px;<--- what's this doing here if it's the same width?
    	height:100%;
    	float: left;
    	display: inline;
    
    }
    
    Code (markup):
    I just got home, so no access to IE (linux machines here), but IE6 has a double-margin float bug. Display: inline does magically fix it. The margins on all floats are not doubled-- just the ones which are closest to the edge of their container in the direction they're floating-- all other floats coming up alongside the first should not have doubled margins either way.

    Does anything help if you stop floating #content? You should see no visual difference since #container is 1000px wide and #content is 1000px wide-- so no room to move either way.


    Why the drop-downs don't work (in IE6... 7 should be showing them unless there's a Haslayout issue):
    #nav li:hover...

    IE6 only recognises :hover on "a". The only solutions are either some sort of javascript (like from Sons of Suckerfish menu at HTMLdog.com) or peterned's whatever:hover (I don't have the link now, but this one sits on your server and lets IE6 hover on anything at all) OR use the invisible tables method as seen at cssplay.co.uk. The tables are for IE6 only and basically move the closing </a> from the end of the anchor text to the end of the submenu. It really bloats your HTML.
    Otherwise I gotta wait til I'm at work again tomorrow where I have a Windows machine.
     
    Stomme poes, Apr 23, 2008 IP