IE Changes layout on Hover

Discussion in 'CSS' started by Borniet, May 20, 2006.

  1. #1
    IE changes the layout of my site frmo incorrect to correct when the :hover function of CSS is active. After that the site remains correct.
    Is this a bug of MS, or is it a problem in my CSS?
    the page is http://www.homeparties.no
    This is the part of the CSS that seems to be the problem (showing the links in the blocks).

    div#links {
    	position: relative; 
    	float: left; 
    	/*width: 800px;*/ 
    	width: 90%;
    	height: 1000px;
    	font: 16px Verdana, sans-serif;
        	border-width: 5px;
        	border-style: solid;
        	border-color: #DDDDDD;
    	background: #468 url(./imgs/bg11.png) 0 0;
        	margin-left: 0.5%;
        	margin-right: -2%;
    }
    div#links a {
    	display: block; 
    	text-align: center; 
    	font: bold 1em sans-serif;
       	padding: 5px 10px; 
    	margin: 0 0 1px; 
    	border-width: 0; 
       	text-decoration: none; 
    	color: #FFC; 
    	background: #DDD;
       	border: 5px solid #9accff;
       	position: relative;
       	float: left;}
    div#links a:hover {color: #411; background: #9accff;
       border-color: #DDD;}
    Code (markup):

     
    Borniet, May 20, 2006 IP
  2. Tim_Myth

    Tim_Myth Peon

    Messages:
    741
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Change this:
    	/*width: 800px;*/ 
    	width: 90%;
    Code (markup):
    to this:
    	width: 800px; 
    	/*width: 90%;*/
    Code (markup):
    Then fix the percentages in:
    /*
    div#linkplace
    {
    	margin-left: 40%; 
    	margin-right: 40%;
    	margin-top: 20%; 
    	margin-bottom: 20%;
    }*/
    Code (markup):
    I've commented that whole bit out for the moment, and the layout is fine when I do that.

    I'd also recommend not linking 4 stylesheets to the page. That gets really confusing, really fast. Try consolidating them into one stylesheet or leave the ones that don't pertain to this page out (preferably the first). 4 stylesheets means you'll have to pay very close attention to precedence.
     
    Tim_Myth, May 20, 2006 IP