3 replies [Last post]
jabba_29
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-14
Posts: 2
Points: 0

Sorry for a non desciptive title, but this is quite difficult to explain in a title message, so hopefully this will explain things better.

I have a page that is written in XHTML strict and usses CSS for layout. I have a 2 column layout with main content floated on the left using percentages and the right column is a percentage too.

The problem is that when I mouseover on the links on the right hand side, all the links move between 5 / 10 px to the left. It causes the headers above to move too. Any ideas. This only seems to happen in IE6. Have tested in IE5 -> OK, Firefox -> OK, Opera 6 -> OK and NN7 -> OK. All in winXP or win98 environments.

I have stipped down some of the code as an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!-- META INFO -->
<link rel="stylesheet" type="text/css" media="screen" href="style.css" title="Style" />
<!-- protect other browsers from IE6's quirks -->
<!--[if IE 6]><style type="text/css" title="FreddieStyle">
#navigation {position:relative}</style><![endif]-->
</head>
<body>
<div id="wrapper">
<h1>
<a href="/" title="Home" onfocus="if(this.blur)this.blur()">Home</a>
</h1>
<div class="main">
<p class="skiplink"><a href="#navigation">Jump to navigation</a></p>
<div id="content">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
</p>
<p id="linkup"><small><a href="#content" title="Back to Top [ ALT + T ]" accesskey="t">Back to Top</a></small></p>    
</div>

<div id="navigation">
        <h2>Sections</h2>
        <ul>
         <li><a href="/Main/" title="Main Section [ALT + M]" accesskey="m">Main</a></li>
            <li class="secact"><a href="/Site/" title="Site Details [ALT + D]" accesskey="d">Site Details</a></li>
         <li><a href="/Extras/" title="Extras [ALT + E]" accesskey="e">Extras</a></li>
         <li><a href="/MyNews/" title="My News [ALT + N]" accesskey="n">My News</a></li>
         <li><a href="/MyPics/" title="My Pictures [ALT + P]" accesskey="p">My Pictures</a></li>
            <li class="skiplink"><a href="#content">Skip to content</a></li>
        </ul>
        
        <h2>Page Info</h2>        
    <p>This page should give a general overview of all the sections available.
    See also the ' Tips &amp; Tricks ' page for more information.</p>        
</div> <!-- end sidebar -->

<div class="clear"></div>

</div> <!-- end main -->

<div id="footer">        
        <ul>
         <li><a href="/Main/" title="Main Section [ALT + M]" accesskey="m">Main</a></li>
            <li class="secact"><a href="/Site/" title="Site Details [ALT + D]" accesskey="d">Site Details</a></li>
         <li><a href="/Extras/" title="Extras [ALT + E]" accesskey="e">Extras</a></li>
         <li><a href="/MyNews/" title="My News [ALT + N]" accesskey="n">My News</a></li>
         <li><a href="/MyPics/" title="My Pictures [ALT + P]" accesskey="p">My Pictures</a></li>
        </ul></div>


</div> <!-- end wrapper -->
        
<div class="notes">
<strong>Note:</strong> You are reading this message because you probably do not have a standards-compliant browser.
</div>

</body>
</html>

The relevant CSS is below:
html {
     margin: 0;
     padding: 0;
}
body {
     background-color: orange;
     color: #000;
     margin: 0;
     padding: 0;    /* flush to window edges */
    font-family: "Century Gothic", tahoma, verdana, sans-serif;
}
.main {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: 0;
padding: 0;
color: #000;
background: #fff url(/images/site_images/bg.png) 75% 0 repeat-y;
}
#content {
width: 67%;
float: left;
margin: 1px;
padding: 1% 2%;
}
#navigation {
padding: 1%;
margin-left: 73%;
font-size: 90%;
margin-bottom: -1px;
position: relative;
}
* html #navigation {
height: 1%;        /* prevents IE 3-px shift next to a float */
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
margin: 0;
}
div#navigation ul {
    list-style-type: disc;
    color: orange;
    padding: 0;
    margin-left: 10%;
}
/* SECTIONSMENU LINKS */

#navigation h2 {
    color: #808080;
    margin-left: 1%;
}
#navigation li a {
    color: orange;
    background-color: #fff;
}
#navigation li a:hover {
    color: #c0c0c0;
    background-color: navy;
}
#navigation .secact a {
    font-weight: bold;
}
Sorry, quite a lot of stuff. Maybe it is just a simple mistake somewhere. Bl dy IE6.
You can see a working demo of this at http://frankie.227net.com/Main/
Use the change style link and change to freddie.
Thanks in advance for your help.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 1 day ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Stop text shifting onclick (hyperlink) in IE6

Removing the padding: 1%; from the #navigation gets rid of the problem but I don't know why :?:

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

LethaL
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-13
Posts: 7
Points: 0

Stop text shifting onclick (hyperlink) in IE6

seems to be fixed?

jabba_29
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-14
Posts: 2
Points: 0

That's done it

Stu wrote:
Removing the padding: 1%; from the #navigation gets rid of the problem but I don't know why :?:

Thanks a million. That did seem to work.

I have been puzzling over this for about a week. At first, all the texts moved on mouseover. Then I changed some a stuff from the CSS, then it was just moving on mouseover on links. Anotehr change -> just when you clicked the link.

But that seems to have solved it.

Thanks again Laughing out loud