DOCTYPE

[Jpln]

Hi,

I uploaded my revised home page and checked it in safari, opera, firefox, netscape and IE6. In IE6 the side navigation labels are over too far on the right until I hit the F5 key. All other browsers are fine.

I was told this was to do with my DOCTYPE and when trying to validate at

http://validator.w3.org/,

I get 6 errors relating to the DOCTYPE.

Where am I going wrong please?

Amanda

 

[Vragabond]

You should correct the validation errors (like the validator says, it is mostly because your form elements need to be enclosed in another block level element) but that is not why your page is showing up wrong in IE6.

IE6 is full of strange quirks that make it impossible to maintain. Your problem (since it goes away with reloading) could probably be solved by putting position: relative on some of your elements around the problem (usually that helps IE6) or getting rid of any percentage widths. I don't have IE6 here right now so I unfortunately cannot check.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Jpln]

Thanks for the advice Vragabond.

With regard to the POSITION: RELATIVE, I have tried all combinations placing it in my sidenav ul, li and li a elements but the menu still jumps to the right. Should I be trying it anywhere else?


Here is my SIDENAV CSS:
#sidenav {
float: left;
width: 210px;
font: normal 12px "Trebuchet MS", Helvetica, Sans-Serif;
}
#sidenav h2 {
color: #5A5A43;
font-size: 1.1em;
line-height: 30px;
margin: 0;
padding-left: 2px;
}

#sidenav ul {
padding: 0;
}
#sidenav li {border-bottom: 1px solid #EAEADA;}
#sidenav li a {
font-weight: bold;
font-size: 1em;
color: #546F92;
background: #C2CEDE url("../images/arrow.gif") no-repeat center left; /*main colour*/
display: block;
padding: 8px 0 8px 12%;
text-decoration: none;
}
#sidenav li a:hover { background: #9EB1C9 url (../img/arrow.gif) no-repeat center left; color: #fff; }

Thank you again for your help.
Amanda