CSS Hover text jump issue

**krayziepjf** · Oct 27, 2004 11:21

I've seen numerous posts on this and tried implementing several changes but nothing has worked this far. I am toying around with a simple 3 column css layout done by Paul O'B. In it, I am also attempting to do a css controlled menu with each link in the menu having a hover background color change. What happens when you hover over it? The whole menu box shifts to the right.

Hoping to get some insight on this. Code is pasted below. Pretty much everything is from Paul's layout thus far.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Temp page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link href="temp.css" rel="stylesheet" type="text/css" />
   </head>

   <body>
      <div id="container"> 
         <div id="header">
            <h1>Header</h1>
         </div>
         
         <div id="middle"> 
            <div id="left"> 
               <div id='box'>
                  <div class='header'>
                     Menu
                  </div>
                  <div class='link'>
                     <a href='#'>Testing</a>
                  </div>
                  <div class='link'>
                     Testing
                  </div>
                  <div class='link'>
                     Testing
                  </div>                  
               </div>
            </div>

            <div id="right"> 
               <p>Right Content : This is some content : this is some right content</p>
               <p>Right Content : This is some content : this is some right content</p>
               <p>Right Content : This is some content : this is some right content</p>
            </div>

            <p>Middle content :</p>
            <br style="clear:both" />
         </div>

         <div id="footer">
            <h3>Footer | <a href="3colfixedtest_4.htm">Back to Main Demo</a> | Footer</h3>
         </div>
      </div>
   </body>
</html>

HTML Code:

body {
	margin-top:10px;
   margin-left: 180px;
   margin-right: 180px;
	padding:10px;
	background:#CCDDEE;
	color:#000;
}
#container {/* red is background color of right column and image is bg of left column*/
	background-color: #EDEDED;
	border:1px solid #000;
   padding: 12px;
}
#header {
	height:75px;
	border:1px solid #000;
	background:#EDE8CC;
	text-align:center;
}
#left {
	float:left;
	width:32%;/* note this width is 32% and not 20% */
	margin-left:-31.9%;/* must be less than width */
	position:relative;
   padding-top: 10px;
   height: 1%;
}

* html #left {margin-left:-31.9%;ma\rgin-left:-19.9%;/*ie6 still thinks left is 20% for some reason */}

#left p, #right p {padding-left:5px}
#right {
	margin-right:-31.9%;/* must be less than width */
	float:right;
	width:32%;/* note this width is 32% and not 20% */
	position:relative;
}
#middle {
	margin-left:20%;
	margin-right:20%;
}
* html #middle {height:1%;position:relative;}/* combat ie's 3 pixel jog */
#footer {
	clear:both;
	border:1px solid #000;
	height:50px;
	background: #EDE8CC;
	text-align:center;
}
h1,h3,p {margin-top:0}
h3 {margin-bottom:0}

#box { 
   border: 1px solid #000000;
   width: 100px;
}
#box .header { 
   background-color: blue;
   font-family: arial; font-size: 11px; font-weight: bold; color: white; 
}
#box .link {
      background: white;
      font-family: arial; font-size: 11px; font-weight: normal; color: black;
      border-bottom: 1px dotted black;
}
#box a {display:block;}
#box a:hover {background: black;}

**deronsizemore** · Oct 27, 2004 11:29

I'm not an expert like Paul and he'll probaby correct me. I can't paste your code in my browser, but looks to me like the only thing that could cause it is #box a {display:block;}

What happens when this is removed?

**krayziepjf** · Oct 27, 2004 11:30

Removing the display: block; statement does nothing. Well, it does nothing to correct the issue. It still occurs. But it removes the ability to display a new background across the entire block instead of just behind the text of the link.

**deronsizemore** · Oct 27, 2004 12:19

Do you have a link so I can actually see what its doing?

**krayziepjf** · Oct 27, 2004 12:38

No. I've been doing this all on my local pc. Just copy and paste the code (making sure to call the css temp.css) into text files and view them in IE on your local machine.

**deronsizemore** · Oct 27, 2004 12:53

Alright, that's fine. I'll check it out later in my PC, but I'm at work right now so I can't. I'm sure by the time I get to it though Paul will probaby help you out.

**Paul O'B** · Oct 27, 2004 15:31

Hi,

The text jumping is caused by the background colour in the a:hover. Somehow it is making ie remember that its width is derived from its parent and not the body and decides to jump over.

The main bug is that ie doesn't realise that the percentage width is derived from its parent container because its parent containers width is derived by margins. Therefore ie takes the body as its parent. Even the height:1% hack doesn't cure it.

The solution is to nest another container in the middle and apply a 100% width to it and then you can place the left column negatively using the correct offset and not the hacked one.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Temp page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
 margin-top:10px;
   margin-left: 180px;
   margin-right: 180px;
 padding:10px;
 background:#CCDDEE;
 color:#000;
}
#container {/* red is background color of right column and image is bg of left column*/
 background-color: #EDEDED;
 border:1px solid #000;
   padding: 12px;
}
#header {
 height:75px;
 border:1px solid #000;
 background:#EDE8CC;
 text-align:center;
}
#left {
 float:left;
 width:32%;/* note this width is 32% and not 20% */
 margin-left:-31.9%;/* must be less than width */
 position:relative;
   padding-top: 10px;
   height: 1%;
}
* html #left {margin-left:-31.9%;/* this isn't needed now*/} 
#left p, #right p {padding-left:5px}
#right {
 margin-right:-31.9%;/* must be less than width */
 float:right;
 width:32%;/* note this width is 32% and not 20% */
 position:relative;
}
#middle {
 margin-left:20%;
 margin-right:20%;
}
* html #middle {height:1%;position:relative;}/* combat ie's 3 pixel jog */
#footer {
 clear:both;
 border:1px solid #000;
 height:50px;
 background: #EDE8CC;
 text-align:center;
}
h1,h3,p {margin-top:0}
h3 {margin-bottom:0}
#box { 
   border: 1px solid #000000;
   width: 100px;
}
#box .header { 
   background-color: blue;
   font-family: arial; font-size: 11px; font-weight: bold; color: white; 
}
#box .link {
	  background: white;
	  font-family: arial; font-size: 11px; font-weight: normal; color: black;
	  border-bottom: 1px dotted black;
}
#box a {display:block;}
#box a:hover {background: black;}
#inner {width:100%}
</style>
</head>
<body>
<div id="container"> 
  <div id="header"> 
	<h1>Header</h1>
  </div>
  <div id="middle"> 
	<div id="inner"> 
	  <div id="left"> 
		<div id='box'> 
		  <div class='header'> Menu </div>
		  <div class='link'> <a href='#'>Testing</a> </div>
		  <div class='link'> Testing </div>
		  <div class='link'> Testing </div>
		</div>
	  </div>
	  <div id="right"> 
		<p>Right Content : This is some content : this is some right content</p>
		<p>Right Content : This is some content : this is some right content</p>
		<p>Right Content : This is some content : this is some right content</p>
	  </div>
	  <p>Middle content :</p>
	  <br style="clear:both" />
    </div>
  </div>
  <div id="footer"> 
	<h3>Footer | <a href="3colfixedtest_4.htm">Back to Main Demo</a> | Footer</h3>
  </div>
</div>
</body>
</html>

That should cure the jumping and negate the need for a different offset for ie6.

Paul

BTW the height :1% should be hidden from ie mac using the commented backslash hack.

**krayziepjf** · Oct 28, 2004 10:03

That does take care of the issue. Thank you very much for your help Paul!

User Tag List

Thread: CSS Hover text jump issue

Thread Tools

Display

CSS Hover text jump issue

Bookmarks

Bookmarks

Posting Permissions