Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

why my buttom move from right to left? 1

Status
Not open for further replies.
xbl12

xbl12

Programmer
Dec 12, 2006
66
Hi;
Why my buttom move from right to left after i click on the button? How i can stop it to do that? Thanks

my code as following;

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">

<title>Welcome to you</title>

<style type="text/css">
html,body{
  padding: 0;
  margin:0;
}
#container {
   position: relative;
   width: 796px; /* width + border for IE 5.x */
   w\idth: 790px; /* real width */
   height:310px;
   border: 0px;
   padding: 0;
   margin-top: 10px;
   margin-bottom:auto;
   margin-left: auto;
   margin-right: auto;
   background-color:#f0f0ec;
 }



#wrapper{
    position: relative;
    left: 10px;
    top: 15px;
}

table{
     border:1px solid ##90bade;
     padding:0;
     width: 350px;
     height:200px;
     float: left;
     background-color:#FFFFFF;
     position: relative;
     margin-left: 20px;
     marging-right:auto;
     marging-top:auto;
     marging-bottom:auto;
  
}



#button {
	width: 12em;
	border-right: 1px solid #000;
	padding: 0 0 1em 0;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #BFBEBA;
	color: #333;
	float: left;
	position: relative;
        margin-left: 10px;
        marging-right:20px;
        marging-top:10px;
        marging-bottom:auto;

	}
#button ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}
		
#button li {
	border-bottom: 1px solid #C5C9CB;
	margin: 0;
	padding:0;
	}
#button li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #666666;
	border-right: 10px solid #CCCCCC;
	background-color: #999999;
	color: #fff;
	text-decoration: none;
	width: 100%;
	text-align:center;
	}

html>body #button li a {
	width: auto;
	}

#button li a:hover {
        border-left: 0px solid #1c64d1;
	border-right: 0px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	
	}



</style>
</head>
<body>
<div id="container">

<div id="wrapper">

<div id="button">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Travel</a></li>
	<li><a href="#">About Us service</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Booking</a></li>
	<li><a href="#">Education</a></li>
	<li><a href="#">Testing</a></li>
	<li><a href="#">Testing</a></li>
</ul>
</div>

<table>
 <tr> 
    <td> test</td>
 </tr>
</table>

</div>


</div>
</body>
</html>
 
Sort by date Sort by votes
Try changing your hover CSS to this:

Code: 
#button li a:hover {
   border-left-color: #2586D7;
   border-right-color: #2586D7;
   background-color: #2586D7;
   color: #FFFFFF;
}

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Sorry, it still does not stop the moving
 
Upvote 0 Downvote
The hover phenomena is not addressing the element at hand, but rather an issue from a previous point in your code. This previous point is the #wrapper element. The issue is that you're using a very unorthodox way of achieving some simple margins/paddings on that element. Positioning relative elements causes it to be displaced. space where it was originally placed is kept, but the element itself is shifted. IE is getting confused by many things, from whether it should expand the parent container to fit the displaced relatively positioned element (the element is still 100% in width, which means that it is no longer contained within its parent element, but is rather falling out of it). Furthermore it is confused whether it should render where the element's place is, or where the actual element is. On first render, IE places it inside the element. Later, it changes its mind and a hover effect is a perfect opportunity to reload the positions. After a reload, IE re-positions the element where it thinks it fits better.

If you remove the positioning and top/left values from #wrapper and replace them with padding (padding-top and padding-left), your page will look the same and there will be no more shifting.

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

Thank you very much, you are very helpfull
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
633
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
660
pmonett
pmonett
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
233
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top