By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,394 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,394 IT Pros & Developers. It's quick & easy.

IE6 artifacts

P: n/a
I created a navigation bar which is exhibiting rather odd behavior after
using CSS styles.

The code, including the internal style sheet, is below. (The links won't
work for you--what I am concerned about is the styling.)
When you look at the page in IE6, IE6 has inserted dark grey horizontal
bars between all the list items, except in 3 cases:
between the 1st and 2nd items; between 2nd and 3rd list items; between
the 4th and 5th items.

Netscape does not insert any such horizontal grey bars.

As you can see from the code, these horizontal grey bars are an artifact
of IE rendering. The bars are not in the code. I would appreciate any ideas
as to what could be causing this IE6 behavior and how it can be stopped or
at least made uniform, so that the grey bars are inserted between all the
list items.

Thanks in advance, CMA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>sidebar2</title>
<style type="text/css">
<!--
#navlist
{padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;}
#navlist li
{list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;}
#navlist li a
{display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{border-color: #FE3;
color: #FFF;
background: #332;}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="Earlyall.htm" title="early clothing">EARLY </a></li>
<li><a href="victall.htm" title="Victorian clothing">VICTORIAN </a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian
clothing">EDWARDIAN</a></li>
<li><a href="20sall.htm" title="1920's clothing">1920'S </a></li>
<li><a href="30sall.htm" title="1930's-1950's
clothing">1930'S-1950'S</a></li>
<li><a href="Designer Vintage Clothing.htm" title="designer
clothing">DESIGNER</a></li>
<li><a href="Jewelry.htm" title="jewelry">JEWELRY</a></li>
<li><a href="AntiqueTextiles.htm" title="textiles">TEXTILES</a></li>
<li><a href="shawlall.htm" title="shawls">SHAWLS</a></li>
<li><a href="treasure hunt.htm" title="treasure hunt">TREASURE
HUNT</a></li>
<li><a href="articlesall.htm" title="Articles">ARTICLES</a></li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
"CMAR" <cm***@yahoo.com> wrote:
I created a navigation bar which is exhibiting rather odd behavior after
using CSS styles.

The code, including the internal style sheet, is below. (The links won't
work for you--what I am concerned about is the styling.)
When you look at the page in IE6, IE6 has inserted dark grey horizontal
bars between all the list items, except in 3 cases:
between the 1st and 2nd items; between 2nd and 3rd list items; between
the 4th and 5th items.

Netscape does not insert any such horizontal grey bars.

As you can see from the code, these horizontal grey bars are an artifact
of IE rendering. The bars are not in the code. I would appreciate any ideas
as to what could be causing this IE6 behavior and how it can be stopped or
at least made uniform, so that the grey bars are inserted between all the
list items.

Thanks in advance, CMA
Strangely, the problem occurs after those items where you *don't* have
a trailing space at the end of the text inside the link. If you insert
a trailing space after each item that doesn't already have one, all
the gray bars vanish. I don't know why.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>sidebar2</title>
<style type="text/css">
<!--
#navlist
{padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;}
#navlist li
{list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;}
#navlist li a
{display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{border-color: #FE3;
color: #FFF;
background: #332;}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="Earlyall.htm" title="early clothing">EARLY </a></li>
<li><a href="victall.htm" title="Victorian clothing">VICTORIAN </a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian
clothing">EDWARDIAN</a></li>
<li><a href="20sall.htm" title="1920's clothing">1920'S </a></li>
<li><a href="30sall.htm" title="1930's-1950's
clothing">1930'S-1950'S</a></li>
<li><a href="Designer Vintage Clothing.htm" title="designer
clothing">DESIGNER</a></li>
<li><a href="Jewelry.htm" title="jewelry">JEWELRY</a></li>
<li><a href="AntiqueTextiles.htm" title="textiles">TEXTILES</a></li>
<li><a href="shawlall.htm" title="shawls">SHAWLS</a></li>
<li><a href="treasure hunt.htm" title="treasure hunt">TREASURE
HUNT</a></li>
<li><a href="articlesall.htm" title="Articles">ARTICLES</a></li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #2

P: n/a
"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:nl********************************@4ax.com...
"CMAR" <cm***@yahoo.com> wrote:
I created a navigation bar which is exhibiting rather odd behavior after
using CSS styles.

The code, including the internal style sheet, is below. (The links won't
work for you--what I am concerned about is the styling.)
When you look at the page in IE6, IE6 has inserted dark grey horizontal
bars between all the list items, except in 3 cases:
between the 1st and 2nd items; between 2nd and 3rd list items; between
the 4th and 5th items.

Netscape does not insert any such horizontal grey bars.

As you can see from the code, these horizontal grey bars are an artifactof IE rendering. The bars are not in the code. I would appreciate any ideasas to what could be causing this IE6 behavior and how it can be stopped orat least made uniform, so that the grey bars are inserted between all the
list items.

Thanks in advance, CMA


Strangely, the problem occurs after those items where you *don't* have
a trailing space at the end of the text inside the link. If you insert
a trailing space after each item that doesn't already have one, all
the gray bars vanish. I don't know why.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>sidebar2</title>
<style type="text/css">
<!--
#navlist
{padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;}
#navlist li
{list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;}
#navlist li a
{display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{border-color: #FE3;
color: #FFF;
background: #332;}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="Earlyall.htm" title="early clothing">EARLY </a></li>
<li><a href="victall.htm" title="Victorian clothing">VICTORIAN </a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian
clothing">EDWARDIAN</a></li>
<li><a href="20sall.htm" title="1920's clothing">1920'S </a></li>
<li><a href="30sall.htm" title="1930's-1950's
clothing">1930'S-1950'S</a></li>
<li><a href="Designer Vintage Clothing.htm" title="designer
clothing">DESIGNER</a></li>
<li><a href="Jewelry.htm" title="jewelry">JEWELRY</a></li>
<li><a href="AntiqueTextiles.htm" title="textiles">TEXTILES</a></li>
<li><a href="shawlall.htm" title="shawls">SHAWLS</a></li>
<li><a href="treasure hunt.htm" title="treasure hunt">TREASURE
HUNT</a></li>
<li><a href="articlesall.htm" title="Articles">ARTICLES</a></li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.


Nice work Harlan. Problem solved, thanks to you!
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.