Menu
Hi,
I normally develop sites using tables as a lot of sites are database and data driven… however I’m building some smaller sites now with css positioning.
So I’ve hit my first problem.
I have several nested divs for layout.. inside one is a UL list for the navigation.
Within each li is a span tag and a <a> tag.
The span tag contains an image for each li.. the span has a minus poisitioning value so that it falls back and upwards slightly from the rest of the contents of the li…
All fine so far…
However, in IE6, the span is getting a margin added to the bottom of a few tens of pixels.. making the navigation div far too high.
If I remove the margin using a negative value that works fine but then other bits and pieces are thrown out and it no longer works in IE7 and FF.
I’ve pasted up my code below.. any ideas?
Stylesheet:
body, html {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
background-position: top;
margin: 0px;
padding: 0px;
height: 100%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: center;
}
#overallholder {
text-align: center;
margin: 0px;
padding: 0px;
width: 768px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#overallholder #leftshadow {
background-image: url(images/bg_leftshadow.jpg);
width: 4px;
float: left;
height: 100%;
}
#overallholder #maincontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0157AC;
width: 760px;
background-color: #FFFFFF;
float: left;
height: 100%;
margin: 0px;
padding: 0px;
text-align: left;
}
#overallholder #maincontent #mainnav a {
color: #FFFFFF;
text-decoration: none;
}
#overallholder #maincontent #header #headertxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
float: right;
text-align: right;
padding-right: 10px;
}
#overallholder #maincontent #mainnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #669ECE;
height: 29px;
padding-right: 10px;
padding-left: 12px;
}
#overallholder #maincontent #mainnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#overallholder #maincontent #mainnav li {
float: left;
position: relative;
padding-top: 6px;
font-weight: bold;
padding-right: 15px;
}
#overallholder #maincontent #mainnav span {
position: relative;
top: -18px;
float: left;
margin: 0px;
}
#overallholder #rightshadow {
background-image: url(images/bg_rightshadow.jpg);
width: 4px;
float: left;
height: 100%;
}
#overallholder #maincontent #header #leftimg {
float: left;
margin: 0px;
padding: 0px;
}
#overallholder #maincontent #header {
background-image: url(images/header_bg.jpg);
background-repeat: repeat-x;
height: 131px;
margin: 0px;
padding: 0px;
}
END OF STYLE SHEET
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Title Here</title>
</head>
<body>
<div id=”overallholder”>
<div id=”leftshadow”></div>
<div id=”maincontent”>
<div id=”header”>
<img src=”images/header_left.jpg” alt=”” width=”543″ height=”131″ id=”leftimg” />
<div id=”headertxt”><b>ADDRESS HERE</b><br />
</div>
</div>
<div id=”mainnav”>
<ul>
<li><span><img src=”images/nav_home.gif” width=”62″ height=”68″ /></span><a href=”index.asp”>HOME</a></li>
<li><span><img src=”images/nav_aboutus.gif” width=”62″ height=”68″ /></span><a href=”aboutus.asp”>ABOUT US</a></li>
<li><span><img src=”images/nav_products.gif” width=”62″ height=”68″ /></span><a href=”products.asp”>PRODUCTS</a></li>
<li><span><img src=”images/nav_news.gif” width=”62″ height=”68″ /></span><a href=”news.asp”>NEWS</a></li>
<li><span><img src=”images/nav_contacts.gif” width=”62″ height=”68″ /></span><a href=”contacts.asp”>CONTACTS</a></li>
</ul>
</div>
</div>
<div id=”rightshadow”></div>
</div>
</body>
</html>
file can be found at:
[url]www.patchworkmedia.co.uk/proof/safepat