Simple Problem In IE6?

EDIT: $10 on Moneybookers if you can sort this out!

For some reason, the design for my blog is exactly how I would like it to be in every browser except for IE6.

In IE6 my visited links show up as a different colour, and there is a blue line below the header, which I would not like to be there. I think it may just involve a simple change of CSS, or it may be more generally related to the structure.

Here's how they look in IE7 and IE6, with IE7 being they way I want it, and IE6 in the wrong way...

IE6


IE7


Here is the CSS if you want to take a look. I think the blue line might have appeared after I changed the float in this part from "left" to "default"

img {margin: 0px; padding:0px; float:default;border:0px;}

HTML:

but I need to have it at default so that I can align images within content better. Here is is in full...

body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;margin:0;padding:0;background-color:#333333;background:url('images/bg.gif') repeat-x;background-color:#06212F;}
img {margin: 0px; padding:0px; float:default;border:0px;}
#mainpage {background:url('images/contentbg.gif') repeat-x;background-color:#FFFFFF;width:768px;margin:0 auto;border:1px solid #0D334A;border-top:0px;}
h2 {font-size:16px;line-height:20px;color:#26ADE4;margin:0;padding:0;padding-left:10px;}
h3 {font-size:16px;line-height:20px;color:#26ADE4;margin:0;padding:0;padding-left:10px;}
h4 {font-size:16px;line-height:20px;color:#26ADE4;margin:0;padding:0;padding-left:10px;}
.h2{font-family:Arial, Helvetica, sans-serif;line-height:18px;font-size:12px;color:#312E2E;font-weight:700;}
a:link, a:visited, a:active{color:#990000;text-decoration:none;}
a:hover{text-decoration:underline;}
.input {border:1px solid #4781A8;background:url('images/inputbg.gif');padding-top:3px;vertical-align: middle;font:15px  Tahoma;color:#0B3047;height:21px;width:100px;}
.button {vertical-align: middle;height:19px;width:23px;}
#bg {height:185px;width:100%;}
#header{float:left;height:185px;margin:0 auto;padding:0;}
#headerbg{width:770px;background-color:#C00C08;background:url('images/headerbg.gif');margin-bottom:0px;margin:0 auto;}
#menubg{width:770px;background-color:#C00C08;background:url('images/menubg.gif');margin-bottom:0px;margin:0 auto;}
#menubg2 {height:68px;width:100%;}
#menu{float:left;height:59px;margin:0 auto;padding:0;padding-top:9px;padding-left:55px;}
ul.menu{line-height:59px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.menu li{float:left !important;list-style-type:none;}
ul.menu li a, ul.nav li a:link, ul.nav li a:visited{color:#0B3047;font: 13px Tahoma;line-height:59px;font-weight:bold;float:left;display:block;text-decoration:none;padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
ul.menu li a:hover, ul.nav li a:active{background:url('images/menuhover.gif') repeat-x;color:#FFFFFF;text-decoration:none}
ul.menu li ul{float:left;margin:0;padding:0;}
#main{width:768px;margin:0 auto;padding:0;}
#content{font: 12px  Tahoma;color:#0B3047;float:right;width:590px;margin:0;padding:0;padding-top:22px;padding-bottom:22px;min-height:900px;}
.entry{float:left;width:570px;padding-left:10px;padding-right:10px;}
.entry h2, h3{font: 14px Tahoma;color:#0B3047;font-weight:bold;margin:0;padding:0;}
.entry h2 a {text-decoration:none;color:#0B3047;margin:0;font-weight:bold;}
.entry h2 a:hover{text-decoration:none;}
.entry h3 a {text-decoration:none;color:#990000;margin:0;font-weight:normal;}
.entry h3 a:hover{text-decoration:none;}
.entry h4 {font: 10px Verdana;color:#0B3047;margin:0;padding:0;}
.entry h4 a {text-decoration:none;color:#0B3047;margin:0;}
#sidebar{float:left;width:168px;margin:0;padding:0;font: 12px Tahoma;color:#0D4E6F;margin-left:10px;padding-top:22px;}
.rsidebar{font: 12px  Tahoma;color:#0D4E6F;float:right;width:148px;padding-left:10px;padding-right:10px;background:url('images/sidebarbg.gif') repeat-x;background-color:#FFFFFF;min-height:650px;}
.rsidebar h2{font: 14px Tahoma;color:#093B55;margin-bottom:0px;padding:0;margin-left:0px;font-weight:bold;}
.rsidebar a {font-weight:normal;color:#0D4E6F;}
.rsidebar ul{list-style-type:none;margin:0;padding:0;}
.rsidebar ul li{list-style-type:none;margin:0 0 5px;padding:0;padding-left:5px;}
.rsidebar ul li ul{list-style-type:square;margin:0;padding:0 0px;margin-bottom:15px;}
.rsidebar ul li ul li{list-style-type:none;border:0px none;margin:0;padding-left:0px; padding-right:0; padding-top:0; padding-bottom:0px}
.navigation p {color:#303030;margin:0px;padding-left:10px;}
.navigation a:hover {text-decoration:none;}
.alignright{float:right;margin-top:10px;}
.alignleft{float:left;margin-top:10px;}
.postmetadata{text-align:right;font: 11px  Tahoma;color:#0B3047;font-weight:bold;margin:0;padding:0px;margin-bottom:20px;}
.postmetadata a {color:#0B3047}
.boxcomments{width:590px;}
#commentform label{display:block;margin:0;}
#commentform input{width:170px;margin:0 5px 10px 0;padding:1px;}
#commentform textarea{width:400px;margin:0 0 10px;padding:0;}
#commentform #submit{margin:0 0 0px;}
#commentform p{margin:0px 0;}
ol.commentlist{margin:0 0 1px;padding:0;}
ol.commentlist li{display:block;list-style:none;margin:0;padding:0px 0px 1px;}
ol.commentlist li :hover{background:none;}
ol.commentlist li.commenthead{display:block;list-style:none;margin:0;padding:0px;}
ol.commentlist li.commenthead h2{margin:0;}
ol.tblist{border-top:1px solid #fff;list-style:none;margin:0 0 1px;padding:15px;}
ol.tblist li{display:block;background:url('images/c.gif') no-repeat 0 2px;padding-left:15px;list-style-type:none; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px}
#footer{color:#FFFFFF;clear:both;height:0px;margin:0;padding:0;}
#footerbg {height:189px;width:100%;margin:0 auto;background:url('images/footerbg.gif');}
#footer2{width:770px;height:189px;margin:0 auto;padding:0;background:url('images/footer.gif');}
#footer2 p {font: 11px Tahoma;color:#FFFFFF;font-weight:bold;margin:0;padding:0;padding-top:90px;text-align:center;}
#footer2 a {color:#FFFFFF;}
#footerbg2{height:189px;width:100%;background-color:#C00C08;margin-bottom:0px;margin:0 auto;}

HTML:

Thanks in advance for any help, I seriously don;t have much of an idea about what to do.

 

Tough to say without seeing your HTML as well, but assuming what is in your header is an image... try this "#header img {display: block;}" to rid of the line in IE6.

 

Your visited link color is being set here

a:link, a:visited, a:active{color:#990000;text-decoration:none;}

You are declaring the visited link to be that crimson color. You are probably making another declaration to override that color later in your CSS but IE 6 isn't picking up on that. IE 6 is iffy at best for support standards compliant CSS as currently utilized and published.

 

Thanks for the tips, I threw that code into the CSS but it doesn't seem to have made a difference to the blue line. Unless the browser checker I am using isn't updating.

Taking out the a:visited, part has an effect on the rest of my links, so I'm not sure what the solution would be.

This is pretty frustarting, so many people are still using IE6.

$10 on Moneybookers to anyone that can help me sort this problem out!

 

Thanks, but it doesn't seem to work. When I replace that code it just makes the whole top menu turn red.

Any other ideas?

 

Sorry but I think you miss what I mean, it's this strange line that I want sorted out...

 

Sorry about that, I did try but there was a bit of a misunderstanding. I thought you meant that I should have added the norepeat and took the background-color out. Ive removed both now and just about to check. Hopefully it works, and I will send you $5 over if you like.

Any ideas about the visited text link color changing in IE6? Any solutions?

$5 up for grabs if you can sort it.

 

Nope, it doesn't seemed to have changed sorry. I have implemented what you suggested.

Anyone have any ideas? The $10 offer is still there.

 

Inersha, is that header image an actual IMG element? If so, set the vertical-align: property to bottom; - that should remove the line you're seeing in IE 6 (IE has an issue with images and baselines).

Anyway, float: default; is not valid. Floats can only accept left, right and none;. And as images are inline elements anyway, I strongly suggest setting the vertical-align: property to bottom; as I already recommended.

Furthermore, you don't need all those margin: 0; padding: 0; declarations either. Just adding * {margin: 0; padding: 0; } to the very top of your stylesheet will cure that. Of course, you will have to reset the margins and padding on those elements that you WANT to have padding in the first place (this may not work with some form controls).

If the above doesn't work, then show me what your complete page HTML looks like and I'll tell you EXACTLY how to clean it up.

 

Inersha,

Did you get your IE6 problems fixed? I just checked your site in IE6 on my VPC and did not experience either issue that you initially discussed.