Grow your CSS skills. Land your dream job.

Weird CSS problem with background img in IE (Solved)

  • Rob
    # December 5, 2008 at 6:57 am

    hehe yea,

    I mean trying to do something different is good, and to be honest there is probably some script somewhere to help you do it – there isnt much left that you can’t do with a website. If its a blog/business style site you have to think about what your visitor is going to be doing, most would only be on the page for a few seconds, and would not appriciate the beautiful resizing action you spend hours developing :)

    # December 9, 2008 at 6:10 pm

    you are absolutely right,
    but do a little training, to understand all this CSS stuff is also good.

    first: this is just demonstration, the menu isn’t in the desired place yet.

    now I’ve got the next problem coming up.
    look at the site again http://www.sadsunray.de/test/hldand answer me following question:
    Why the hell doesn’t IE interpret CSS like every human would do

    Code:
    top: 0px; left: 0px;

    but Firefox doing all right??
    Only f***ing IE is so stupid, not doing what I’m want it to do.
    Is it me who is thinking wrong???
    Please can anyone explain why the menu isn’t in the right place in IE?

    Rob
    # December 9, 2008 at 7:18 pm

    Yup, welcome to the world of insane IE.

    Ok so I have it looking the same in FF and IE.

    What was sticking it out was the default margin that IE was giving to the UL tag. so a quick margin:0; sorted that.

    IE likes to make up its own rules about how it sees margins and padding, so its always best to use the "left" "top" to get it in the right place.

    Other than that I changed a few other parts of your code.

    I removed the div that contained the UL menu, because UL is a block element, just like a DIV is, so you had effectivly wrapped a DIV in a DIV, no need because you can just style the UL exactly like a DIV.

    You dont need jquery to make something change when you hover over it, like your menu. Instead of making the li.active class, you could have just done li:hover. You will see in the CSS I have done.

    I think thats all I changed.

    http://www.svgonline.co.uk/hld <– here :)

    # December 10, 2008 at 5:21 am

    hi,
    again big thanks for what you’ve done and explaining it to me.

    I thought, when we reset the margin and padding in the html and body tags, it also rest it in all other tags afterwards.
    Didn’t know, that <ul> is like a div and have a standard margin in IE, where can i find such individual characteristics for browsers? Is there any resource?
    And already didn’t know that there are pseudo-elements for <li>. Just know like this a:hover for links.

    Thanks a lot, without you I would like to just make a picture and put it on the website :D

    Rob
    # December 10, 2008 at 2:17 pm

    Most designers start their documents with a CSS reset, to remove all margins and paddings and the like… There is a whole section of Yahoo labs dedicated to it.

    Its from here

    It looks like this…

    Code:
    /*
    Copyright (c) 2008, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:

    http://developer.yahoo.net/yui/license.txt

    version: 2.6.0
    */

    html {color:#000;background:#FFF;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
    table {border-collapse:collapse;border-spacing:0;}
    fieldset,img {border:0;}
    address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
    li {list-style:none;}
    caption,th {text-align:left;}
    h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
    q:before,q:after {content:”;}
    abbr,acronym {border:0;font-variant:normal;}

    /* to preserve line-height and selector appearance */
    sup {vertical-align:text-top;}
    sub {vertical-align:text-bottom;}
    input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}

    /*to enable resizing for IE*/
    input,textarea,select {*font-size:100%;}

    /*because legend doesn’t inherit in IE */
    legend {color:#000;}
    del,ins {text-decoration:none;}

    It gives you a real blank canvas… :)

    # December 11, 2008 at 6:10 am

    hi, maybe you can’t help on this, but why is, after resetting everything, the menu (hover to see it) yet in firefox some pixels away from the white area, than in IE ?
    http://www.sadsunray.de/test/hld

    and another question, can I provide different css-styles for different browsers?

    and one more question, when you expand the area in IE and you have Cleartype ON, the new paragraph is not rendered, its not really ideal. how can I fix this?

    thanks again.

Viewing 6 posts - 16 through 21 (of 21 total)

You must be logged in to reply to this topic.

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