IE8 compatibility view not showing this correctly? 1

[JohnnyT]

Hi,

I have the following CSS and HTML to produce a rollover effect by using the "height" property in CSS. This works fine in Firefox and in IE8 but when I switch IE8 to "compatibility view" it only shows the whole gif image instead of only 19px height. In other words you can see both states of the menu option instead of it initially showing the bottom 19 px and then the top 19 px when the mouse hovers over it.

Here's my CSS:
#bd .memlinks a{
display:block;
color:#999;
font-size:1.4em;
text-decoration:none;
overflow:hidden;
text-height:19px;
height:19px;
float:left;
}
#bd .memlinks a:focus img,
#bd .memlinks a:hover img{
top:-19px;
}
#bd .memlinks span{
float:left;
}
#bd .memlinks span,
#bd .memlinks a img{
position:relative;
}

Here is the HTML:
<div id="bd" class="disclaimer">
<p class="clear memlinks" style="margin-left:auto; margin-right:auto; width:650px;">
<a href="test.php"><img src="/images/memnav/menu1.gif"/></a>
</p>

I've been tearing my hair out with this one and would really appreciate any light you can shed on this.

Many thanks for your help

John ;-)
</div>

I don't make mistakes, I'm merely beta-testing life.

 

[ChrisHunt]

    text-height:19px;

There's no such property as "text-height". I think you mean "line-height".

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[JohnnyT]

Chris

Actually that was a mistake by me. That "text height" didn't used to be there. I put it in in my desperation to try and get the thing working. I've changed it to line-height but it still doesn't work in Compatibility Mode.

Thanks for pointing it out.

Is there any other reasons that you can see for it not working?

I don't make mistakes, I'm merely beta-testing life.

 

[Vragabond]

How does the compatibility mode work? If it makes it "compatible" with IE6, then that's the way it works. IE6 expanded containers to fit the content.

Have you tried using backgrounds instead? Backgrounds never extend the parent container, no matter how big they are.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[JohnnyT]

I'm not sure what the compatibility mode mimics. I use FireFox myself but I just need my site to look correct in IE as well.

I've tried messing around with the background property but to no avail I'm afraid?

Any other ideas?

Cheers

John ;-)

I don't make mistakes, I'm merely beta-testing life.

 

[JohnnyT]

**EDIT TO ABOVE POST**
I think compatibility view mimics IE 7.

I've used IETester and the links show OK in IE8 but fail in IE7 and IE6

???

I don't make mistakes, I'm merely beta-testing life.

 

[JohnnyT]

** ANOTHER EDIT **

I'm not far off now.. this is what I've got so far:

CSS:
#bd .memlinks a{
display:block;
overflow:hidden;
float:left;
height:19px;
color:#999;
font-size:1.4em;
text-decoration:none;

}

#bd .memlinks a:focus img,
#bd .memlinks a:hover img{
top:-19px;
position:relative;
display:block;
overflow:hidden;
float:left;
}

HTML:
<p class="clear memlinks">

<a href="test2.php">
<img src="<?php bloginfo('template_url')?>/images/memnav/menu1.gif">

</a>
</p>

This works fine in IE8 and Firefox and in IE7 and IE6 it shows the menu correct (i.e. the top 19px of the image) until the mouse goes over it and then it shows the image full size instead of only showing the bottom 19px of the image.

I've tried changing the CSS to include "height:19px" in the #bd .memlinks a:hover img style but this still shows the full image except it squishes it down to 19px high...

Any ideas???

Many thanks

John ;-)


I don't make mistakes, I'm merely beta-testing life.

 

[Vragabond]

I believe you should still use the background, similar to how it is described here:

http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

http://www.wellstyled.com/css-nopreload-rollovers.html

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[JohnnyT]

The problem with that is that I've got 6 menu items with 6 different images. Would I not have to have 12 sets of CSS classes (i.e. normal image and :hover position) to encompass these??

The way I'm trying to do it just has 2 classes, one for normal image and one for :hover and then I just put a different image in the <img src> tag



I don't make mistakes, I'm merely beta-testing life.

 

[Vragabond]

You would need to have 6 identifiers for elements, preferably you would use 6 ids, since they will probably be unique on the page. You will have 6 ids for 6 elements, and just 1 pseudo class for hover (since all you will be doing is shifting background for the same amount every time, which can be done just once). Really, all you need is one declaration for background-image. All other properties can be defined in general for all items.



[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[JohnnyT]

Thanks for your help Vragabond. I'll have to do it that way I suppose. Its just annoying that I can't get the other way to work (it's bugging me that I can be sooo close and yet not get it quite working!)

Thanks again for all your help and advise

Cheers

John ;-)

I don't make mistakes, I'm merely beta-testing life.

 

[JohnnyT]

Managed to suss this one out in the end...

Just in case anyone else finds their way in here with a similar problem...

I put this in the stylesheet:
#bd .memlinks span {
height:19px;
overflow:hidden;
}

Then put a <span> </span> around all the <a href's> and it worked a treat...

;-)

I don't make mistakes, I'm merely beta-testing life.