IE6 positioning

[Jpln]

Has anyone got IE6 that can tell me why my sidenav text appears pushed over to the right when the page loads. If I role the mouse over the text, it then jumps to the left where it is supposed to be.

I tried position: relative, but this made no difference.

The site is

http://www.towcestermedicalcentre.co.uk

Currently, I only have, Home, The Practice, How to, Services, Healthy Living and Links pages live and the IE6 problem happens on all. Firefox, Safari, Netscape, IE7 show the menus correctly.

Any suggestions please?

 

[audiopro]

Nice looking site - I feel better already.
It does as you say - you are not loosing it.
Do you have 'li' set in your style sheet?
It might be worth issuing a 'text-align: left;' as a belt and braces approach.


Keith

http://www.studiosoft.co.uk

 

[Jpln]

Thanks for your response Keith. Glad you like the site, thanks. I am learning CSS as I go - I tried text-align: left; under the li and li a sections but unfortuantely in IE6 the text still jumps.

Do you know of a hack?



/* side navigation */
#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; }

.box {
padding: 2px 15px;
border: 1px solid #ccc;
margin: 0 0 5px 0;
}
.note {
padding: 5px 15px 5px 100px;
border: 1px solid #CFCB66;
margin: 0 0 5px 0;
background: #FFFFAD url("../images/package.gif") no-repeat;
color: #585616;
}

 

[Vragabond]

The truth is that there is usually no clear or normal reason why IE6 makes things jump. It could be anything from a margin, to no margin or a border. It is often the inclusion or omission (yes, both can cause or solve the problem) of position: relative; on one of the affected elements (could also be a parent or a child element of the one doing the jumping). Sometimes it could be caused by the percentage margins, width, paddings that you use on any of the elements that interact with the jumping one.

However, in your case it doesn't seem to be one of these two most common causes. That is why I think the only way to find out what it is is by removing styles bit by bit until you see which one causes the jump. I would say it could be something to do with border or margin on the ul or li or any combination of the two.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Jpln]

Thanks for the comprehensive reply Vragbond. Excellent idea; I'll remove the styles one by one and see if the problem reveals itself.

I will post the solution - if I find it.

Thanks once more.
Amanda