SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV Alignment

    I accidentally posted a topic and I decided to make it useful. If anyone can rename the subject to something that tells what this thread is about that would be nice.

    In Mozilla there is a vertical scrollbar. In IE, the STuff within the #header doesn't line up correctly. Any help is appreciated.

    Page With Error: http://www.derelictstudios.net/Derelict/index.html
    What it is supposed to look like: http://www.derelictstudios.net/Derel...s/Supposed.gif

    Index
    Code:
    <html>
    <head>
    <title>Derelict Studios</title>
    <link rel='stylesheet' type='text/css' href='styles.css'>
    </head>
    <body>
    <div id='page'>
    <div id='stripe'></div>
    <div id='menutop'></div>
    <div id='left'>
    <a href='http://www.derelictstudios.net'>
    <img border='0' src='images/ds-logo.gif'>
    </a>
    </div>
    <div id='header'>
    <div id='top'>News Forums About FAQ Feedback</div>
    <div id='bot'></div>
    </div>
    <div id='right'></div>
    <div id='stats'>STuff here</div>
    <div id='content'></div>
    <div id='footer'><div id='copy'> Stuff</div></div>
    </div>
    </body>
    </html>
    CSS
    Code:
    /* Globals */
    html, body, #page {
    min-height: 100%;
    width: 100%;
    height: 100%;
    }
    BODY {
    font-family : Verdana;
    font-size : 10px;
    color: #FFFFFF;
    background-color: #2C2C2C;
    scrollbar-face-color: #4C473E;
    scrollbar-shadow-color: #333333;
    scrollbar-highlight-color: #797979;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #3E4246;
    scrollbar-track-color: #797979;
    scrollbar-arrow-color: #C6AD69;
    margin:0;
    padding:0;
    }
    /*
    * The "height" above is a hack for IE5+/Win. Below we adjust
    * it using the child selector to hide from IE5+/Win
    */
    html>body, html>body #page {
    height: auto;
    }
    /*
    * Without this, Moz1.0 adds a vertical scrollbar
    */
    #page {
    position: absolute;
    top: 0;
    left: 0;
    }
    #stripe {
    height: 10px;
    width: 100%;
    background-image: url('images/stripe.gif');
    }
    #menutop {
    height: 6px;
    width: 100%;
    background-color: #31302D;
    }
    #header {
    height: 42px;
    width: 100%;
    margin-left: 186px;
    margin-right: 188px;
    background-color: #4C473E;
    }
    #left, #right {
    top: 16px;
    height: 42px;
    position: absolute;
    }
    #left {
    left: 0;
    width: 186px;
    }
    #right {
    right:0;
    background-image: url('images/hex.gif');
    width: 188px;
    }
    #top {
    clear: both;
    height: 18px;
    background: #31302D;
    }
    #top table {
    font-family : Verdana;
    font-size : 10pt;
    }
    #bot {
    clear: both;
    height: 24px;
    background: url('images/curve.gif') no-repeat top left;
    }
    #stats {
    height: 22px;
    width: 100%;
    background-color: #363530;
    border: #2C2C2C solid;
    border-width: 1px 0px 1px 0px;
    padding-top: 1px;
    text-align: center;
    }
    #stats table {
    font-family : Verdana;
    font-size : 10px;
    }
    .orange {
    color: #D39100;
    }
    #content {
    width: 100%;
    height: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    text-align: left;
    }
    #footer {
    padding-top: 6px;
    padding-bottom: 3px;
    position:absolute;
    bottom: 0;
    width: 100%;
    background-color: #4C473E;
    text-align: center;
    }
    #footer #menu {
    }
    #footer #copy {
    padding-bottom: 2px;
    color: #31302D;
    background-color: #797979;
    }
    Last edited by tmapm; Nov 16, 2003 at 19:10.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The reason for the differences is that in IE you are working in quirks mode, which makes it harder to be consistent across browsers.

    However if you want to use the coloured scrollbars then you will have to stay in quirks mode for them to display anyway. (Of course they won't validate though).

    Try changing the two styles below as follows:
    Code:
    #menutop {
    height: 4px;
    width: 100%;
    background-color: #31302D;
    overflow:hidden;
    }
    html>body #menutop {height:6px}
    #header {
    height: 42px;
    margin-left:186px;
    background-color: #4C473E;
    }
    The reaon mozilla had a horizontal scrollbar was that you set a left and right margin of 186px and a width of 100%. This makes it too wide for the viewport.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I figured out the Mozilla Problem on a local copy. The only thing left is that the menutop bar is displaying only the 4 px in IE. It looks fine is mozilla though.
    Last edited by tmapm; Nov 16, 2003 at 19:04.

  4. #4
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know of specific IE tags that will act the same as the html>body #menutop {height:6px} but not in any other browser?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tmapm
    Does anyone know of specific IE tags that will act the same as the html>body #menutop {height:6px} but not in any other browser?
    I believe MS has some CSS attributes that work only in IE, but I'm not even close to positive about that. Your CSS wouldn't validate if you used them though, if you care about that.

    ~DB

  6. #6
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just need something to fix the last remianing bug. I don't really care if it validates or not. If it works I am happy.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Does anyone know of specific IE tags that will act the same as the html>body #menutop {height:6px} but not in any other browser?
    HI,

    The universal selector can be used to feed IE specific styles only, when coupled with the html element.
    e.g.
    Code:
    *html .test {width:500px}
    Only IE will get the above style due to it lack of understanding of the rules. Other browsers will ignore it.

    http://www.info.com.ph/~etan/w3panth...arhtmlbug.html

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    Hope that helps.

    Paul

  8. #8
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It did help, but unfortunately it is not the fix to the problem. IN IE the #menutop still stays 4 pixels and the reminaing 2 are cut off from the top. After the second grey line, there shouldn't be any black. http://www.derelictstudios.net/Derelict/index.html

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if I can see the problem you're talking about, but you could try changing these styles to make your browser consisten between IE6 and mozilla without a hack.
    Code:
    #stripe {
    height: 10px;
    overflow:hidden;
    width: 100%;
    background-image: url('images/stripe.gif');
    }
    #menutop {
    height: 6px;
    width: 100%;
    background-color: #31302D;
    overflow:hidden;
    }
    and then get rid of this altogether.
    Code:
    html>body #menutop {height:6px}
    Hope that helps.

    Paul

  10. #10
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try it later in 5 hours after I get home from school and paino practice, 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
  •