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!

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

IE6 Jumping Links problem

Status
Not open for further replies.

tinggg

Technical User
May 15, 2004
69
NZ
Hi

The links in my right-hand column jump upwards when I hover over them.

After doing some reading online I understand that this is an IE6 bug but I haven't been able to fix it. I believe I need to change my CSS, can anyone help with where I need to change it and what I need to change it to? Many thanks

@charset "UTF-8";
/* CSS Document */

body {
font: 15px/20px lucida grande, arial, verdana;
color: #000;
}

* {
margin: 0px;
padding: 0px;
}

.clear {
clear: both;
}

.container {
width: 100%;
text-align: center;
}

.container1 {
width: 900px;
text-align: left;
margin: 0px auto;
}

.maincontent {
margin-top: 25px;
}

#header {
background: url(images/header.gif) 0px 0px repeat-x;
height: 140px;
}

#footer {
height: 170px;
text-align: center;
background: url(images/footer.gif) 0px 0px repeat-x;
}

#header .logo {
text-align: right;
padding-top: 10px;
}

/* main Navigation */


#navigation {
width: 700px;
text-align: center;
margin: 1px auto 0px auto;
}

#navigation ul {
list-style: none;
margin: 0px;
}

#navigation ul li {
float: left;
width: 133px;
text-align: center;
padding: 0px 2px;
background: none;
margin: 0px;
}

#navigation ul li a {
background: url(images/othertab.gif) 0px 0px no-repeat;
display: block;
width: 133px;
height: 42px;
line-height: 42px;
margin-top: 11px;
color: #fff;
text-decoration: none;
}

#navigation ul li a#current {
background: url(images/currenttab.gif) 0px 0px no-repeat;
display: block;
width: 133px;
color: #052F41;
height: 53px;
line-height: 53px;
margin-top: 0px;
font-weight: bold;
}

#navigation ul li a:hover {
background: url(images/currenttab.gif) 0px 0px no-repeat;
display: block;
width: 133px;
color: #052F41;
height: 53px;
line-height: 53px;
margin-top: 0px;
}

/* end navigation */


/* footer navigation */
#footer-navigation {
width: 550px;
text-decoration: center;
margin: 10px auto 0px auto;
padding: 20px 0px 0px 0px;
}

#footer-navigation ul {
margin: 0px;
}

#footer-navigation ul li {
float: left;
width: auto;
list-style: none;
background: url(images/spacer.gif) 100% 50% no-repeat;
margin: 0px;
padding: 0px;
}

#footer-navigation ul li.end {
background: none;
}

#footer-navigation ul li a, #footer-navigation ul li a:visited {
color: #fff;
text-decoration: none;
font-family: trebuchet ms;
padding: 0px 20px;
}
#footer-navigation ul li a.current {
color: #07455F;
background: #688EA5;
margin-left: -1px;
padding-left: 21px;
}


#footer-navigation ul li a:hover {
color: #07455F;
background: #688EA5;
margin-left: -1px;
padding-left: 21px;
}
/* basic styles */

p {
margin: 10px 0px 20px 0px;
}

a, a:link {
color: #07455F;
text-decoration:underline;
cursor: pointer;
}

a:visited {
color: #0A5676;
}

a:hover {
background: #07455F;
color: #fff;
text-decoration: none;
}

ul {
list-style: none;
margin-bottom: 20px;
}

ul li {
background: url(images/bullet.gif) 0px 1px no-repeat;
padding-left: 35px;
margin: 0px 0px 6px 10px;
line-height: 22px;
}

ul.nostyle li {
background: none;
padding-left: 0px;
margin: 0px 0px 6px 0px;
line-height: 20px;
}

a.red-email-button, a.red-email-button:visited, a.green-button, a.green-button:visited, a.red-button, a.red-button:visited, .red-button {
display: block;
width: 268px;
height: 50px;
background: url(images/red-button-email.gif) 0px 0px no-repeat;
text-align: center;
margin: 20px auto;
color: #fff;
font-weight: bold;
text-decoration: none;
line-height: 50px;
cursor: pointer;
}

a.red-button, a.red-button:visited, .red-button {
background: url(images/red-button.gif) 0px 0px no-repeat;
border: 0px;
}


a.green-button, a.green-button:visited {
background: url(images/green-button.gif) 0px 0px no-repeat;
}

a.red-email-button:hover {
display: block;
width: 268px;
height: 50px;
background: url(images/red-button-email.gif) 0px 0px no-repeat;
text-align: center;
margin: 20px auto;
color: #fff;
font-weight: bold;
text-decoration: none;
line-height: 50px;
}

a.green-button:hover {
display: block;
width: 268px;
height: 50px;
background: url(images/green-button.gif) 0px 0px no-repeat;
text-align: center;
margin: 20px auto;
color: #fff;
font-weight: bold;
text-decoration: none;
line-height: 50px;
}

ul.ticks li {
list-style: none;
background: url(images/tick.gif) 0px 1px no-repeat;
margin-bottom: 5px;
padding-left: 30px;
line-height: 23px;
font-size: 110%;
}

.link-follow {
padding-left: 27px;
font-weight: bold;
background: url(images/bullet.gif) 0px 0px no-repeat;
}

a img {
border: 0px;
}

.highlight {
background: #D4D8AD;
}

h1, h2, h3, h4, h5 {
font-family: trebuchet ms;
}

h2 {
font-size: 130%;
margin: 15px 0px 10px 0px;
}

.faq h2 {
margin-top: 40px;
}

h1.pageintro {
color: #000;
font-size: 190%;
line-height: 120%;
width: 750px;
text-align: center;
margin: 0px auto 20px auto;
}


.info, .question {
color: #344B54;
font-size: 170%;
background: url(images/info-header.gif) 0px 0px no-repeat;
height: 57px;
line-height: 57px;
padding-left: 70px;
margin: 20px 0px 10px 0px;
}

.question {
background: url(images/question-header.gif) 0px 0px no-repeat;
}


.info-long, .question-long, .email-long {
color: #344B54;
font-size: 170%;
background: url(images/info-header-long.gif) 0px 0px no-repeat;
height: 57px;
line-height: 57px;
padding-left: 70px;
margin: 20px 0px 10px 0px;
}

.question-long {
background: url(images/question-header-long.gif) 0px 0px no-repeat;
}

.email-long {
background: url(images/email-header-long.gif) 0px 0px no-repeat;
}


#footer h2 {
color: #CAD9DF;
font-size: 150%;
padding-top: 10px;
text-align: center;
}

.big {
color: #404040;
font-size: 110%;
}

.top-margin {
margin-top: 30px;
}

/* end basic styles */

/* 2 column pages */
.left-column {
width: 48%;
float: left;
}

.left-column-long {
width: 64%;
float: left;
}

.right-column {
width: 48%;
float: right;
}

.right-column-short {
width: 268px;
float: right;
}

/* copntact us page */
.contact-label {
width: 100px;
float: left;
font-weight: bold;
margin-bottom: 10px;

}
.contact-field {
width: 450px;
margin-bottom: 10px;
float: left;
}

/* apply page */

ul.nostyle h2 {
line-height: 27px;
margin-bottom: 5px;
}
ul.nostyle li.one, ul.nostyle li.two, ul.nostyle li.three, ul.nostyle li.four {
background: url(images/one.gif) 0px 0px no-repeat;
padding-left: 35px;
}

ul.nostyle li.two {
background: url(images/two.gif) 0px 0px no-repeat;
}

ul.nostyle li.three {
background: url(images/three.gif) 0px 0px no-repeat;
}

ul.nostyle li.four {
background: url(images/four.gif) 0px 0px no-repeat;
}

/* input boxes */
.inputbox {
border: 1px solid #ccc;
padding: 5px;
width: 400px;

}
 
Can you give us a link to the page in question and tell us which css relates to the menu in question?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 


Code:
#navigation ul li a {
background: url(images/othertab.gif) 0px 0px no-repeat;
display: block;
width: 133px;
height: 42px;
line-height: 42px;
margin-top: 11px;
color: #fff;
text-decoration: none;
}

#navigation ul li a#current {
background: url(images/currenttab.gif) 0px 0px no-repeat;
display: block;
width: 133px;
color: #052F41;
height: 53px;
line-height: 53px;
margin-top: 0px;
font-weight: bold;
}

#navigation ul li a:hover {
background: url(images/currenttab.gif) 0px 0px no-repeat;
display: block;
width: 133px;
color: #052F41;
[b]height: 53px;
line-height: 53px;[/b]
margin-top: 0px;
}
You are changing the margin on hover. What are you expecting to happen?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Yes the jump is intentional with the main navigation but the problem is occurring with the right-hand nav, here's the html

<div class="right-column-short">


<a class="green-button" href="apply.html">Apply for a licence</a>

<div class="link-follow" style="margin-bottom: 15px;"><a href="about.html" title="About the Licence">Find out more about a licence</a></div>
<div class="link-follow"><a href="consultations.html" title="Consultations and feedback">Give Feedback</a></div>



</div><!-- end right column -->
 
Fixed with:

<div class="right-column-short"><p><a class="green-button" href="apply.html">Apply for a licence</a></p>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top