Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This is why I hate CSS (pics)

    I don't have a lot to do at work today so I decided to try a little CSS layout that I'm sure I would use over and over. It seems pretty straightforward but in both browsers it displays completely and totally wrong. Can anyone point out what it is that I did wrong here? I thought I made it pretty clear through my style declarations exactly how I wanted things to show up... why would internets do this to me?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <style type="text/css">
      body {
        background: #E3E3E3;
        text-align: center;
      }
      
      #container {
        width: 754px;
        border: 1px black solid;
        margin: 0 auto;
        text-align: left;
        background: #FFFFFF;
      }
      
      
      #topNav {
        list-style: none;
        background: #000000 url(images/navbg.gif) repeat;
        width: 754px;
        height: 40px;
        margin: 0px;
        padding: 0px;
      }
      
      #header {
        margin: 0px;
        padding 0px;
      }
      
      #topNav li {
        float: right;
        margin: 0px 5px 0px 0px;
        padding: 0px 5px 0px 0px;
      }
      
      #content {
        background: #000000;
        width: 754px;
        margin: 0px;
        padding: 0px;
      }
      
      #leftNav {
        width: 300px;
        float: left;
      }
      
      #mainContent {
        width: 554px;
        float: right;
        background: #FFFFFF;
        margin: 0px;
        padding: 0px;
      }
      
      #footer {
        width: 754px;
        margin: 0px;
        padding: 0px;
        background: red;
      }
      
      </style>
      </head>
      <body>
      <div id="container">
        <div id="header"><img src="images/header.jpg" alt="" border="" /></div>
          <ul id="topNav">
            <li>Home</li>
            <li>Home</li>
            <li>Home</li>
            <li>Home</li>
          </ul>
        <div id="content">
          <div id="leftNav">nav stuff goes here</div>
          <div id="mainContent">Main content goes up in this piece.</div>
        </div>
        <div id="footer">footer</div>
      </div>
          
            
      </body>
    </html>
    Here's how it looks in firefox:


    Notice how the footer is above the main content, and nav text is in the footer? Also notice how the container div ends before the mainContent begins, even though the mainContent CLEARLY begins before the container div closes. How could a browser POSSIBLY conceive that that's what I wanted based on how I coded this? HOW?

    Here it is in IE:


    A lot better (unusual for IE!) but I don't recall asking it to put in an empty line. Maybe margin: 0px is the new margin: 10px?

    How it should look:


    Did I stutter?

    So yeah, can anyone see anything in my code that would cause this site to not do what I want it to at all? I'm pretty new to doing layouts in CSS so I'm not used to this whole "code something that makes sense but have it not work at all."

    I just thank God PHP doesn't behave this way. If it did, you'd say "what's 1 + 1?" and PHP would return "yellow"

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I noticed two things. First, you need to add clear: both; to the #footer to make it go to the bottom. This will make it clead the two floating divs. Second, the widths of your #leftNav and #mainContent add up to 854px not 754px, which is the width of your #container. If you change the background color from black to gray you will see you #leftNav is above your #main content. That is your extra line. I hope this is what you were looking for.
    Last edited by Pepe, the bull; 07-18-2005 at 04:01 PM.
    Pepe, the bull

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pepe, the bull
    I noticed two things. First, you need to add clear: both; to the #footer to make it go to the bottom. This will make it clead the two floating divs. Second, the widths of your #leftNav and #mainContent add up to 854px not 754px, which is the width of your #container. If you change the background color from black to gray you will see you #leftNav is above your #main content. That is your extra line. I hope this is what you were looking for.
    Hey thanks, it looks exactly like I want it to in IE now. I can't believe I fudged the numbers though... how embarrassing!

    The only problem now is that in firefox if the mainContent extends longer than the leftBar, the background area of the leftBar goes white instead of black.



    IE displays it properly though. It's actually pretty mindboggling that IE is doing something right and Firefox is doing it wrong. This is going to be a very strange day!

  • #4
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    IE is just showing you what it thinks you want to see, but it isn't showing it right. Change the background color of your #container to match #leftNav, and it will give you the appearance of a navbar that is stretched to the bottom when it really isn't.
    Pepe, the bull

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey whaddaya know, it worked!

    I was using a second container div underneath the navbar called #content to try to acheive that same effect, but I guess that's not necessary.

    Wow... I don't hate CSS anymore (today). Thanks Pepe

  • #6
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by [m] at
    Hey whaddaya know, it worked!

    I was using a second container div underneath the navbar called #content to try to acheive that same effect, but I guess that's not necessary.

    Wow... I don't hate CSS anymore (today). Thanks Pepe
    CSS IS GOOD. CSS IS YOUR FRIEND.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •