1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS I.E 6.0 versus Firefox Problems (need help!)

Discussion in 'CSS' started by x11joex11, Sep 25, 2007.

  1. #1
    Hello, first of all I'm pretty new to the forum, but I have a question that perhaps someone can help me with.

    I have a page here, h-ttp://classexams.com/illusivetest/, that I made that displays correctly in firefox putting the white rectangular box below the image and in I.E 6.0, it draws the white rectangular box inside of the header image. I can't figure out for the life of me why I.E is rendering it differently here. Shouldn't I.E draw the white box after the header div like it does in firefox? Maybe someone can help me understand what is going on so I can become a better coder with this stuff.

    I've made the code very easy I hope and concise as possible but if you guys have any idea to make it simpler I am all ears. My goal is to learn to program in the most efficient way possible and keep this to one CSS file hopefully instead of 2.

    For reference:

    CSS File: h-ttp://classexams.com/illusivetest/main.css
    HTML File: h-ttp://classexams.com/illusivetest/index.php

    For some it woudn't let me make those links because I don't have privileges :(, so you'll have to put it in your addressbar.
     
    x11joex11, Sep 25, 2007 IP
  2. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    No one has any ideas? =(
     
    x11joex11, Sep 25, 2007 IP
  3. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I haven't looked at it but you should start learning about IE 6 parsing bugs. It has several. The box model is buggy, the margin collapse is flaky, there's the 3 pixel problem, and others such as the rollover bug, the position:fixed bug, the float bug, the centering bug, etc.

    There are several approaches to dealing with these bugs. One involves the use of the star hack which is a selector for a non-existant container that IE thinks exists (exploiting one bug to fix another bug). Another is to invoke the hasLayout property by using nonsense dimensions, and another is to write a separate stylesheet that only IE 6 uses (conditional comments). There's also the Holly hack and the backslash hack that have limited utility.

    Google up IE 6 hacks to get started learning the fixes.
     
    qube99, Sep 25, 2007 IP
  4. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #4
    <div id="header"</div>

    Missing an ending >
     
    krt, Sep 25, 2007 IP
  5. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah that was it! wow I really need to be careful about that stuff. Do you know any good HTML mark-up checking sites, so I can verify my HTML for errors in the future?
     
    x11joex11, Sep 26, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    In the end, there can be only one.

    http://validator.w3.org

    Though I suggest testing in Opera (well, I suggest testing in at least five browsers), just because on any page you are visiting in Opera you can hit CTRL-ALT-V which will send the page to the above validator.

    Likewise in Opera you can add custom buttons to do things like open the current page in other browsers or send the page for CSS validation as well.
     
    deathshadow, Sep 26, 2007 IP
  7. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks for the heads up (link to the validation service), this time I have a completely different error. Now when you look at the page in FireFox it displays correctly again, but in I.E it's adding space after my div for side_nav_spacer. Not so sure why I.E is adding the extra space :(? I've read something before about this but don't remember where to go to fix it or what to do.
     
    x11joex11, Sep 26, 2007 IP
  8. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    you probably already know this but if you have firefox with the developer toolbar you can CTRL-ATL-A to validate the page your on.. i only suggest this because firefox just seems to run faster than opera for me, despite what i've read..
     
    Jamie18, Sep 26, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Whereas I say **** firefux and the open sores it rode in on, since it is nothing but a stability nightmare for me - regardless of OS or hardware I can crash EVERY version in 20 minutes of use or less - even on people's machines where they claim never to have had a problem.

    If I wasn't a web developer that steaming pile of manure would be nowhere near my machine.
     
    deathshadow, Sep 26, 2007 IP
  10. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Deathshadow, you should try a real computer someday. Anyone can crash WhenDoze running any software at any time. In fact, it's hard not to. I'd have a sour stomach just like you if I ran it for a living.
     
    qube99, Sep 26, 2007 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I think he is crashing fire fox and not his machine.

    My husband regularly crashes FF on his Ubuntu machine... but mostly because for some reason it can't handle a lot of Flash sites. Which is what Konqueror is used for : )
     
    Stomme poes, Sep 26, 2007 IP
  12. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    you guys are something else, I've been reading some of your posts =P.

    Anyways, any idea why Internet-Explorer is showing the 'side_nav_spacer' incorrectly versus Firefox. (For the record I am only using Firefox because it's what my client wants it to work on. I also don't like it for crashing reasons, and I especially don't like I.E).

    The code for quick reference is...

    div#side_menu{
    width:165px;
    margin: 0 0 0 4px;
    }
    div#side_top_nav_spacer{
    /*width already specified by side menu width*/

    height:7px;
    background-image:url('images/css/side_top_nav_spacer.png');
    background-repeat:no-repeat;
    }

    div#side_nav_spacer{
    padding:0px;
    background-image:url('images/css/side_nav_spacer.png');
    background-repeat:repeat-y;
    height:500px;
    /*width already specified by side menu width*/
    }

    The HTML that displays it is...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    <head>
    <title>Illusive Entertainment L.L.C</title>
    <link type="text/css" rel="stylesheet" href="main.css">
    </head>
    <body>
    <div id="wrapper"><!-- Keep Everything Locked Into 900px -->
    <div id="header"></div><!--The I.E Header Image -->

    <!--Navigation-->
    <div id="top_nav">
    <div id="topnav_links">
    <a href="#" id="nav_left1_down"></a>
    <div id="top_nav_spacer"></div>
    <a href="#" id="nav_left1"></a>
    <div id="top_nav_spacer"></div>
    <a href="#" id="nav_left1"></a>
    <div id="top_nav_spacer"></div>
    <a href="#" id="nav_left1"></a>
    </div>
    </div>
    <!--End Navigation-->

    <!--Side Menu-->
    <div id="side_menu">
    <div id="side_top_nav_spacer"></div>
    <div id="side_nav_spacer"></div>
    </div>
    <!--End Side Menu-->

    </div><!--End of Wrapper Div-->
    </body>
    </html>

    although... I don't think the html is the problem this time. I am aware of using ID more then once in some areas but that is only temporary to test spacing.

    Any ideas anyone? It's like I.E is adding 5px-6px between the top left button it's top spacer and I'm not sure why.

    again the site is here, h-ttp://classexams.com/illusivetest/
     
    x11joex11, Sep 26, 2007 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Did you see 'regardless of OS or hardware'? You do read posts before replying, right?

    WinXP, Vista, Ubuntu, OSX - doesn't matter, Firefux is a unstable pile of crap for me... be it a P3, A64, Core 2 Duo or even a PPC - doesn't matter which, I can crash Firefux - sorry 'hang'. Which was the ONLY response I got from them was an outright attack for using the word 'crash' instead of 'hang' - a distinction I've not heard in three decades of computing.

    But then I don't trust any program who's coders try to pass off a memory leak as a 'feature' or tells you to solve the problem by not using plugins - the only reason I'd choose to use it in the first place.

    So again, **** firefux and the open sores it rode in on.
     
    deathshadow, Sep 26, 2007 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    If you mean the extra space BELOW the menu items, that is likely a float error.

    That said for a menu like that, it REALLY should be a list... and I'm not sure what's with the spacing div's, but I would DEFINATELY Axe those as they aren't doing anything but waste bandwidth.

    Ah wait, I see it now. It's that 'spacer' (you really should be using padding and margins instead of spacers) - IE has a height issue that is probably screwing things up.

    Hang on, I'll take a stab at a rewrite that should help clean things up.

    -- edit --

    While working on the page, I discovered that despite the doctype IE is still in quirks mode... then I looked at the doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

    Incomplete and invalid.

    I suggest swapping out the invalid doctype you are using for:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    Which clears up a number of compatability issues by getting IE back into standards mode.
     
    deathshadow, Sep 26, 2007 IP
  15. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    That seems to fix the error on I.E 7.0, but I.E 6.0 still has the spacing error...Thanks for the heads up though, it definently at least fixed some of the issues, especially concerning the black background color. Still baffles me the extra space going on.

    Let me know if you are able to find a way to rewrite the code, and help me learn from this =), I really appreciate it! really!
     
    x11joex11, Sep 26, 2007 IP
  16. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #16
    Add a font-size:0; to the #side_top_nav_spacer. This should fix the gap.
     
    VimF, Sep 26, 2007 IP
  17. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Wow it worked, how did you know to do that?
     
    x11joex11, Sep 26, 2007 IP
  18. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    quick question, how do you vertically align text, currently I'm trying to get news to be centered in the div vertically not horizontally. I tried the vertical-align:middle; but it didn't seem to work, any ideas?

    [note: I got it to work now in firefox, but once again I.E doesn't want to comply :(]

    here is the code I used to center...

    div.container {
    width: 100%;
    height: 100%;
    position: relative;
    display: table;
    }

    p {
    display: table-cell;
    vertical-align: middle;
    }

    and the divs it goes through before that are...

    div#side_menu{
    width:165px;
    margin: 0 0 0 4px;
    }
    div#side_top_nav_spacer{
    /*width already specified by side menu width*/
    font-size:0;/*Fixes I.E Spacing Bug*/
    height:7px;
    background-image:url('images/css/side_top_nav_spacer.png');
    background-repeat:no-repeat;
    }

    div#side_nav_spacer{
    margin:0px;
    background-image:url('images/css/side_nav_spacer.png');
    background-repeat:repeat-y;
    height:500px;
    /*width already specified by side menu width*/
    }

    div#side_nav_links{
    margin: 0 0px 0 0;
    }

    div#side_nav_links a {
    display: block;
    padding: 0;
    height: 30px;
    width: 165px;
    }

    div#side_nav_links a#side_nav_button:hover {
    background-position: 0 -30px !important;
    }
    div#side_nav_links a#side_nav_button {
    background-image:url('images/css/side_nav_buttons.png');
    background-repeat: no-repeat;
    width:165px;
    height:30px;
    color:#FFFFFF;
    font: 16px Verdana;
    text-decoration: none;
    text-indent: 28px;
    }

    The HTML that displays it is...

    <!--Side Menu-->
    <div id="side_menu">
    <div id="side_top_nav_spacer"></div>
    <div id="side_nav_links">
    <a href="#" id="side_nav_button"><div class="container"><p>News</p></div></a>
    </div>
    <div id="side_nav_spacer"></div>
    </div>
    <!--End Side Menu-->
     
    x11joex11, Sep 26, 2007 IP
  19. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Apparently the solution was adding line-height: 30px !important; to div#side_nav_links a
     
    x11joex11, Sep 26, 2007 IP
  20. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    x11joex11, Sep 26, 2007 IP