...

View Full Version : IE7 float padding?



F-b0mb
03-31-2009, 10:38 PM
I have a ul of links inside a div with id 'nav' with the following css:

#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.

PitbullMean
03-31-2009, 11:04 PM
Try adding, *{margin:0;padding:0} to ur css file.

F-b0mb
03-31-2009, 11:40 PM
I had html *{padding:0; margin:0;}. I tried changing it to just * but that didn't make any apparent difference.

PitbullMean
04-01-2009, 12:20 AM
give us a link so we can see it please

Excavator
04-01-2009, 12:53 AM
Hello F-b0mb,
Didn't have your images so I took them out. Give this a try -
<!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>

F-b0mb
04-01-2009, 12:44 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum