SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Hover text jump issue

    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;}

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link so I can actually see what its doing?

  5. #5
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

  8. #8
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does take care of the issue. Thank you very much for your help Paul!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •