...

View Full Version : This is why I hate CSS (pics)



[m] at
07-18-2005, 04:39 PM
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? :eek:



<!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:
http://upload.intermatter.net/files/default/mozilla.jpg

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:
http://upload.intermatter.net/files/default/ie.jpg

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:
http://upload.intermatter.net/files/default/duh.jpg

Did I stutter? :D

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" :D

Pepe, the bull
07-18-2005, 04:58 PM
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.

[m] at
07-18-2005, 05:10 PM
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.

http://upload.intermatter.net/bin/mozilla2.jpg

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!

Pepe, the bull
07-18-2005, 05:35 PM
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.

[m] at
07-18-2005, 06:07 PM
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 :thumbsup:

Ranger56
07-18-2005, 10:40 PM
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 :thumbsup:

CSS IS GOOD. CSS IS YOUR FRIEND.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum