SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background-image visibible trough div background colour

    Here the problem.



    what it should be: http://www.vknt.be/BG_PROB/projecten.php
    >> shows up fine in FF and IE7

    The problem arises on the other pages too.

    Here's a summary of is how it is structured.

    Code:
    background: #FFFFFF url(global_assets/bg.jpg) repeat-x top left;
    >> background image

    Code:
    #bodycontent {
      background-color:#FFFFFF;
      margin-top:5px;
      padding: 10px 20px 20px;
    }
    The content is wrapped in a div bodycontent (as i learned in ian lloyd book ) and has a background-colour white.

    While hovering the mouse over the content, the white dissappears, and the background shows through, only in IE6 of course

    I've been through the forums looking for a similar problem, but i can't find any.
    Can someone please help of point me to a similar thread?

    Thanks in advance.

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to be caused by the other CSS.
    I cropped my CSS file to the following code

    Code:
    body {
      font-family: 'Trebuchet MS', Arial, Verdana;
      background: #FFFFFF url(global_assets/bg.jpg) repeat-x top left;
      margin:0px auto;
      padding:0px;
      width:750px;
      color: #705838;
    }
    #header { margin-top: 10px;}
    #bodycontent {
      background-color:#FFFFFF;
      margin-top:5px;
      padding: 10px 20px 20px;
    }
    With only the above code in the .css file the problem is gone.
    I'll try to isolate the css that causes the problem, but that won't be an easy task assuming it's something that works in conjunction with the above code
    I'll post an update as soon as I find something..

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I'll try to isolate the css that causes the problem, but that won't be an easy task assuming it's something that works in conjunction with the above code
    With the firefox extension - web developer toolbar, you can edit CSS in a left panel and see the effect right away, makes debugging a lot simpler

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply Mark. I'm using webdeveloper toolbar already. But the problem is IE6 only, so I couldn't use it..

    Anyway I found the solution. They were at the beginning luckily
    It was caused by the following lines

    Code:
    h2 {
        font-size: medium;
        color: #3D301F;
        margin-bottom: -0.05em;
        margin-top: 0.1em;
    }
    IE6 does a bad job interpreting the em values. When I replace them with px values. Everything is fine.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Giving IE a value to work with in the body rule will help with the interpretation of the EM values.

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan, do you mean something like this?

    BODY {font-size:80%}

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer 100% or 1em, but yes, that's the idea.

  8. #8
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'll try this.


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
  •