SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS quirks in Mozilla & IE?

    I am having a strange problem with Mozilla. I have a CSS file attached to an HTML page. The CSS is relatively normal; no weird tricks are used.

    My problem is that I can hit "ctrl-F5", which is a full reload that involves grabbing the page again and re-parsing it (basically bypassing the cache), two times and I'll get two different results. Basically, refreshing the page gives me one of three results.

    The three results are:
    • The border-bottom extends the whole length of the floating element
    • The border-bottom extends about 50% of the floating element
    • The entire floating element goes all the way to the top of the page and is obscured by the logo that is on top of it


    Here is the relevant code:

    html
    Code:
    <div id="bar">
        <div id="logo">
            <img src="logo3.gif" alt="logo" />
        </div>
    
        <div id="search">
            <form action="fff">
                <div>
                    <input type="text" name="query" class="searchinputform" size="30" />
                    <input class="searchbutton" type="submit" value="search" /> <br />
                    <a href="help">query tips</a> &nbsp;<a href="adv">advanced search</a>&nbsp;
                </div>
            </form>
        </div>
    </div>
    
    <div id="boxes">
        <div id="navbox">
            <h1>docs</h1>
            <a href="Search">search</a><br />
            <a href="Browse">browse</a><br /><br />
    
            <h1>user</h1>
            <a href="profile">profile</a><br />
            <a href="prefs">prefs</a><br />
            <a href="logout">log out</a><br /><br />
    
            <h1>site</h1>
            <a href="home">home</a><br />
            <a href="About">about</a><br />
            <a href="Contact">contact</a><br />
        </div>
    
        <div id="breadcrumbbox">
            <h1>location</h1>
            <a href="perl">Perl</a><br />
            <img src="hierarrow.gif" class="hierarrow1" alt="down arrow" /><a href="Modules">Modules</a><br />
            <img src="hierarrow.gif" class="hierarrow2" alt="down arrow" /><span class="currentcrumb">Time::Local</span>
            <h1>blahbb</h1>
            gggg
        </div>
    </div>
    Notes: The "logo" div holds the logo that sometimes obscures the element and both "breadcrumbbox" <h1>s exhibit the weird border-bottom behavior (while the other <h1>s in "navbox don't).

    css
    Code:
    /* BOXES */
    #boxes {
        float: left;
        padding: 8px 3px 3px 3px;
        width: 110px;
        clear: left;
        font-size: .8em;
    }
    
    #boxes h1 {
        margin: 0px 0px 0px 0px;
        font-size: 1.0em;
        border-bottom: solid 1px black;
    }
    
    #boxes a {
        color: #003399;
        background-color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }
    
    #boxes #navbox a:hover {
        background-color: #cccccc;
        color: #003399;
        text-decoration: none;
    }
    
    #boxes #breadcrumbbox a:hover {
        text-decoration: none;
        color: #cc0000;
        background-color: #ffffff;
    }
    
    #boxes #navbox, #boxes #breadcrumbbox {
        float: left;
        padding: 9px 9px 3px 3px;
        clear: both;
    }
    
    #boxes #navbox a {
        line-height: 200%;
        padding: 3px 6px 3px 6px;
    }
    
    #boxes #breadcrumbbox img {
        margin-right: 2px;
        margin-bottom: 2px;
    }
    
    /* LOGO BOX */
    #bar #logo {
        float: left;
    }
    
    /* BAR */
    #bar {
        padding: 7px 15px 0px 7px;
        clear: both;
    }
    Here is the template so that you can see what is going on in Mozilla too. I suspect it happens in every Mozilla installation, because I have tested it with two and both show the same weirdness. http://qslack.com/template2/template2.html

    If you go there in Moz, just hit CTRL-F5 a lot until you see the borders change or the element go all the way up. It works

    What I want is for the bottom borders under "location" and "blahbb" (on the left navigation bar) to be the same as the ones above them. I also want the entire "boxes" div (which holds the nav, location, and blahbb) to refrain from pushing itself underneath the logo at the top of the page.

    In IE, the results do not change if I refresh a lot. But the bottom borders underneath "location" and "blahbb" are not the same length as the ones above them.

    I have validated both the HTML and the CSS. The HTML is valid XHTML 1.0 strict and the CSS is valid CSS2.

    I realize that this is a lot of code and a lot to understand, but I am going CRAZY over this. This should NOT be happening, and I was wondering if anyone could give me some advice or help. I'm sure that I am doing something stupid here. Thank you!

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Well, your not totally crazy as I can see those two bottom black lines lengthen and shorten, perhaps it's the excessive use of id rather than the class attribute.

    Perhaps adding something like either of these two suggestions:

    #boxes h1 {width: 20px;}

    or

    h1 {width: 20px;}

    Therefore the above should set the line to "x" pixels, as you see fit and prevent if from growing or shrinking in Mozilla 1.0.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, setting the width attribute works for my first problem!

    I thought the way I was doing the CSS was the right way. I know that I should use class when I have more than one thing I need to assign to it, but that that hasn't happened how. How should I be doing it!

    Thanks!


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
  •