Hyperlink rollover causing layout to jump

[mjurmann]

I have the strangest problem going on:

 

When a hyperlink is rolled over, the div below is pushed down about 20 pixels. I can't figure out why this would be happening. I've searched CSS bug sites all over the Internet but unfortunately have found nothing. What am I missing here? I know that I've had this problem before, however, I can't remember how i fixed it.

 

Thank you...

[dropfaith]

you should post your css .

 

off hand all i can think of is mess with the  hover if theres any css there that isnt on your normal links then thats prob your issue

[mjurmann]

Here is my CSS: The problem occurs when a link is rolled over in EITHER the left column (#secondaryContentLeftColumn) or the right column (#secondaryContentRightColumn); all of the information below is contained in both and is labeled accordingly.

 

/* Secondary Content */

#secondaryContent {
float: left;
}

#secondaryContentContainer {
float: left;
padding-top: 11px;
padding-bottom: 11px;
background: #FFFFFF;
width: 100%;
}

#secondaryContentWrapper {
padding-top: 11px;
padding-bottom: 11px;
float: left;
display: inline;
background: #FFFFFF;
margin-left: 11px;
margin-right: 11px;
padding-bottom: 174px;
}

#secondaryContentLeftColumn {
width: 719px;
float: left;
}

#secondaryContentLeftColumn h1 {
float: left;
font-size: 1.25em;
text-transform: uppercase;
color: #FFFFFF;
font-family: Verdana, Arial, sans-serif;
padding-top: 9px;
height: 19px;
width: 703px;
display: inline;
text-align: left;
padding-left: 8px;
margin-left: 8px;
}

#secondaryContentLeftColumnContent {
padding-left: 20px;
float: left;
display: inline;
padding-top: 14px;
padding-bottom: 60px;
font-size: .75em;
color: #414141;
line-height: 150%;
width: 687px;
position: relative;
clear: both;
}

#secondaryContentLeftColumnContent p {
margin-bottom: 12px;
position: relative; 
float: none; 
}

#secondaryContentLeftColumn #breadcrumbs {
height: 19px;
width: 696px;
float: left;
font-size: .6em;
font-family: Verdana, Arial, sans-serif;
color: #414141;
padding-left: 15px;
padding-top: 7px;
line-height: 100%;
}

#secondaryContentLeftColumn #breadcrumbs a {
text-decoration: underline;
color: #414141;
line-height: 110%;
}

#secondaryContentLeftColumn #breadcrumbs a:hover {
text-decoration: none;
color: #414141;
}

#secondaryContentLeftColumnContent img {
float: right; 
display: inline;
margin: 7px 10px 20px 20px;
}

#secondaryContentLeftColumnContent ul#pageSummaries, #secondaryContentLeftColumnContent ul.pageSummaries {
width: 100%;
float: left;
display: block;
padding-left: 0;
font-size: 1em;
}

#secondaryContentLeftColumnContent ul.pageSummaries {
margin-bottom: 20px;
}

#secondaryContentLeftColumnContent ul#pageSummaries li, #secondaryContentLeftColumnContent ul.pageSummaries li {
width: 299px;
height: 172px;
float: left;
list-style: none;
padding: 10px;
margin: 10px;
display: inline;
}

#secondaryContentLeftColumnContent ul#pageSummaries li p.pageReadMore, #secondaryContentLeftColumnContent ul.pageSummaries li p.pageReadMore {
text-align: left;
}

#secondaryContentLeftColumnContent ul#pageSummaries li p, #secondaryContentLeftColumnContent ul.pageSummaries li p {
margin-bottom: 0;
margin-top: 5px;
}

#secondaryContentLeftColumnContent ul#pageSummaries li img, #secondaryContentLeftColumnContent ul.pageSummaries li img {
float: right;
margin: 0 0 10px 10px;
display: inline;
padding: 1px;
}

#secondaryContentRightColumn {
float: left;
width: 225px;
}

#secondaryContentRightColumnSubNavigationHolder {
float: left;
width: 225px;
margin-bottom: 20px;
}

#secondaryContentRightColumnSubNavigationHolder h2 {
padding-top: 42px;
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
padding-left: 10px;
color: #FFFFFF;
text-transform: uppercase;
}

#secondaryContentRightColumnSubNavigationHolder ul {
float: left;
margin-top: 10px;
display: inline;
margin-left: 15px;
width: 189px;
background: #FFFFFF;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 3px;
clear: both;
}

#secondaryContentRightColumnSubNavigationHolder ul ul {
padding: 0;
margin: 0;
float: left;
}

#secondaryContentRightColumnSubNavigationHolder ul li {
width: 189px;
float: left;
}

#secondaryContentRightColumnSubNavigationHolder ul li a {
color: #ffffff;
font-size: .7em;
text-decoration: none;
display: block;
margin-bottom: 2px;
margin-top: 3px;
padding: 3px;
float: left;
padding-left: 5px;
width: 179px;
padding-right: 5px;
font-family: Verdana, Arial, sans-serif;
}

#secondaryContentRightColumnSubNavigationHolder ul li ul li a {
width: 174px;
}

#secondaryContentRightColumnSubNavigation {
float: left;
width: 100%;
padding-bottom: 10px;
}


#secondaryContentLeftColumnContent ul.pageSummaries {
width: 100%;
float: left;
display: inline;
margin-left: 10px;
padding-left: 0;
}

#secondaryContentLeftColumnContent ul.pageSummaries li {
width: 650px;
height: auto;
float: left;
list-style: none;
padding: 10px;
margin: 0;
display: inline;
}

#secondaryContentLeftColumnContent ul#pageSummaries li h2, #secondaryContentLeftColumnContent ul.pageSummaries li h2 {
font-size: 1.3em;
margin-bottom: 0;
width: auto;
}

#secondaryContentLeftColumnContent ul#pageSummaries li h2 a, #secondaryContentLeftColumnContent ul.pageSummaries li h2 a {
color: #414141;
text-decoration: none;
}

#secondaryContentLeftColumnContent ul#pageSummaries li h2 a:hover, #secondaryContentLeftColumnContent ul.pageSummaries li h2 a:hover {
text-decoration: underline;
}

/* Secondary Content Layout Elements */

#secondaryContentLeftColumnContent a:hover {
text-decoration: none;
}

#paginate, li#paginate {
text-align: center;
margin-top: 10px;
display: block;
float: none;
width: 683px;
padding-top: 10px;
padding-bottom: 10px;
}

#paginate.searchPaginate {
width: 100%;
width: 683px;
}

#paginate .paginateSmall {
font-size: .9em;
margin-right: 15px;
font-style: italic;
}

#secondaryContentLeftColumnContent h1 {
background: none;
color: #414141;
padding: 0;
width: 683px;
display: block;
margin: 0;
float: none;
font-size: 1.5em;
margin-bottom: 10px;
background-image: none;
padding-bottom: 5px;
border-bottom: 1px dashed #A2A2A2;
}

#secondaryContentLeftColumnContent h1.noBorderHeading {
padding-bottom: 0;
border-bottom: none;
font-size: 1.25em;
padding-left: 16px;
margin-bottom: 0;
margin-top: 9px;
}

#secondaryContentLeftColumnContent h2 {
font-size: 2em;
margin-bottom: 10px;
width: 683px;
line-height: 110%;
}

#secondaryContentLeftColumnContent h3 {
font-size: 1.5em;
margin-bottom: 10px;
}

#secondaryContentLeftColumnContent h4 {
font-size: 1.3em;
margin-bottom: 10px;
}

#secondaryContentLeftColumnContent h5 {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 5px;
}

#secondaryContentLeftColumnContent hr {
height: 1px;
border: 1px dashed #A0A0A0;
margin-top: 10px;
margin-bottom: 10px;
}

#secondaryContentLeftColumnContent blockquote {
margin-top: 10px;
padding: 5px;
width: 552px;
padding-top: 20px;
font-style: italic;
font-size: 1.1em;
color: #888888;
padding-left: 31px;
padding-right: 30px;
position: relative;
background: url(images/structure/secondaryLeftColumnContentBlockquote.png) no-repeat left top;
}

#secondaryContentLeftColumnContent .blockquoteBottom {
background: url(images/structure/secondaryLeftColumnContentBlockquoteBottom.png) no-repeat right bottom;
display: block;
width: auto;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
padding: 0 30px 0 30px;
background-position: 615px bottom;
}

#secondaryContentLeftColumnContent pre {
width: 670px;
overflow: auto;
border: 1px solid #DDDDDD;
padding: 5px;
margin-bottom: 15px;
}

#secondaryContentLeftColumnContent ul, #secondaryContentLeftColumnContent ol {
padding-left: 40px;
width: 643px;
margin-bottom: 10px;
font-size: .9em;
margin-bottom: 15px;
}

#secondaryContentLeftColumnContent ul li { 
list-style: disc;
}

#secondaryContentLeftColumnContent ol li { 
list-style: decimal;
display: list-item;
}

/* End Secondary Content Layout Elements */

/* End Secondary Content */


/* Page Styling */

#secondaryContentLeftColumnContent.whoWeAre a {
color: #C67900;
}

#secondaryContentLeftColumnContent.whoWeAre a:hover {
text-decoration: underline;
background: #FFEBCC;
}

#secondaryContentLeftColumnContent.whoWeAre h1 {
background: none;
}

/* End Page Styling */

[mjurmann]

I forgot to mention that there seems to be about 20 pixels of margin applied to the bottom of the "#secondaryContent" and "#secondaryContentWrapper" divs whenever a link is rolled over in either of these divs, thus pushing down the div below these two divs. The "#secondaryContentWrapper" div is the parent to "#secondaryContent".

[haku]

If you aren't using firebug on firefox, you should. You can click 'inspect', then click the link on the page, and it will give you all the CSS for that link, as well as what file that CSS is coming from. You can figure out exactly where that extra margin is coming from by playing around a little and pinpointing what is causing it.

 

Or if you have a link to show us, I'm sure someone will look at it.

[TheFilmGod]

You posted WAY too much code to debug. I think the problem occurs because the a:hover state that you describe in the css has an added margin: 20px 0 0 0; in it or something...

 

Can you post just the relative code. The html snippet and the css styles for just that link (including its hover state). Thanks!

[mjurmann]

The reason all of that code is relevant is because there is no margin: 20px set to the a:hover state. I've got that set to margin: 0; padding: 0; There is something within the code I've just posted that is causing the div below to jump 20px on rollover.

[mjurmann]

After doing some additional debugging, this is what I have so far. Please, if anyone knows why this is happening, let me know.

 

When I apply the same background color to the "a" and "a:hover" of the links, the layout does not jump on rollover. However, when I apply a different background color from the "a" to the "a:hover", the layout jumps. Why would changing the background color of a link cause the page to jump? What the?

[haku]

Link mate, we need a link. Or at the VERY least, the HTML that goes with that CSS. CSS without HTML means nothing.