Grow your CSS skills. Land your dream job.

Weird CSS problem with background img in IE (Solved)

  • # December 1, 2008 at 4:55 pm

    Hi
    first, really helpful site, i love it and visit it regularly.
    But i have some problems with CSS and div background-images.
    See first this link:

    http://www.sadsunray.de/test/hld

    (yes i know, the white green block isn’t there it meant to be)
    In Firefox everything is fine, but IE shows some weird repeating with the background images.
    AND when you scroll down, you can see in Firefox the color of the body-background is ok, but too bright in IE.

    Someone can help?
    Please.
    Thanks a lot

    Rob
    # December 1, 2008 at 5:53 pm

    Hi!

    Welcome to the forums :)

    Ok – I see your idea there, and its logical and makes sense… – but thats not the best way to do it, and thats probably why its causing problems in IE.

    What you want to do is make 3 divs to create your box.

    <div class="shadow_top"> this can have the style of your top shadow, the one you have now.
    <div class="shadow_bottom"> this can be the same too :)

    <div class="shadow_middle"> Now this is the new div- get rid of left and right and create this div, make it the filling for the sandwitch as to say. cut a 1px high x 818px wide section through the middle of your shadow image, in whatever package you use and save it. Pop it up in your image folder and then set it like this:

    Code:
    .shadow_middle { width:818px; height:470px; background: url(shadow_middle.png) repeat-y;}

    this will make a better box, and one that will extend downwards if you need it to…

    If you want to make the other one work, you might find that adding the "no-repeat" line to the background will fix it, although I have not tried that, it seems to be on repeat so might be causing some issues in crazy IE…

    # December 2, 2008 at 8:06 am

    hi,
    thanks for the nice welcome.

    i tried your suggestion. but look what its doing now. (http://www.sadsunray.de/test/hld

    i have this main div layer, what contains every other div following. marked with the black box, but there are different interpretations bei IE and Firefox again.
    Look for IE
    [img]http://www.sadsunray.de/test/hld/IE.png[/img]
    and FF
    [img]http://www.sadsunray.de/test/hld/FF.png[/img]

    In Firefox he only take the shadows in the box, but in IE everything is in the box.
    Also see what it does with the top-shadow in IE while in FF everything is alright.
    Next thing, why is the green div in FF at the top of the white one and not like in IE in the middle?
    And last one: why is the background color #bfcbcc in IE brighter than in FF??
    You see more questions popped up then are solved.
    Thanks anyway for your kind help.
    Regards.

    Rob
    # December 2, 2008 at 10:14 am
    "egalegal" wrote:
    hi,
    thanks for the nice welcome.

    No probs :)

    "egalegal" wrote:
    i tried your suggestion. but look what its doing now. (http://www.sadsunray.de/test/hld

    i have this main div layer, what contains every other div following. marked with the black box, but there are different interpretations bei IE and Firefox again.

    In Firefox he only take the shadows in the box, but in IE everything is in the box.

    Thats because the main div has been set to a max height of 488px. So everything cant fit in it and it overspils. IE just renders it wrong. To see what I mean if you set another atribute in the #main to "overflow:hidden" you will see everything below disappear. Set the height to auto and it will wrap the entire site and be visible.

    "egalegal" wrote:
    Also see what it does with the top-shadow in IE while in FF everything is alright.

    that seemed to be an issue with your CSS which I fixed without noticing… lol

    "egalegal" wrote:
    Next thing, why is the green div in FF at the top of the white one and not like in IE in the middle?

    The way you were trying to centre the div inside the white was wrong. If you know the sizes of both divs you should just use either padding or margin – on this one I used padding on the white box, and only the top and left hand side. If you try and specify a for top right bottom and left it goes a little mental sometimes…

    "egalegal" wrote:
    And last one: why is the background color #bfcbcc in IE brighter than in FF??

    I suspect it was just IE being silly again, but #bfcbcc isnt classed as a "websafe" colour, so I edited the bg a little for it to gradient into a #CCCCCC because that is websafe and its fine now… obviously you can find a better colour than I did, its just to show it should blend in properly.

    "egalegal" wrote:
    You see more questions popped up then are solved.
    Thanks anyway for your kind help.
    Regards.

    Questions are good, they mean we learn :) so no worries…

    I have edited your code so it works in both IE and FF the same… although I have no idea about how you want it to look, there are quite a few changes though – but hopefully you can see the difference.

    OH one big thing is what you started the CSS with…

    Code:
    html, body {
    background:url(bg.png) repeat-x;
    background-color: #bfcbcc;
    text-align: center;
    margin: 0;
    padding: 0;
    }

    what you have done there is assign the BG image to be displayed twice, once in in html tag and once in the body tag – you also set 2 background colours the same. I wouldnt do text align centre in those tags as it wont effect anything.

    I also changed the div shadow images a little – but you will beable to see that…

    compare what I have done with what you did – I tried to keep it as close to your coding style as possible so you can recognise it.

    I didnt know if you wanted the white and green ontop of the shadow box or not, so I just left it how it was…

    have a look here:

    http://www.svgonline.co.uk/hld/

    get the files here:

    http://www.svgonline.co.uk/hld/hld.zip

    # December 2, 2008 at 6:13 pm

    First a BIG THANK YOU for taking the time and correct my files.
    I noticed I forgot the first lines

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    which makes the whole thing in IE centered. (have to study a little bit, what all these doctypes mean)

    Quote:
    Thats because the main div has been set to a max height of 488px. So everything cant fit in it and it overspils. IE just renders it wrong. To see what I mean if you set another atribute in the #main to "overflow:hidden" you will see everything below disappear. Set the height to auto and it will wrap the entire site and be visible.

    thats right, could come to this conclusion myself.

    Quote:
    I suspect it was just IE being silly again, but #bfcbcc isnt classed as a "websafe" colour, so I edited the bg a little for it to gradient into a #CCCCCC because that is websafe and its fine now… obviously you can find a better colour than I did, its just to show it should blend in properly.

    Damn, IE is really silly, it costs a lot of nerves when you sit in front of the monitor and you question your mental health sometime.

    Ok so far so good. BUT:
    yes i want this white area between the shadows.
    logically, it has to arrange this like the shadow divs?
    So I put the white, green and content layer into the "shadow_middle" div-tag.
    Now we are nearly there, but look what the browsers are now doing. In Firefox it produces a darker shadow in the left and right top corners. In IE there is a bit space between white and bottom shadows.
    [img]http://www.sadsunray.de/test/hld/FF2.png[/img]
    [img]http://www.sadsunray.de/test/hld/IE2.png[/img]
    At some time I thought I understand CSS a little, but now I’m more confused than ever. It seems that nothing wants to fit.
    Thanks for any further help.

    Rob
    # December 2, 2008 at 6:39 pm

    just a quick question before we start… do you want the green and the white box to be transparent when they are in place, or are they going to be green and white?

    # December 2, 2008 at 6:47 pm

    they should stay white and green, because i want to try animate the whole rectangle with jQuery.
    To adapt the size from the content-layer which is transparant. To have some dynamic in it.
    thanks a lot, really saves me lots of hours searching in forums and I’m learning a lot from your answers.

    Rob
    # December 2, 2008 at 8:07 pm

    Ok – well whatever you are going to try and do I dont get it :D but hey…

    I made it work for you, although its not the best code in the world, but hey it displays the same on IE and FF…

    Same links as above post… :)

    # December 4, 2008 at 9:29 am

    hi rob, thanks again.

    i would like to try something like this
    http://www.sadsunray.de/test/hld

    if there is more text than space available, it should expand and show all the text.

    maybe you can help me again? because now the shadows don’t move along with the white and green area.
    thanks
    regards

    Rob
    # December 4, 2008 at 10:17 am

    Well – normally you wouldnt make the shadow separate… do you know what I mean?

    # December 4, 2008 at 10:59 am
    "Robskiwarrior" wrote:
    Well – normally you wouldnt make the shadow separate… do you know what I mean?

    no, sorry don’t know what you try to say. i tried to animate the height of the shadow, work well for the shadow, but then the white and green areay jump down a little bit.

    Rob
    # December 4, 2008 at 6:54 pm

    like that :)

    http://svgonline.co.uk/hld/

    # December 4, 2008 at 7:18 pm

    rob, you are my hero
    and the solution is so easy, i wouldn’t get to it.
    really great, just put the white and green area in the background. genius
    thanks, when there are another problems i will turn to you, if its ok with you?

    Rob
    # December 4, 2008 at 7:30 pm

    lol no probs dude :)

    Just remeber, try and do it really simple first, then build up the complexity if you need to :)

    I was actually wondering why you were not doing it like that a few days ago, but I thought you were going to try something else, so I held it back… sorry if it led to a few more days of stress :) But thats I suppose what learning is all about… You will find thats the standard way to do a shadow effect anyway.

    Sure if you have any more issues, just post em, I’m about here anyway…

    # December 5, 2008 at 6:03 am

    Yeah, i actually tried to make a really small and tiny webpage with small bytes.
    So i thought if I do all graphics with CSS, the whole page gets smaller. Just have to load the shadows then.
    But seems its not that easy, I thought.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".