SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    What's Causing The Links Menu To Jump In IE6?

    Using the HTML/CSS as shown below, I find that the left navigation links move up slightly when the mouse is passed DOWN over the links, then move back down when the mouse is passed UP over the links. (In IE6; IE7 and FF2 are fine). Any suggestions on how to fix this?

    Note: the assignation of class nav or navhere is handled by some ASP code. Here is the rendered HTML source ...

    Code HTML4Strict:
    <-- IE quirks rendering mode trigger -->
    <!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>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1"  />
    <title>My Title</title>
    <style type="text/css" media="screen">	@import "inc/main.css"; </style>
     
    <!--[if IE]>
    <style type="text/css" media="screen">	@import "inc/ie.css"; </style>
    <![endif]-->
    </head>
    <body>
    <div id="header"><br />&nbsp;&nbsp;<img src="images/logo.jpg" width="259" height="36" alt="Logo" /></div>
    <div class="thetable">
    		 <div class="tablerow">
     
    		 			<div class="tablecell one">
    		 			<h2>My<br />Group<br />Heading</h2>
    		 			<h3>Group Subheading</h3>
     
    <a class="navhere" href="default.asp" alt="Home" title="Home">Home</a>
     
    <a class="nav" href="info.asp" alt="Link 1" title="Link 1">Link 1</a>
     
    <a class="nav" href="team.asp" alt="The Controls Team" title="The Controls Team">The Controls Team</a>
     
    <a class="nav" href="links.asp" alt="Useful Links" title="Useful Links">Useful Links</a>
     
    <p>&nbsp;</p>
    <p align="center"><img src="images/an_image.jpg" width="104" height="114" alt="C300" title="C300" /></p>
    		 			</div>
    					<div class="tablecell two">
    <p>Welcome to the Blah Blah website. Nothing much to see at the moment.</p>
    <p>A list of colour options for web pages can be found on the <a href="http://msdn2.microsoft.com/en-us/library/ms531197.aspx">Microsoft MSDN</a> website.</p>
     
    <p>An overview diagram of the system ...</p>
    <p align="center"><img src="images/another_image.gif" width="634" height="480" alt="Overview" title="Overview" /></p>
    					</div>
    					<div class="tablecell three">
    <p>Additional info here.</p>
    					</div>
    		</div><!-- tablerow -->
    </div><!-- thetable -->
    <div id="footer"><p>&copy; 2007 My Group. Page authored by <a href="mailto:my.name@company.com?Subject=Website">Ian Anderson</a>.</p></div>
     
    </body>
    </html>
    The CSS files ...

    Code CSS:
    /*main.css*/
    html, body	{height: 99%; width: 100%; margin: 0; padding: 0; border: 0;}
     
    .thetable	{
    	position: relative;
    	display: table;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	clear: both;
    	border-spacing: 0; /* required by Opera 6 */
    }
     
     /* hide this from opera6 */
    head:first-child+body div.thetable {height: 99%;}
     
    .tablerow		{display: table-row;}
     
    .tablecell	{
    	display: table-cell;
    	border: 0;
    	padding: 0;
    	margin: 0;
    	padding-top: 40px;
    	padding-bottom: 50px;
    	vertical-align: top;
    	min-height: 99%; /* opera6 needs min-height but moz/IE needs height */
    }
     
     /* hide this from opera6 */
    head:first-child+body div.tablecell {height: 99%;}
    /* added for mozilla which worked for others too, but op6 still needed min-height so hide this rule */
     
    .one	{
    	width: 200px;
    	background: black;
    	color: white;
    	position: relative;
    	border-right: 1px solid black;
    	z-index: 5;
    }
    .two	{
    	width: auto;
    	background: white;
    	position: relative;
    }
    .three	{
    	width: 200px;
    	background: navy;
    	color: white;
    	position: relative;
    	border-left: 1px solid navy;
    }
     
    #header	{
    	position: absolute;
    	top: 0; left: 0;
    	height: 55px;
    	background: #FFFFFF;
    	color: #fff;
    	width: 100%;
    	z-index: 10;
    	border-bottom: 1px solid white;
    }
     
    #footer	{
    	clear: both;
    	position: relative;
    	height: 40px;
    	background: white;
    	color: black;
    	font-size: 0.8em;
    	margin-top: -40px;
    	margin-bottom: 40px; /* required for Opera 6 to show background color but others don't like it so hide the value of 0 from it */
    	z-index: 15;
    }
     
     /* hide this from opera6 */
    head:first-child+body div#footer {margin-bottom: 0;}
     
     
    /* some general formatting styles */
    body {
    	font-size: 1em;
    	font-family: arial, verdana, tahoma, sans-serif;
    }
     
    A {
    	font-size: 1em;
    }
    A:link {
    	color: #0033FF;
    	text-decoration: none;
    	border-bottom: 1px dashed;
    }
    A:visited {
    	color: #993333;
    	text-decoration: none;
    	border-bottom: 1px dashed;
    }
    A:active {
    	font-color: #FF3300;
    	text-decoration: none;
    	border-bottom: 1px dashed;
    }
    A:hover {
    	color: #FF3300;
    	text-decoration: none;
    	border-bottom: 1px solid;
    }
     
    p	{
    	padding: 0.5em 1em 0 1em;
    	margin: 0;
    }
     
    ul	{
    	padding-right: 0.5em;
    }
     
    /* removing margins from headings corrects an Opera 6 display error */
    h1, h2, h3	{font-family: georgia; padding: 0.5em 1em; margin: 0;}
    h1	{font-size: 1.2em;}
    h2  {font-size: 1.1em;}
    h3	{font-size: 1em;}
     
    .nav {
    	font-size: 0.9em;
    	margin: 0 0 0.25em 1em;
    	padding: 0 0 0 2px;
    }
    A.nav {
    	display: block;
    	width: 160px;
    }
    A.nav:link {
    	color: white;
    	background-color: black;
    	text-decoration: none;
    	border: 0;
    }
    A.nav:visited {
    	color: white;
    	background-color: black;
    	text-decoration: none;
    	border: 0;
    }
    A.nav:active {
    	color: black;
    	background-color: white;
    	text-decoration: none;
    	border: 0;
    }
    A.nav:hover {
    	color: black;
    	background-color: white;
    	text-decoration: none;
    	border: 0;
    }
     
    .navhere {
    	font-size: 0.9em;
    	margin: 0 0 0.25em 1em;
    	padding: 0 0 0 2px;
    }
    A.navhere {
    	display: block;
    	width: 160px;
    }
    A.navhere:link {
    	color: black;
    	background-color: white;
    	text-decoration: none;
    	border: 0;
    }
    A.navhere:visited {
    	color: black;
    	background-color: white;
    	text-decoration: none;
    	border: 0;
    }
    A.navhere:active {
    	color: white;
    	background-color: black;
    	text-decoration: none;
    	border: 0;
    }
    A.navhere:hover {
    	color: white;
    	background-color: black;
    	text-decoration: none;
    	border: 0;
    }
     
    .box {
    	width: auto;
    	margin: 0.5em 1em 0 1em;
    	padding: 0.25em;
    	border: 1px solid RoyalBlue;
    	background-color: LightGoldenrodYellow;
    }
     
    .subbox {
    	font-size: 0.8em;
    	color: navy;
    }
     
    /*ie.css*/
    .thetable	 {height: 98%;} /* required  so floated tablecells take the height*/
    .tablecell	{float: left;} /* to overcome display: table-cell; */
    .one, .two, .three	{height: 98%;} /* to overcome child selector */
    .two	{
    			width: 100%;
    			padding-right: 200px;
    			padding-left: 200px;
    			margin-left: -200px;
    			}
    .three	 {margin-left: -200px;}
    Ian Anderson
    www.siteguru.co.uk

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Remove the whitespace from between the anchors.

    Code:
    <a class="navhere" href="default.asp" alt="Home" title="Home">Home</a><a class="nav" href="info.asp" alt="Link 1" title="Link 1">Link 1</a><a class="nav" href="team.asp" alt="The Controls Team" title="The Controls Team">The Controls Team</a><a class="nav" href="links.asp" alt="Useful Links" title="Useful Links">Useful Links</a>
    You should never really have adjacent anchors without something to separate them as screens readers will read that list as one line without stopping.

    You should use a list for menus like that because it is the most semantic element to use and adds structure to your page. As a rule of thumb you should never leave inline hanging around anyway unless they are wrapped in a block level parent.

  3. #3
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That worked fine, thanks.

    I'll bear in mind the LI method and think about adopting that.

    Thanks again.
    Ian Anderson
    www.siteguru.co.uk

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if you don't mind me asking, why in the name of all that is Holy are you triggering Quirks mode in IE 6 anyway?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    why in the name of all that is Holy are you triggering Quirks mode in IE 6 anyway?
    Yes as Dan has pointed out quirks mode should be avoided at all times

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That was code I got as part of template when searching for the Holy Grail of CSS. Can't remember though where it came from.

    As it stands, I might just start from scratch and redo the layout.
    Ian Anderson
    www.siteguru.co.uk


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
  •