Welcome to WebmasterWorld Guest from 35.172.217.40

Forum Moderators: not2easy

Message Too Old, No Replies

IE CSS Bug - Link Hover Causes Shifting Text

case study two..

     
3:16 pm on Nov 10, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Nothing new really just the same old IE, The case study this time was one of my own pages. I knew that there was something in there and I knew what would fix it because I applied * {zoom: 1.0;} to the top of the page.

but what I didn't have time for before now was to sit and dissect which element was actually causing the shift.

Stripped Test Code:


<!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"></meta>
<title>IE CSS Lines of Text Shifting on Hover</title>
<style type="text/css" media="screen">
* {margin: 0; padding: 0; border: 0;}
p {margin: 10px;}

ul {margin: 0 30px;}

a {
color: #080;
text-decoration: none;
}

a:hover {
color: #900;
background: #eee; /* triggers shift */
}

blockquote {
padding: 15px;
border-left: 20px solid #ddd;
/* zoom: 1.0; */
}

div {
padding: 15px 40px;
border-left: 20px solid #ddd;
/* zoom: 1.0; */
}
</style>
</head>
<body>
<p>This paragraph has a <a href="#">link</a>. If it appears before the blockquote it doesn't move when hovered over.</p>
<blockquote><p><strong>this is the blockquote</strong></p></blockquote>
<p>This paragraph has a <a href="#">link</a>. If it appears after the blockquote it does move when hovered over.</p>
<blockquote>
<h4>Heading</h4>
<p>some paragraphs and text in a blockquote</p>
<ul>
<li><a href="#">another link</a></li>
<li><a href="#">another link</a></li>
</ul>
</blockquote>
<p>This paragraph has a <a href="#">link</a> if it appears after a blockquote it does move when hovered over.</p>
<div><p><strong>this is a div with the same properties as the blockquote</strong></p></div>
<p>This paragraph has a <a href="#">link</a> if it appears after a div/blockquote it does move when hovered over.</p>
</body>
</html>

I had noticed that the links above the first blockquote didn't shift it was only links after that that would shift a line of text that had a link in it a couple of px to the right.

Also because I only have 1px left borders in my actual code the rest wasn't obvious... yet

The IE "Cure All" to provide a dimension/layout to the affected elements had worked when applied generally
* {zoom: 1.0;} but then when I tried to apply it to the affected element, it wasn't obvious what the affected element actually was. The <a> elements themselves, are involved but sometimes they're in a <p> sometimes they're in a <ul>..

So stripping excercise again :( While stripping the code I removed the borders of the blockquote ~ Hey presto the jumping stopped.. so then just to be dramatic I added 20px borders instead, now you see the problem much clearer, and the bit I hadn't noticed before : It now resembles another "well known IE Bug" :
Magik Creeping Text Bug [positioniseverything.net] as it's now more obvious that all the elements are actually Creeping off the left of the page.

I had been swearing at that blockquote thinking it was it's fault, but I added in a div with identical properties just to prove that Creeping Text theory and yes it was, so it's sorry to <blockquote>!..

Ok so the creeping left text is caused by the combination of bottom padding and a left border ~ <sarcasm> of course it is IE, so I should've remembered I can't use something as simple as a border and padding combination on an element! </sarcasm>

Part two: How I actually noticed it (I would never initally have connected it to creeping text) The hovered links..
The links when hovered upon are causing the text to come partially come back into place and that I discovered was caused by having the background color change on hover. When you comment out the background color the text stays off to the left as caused by the first bug..

<tantrum>I don't want to change what I thought was a simple enough request!</tantrum>

Anyways the outcome is to place the "usual" layout fix onto any elements that have the border/padding combination ~ Note that zoom: 1.0; is just here for testing a height or width will do it too..

Moral: even when you see something weird in IE, you may not be seeing what you think you're seeing, Shifting Links is Obviously the Creeping Text Bug!

Thanks for listening : can you tell I'm a tad irritated?

Suzy

9:31 pm on Nov 10, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 25, 2003
posts:1360
votes: 453


But the rest of us learn so much when you get peeved ...

Thank you once again.

2:34 pm on Nov 11, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1318
votes: 0


So stripping excercise again.

SuzyUK, you can strip for us anytime! :)

Being serious, I note that adding a 1 pixel white border to everything cures the effect. I just don't understand why some of the text is positioned off the left edge?

9:46 pm on Dec 7, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


thanks for this Suzy, btw how do you know how much of your code you need to strip down?

Do basically just rebuild each div? This is a new term to me, basically (not stripping, ;) just stripping your code)

And I also see a new term/thing to learn, Zoom?

11:25 pm on Dec 7, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


btw how do you know how much of your code you need to strip down?

Do basically just rebuild each div? This is a new term to me, basically (not stripping, ;) just stripping your code)

All of it, or definite sections.. if you can narrow it down to one div that makes it easier...

I don't know if this is any use, but I did another case study [webmasterworld.com] where I went into more details about the actual steps I took, basically I would advise that if you actually want to know where the problem is you should strip it back to the simplest markup where the problem is still being triggered..

And I also see a new term/thing to learn, Zoom?

zoom [msdn.microsoft.com] is an IE proprietary property, but in this thread [webmasterworld.com] Doc took on the IE Bugs, which resulted in the discovery that it was IE's "hasLayout" [msdn.microsoft.com] property that caused most of it's display bugs.

I'm sure you are familiar with the "Holly Hack", well what that hack is doing is giving "layout" to the elements it is applied to, "zoom" does exactly the same thing but
a: it doesn't validate so would still need to go in a hiding hack or a conditional comment and
b: it doesn't work in IE5

but for testing purposes to see if you've got a "layout" bug in your page you can add * {zoom: 1;} to the top of your page as an inital "debug test" and if it fixes your problem then at least then you know you're on the trail of an element that needs a "layout" fix rather than trying to remember all the names and permutations ;)

then you can dimension the element as required (a dimension gives layout too) either a natural dimension or hack in the 1% height for IE only..

LOL, bet you wish you'd not asked now ;)

Suzy

12:09 pm on Dec 8, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


LOL, bet you wish you'd not asked now

No, I'm glad that i asked. I wish I was like a sponge, able to just soak this all up and reserve it for use. I have so many notes printed out (up to 3 milk crate things with files and folders in them ;) )

Thanks Suzy. I'm going to go through and print some of this stuff to refer to it as I go along. I do have the holly hack information printed in the hacks and bugs folder ;>) And when I find more, I print them and put them into that folder.

1:40 pm on Dec 25, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


argh! Suzy I have applied the zoom but the links are still jumping. I have striped and added back etc... maybe I just need a break from this template and come back to it? I honestly don't want answers to this, yet, lol. I really wish to solve this my own. I think I'll learn beter if I do. But, lol am getting close to asking for the answer ;)

Any other articles or demos or information that you could provide for me?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members