SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow 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
    Code CSS:
    .sidebar-products {
        background-color:red;
    }


    I tried to access by class with div
    Code CSS:
    div.sidebar-products {
        background-color:red;
    }


    I tried to access by id, with and without div
    Code CSS:
    #sidebar-products {
        background-color:red;
    }
    div#sidebar-products {
        background-color:red;
    }


    To simply change style of this element:
    Code HTML4Strict:
    <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...
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .sidebar-products {
        background:red;
    }
    Last edited by ralph.m; Apr 14, 2010 at 06:28. Reason: spaling

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I suspect this is a "haslayout" issue with IE7.

    Try setting a harmless haslayout trigger for IE7.
    Code:
    .sidebar-products {
        background-color:red;
        min-height:0;/*IE7 haslayout*/
    }
    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. #6
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried it,

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

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    none of the tips helped, anyone has another suggestion?
    I've posted link to the site if anyone intrested.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

    Code:
    .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?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pamidor View Post
    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.

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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
    i'm doing web development for 8 years, and still can't figure out what wrong here.
    Last edited by pamidor; Apr 15, 2010 at 06:50. Reason: typo mistake

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pamidor View Post
    hehe
    i'm doing web development for 8 years, and still can't figure out what wrong here.
    Hi,
    It looks like it was just a silly error on your part.

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

    The problem seems to be this stray quotation mark below -

    Code:
    p.hot-product-top {
        min-height:95px;font-weight: bold;"
    }

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow....

    thank you


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •