I have my site http://boozkerstweaks.trap17.com and just when i thought i had everything perfect i just had to go to my Windows computer to check it because i made it on my mac and tested it in:

Netscape, Opera, Safari, and Firefox. I only had stupid IE and it displayed it horribly wrong. There is nothing wrong with the CSS. I checked the mathematics of it and it seems fine. It's like it's displaced. The header and the rest of the site are disconnected. There is also a white line down the right side of the page. I think it might have something to do with the CSS's background-color or border.

This really frustrates me this might be because i can hardly stay awake and i'm trying to fix it, but even so i just dont feel like fixing it. Does anyone know if this happens in IE6? Because i was testing it in IE7. I'm sure SM is going to be here and he will be "duh its the..."

style sheet is: http://boozkerstweaks.trap17.com/style.css

This post has been edited by BooZker: Jan 15 2007, 08:57 AM

I think the problem is you have many classes but not enough structure--I hope that is the right expression.

Try defining your body to a specific width something like


and then define a header div as ID etc.

So the basic structure of your site would be something like:


This way, they are all aligned within the "body" and cannot wander about. You can even do DIV for left and DIV for right and use float to divide content from menu.

OK i will try this. In other words though you are just saying that i should move the CSS tags in the order that they should be read and then set a specific width for the body?

I wish IE wasnt the most used browser!

I don't think order of appearance has nothing to do with it. But looking at your css file, you have bunch of CLASS (.tag) but nothing that definds the ID tags...

Since I myself is learning css, my description could be wrong. But what I know is that you need to confine your DIV's within BODY with set width.

hmm alright. I will go and set the header and footer divs to 758 and then main to 600 and right_side to 158 and see if this fixes the problem.

Well after trying some stuff out I finally got it. So give me a " I LOVE YOU SM"



I predicted it was margins or padding

GOD! Everytime it's so simple and i can't find it. You have to give me some slack though. I have only been making graphics and sites for a little over a year now.

I find that using this code: and then setting specific margins and paddings in the sheet helps to eliminate most problems. Each Browser has its own default settings for margins and padding, so eliminate the defaults and the browsers will all treat the page the same.

As for the order of the html content on the page, I find that it is best to have the div's in the html code in the order which they appear on the page. For example, insert the float:left before the float:right for the same parent element. Otherwise, there is some confusion between browsers and the way they are rendered.