SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two problems, one of which is in IE6

    Hi - Here is the layout I'm working on: http://www.oxtalk.com/ksba

    1. You can see that the header doesn't enclose the tabbed navigation at the top. In Firefox the tabs overlap the content below it and in IE7 the tabs are simply cut off. I can fix this by giving #header a height of 138px but I didn't know if this is the best option or not? I assumed that I didn't have something cleared properly?

    2. I've only checked the site in FF, IE6/IE7, and Opera thus far but if you check it out in IE6 the #header-right isn't displaying correctly. It's the same height as the header for some reason. Here is an image of what I'm seeing in IE6:



    The site does validate, so I don't really know what else to do.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually, in Firefox the text underneath overlaps the tabs and it looks a bit bad, so I'm not actually sure what it's supposed to look like. Are those tabs supposed to be a part of the rounded blue thing, like in the screenshot? Or does Firefox have it almost right?

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Actually, in Firefox the text underneath overlaps the tabs and it looks a bit bad, so I'm not actually sure what it's supposed to look like. Are those tabs supposed to be a part of the rounded blue thing, like in the screenshot? Or does Firefox have it almost right?


    Hi - Sorry for the confusion here. Here is a screen shot of what I'm wanting it to look like (this is in FF with the width on #header set to 138px).



    Here is what I see in FF:



    Here is what I see in IE7:

    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edited...: Sorry... I misunderstood the problem.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you have the structure wrong. Too many divs involved in that header. I would use this structure:
    HTML Code:
    <div id="header">
      <a>logo</a>
      <div>search area</div>
      <address>address info</address>
    </div>
    <ul>tabs</ul>
    <div id="content">
    ...
    </div>
    If you float the UL right and then give it a negative margin-top equal to the height of the tabs, it should work. Don't give #header a fixed height. Instead, float the search area and address to the right and clear them by giving #header overflow:auto. Also give #header a padding-bottom equal to the height of the tabs and probably you'll need to give the <address> a bit of margin-bottom too. I'm not sure how nicely the <address> thing will behave cross-browser, but it's probably the most semantically relevant thing to use there.

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I've tweaked the html a little and fixed a few things and broken some others. lol I'm sorry Raffles, I couldn't change everything to your specifications as I was a little confused on what you were telling me to do.

    Here is my updated code: http://www.oxtalk.com/ksba/index2.html

    FireFox looks almost right except for the large space between the search area and the address. I can't find where this space is coming from. It's almost like the logo is spanning across the entire width of the header (if you remove the html anchor which I've used for the logo from the html, you'll see the site react correctly in FF).

    Internet explorer is close to right also, it just does not have the gap between the search area and the address that Firefox and Opera have. Although in IE6 an IE7, the nav manu is not displaying correctly, it's all jumbled up on the right side of the header instead of separated nice and neat. I can fix this by setting a width on the nav ul, but I shouldn't have to do that for this to work I don't think?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The big space was because you were clearing both, when you only needed to clear right. Anyway, I had a play about with my idea and removed what I thought was unnecessary code both in the HTML and CSS:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    
    <style type="text/css" media="screen">
    /*-------------------------------------------------
    Styles for www.ksba.org
    Version:        1.0
    Author:            Deron Sizemore
    Author URI:        http://www.randomjabber.com/
    -------------------------------------------------*/
    * {
    padding: 0;
    margin: 0;
    }
    
    body {
    text-align: center;
    background: #f3f1e9;
    border-top: 15px solid #00529c;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
    font-size: small;
    min-width: 870px;
    }
    
    * html body {
    font-size: x-small; /* for IE5/Win */
    f\ont-size: small; /* for other IE versions */
    }
    
    /* Page Structure
    ----------------------------------------------------------------*/
    
    #wrapper {
    width: 850px;
    margin: 0 auto;
    text-align: left;
    background: #f3f1e9 url(contentbg.gif) repeat-x left top;
    }
    
    #content {
    float: left;
    width: 515px;
    }
    
    #secondary {
    float: right;
    width: 310px;
    }
    
    /* Header
    ----------------------------------------------------------------*/
    
    #header {
    background: #dbd5c5;
    overflow:auto;
    }
    
    * html #header {
      height:1&#37;; /* haslayout in IE6 */
    }
    
    #header a.logo {
    float: left;
    width: 202px;
    height: 113px;
    background: url(logo.gif) no-repeat;
    display: block;
    color:#dbd5c5;
    font-size:0.1em;
    margin-top: 10px;
    }
    
    #search {
    float: right;
    background: #00529c url(headerrightbottom.gif) no-repeat left bottom;
    height: 27px;
    width: 500px;
    margin-right:50px;
    }
    
    #search ul {
    float: left;
    list-style: none;
    font-size: 85%;
    padding: 5px 0 0 10px;
    }
    
    #search ul li {
    float: left;
    text-transform:uppercase;
    }
    
    #search ul li.borderleft {
    border-left: 1px solid #fff;
    }
    
    #search ul li a {
    display: block;
    padding: 0 .8em;
    line-height: 1em;
    text-decoration: none;
    color: #fff;
    } 
    #search ul li a:hover {
    text-decoration: underline;
    }
    
    address {
    margin:20px 50px 55px 0;
    clear: right;
    color: #666;
    text-align: right;
    font-size: 85%;
    float: right;
    font-style:normal;
    }
    
    /* Search
    --------------------*/
    
    input.search {
    border: none;
    background: #fff url(magnifier.gif) no-repeat .2em .3em;
    padding: 1px 2px 1px 18px;
    vertical-align: middle;
    color: #666;
    width: 165px;
    }
    
    input.go {
    margin-left: 3px;
    vertical-align: middle;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 85%;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
    cursor: pointer;
    padding-top: 1px;
    }
    
    
    /* Navigation
    ----------------------------------------------------------------*/
    
    ul#main-nav {
    list-style: none;
    float: right;
    margin:-2.6em 50px 0 0;
    position:relative;
    z-index:2;
    }
    
    ul#main-nav li {
    float: left;
    }
    
    ul#main-nav a {
    float: left;
    display: block;
    margin-left: 3px;
    padding:0.6em;
    color: #fff;
    text-decoration: none;
    background: #00529c;
    }
    
    ul#main-nav a:visited {
    background: #00529c;
    }
    
    ul#main-nav a:hover {
    background: #1570c1;
    }
    
    /* Main Content
    ----------------------------------------------------------------*/
    
    #content p {
    padding-left: 15px;
    }
    
    /* Secondary Content
    ----------------------------------------------------------------*/
    
    #secondary p {
    padding-right: 15px;
    }
    
    /* Footer
    ----------------------------------------------------------------*/
    
    #footer {
    clear: both;
    }
    
    </style></head><body>
    
    <div id="header">
        <a href="#" title="Kentucky Schoool Boards Association" class="logo">Kentucky Schoool Boards Association</a>        
        <div id="search">
          <ul>
                <li><a href="#">career opportunities</a></li>
                <li class="borderleft"><a href="#">contact</a></li>
            </ul>
            <input name="keywords" maxlength="50" class="search" size="25" type="text">
            <input name="go" value="SEARCH" class="go" type="submit">
        </div>
        <address>
            260 DEMOCRAT DRIVE<br>
            FRANKFORT, KENTUCKY 40601<br>
            PHONE: 502-695-4630
        </address>    
    </div>
    
    <ul id="main-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">ASK KSBA</a></li>
        <li><a href="#">DEPARTMENTS</a></li>
        <li><a href="#">LINKS</a></li>
    </ul>
    
    <div id="wrapper">
        <div id="content">
        <p>Lorem
    ipsum dolor sit amet, consectetuer adipiscing elit. Ut sagittis dolor
    sit amet eros. Morbi at mauris. Proin accumsan malesuada eros. In
    lacinia. Phasellus id nulla id felis elementum nonummy. Donec dapibus
    ipsum sed nisi. Cras et odio vel velit nonummy rhoncus. Praesent mi
    nisi, volutpat at, tincidunt sit amet, consequat dignissim, risus. Nunc
    odio metus, porta ut, aliquet a, gravida id, neque. Nulla felis. Cras
    blandit mi vitae massa. Donec euismod nisl quis mauris. Aenean pharetra
    dolor convallis ipsum. In tincidunt, lorem sit amet imperdiet accumsan,
    erat leo cursus quam, quis luctus erat lorem non urna. Morbi diam enim,
    euismod ut, gravida vel, dapibus a, dui. Nulla mauris. Ut facilisis
    faucibus massa. Nullam hendrerit volutpat elit. Mauris feugiat, ipsum
    et facilisis tristique, erat nulla blandit lectus, vitae tempor risus
    lorem in leo. Pellentesque sed libero at est euismod placerat. Praesent
    vel dui a eros dignissim hendrerit. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Sed adipiscing vestibulum tortor. Etiam
    eu nisi eget massa porttitor ullamcorper. Quisque elit purus, congue
    sed, congue eu, ultricies quis, elit. Nullam metus elit, hendrerit
    eget, pharetra ut, eleifend nec, orci. Sed convallis velit eu dui.
    Suspendisse adipiscing nisl sed erat. Sed in sem. Fusce at enim. Aenean
    ut ante sit amet nibh ultrices porta. Praesent nibh quam, lobortis a,
    placerat ac, rhoncus eu, turpis.</p>
        </div>
    
        <div id="secondary">
        <p>Nulla
    mauris. Ut facilisis faucibus massa. Nullam hendrerit volutpat elit.
    Mauris feugiat, ipsum et facilisis tristique, erat nulla blandit
    lectus, vitae tempor risus lorem in leo. Pellentesque sed libero at est
    euismod placerat. Praesent vel dui a eros dignissim hendrerit. Lorem
    ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing
    vestibulum tortor. Etiam eu nisi eget massa porttitor ullamcorper.
    Quisque elit purus, congue sed, congue eu, ultricies quis, elit. Nullam
    metus elit, hendrerit eget, pharetra ut, eleifend nec, orci. Sed
    convallis velit eu dui. Suspendisse adipiscing nisl sed erat. Sed in
    sem. Fusce at enim. Aenean ut ante sit amet nibh ultrices porta.
    Praesent nibh quam, lobortis a, placerat ac, rhoncus eu, turpis.</p>     
        </div>
    
        <div id="footer">
        <p>footer</p>
        </div>
    </div>
    
    </body></html>
    It works all right, though I'm not so sure now about the nav being outside the header. Maybe it should be in there after all.

    BTW the code seems to be HTML but you have an XHTML doctype. I'd change the latter.

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    The big space was because you were clearing both, when you only needed to clear right. Anyway, I had a play about with my idea and removed what I thought was unnecessary code both in the HTML and CSS:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    
    <style type="text/css" media="screen">
    /*-------------------------------------------------
    Styles for www.ksba.org
    Version:        1.0
    Author:            Deron Sizemore
    Author URI:        http://www.randomjabber.com/
    -------------------------------------------------*/
    * {
    padding: 0;
    margin: 0;
    }
    
    body {
    text-align: center;
    background: #f3f1e9;
    border-top: 15px solid #00529c;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
    font-size: small;
    min-width: 870px;
    }
    
    * html body {
    font-size: x-small; /* for IE5/Win */
    f\ont-size: small; /* for other IE versions */
    }
    
    /* Page Structure
    ----------------------------------------------------------------*/
    
    #wrapper {
    width: 850px;
    margin: 0 auto;
    text-align: left;
    background: #f3f1e9 url(contentbg.gif) repeat-x left top;
    }
    
    #content {
    float: left;
    width: 515px;
    }
    
    #secondary {
    float: right;
    width: 310px;
    }
    
    /* Header
    ----------------------------------------------------------------*/
    
    #header {
    background: #dbd5c5;
    overflow:auto;
    }
    
    * html #header {
      height:1%; /* haslayout in IE6 */
    }
    
    #header a.logo {
    float: left;
    width: 202px;
    height: 113px;
    background: url(logo.gif) no-repeat;
    display: block;
    color:#dbd5c5;
    font-size:0.1em;
    margin-top: 10px;
    }
    
    #search {
    float: right;
    background: #00529c url(headerrightbottom.gif) no-repeat left bottom;
    height: 27px;
    width: 500px;
    margin-right:50px;
    }
    
    #search ul {
    float: left;
    list-style: none;
    font-size: 85%;
    padding: 5px 0 0 10px;
    }
    
    #search ul li {
    float: left;
    text-transform:uppercase;
    }
    
    #search ul li.borderleft {
    border-left: 1px solid #fff;
    }
    
    #search ul li a {
    display: block;
    padding: 0 .8em;
    line-height: 1em;
    text-decoration: none;
    color: #fff;
    } 
    #search ul li a:hover {
    text-decoration: underline;
    }
    
    address {
    margin:20px 50px 55px 0;
    clear: right;
    color: #666;
    text-align: right;
    font-size: 85%;
    float: right;
    font-style:normal;
    }
    
    /* Search
    --------------------*/
    
    input.search {
    border: none;
    background: #fff url(magnifier.gif) no-repeat .2em .3em;
    padding: 1px 2px 1px 18px;
    vertical-align: middle;
    color: #666;
    width: 165px;
    }
    
    input.go {
    margin-left: 3px;
    vertical-align: middle;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 85%;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
    cursor: pointer;
    padding-top: 1px;
    }
    
    
    /* Navigation
    ----------------------------------------------------------------*/
    
    ul#main-nav {
    list-style: none;
    float: right;
    margin:-2.6em 50px 0 0;
    position:relative;
    z-index:2;
    }
    
    ul#main-nav li {
    float: left;
    }
    
    ul#main-nav a {
    float: left;
    display: block;
    margin-left: 3px;
    padding:0.6em;
    color: #fff;
    text-decoration: none;
    background: #00529c;
    }
    
    ul#main-nav a:visited {
    background: #00529c;
    }
    
    ul#main-nav a:hover {
    background: #1570c1;
    }
    
    /* Main Content
    ----------------------------------------------------------------*/
    
    #content p {
    padding-left: 15px;
    }
    
    /* Secondary Content
    ----------------------------------------------------------------*/
    
    #secondary p {
    padding-right: 15px;
    }
    
    /* Footer
    ----------------------------------------------------------------*/
    
    #footer {
    clear: both;
    }
    
    </style></head><body>
    
    <div id="header">
        <a href="#" title="Kentucky Schoool Boards Association" class="logo">Kentucky Schoool Boards Association</a>        
        <div id="search">
          <ul>
                <li><a href="#">career opportunities</a></li>
                <li class="borderleft"><a href="#">contact</a></li>
            </ul>
            <input name="keywords" maxlength="50" class="search" size="25" type="text">
            <input name="go" value="SEARCH" class="go" type="submit">
        </div>
        <address>
            260 DEMOCRAT DRIVE<br>
            FRANKFORT, KENTUCKY 40601<br>
            PHONE: 502-695-4630
        </address>    
    </div>
    
    <ul id="main-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">ASK KSBA</a></li>
        <li><a href="#">DEPARTMENTS</a></li>
        <li><a href="#">LINKS</a></li>
    </ul>
    
    <div id="wrapper">
        <div id="content">
        <p>Lorem
    ipsum dolor sit amet, consectetuer adipiscing elit. Ut sagittis dolor
    sit amet eros. Morbi at mauris. Proin accumsan malesuada eros. In
    lacinia. Phasellus id nulla id felis elementum nonummy. Donec dapibus
    ipsum sed nisi. Cras et odio vel velit nonummy rhoncus. Praesent mi
    nisi, volutpat at, tincidunt sit amet, consequat dignissim, risus. Nunc
    odio metus, porta ut, aliquet a, gravida id, neque. Nulla felis. Cras
    blandit mi vitae massa. Donec euismod nisl quis mauris. Aenean pharetra
    dolor convallis ipsum. In tincidunt, lorem sit amet imperdiet accumsan,
    erat leo cursus quam, quis luctus erat lorem non urna. Morbi diam enim,
    euismod ut, gravida vel, dapibus a, dui. Nulla mauris. Ut facilisis
    faucibus massa. Nullam hendrerit volutpat elit. Mauris feugiat, ipsum
    et facilisis tristique, erat nulla blandit lectus, vitae tempor risus
    lorem in leo. Pellentesque sed libero at est euismod placerat. Praesent
    vel dui a eros dignissim hendrerit. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Sed adipiscing vestibulum tortor. Etiam
    eu nisi eget massa porttitor ullamcorper. Quisque elit purus, congue
    sed, congue eu, ultricies quis, elit. Nullam metus elit, hendrerit
    eget, pharetra ut, eleifend nec, orci. Sed convallis velit eu dui.
    Suspendisse adipiscing nisl sed erat. Sed in sem. Fusce at enim. Aenean
    ut ante sit amet nibh ultrices porta. Praesent nibh quam, lobortis a,
    placerat ac, rhoncus eu, turpis.</p>
        </div>
    
        <div id="secondary">
        <p>Nulla
    mauris. Ut facilisis faucibus massa. Nullam hendrerit volutpat elit.
    Mauris feugiat, ipsum et facilisis tristique, erat nulla blandit
    lectus, vitae tempor risus lorem in leo. Pellentesque sed libero at est
    euismod placerat. Praesent vel dui a eros dignissim hendrerit. Lorem
    ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing
    vestibulum tortor. Etiam eu nisi eget massa porttitor ullamcorper.
    Quisque elit purus, congue sed, congue eu, ultricies quis, elit. Nullam
    metus elit, hendrerit eget, pharetra ut, eleifend nec, orci. Sed
    convallis velit eu dui. Suspendisse adipiscing nisl sed erat. Sed in
    sem. Fusce at enim. Aenean ut ante sit amet nibh ultrices porta.
    Praesent nibh quam, lobortis a, placerat ac, rhoncus eu, turpis.</p>     
        </div>
    
        <div id="footer">
        <p>footer</p>
        </div>
    </div>
    
    </body></html>
    It works all right, though I'm not so sure now about the nav being outside the header. Maybe it should be in there after all.

    BTW the code seems to be HTML but you have an XHTML doctype. I'd change the latter.
    Ahh! Thank you. The help is very much appreciated! I'm still learning with a lot of techniques in CSS and I didn't realize the clearing: both would do that. I thought that even if I only needed to clear one, I could still right "both" and it'd be the same either way.

    Can you explain what you mean with my code being HTML and not XHTML? The code validates XHTML Strict, therefore doesn't that make it XHTML? What am I doing wrong?

    Thanks.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •