SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Southern Nevada, USA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Box Model problem

    I am having a problem with the CSS Box Model.

    I am trying to place the navigation within the box with the div with the yellow background. The code works fine in IE, but not in Firefox. The navigation falls outside of the box with the yellow background.

    You can see the example at www.blackcanyonsystems.com/temp.

    Here is the code:
    index.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Test</title>
    <link rel="StyleSheet" href="main.css" type="text/css" media="screen"/>
    </head>

    <body>
    <div id="wrapper">
    <div id="masthead">
    <p>Masthead<br /><br /><br /><br /></p>
    <div>
    <p>Banner<br /><br /><br /><br /></p>
    </div>

    <div id="images">
    <p>Images<br /><br /><br /></p>
    </div>

    <div id="nav2" >
    <ul>
    <li><a href="marine/marine.html">MARINE ORGANISM<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTROL</a></li>
    <li><a href="potable/potable.html">POTABLE WATER<br />&nbsp;&nbsp;CHLORINATION</a></li>
    <li><a href="waste/waste.html">WASTE WATER<br />&nbsp;DISINFECTION</a></li>
    <li><a href="odor/odor.html">&nbsp;&nbsp;ODOR<br />CONTROL</a></li>
    </ul>
    </div>

    </div>

    </body>
    </html>

    main.css:
    /* NEW CSS SHEET */

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

    body {
    background:url('images/blue_rows.gif') repeat-x;
    }

    div#wrapper {
    width: 1010px;
    }

    div#masthead {
    width: 1010px;
    background-color: #FFFF00;

    }

    div#images {
    width: 1010px;
    }

    div#nav1 ul {
    font-family: Arial;
    font-size: 13px;
    display: inline;
    list-style-type: none;
    }

    div#nav1 li {
    font-family: Arial;
    background-color: #FF0066;
    font-size: 13px;
    display: inline;
    list-style-type: none;
    }

    div#nav1 a:link {
    float : left;
    font-family: Arial;
    line-height : 14px;
    font-weight : bold;
    color: white;
    margin : 0px 15px 10px 60px;
    text-decoration : none;
    }

    div#nav1 a:visited {
    float : left;
    line-height : 14px;
    font-weight : bold;
    color: white;
    margin : 0px 15px 10px 60px;
    text-decoration : none;
    }

    div#nav1 a:hover {
    float : left;
    font-family: Arial;
    line-height : 14px;
    font-weight : bold;
    border-bottom: 1px solid blue;
    margin : 0px 15px 0px 60px;
    }

    div#content{
    font-family: Verdana;

    font-size: 11px;
    width: 852px;
    margin: 0;
    padding: 50px 20px 0 20px;
    float: none;
    }


    div#nav2 ul {
    font-family: Arial;
    background-color: #0000FF;
    font-size: 13px;
    display: inline;
    list-style-type: none;
    }

    div#nav2 li {
    font-family: Arial;
    background-color: #0000FF;
    background-color: #FF0066;
    font-size: 13px;
    display: inline;
    list-style-type: none;
    }

    div#nav2 a:link {
    float : left;
    background-color: #0000FF;
    font-family: Arial;
    line-height : 14px;
    font-weight : bold;
    color: white;
    margin : 5px 70px 10px 50px;
    text-decoration : none;
    }

    div#nav2 a:visited {
    float : left;
    line-height : 14px;
    font-weight : bold;
    color: white;
    margin : 5px 70px 10px 50px;
    text-decoration : none;
    }

    div#nav2 a:hover {
    float : left;
    font-family: Arial;
    line-height : 14px;
    font-weight : bold;
    border-bottom: 1px solid blue;
    margin : 5px 70px 0px 50px;
    }

    I realize this is not the best code, but for the example I tried to show just the code that demonstrates the problem.

    Does anyone know where my mistake is, or know of a fix that will make the code work for both IE and Firefox?

    Sincerely,

    Lawrence

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Southern Nevada, USA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you.

    Quote Originally Posted by Kravvitz View Post
    Thank you for your assistance. This is my first time using floats and did not realize it completely removed the DIV from the normal flow. I thought only the elements inside the DIV were affected.

    I haven't read all the links within the article you provided, but I will until I have a good understanding of floats.

    Lawrence

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lkeeney View Post
    Thank you for your assistance. This is my first time using floats and did not realize it completely removed the DIV from the normal flow. I thought only the elements inside the DIV were affected.
    You're welcome

    Floats aren't completely removed form the flow. Absolutely positioned elements are.

    Because the float wasn't being cleared, the containing <div> was collapsing to 0 height.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •