cph
03-02-2009, 01:05 PM
Hello,
I have a navigation menu displaying differently across different browsers. IE7 displays as I want it. IE6 has gaps inside at the bottom of nav items. FF and IE8 have gaps below the nav items. Here's the HTML and CSS:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #111111;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #eeeeee;
}
#sidebar {
display: inline;
float: left;
width: 270px;
}
#navitem {
height: 80px;
width: 269px;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
}
#navitem img {
float: left;
border: none;
padding-right: 10px;
}
#navitem a {
display: block;
width: 269px;
height: 80px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
#navitem a:hover {
background-color: #333333;
}
#navitem p {
font-size: 12pt;
font-weight: bold;
font-style: italic;
margin: 5px 0 5px 0;
}
#navitem .description {
font-size: 8pt;
color: #999999;
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div id="sidebar">
<div id="navitem">
<a href="link1.html">
<img src="thumb1.jpg" />
<p>Link 1</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt nunc semper urna.</p>
</a>
</div>
<div id="navitem">
<a href="link2.html">
<img src="thumb2.jpg" />
<p>Link 2</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt nunc semper urna.</p>
</a>
</div>
<div id="navitem">
<a href="link3.html">
<img src="thumb3.jpg" />
<p>Link 3</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt nunc semper urna.</p>
</a>
</div>
</div>
</body>
</html>
Any help would be really appreciated. Thanks,
cph :)
I have a navigation menu displaying differently across different browsers. IE7 displays as I want it. IE6 has gaps inside at the bottom of nav items. FF and IE8 have gaps below the nav items. Here's the HTML and CSS:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #111111;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #eeeeee;
}
#sidebar {
display: inline;
float: left;
width: 270px;
}
#navitem {
height: 80px;
width: 269px;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
}
#navitem img {
float: left;
border: none;
padding-right: 10px;
}
#navitem a {
display: block;
width: 269px;
height: 80px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
#navitem a:hover {
background-color: #333333;
}
#navitem p {
font-size: 12pt;
font-weight: bold;
font-style: italic;
margin: 5px 0 5px 0;
}
#navitem .description {
font-size: 8pt;
color: #999999;
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div id="sidebar">
<div id="navitem">
<a href="link1.html">
<img src="thumb1.jpg" />
<p>Link 1</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt nunc semper urna.</p>
</a>
</div>
<div id="navitem">
<a href="link2.html">
<img src="thumb2.jpg" />
<p>Link 2</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt nunc semper urna.</p>
</a>
</div>
<div id="navitem">
<a href="link3.html">
<img src="thumb3.jpg" />
<p>Link 3</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt nunc semper urna.</p>
</a>
</div>
</div>
</body>
</html>
Any help would be really appreciated. Thanks,
cph :)