Hi.
I created a CSS navigation menu, and it works perfectly with FireFox. However, when I test it with IE 6.0, it fails. Two problems occur:
1.) Extra vertical spacing between each item.
2.) The title image that uses #button li.title makes the menu wider than it should.
The link to the title image:
<!-- m --><a class="postlink" href="http://ftp5.narutofan.com/images/skin_5/nav_main.gif">http://ftp5.narutofan.com/images/skin_5/nav_main.gif</a><!-- m -->
and the background image, used in #button ul, is:
<!-- m --><a class="postlink" href="http://ftp5.narutofan.com/images/skin_5/bg_red.jpg">http://ftp5.narutofan.com/images/skin_5/bg_red.jpg</a><!-- m -->
The source code of the page is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>List</title>
<style type="text/css">
#button ul{
display: block;
margin: 0;
padding: 0px 5px 0px 18px;
border: 0;
background-color: #d75d3d;
background-image:url(bg_red.jpg);
list-style-type:disc;
font-family: Arial, Verdana;
font-size: 11px;
color: #5C2314;
width: 173px;
voice-family: "\"}\"";
voice-family: inherit;
width: 151px;}
#button li.title {
display: block;
margin: 0;
border: 0;
padding: 0;
position: relative;
left: -17px;
list-style: none;}
#button li a {
display: block;
margin: 0;
border: 0;
padding: 0px;
text-align:left;
color: #53413C;
text-decoration: none;}
#button li a:hover {
display: block;
margin: 0;
border: 0;
padding: 0px;
text-align:left;
color: #53413C;
text-decoration: underline;}
</style>
</head>
<body>
<div id="button">
<ul>
<li class="title"><img src=http://www.webdeveloper.com/forum/archive/index.php/"nav_main.gif" width="170" height="17" /></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
</ul>
</div>
</body>
</html>
I would greatly appreciate any help. Thanks.IE having stupid defaults annoyed the shift out of me for quite some time untill (I think it was) Daniel T pointed out a blindingly obvious solution:
place* (
border:0px;
padding:0px;
margin:0px;
}
in your style sheet. This will have the wonderful effect of giving all elements the same default border, padding and margin values of absolutely chuff all.
Good luck.
I created a CSS navigation menu, and it works perfectly with FireFox. However, when I test it with IE 6.0, it fails. Two problems occur:
1.) Extra vertical spacing between each item.
2.) The title image that uses #button li.title makes the menu wider than it should.
The link to the title image:
<!-- m --><a class="postlink" href="http://ftp5.narutofan.com/images/skin_5/nav_main.gif">http://ftp5.narutofan.com/images/skin_5/nav_main.gif</a><!-- m -->
and the background image, used in #button ul, is:
<!-- m --><a class="postlink" href="http://ftp5.narutofan.com/images/skin_5/bg_red.jpg">http://ftp5.narutofan.com/images/skin_5/bg_red.jpg</a><!-- m -->
The source code of the page is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>List</title>
<style type="text/css">
#button ul{
display: block;
margin: 0;
padding: 0px 5px 0px 18px;
border: 0;
background-color: #d75d3d;
background-image:url(bg_red.jpg);
list-style-type:disc;
font-family: Arial, Verdana;
font-size: 11px;
color: #5C2314;
width: 173px;
voice-family: "\"}\"";
voice-family: inherit;
width: 151px;}
#button li.title {
display: block;
margin: 0;
border: 0;
padding: 0;
position: relative;
left: -17px;
list-style: none;}
#button li a {
display: block;
margin: 0;
border: 0;
padding: 0px;
text-align:left;
color: #53413C;
text-decoration: none;}
#button li a:hover {
display: block;
margin: 0;
border: 0;
padding: 0px;
text-align:left;
color: #53413C;
text-decoration: underline;}
</style>
</head>
<body>
<div id="button">
<ul>
<li class="title"><img src=http://www.webdeveloper.com/forum/archive/index.php/"nav_main.gif" width="170" height="17" /></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
</ul>
</div>
</body>
</html>
I would greatly appreciate any help. Thanks.IE having stupid defaults annoyed the shift out of me for quite some time untill (I think it was) Daniel T pointed out a blindingly obvious solution:
place* (
border:0px;
padding:0px;
margin:0px;
}
in your style sheet. This will have the wonderful effect of giving all elements the same default border, padding and margin values of absolutely chuff all.
Good luck.