Grow your CSS skills. Land your dream job.

my css needs an update?

  • # May 4, 2009 at 7:31 am

    Hi,
    this is my first post here, I hope I’ll face good experience learning from your community.

    Well, I’m beginner in web design, I have only two projects behind me, and now I need your suggestions to solve the following issues in the third one [project]. I have designed web site which works pretty good for Firefox, Safari, GoogleChrome, IE7 …
    but I’m not content how it appears in IE8 and Opera.

    IE8 pulls down layer, located right behind header area, [id="kartica_simpozijum"] for a 10-13 px what you can find out on http://www.pianomemorial.rs/3.memorijal … /main3.php . It seems that IE8 doesn’t react on "if" rule. I suspect something is wrong with the following css codes:

    Code:
    #header {
    background-color:#9DCEFF;
    width:auto;
    height:80px;
    padding:0;
    margin: 0 0 0px 0;
    z-index:1800;
    }
    #kartica {
    position:relative;
    float:left;
    width:140px;
    height:20px;
    z-index:1702;
    margin:0px 0 10px 0;
    padding:0px 0 0px 0;
    background-color:#9DCEFF;
    clear:right;
    }
    #kartica_simpozijum {
    position: relative;
    float:right;
    width:710px;
    height:20px;
    z-index:1701;
    margin: -30px 0 10px 135px;
    padding:0px 0 0px 0;
    border-bottom:none;
    border-right:none;
    background-color:#5197d6;
    clear: left;
    }
    #kartica_simpozijum ul {
    list-style:none;
    float:left;
    margin:-0.40% 0 0 200px;
    padding:0;
    background-position:center;

    }
    #kartica_simpozijum li {
    position:relative;
    float:left;
    margin:0;
    padding:0 0 0 10px;
    }

    #kartica_simpozijum a {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#164875;
    padding:0;
    margin:0;
    text-decoration:none;
    }
    #kartica_simpozijum a:hover {
    color:#9DCEFF;
    }

    From the other side, Opera opens right the mentioned part of the page, but it pulls down the footer approximately 20px more then expected. I’ll put the "suspected code", url is the same:

    Code:
    #footer {
    clear:both;
    margin: 5px 0 0 0;
    height:60px;
    width: auto;
    background-color: #9DCEFF;
    }

    The footer is nested in middle container [id="srednji"] as same as main navigation bar [id="outside"] and image container [id="div4"]

    Looking forward to your suggestions, thanks in advance! :)

    # May 4, 2009 at 7:56 am

    See if this makes a difference:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    If so you might want to investigate a proper CSS reset.
    Also, validate your html, you have at least one extra div closing tag in there.

    # May 4, 2009 at 11:18 am

    Opera issue has been fixed, I have changed margin values from 5px 0 0 0 to 20px 0 0 0
    Fortunately, this fix didn’t make any unwanted change in other browser behavior.

    Please, if you have any spared time, concentrate on IE8 issue.

    "apostrophe" wrote:
    Also, validate your html, you have at least one extra div closing tag in there.

    I have validated, it said that it was clean. Doubled tags you have noticed are the result of nested tags in html code.

    # May 4, 2009 at 12:13 pm

    18 errors, only 7 of which are connected to your flash embed. http://validator.w3.org/#validate_by_input

    # May 13, 2009 at 8:56 am
    "apostrophe" wrote:
    18 errors, only 7 of which are connected to your flash embed. http://validator.w3.org/#validate_by_input

    thanks apostrophe, I got it, I had no idea about validation problems of embed tags

    Now back to the topic, did anyone get a clue about IE8 issues according to my subject?

    # May 13, 2009 at 10:05 am
    Quote:
    thanks apostrophe, I got it, I had no idea about validation problems of embed tags

    Now back to the topic, did anyone get a clue about IE8 issues according to my subject?

    If you got it then why don’t you do something about it? It might have half a chance of working the same in all browsers if you sort out all those mis-matched html tags.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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