Css not applied to element in IE7

Hi all,

I’m struggling to figure this out for few days now,
simple case of applying css to element:

I tried to access by class

.sidebar-products {

I tried to access by class with div

div.sidebar-products {

I tried to access by id, with and without div

#sidebar-products {
div#sidebar-products {

To simply change style of this element:

<div class="sidebar-products">
    more html

while IE8 and FF applying the CSS the way they should,
IE7 refuses to do so.

i’m attaching the screen-shot
of IE7 windows with debugbar on and firebug-lite on
no-one overwrites the CSS it’s just not applied i’m going crazy…

I’m not much good on IE foibles, but I have an inkling that IE has a few problems with background-color. Instead, try the shorthand:

.sidebar-products {

it’s not matter what css i put inside the class,
the element not get the class definition.

If you look at the screenshot you’ll understand what I mean.

Have you tried my suggestion?

If it doesn’t work, post a link to the site so that we can have a better look.

I suspect this is a “haslayout” issue with IE7. :slight_smile:

Try setting a harmless haslayout trigger for IE7.

[B].sidebar-products[/B] {
    [COLOR=Blue]min-height:0;/*IE7 haslayout*/[/COLOR]

If you need to support IE6 then you will need to set haslayout for it as well, the link above gives a list of properties that set haslayout.

i tried it,

here is the site

none of the tips helped, anyone has another suggestion?
I’ve posted link to the site if anyone intrested.

Well, I’ve looked and I’ve looked, but I can’t see it. In desperation, all I can suggest is try a hex value in place of ‘red’. I think it’s #900;

Or maybe try a more specific rule, like

.content .left-colum .sidebar-products {
  background: #900;

Thank you for your help,
but that solution didn’t helped either,
did you noticed the problem in the IE7?

Yes, I looked at Firefox and IE7 for about an hour—back and forth—but I can’t see why it’s happening. Very weird. I’ve never seen anything like it.

hehe :slight_smile:
i’m doing web development for 8 years, and still can’t figure out what wrong here.

It looks like it was just a silly error on your part. :slight_smile:

You would have found it if you had of validated your css.

The problem seems to be this stray quotation mark below -

[B]p.hot-product-top[/B] {
    min-height:95px;font-weight: bold;[SIZE=4][COLOR=Red]"[/COLOR][/SIZE]


thank you