hello there.
recentley i have been constructing a list navigation and upon completion, i stumbled across a problem.
i have not published this on the internet yet so i am sorry but i will have to publish the whole code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Help Needed</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
#container {
background: #fff;
border: 1px solid #000;
voice-family: inherit;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 660px;
}
#navigation {
background: #fff url() no-repeat;
margin: 0;
padding: 0;
width: 660px;
height: 28px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
line-height: 28px;
}
#navlist {
height: 28px;
margin: 0;
CLEAR: left;
}
#navlist ul {
list-style-type: none;
padding: 0;
margin: 0;
clear: left;
display: inline;
}
#navlist ul, li {
display: block;
float: left;
}
#navlist a:link, #navlist a:visited {
float: left;
margin: 0;
line-height: 28px;
display: block;
text-decoration: none;
color: #000;
width: 97px;
border-right: 1px solid #000;
}
#navlist a:hover {
background: #C1C1C5;
color: #000;
margin: 0;
width: 97px;
border-right: 1px solid #000;
display: block;
}
body {
margin: 0;
padding: 0;
font-size: 12px;
color: #000;
background: #ccc;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<br><br><br>
<div id="container">
<div id="navigation">
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
viewing in Mozilla Firefox, you will notice the indent on the left of the links. i cant remove this.
any ideas?
thanks
EDIT: i have only displayed the relevent code here.Start with putting browser in compliant mode by using up-to-date DTDthanks for that comment.
what would you suggest fora new doc type?Vlad is referring to using a complete DOCTYPE to kick the browser into standards-compliance mode. Basically, any DOCTYPE you'd like from this page (<!-- m --><a class="postlink" href="http://www.webstandards.org/learn/templates/index.html">http://www.webstandards.org/learn/templates/index.html</a><!-- m -->) though from looking at the one you currently have you're obviously looking for HTML 4.01 Transitional thus you'd want to change it to this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">From here on out, now the browser will attempt to render the page under standards-compliance mode and your CSS should work as intended. Whereas before, it was under quriks mode and your CSS and other such code might not have been interpreted as you have intended.thank you FredMV for your comment.
i inserted that line of code into the corrrect place but unfortunatley the problem remains.
any other suggestions as this problem is most unfortunate.
many regards,
EDIT: thanks i have jsut realised i have ventured out of the doom that is quirks mode.No problem David. Now that you've got a good DOCTYPE we can actually get some work done.
All you need is:#navlist {
height: 28px;
margin: 0;
padding: 0;
clear: left;
}fredMV
thank you very much for your most helpful tutoring.
you have solved my problem and i am extremely grateful.
many regards,
David
recentley i have been constructing a list navigation and upon completion, i stumbled across a problem.
i have not published this on the internet yet so i am sorry but i will have to publish the whole code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Help Needed</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
#container {
background: #fff;
border: 1px solid #000;
voice-family: inherit;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 660px;
}
#navigation {
background: #fff url() no-repeat;
margin: 0;
padding: 0;
width: 660px;
height: 28px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
line-height: 28px;
}
#navlist {
height: 28px;
margin: 0;
CLEAR: left;
}
#navlist ul {
list-style-type: none;
padding: 0;
margin: 0;
clear: left;
display: inline;
}
#navlist ul, li {
display: block;
float: left;
}
#navlist a:link, #navlist a:visited {
float: left;
margin: 0;
line-height: 28px;
display: block;
text-decoration: none;
color: #000;
width: 97px;
border-right: 1px solid #000;
}
#navlist a:hover {
background: #C1C1C5;
color: #000;
margin: 0;
width: 97px;
border-right: 1px solid #000;
display: block;
}
body {
margin: 0;
padding: 0;
font-size: 12px;
color: #000;
background: #ccc;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<br><br><br>
<div id="container">
<div id="navigation">
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/" title="" >Link</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
viewing in Mozilla Firefox, you will notice the indent on the left of the links. i cant remove this.
any ideas?
thanks
EDIT: i have only displayed the relevent code here.Start with putting browser in compliant mode by using up-to-date DTDthanks for that comment.
what would you suggest fora new doc type?Vlad is referring to using a complete DOCTYPE to kick the browser into standards-compliance mode. Basically, any DOCTYPE you'd like from this page (<!-- m --><a class="postlink" href="http://www.webstandards.org/learn/templates/index.html">http://www.webstandards.org/learn/templates/index.html</a><!-- m -->) though from looking at the one you currently have you're obviously looking for HTML 4.01 Transitional thus you'd want to change it to this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">From here on out, now the browser will attempt to render the page under standards-compliance mode and your CSS should work as intended. Whereas before, it was under quriks mode and your CSS and other such code might not have been interpreted as you have intended.thank you FredMV for your comment.
i inserted that line of code into the corrrect place but unfortunatley the problem remains.
any other suggestions as this problem is most unfortunate.
many regards,
EDIT: thanks i have jsut realised i have ventured out of the doom that is quirks mode.No problem David. Now that you've got a good DOCTYPE we can actually get some work done.
All you need is:#navlist {
height: 28px;
margin: 0;
padding: 0;
clear: left;
}fredMV
thank you very much for your most helpful tutoring.
you have solved my problem and i am extremely grateful.
many regards,
David