Css not applied to element in IE7

HTML & CSS
1

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 {
    background-color:red;
}

I tried to access by class with div


div.sidebar-products {
    background-color:red;
}

I tried to access by id, with and without div


#sidebar-products {
    background-color:red;
}
div#sidebar-products {
    background-color:red;
}

To simply change style of this element:


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

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…

2

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 {
    background:red;
}
3

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.

4

Have you tried my suggestion?

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

5

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

Try setting a harmless haslayout trigger for IE7.


[B].sidebar-products[/B] {
    background-color:red;
    [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.

6

i tried it,

here is the site
http://tinyurl.com/y6jv9dx

7

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

8

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;
}
9

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

10

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.

11

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

12

Hi,
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]
}
13

wow…

thank you