Moving div

mouseon, mouseoff

[grandpa]

Before I go any further let me say, Suzy and Doc, a well deserved thanks and best to you both. (Now that the wheels are greased...)

I'm not altogether certain that I have a CSS problem. Let me try to explain. In Netscape only, when I hover a link in my right column, the Adsense ads in my left column 'jump up'. It appears as if the left column is moving up about 100px.

This happens when the pointer is moved over the link, then again when its moved off the link. More than anything its extremely distracting.

I've enclosed the javascript for the ads in a div (adv), and that is contained within with the left column div. The ADV div appears to be the one that jumps with a mouseon or mouseoff condition. I position the top of the ADV div depending on any other content in that column. These are my style definitions, and the basic page layout between the body tags. Can anyone spot a reason for my ads to jump?

#inner{
margin:0; width:100%; height: 100%
}
.adv {
position: relative; margin-top: 65px;
}
.left {font-family: Eras Light ITC; font-size: 12px; font-weight: bold;color: #000000; text-align: center; background-color: #10A9FC;width: 20%; position: relative; float: left; padding-left: 4px;height: 1500px;
}
.right {font-family: Helvetica; font-size: 16px; font-weight: bolder; color: #000000;text-align: center; background-color: #03D6ED;width:73%; position: relative; margin-left: 5px;padding-left: 20px; padding-right: 10px; float: right;height: 1500px;
}
.pagewidth {width:740px;text-align:center;min-width: 500px;
margin-left:auto;margin-right:auto;background-color:#FFFFFF;
margin-bottom: 20px;
}
.lnktxt {font-family: Arial Black; font-size: 12pt; color: black;}
.lnktxt:hover {color: #0000FF; font-weight: bold;}

<div class=pagewidth>
.. page header
<div id=inner>
<div class=left>
<div class=adv>
.. <adsense javascript here> ..
</div>
</div>
<div class=right>
.. Content and links ..
.. this is a link example
<a class=lnktxt ref="http://www.example.com/">Link Title</a>

<div class=clr></div>
</div> // ends right
</div> // ends inner
</div> // ends pagewidth

[grandpa]

In what may be one the fastest replies ever to one's own question... as I was looking over the styles I posted, it hit me that the adv div needs to be positioned absolute.

.adv {
position: absolute; margin-top: 65px;
}

That fixed it. Maybe I better go look at Opera and IE again.

<add - indeed that creates a whole new positioning problem with IE. The fix is worse than the problem. add />

[D_Blackwell]

How much .lnktxt is there? If there is very much, making the :hover bold could cause quite a jump. You wouldn't see it in IE, because it won't render :hover without being associated with a:hover

(Only guessing, because I'm not able to replicate the problem in NN 7.1)

.lnktxt {font-family: Arial Black; font-size: 12pt; color: black;}
.lnktxt:hover {color: #0000FF; font-weight: bold;}

<edit> add-on </edit>

[SuzyUK]

Hi Grandpa.. thanks for the wishes :)

I don't know the cause, but I have seen it (In Firefox, so I'm guessing it's Moz thing). Sometimes it just happens on its own while the page is loading too.. and always with adsense and usually with a skyscraper (don't quote these as fact, these are just from memory)

Never really sat to look why, it could be some conflicting positioning in there generated code? I would need to take a look at a few sites code to find the common denominator

I bet I can't see it on sites now it's been mentioned though ;)

Suzy

[BobCarle]

The lnktxt will vary, of course, with the number of links of a page. Could be a few, or up to 20 or so. All of the lnktxt styles are in the right column, so I don't see how they could cause that. I looked at those, thought about them, and rejected the idea. I'll look again, try adjusting the fonts and styles a bit and see what I come up with.

Funny thing... What I finally did was to remove the positioning from the ADV div. For that one page the ads appear normally now. But for some other pages (that are virtual duplicates) that change had no effect.

I do have another page where it happens while the page is loading. It does it at the point, you guess it, where the link is displayed in the page rendering. (The page loads kinda slow sometimes, making it easy to watch the effect)

muttering...got to be something with lnktxt

[grandpa]

OK, I removed the lnktxt class from the links and this problem has disappeared. I really don't see the connection yet from the lnktxt class and links in the right column, and problems in the left column.

Suzy, just FYI, this is a tower ad. Could be something in javascript causing the problem.. without testing other ad formats that would be hard to say.

Thanks for the responses.

grandpa

<add>BTW, sorry about msg#5. I failed to see who was logged on.
</add>