PDA

View Full Version : Problems with CSS and Layout when hover over HTML link



theemigrated
Apr 1st, 2007, 01:10 PM
Hello All,

Please can you look in to an issue i'm experiencing on a site that I'm working on. When viewing a page in IE it displays correctly but if I hover over a HTML link displayed on the page the border rises up. Ths is viewable at http://www.footy-fever.co.uk (http://www.footy-fever.co.uk) and by going to the Contact Footy Fever section and hovering the mouse above a red HTML link. When viewed in FF the page never encloses the pictures. The CSS is at http://www.footy-fever.co.uk/css/style.css (http://www.footy-fever.co.uk/css/style.css)

Please help!! Thanks for your help in advance :)

Excavator
Apr 1st, 2007, 04:41 PM
Good morning theemigrated,
On your other pages you have enough content to make it past your floats. On the contact page, with less content than floats, you need to clear your floats. (http://www.quirksmode.org/css/clearing.html)
Like this:

#contentBox {
width: 770px;
margin-left: 175px;
margin-top: 10px;
margin-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
overflow: hidden;
}
That shouldn't bother your other pages but you'll want to check.

See what the validator has to say about your site. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.footy-fever.co.uk%2Fdefault.asp%3Fsection%3D1)
Read about DocTypes in the link in my sig below.

theemigrated
Apr 1st, 2007, 06:31 PM
Hello Excavator,

Thanks for looking at my problem. I have followed your advice and used the overflow hidden attribute and cleared most of the validation issues. Also cleared the 1 CSS validation issue. I'm now pleased that its working in FF but IE is still 'jumping up', so can you tell me how to "hack it" for IE.

Spoke to a mate about it and it was not happening on his system using IE. I'm not sure of the IE version he was using. Do you see the problem i'm experiencing?

Thanks
Mark

Excavator
Apr 1st, 2007, 07:01 PM
I can't see where it's doing it anymore. I checked your site in IE6 IE7 and FF2...

Maybe you need to refresh your browser?

theemigrated
Apr 1st, 2007, 07:14 PM
I have re started IE several times, cleared cache and its still happening on mine. Viewable at http://www.footy-fever.co.uk/images/screen.jpg Thanks for trying on your side. Any ideas?

Excavator
Apr 1st, 2007, 07:19 PM
Yeah, that page definitely looks right here.
You probably need to delete temp files/browser history/cookies... goto IE's internet options to do that.

theemigrated
Apr 1st, 2007, 07:30 PM
Yeah tried that and no better. Seems to be fine for everyone else so will leave be. Thanks for all your help :)

koyama
Apr 2nd, 2007, 04:59 PM
When viewing a page in IE it displays correctly but if I hover over a HTML link displayed on the page the border rises up.
This is the IE/Win Guillotine Bug (http://www.positioniseverything.net/explorer/guillotine.html). It occurs because you have used a:hover styles.


#content a:hover {
background: #00FF33
}
Solution: Add a clearing div just within your #contentBox. It will suffice to add the red part::


<div id="contentBox">
...
<div style="clear: both;"></div>
</div>

Excavator
Apr 2nd, 2007, 07:10 PM
Haha - a funny thought just struck me, it's appropriate that your avatar is a gecko because they eat bugs.
You find all the bugs koyama!!! :thumbsup:

koyama
Apr 2nd, 2007, 07:25 PM
Haha - a funny thought just struck me, it's appropriate that your avatar is a gecko because they eat bugs.
LOL... well, you know, someone has got to do the dirty job :rolleyes: