Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts

    IE7 float padding?

    I have a ul of links inside a div with id 'nav' with the following css:
    Code:
    #nav {font-size: .75em;
    	background: rgb(103,19,19);
    	position:relative;
    	top: -18px;
    	}
    #nav ul {float:right;
    	}
    #nav li {list-style: none;
    	text-align: center;
    	float:left;
    	}
    #nav li a {color: rgb(225,195,45);
    	text-decoration: none;
    	font-weight: bold;
    	background: rgb(133,26,26) url("img/navbg.png") repeat-x top left;
    	border-style: solid;
    	border-width: 1px 1px 2px 1px;
    	border-color: rgb(186,3,3) rgb(103,19,19) #000 rgb(186,3,3);
    	padding: 0.1em 2em;
    	}
    #nav li a:hover {color: rgb(234,224,199);
    	background: rgb(186,3,3) url("img/navhover.png") repeat-x top left;	
    	}
    This looks and works how I want in Firefox and chrome at least. But in IE7 the padding and top/bottom borders are MIA. I am frightened to see what IE6 does with it. For now I would would just like to know what needs to be done to fix IE7 if anyone can help. I will address IE6 later as I am sure this will be only one of many issues. I have validated both the html and css but cannot put it on my server because it is getting ddos attacks atm.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Try adding, *{margin:0;padding:0} to ur css file.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    I had html *{padding:0; margin:0;}. I tried changing it to just * but that didn't make any apparent difference.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    give us a link so we can see it please
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello F-b0mb,
    Didn't have your images so I took them out. Give this a try -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 800px;
    	height: 300px;
    	margin: 30px auto;
    	background: #999;
    }
    #nav {
    	font-size: .75em;
    	background: #671313;
    	position:relative;
    	overflow: auto;
    	}
    #nav ul {
    	float: right;
    	}
    #nav li {
    	display: inline;
    	}
    #nav li a {
    	display: block;
    	float: left;
    	padding: 0.1em 2em;
    	color: #e1c32d;
    	text-decoration: none;
    	font-weight: bold;
    	background: #851a1a;
    	border-top: 1px solid #ba0303;
    	border-right: 1px solid #671313;
    	border-bottom: 2px solid #000;
    	border-left: 1px solid #ba0303;
    	}
    #nav li a:hover {
    	color: #eae0c7;
    	background: #ba0303;
    	}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="nav">
                <ul>
                    <li><a href="">linky</a></li>
                    <li><a href="">linky</a></li>
                    <li><a href="">linky</a></li>
                    <li><a href="">linky</a></li>
                    <li><a href="">linky</a></li>
                    <li><a href="">linky</a></li>
                    <li><a href="">linky</a></li>
                </ul>    
            <!--end nav--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    F-b0mb (04-01-2009)

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Thanks Excavator! That pushed everything under the menu down as if it were not floated but I realized I didn't even need that nav div so I just changed the ul id to nav and combined those style rules. Worked like a charm!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •