Firefox is okay (mostly) -- as usual IE is not

Here's my site link:
http://clients.overthehillweb.com/phlaunthair/phflauntshop/
Here's my stylesheet:
http://clients.overthehillweb.com/phlaunthair/phflauntshop/includes/templates/sang_embed/css/stylesheet.css

So thankfully I've nailed down all the other Firefox versus Internet Explorer differences in how the browsers render my site.. I do have one SMALL annoying issue left.

All of my text hover styles use the "text-decoration: underline" attribute. It works perfectly (in both browsers) for all of my text links with one specific exception.. :censored:

I set up my store to display the product categories on the store's front page. Firefox and Internet Explorer behave differently when you mouse over the product category text and picture links on the front page. Here's the problems I am having:

1. In Internet Explorer the product category image is underlined when you mouse over the image -- NOT an effect I want (The **text **mouse over works the way I want it to -- it underlines)
2. In Firefox, the product category text link is NOT underlined when you mouse over the text link. (The image mouse over works the way I want it to -- no underlining)My gut is telling me that there's probably ONE change that solves both problems.. I have been all over my stylesheet and tried a bunch of stuff, but I am plum out of ideas.. Some assistance would be greatly appreciated..

To be specific:

IE7 does not appear to underline the category image or the text Lace Wigs underneath the image. (I don't have IE6 on this machine but ie6 normally behaves properly with text-decoration IMHO, I will check later though).
FF 2.0.0.11 DOES underline the Lace Wigs text AND the category image. On first impressions it looks almost like a superstrike.
This seems to be the very opposite of what you described in your post. However, without sounding glib, I assume you want the text Lace wigs to underline but not the image. Again I think you have superstrike in the css. I'll give it a look over and brb.

Regards

Dave

I still don't have the complete answer but, in line 51 of sang_embed/css/stylesheet.css you have this entry:

a:hover img (line 51)
{
text-decoration: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: -moz-use-text-color;
}

is this it?

Dave

Also, have you tried separating out .categoryListBoxContents and styling that class with link and hover states.

I hope that this helps

Regards

Dave

dml311071:

To be specific:

IE7 does not appear to underline the category image or the text Lace Wigs underneath the image. (I don't have IE6 on this machine but ie6 normally behaves properly with text-decoration IMHO, I will check later though).
FF 2.0.0.11 DOES underline the Lace Wigs text AND the category image. On first impressions it looks almost like a superstrike.
This seems to be the very opposite of what you described in your post. However, without sounding glib, I assume you want the text Lace wigs to underline but not the image. Again I think you have superstrike in the css. I'll give it a look over and brb.

Regards

Dave

You're absolutely right.. I did misstate my problem..:frusty: See this is what happens when you write when you're both tired and frustrated..:laugh:

1. In Firefox the product category image is underlined when you mouse over the image -- NOT an effect I want (The **text **mouse over works the way I want it to -- it underlines)
2. In Internet Explorer, the product category text link is NOT underlined when you mouse over the text link. (The image mouse over works the way I want it to -- no underlining)> dml311071:

I still don't have the complete answer but, in line 51 of sang_embed/css/stylesheet.css you have this entry:

a:hover img (line 51)
{
text-decoration: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: -moz-use-text-color;
}

is this it?

Dave I'm a little confused.. Are you suggesting that I change this section of my stylesheet as you have outlined here? Here's what's actually in my stylesheet

a:hover img {
	text-decoration: none; 
	border-bottom: none;

dml311071:

Also, have you tried separating out .categoryListBoxContents and styling that class with link and hover states.

I hope that this helps

Regards

DaveYep I tried that.. It doesn't change anything.. The behavior in both browsers remains the same..

Yes this is a head scratcher!

Again though, to clarify, I found this entry when investigating your css. This is not a suggested change, it is what was found using firebug and the webdev extensions in FF.

 
a:hover img 
{
text-decoration: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: -moz-use-text-color;
}

Ths CSS console picked this up in a css file in sang_embed folder. Does this mean anything to you, ie, do you have folder in the same custom template folder with this stylesheet? If memory serves me right this is a free theme, have you modified the stylesheet and left this particular entry by accident?
It seems odd that it is performing the very action that you wish to get rid of.
It is, of course, telling the image to display a bottom border the same colour as the text when moused over in Firefox.

I'm not saying this answers everything, but it would be half of the solution. Try commenting out this entry using the old */ and see what it does.

Regards

Dave

dml311071:

Yes this is a head scratcher!

Again though, to clarify, I found this entry when investigating your css. This is not a suggested change, it is what was found using firebug and the webdev extensions in FF.

a:hover img
{
text-decoration: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: -moz-use-text-color;
}

> **dml311071:**
>
> If memory serves me right this is a free theme, have you modified the stylesheet and left this particular entry by accident?
> 
> ........Try commenting out this entry using the old */ and see what it does.It is a free template, but it's a pretty vanilla theme which allows you to embed Zen into another site. While I have modified the stylesheet, this code block is not in my stylesheet. Not sure why your tools are detecting it.. I can't comment out what's not there..

> **dml311071:**
>
> It seems odd that it is performing the very action that you wish to get rid of.
> It is, of course, telling the image to display a bottom border the same colour as the text when moused over in Firefox.Yeah odd indeed and irritating as hell.. I was hoping that it would be a simple answer, and that someone else would spot what I am missing.. **sigh**

I will have another look. I've got quite a bit on today but I'll go through the stylesheet later.

Regards

Dave

From my experience, Firebug breaks down the styling to the overall detailed effect of all declarations, which is exactly what you get when you compare

a:hover img {
text-decoration: none;
border-bottom: none;

to

a:hover img
{
text-decoration: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: -moz-use-text-color;
}

So somehow the "none" is getting overridden or not applied and the color is showing up...

What would happen if you explicitly used "transparent" for the color?
The "-moz" is an indicator of a proprietary property value, so IE may not have a similar default property.

OK, this is really weird...
That explicit styling has no effect, but the underline on the "lace front wigs" image looks like it is the text width instead of the image width (hard to be sure because they are very close).
The product main image link shows the underline starting at the left edge of the image and ending at the right edge of the text (in FF).
I dunno...

You had a similarly weird (spacing) problem with the colored "ph" in descriptions. I wonder if the translation through the sanguis-embed has anything to do with these?
Trying them in a site that uses ZC directly would be a good test.

gjh42:

OK, this is really weird...
That explicit styling has no effect, but the underline on the "lace front wigs" image looks like it is the text width instead of the image width (hard to be sure because they are very close).
The product main image link shows the underline starting at the left edge of the image and ending at the right edge of the text (in FF).
I dunno... Indeed... This little issue is becoming quite annoying.. I have tried a little bit of EVERYTHING to solve it.. I am PLUM out of options..:dontgetit

gjh42:

You had a similarly weird (spacing) problem with the colored "ph" in descriptions. I wonder if the translation through the sanguis-embed has anything to do with these?
Trying them in a site that uses ZC directly would be a good test. Nope.. I don't think this is related.. I just fixed that problem today using the fix you and another member suggested.. *(though I could use your help on one small remaining issue with the product descriptions on the "All Products" page -- if ya wanna pop back over to that thread again :smile:) *

Not sure if the sanguis-embed template has anything to do with this weird styling issue.. It's just a Zen Template, that allows you to wrap another site's header and footer around your Zen Cart. It's great if you have an existing site that wants to add Zen Cart. You can easily incorporate Zen Cart into the site's existing design.. I would hate to have to strip the CSS and start from scratch.. However, it's starting to look like that's EXACTLY what I might have to do to resolve this once and for all.. :censored:

** Update **

But first some thank yous..

Gentlemen.. I TRULY appreciate your help here..

So I have figured out the Internet Explorer side of this issue.. Glenn you got me to thinking about this template and if it is contributing to the issue.. So I replaced my template's stylesheet with the classic stylesheet and began to slowly replace the styles with styles from my original stylesheet until the undesired behavior repeated.. It didn't take long either.. :yes:

As it turns out the "line-height" attribute in the body style caused the IE behavior.. Dunno if it caused IE to ignore the hover state or if it was truncating the way the link displayed somehow.. and frankly I DON'T CARE!!!!:laugh: As long as it is fixed!!! Whoo hoo!!!

That got me to thinking about Firefox, and what could be causing the errant hover state for my category images.. I noticed that only the product category image exhibited this behavior.. So I took a look at the HTML source, and discovered that both the category image and the category name are both inside the same link tag.```

<div class="categoryListBoxContents" style="width: 100%;"><a href="http://clients.overthehillweb.com/phlaunthair/phflauntshop/index.php?main_page=index&cPath=1"><img style="width: 71px; height: 57px;" src="images/no_picture.gif" alt="Lace Wigs" title=" Lace Wigs " height="57" width="71"><br>Lace Wigs</a></div> ```So I downloaded a copy of this page and separated them as follows``` <div class="categoryListBoxContents" style="width:100%;"><a href="http://clients.overthehillweb.com/phlaunthair/phflauntshop/index.php?main_page=index&cPath=1"><img src="images/no_picture.gif" alt="Lace Wigs" title=" Lace Wigs " width="71" height="57" /></a></div> <div class="categoryListBoxContents" style="width:100%;"><a href="http://clients.overthehillweb.com/phlaunthair/phflauntshop/index.php?main_page=index&cPath=1">Lace Wigs</a></div> ``` And when I viewed the results in Firefox, no more underlining of the category image.. :smartalec:

So the question is can I modify the main page code to do the same??

goes off to see if she can figure out the answer

I decided to Plan B this one.. I took out the underline text decoration, and used a different text color as the visual cue on the hover state for all the text links.. At least now I know the answer to "why" for the image underline behavior in Firefox.. It makes sense now..

I'd like to "fix" it, but I looked at the code, and I would be WAY over my head at guessing my way to a fix.. (If anyone has an ideas on this, I am more than willing to roll up my sleeves:smile:) In the meantime, at least the mystery has been solved..

As a final followup.. I ended up scrapping the sanguis-embed stylesheet altogether and started from scratch using the classic template's stylesheet as a starting point and recreated my stylesheet..

There's nothing wrong with this template, but it's stylesheet is so heavily modded that it became a nightmare for me everytime I changed something in the stylsheet. I never even posted my last few problems, I just decided to start over.. Starting over was the best thing I could have done.. All is right with the world now! and EVERYTHING works the SAME WAY in BOTH browsers..