Stylesheet exploded

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
I was working on a new layout for my website when all of a sudden, my stylesheet blew up and everything is not where it should be!

Beta website: http://sikuneh.x10hosting.com/New SL/index.php
Stylesheet code:
Code:
body 
{
	border:0;
	padding:10px;
	margin:0;
	background:#FFF;
	color:#000;
	width:98%;
	text-align:center;
}

a, 
img
{
	border:0;
}

div#wrapper 
{
	text-align:left;
	width:100%;
}

div#header 
{
	border-bottom:5px solid black;
	height:75px;
}

div#header-left 
{
	width:80%;
	float:left;
}

div#header-left-inner 
{
	height:50px;
	padding:10px;
}

div#header-right 
{
	width:20%;
	height:500px;
	float:right;
}

div#header-right-inner 
{
	height:50px;
	padding:10px;
}

div#content-wrapper 
{
	width:80%;
	float:left;
}

div#right 
{
	width:20%;
	float:right;
}

div#right-inner 
{
/*	border-top: 5px solid black; */
	border-left: 5px solid black;
	min-height:700px;
}

div#footer 
{
	clear:both;
	text-align:center;
}

div#content-header 
{
	width:20%;
	padding:5px;
	border-right:2px solid black;
	border-bottom:2px solid black;
}

div#right-header 
{
	border-bottom:5px solid black;
	width:100%;
	padding-left:10px;
}

div#right-header h3 
{
	margin:0;
	padding:5px;
}


div.space-vert-20 
{
	height:20px;
}

div.submit 
{
	width:50%;
}

/*
div.sub-submit 
{
	float:left;
	width:30%;
}

div.delete 
{
	float:right;
	width:70%;
}
*/

Please help. Use the source code for the HTML side.

Note: Attached is a picture of how it should look.
Works fine in IE8-compatibility mode. Please explain what makes that work but no other major browser work and how I can fix it.
 

Attachments

  • Better Design..png
    Better Design..png
    17.8 KB · Views: 22
Last edited:

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Take a look in Firebug or the like. Right-click the blank area where #right should be and choose "inspect", and you'll find it's filled by #header-right, whose height of 500px pushes #right down. Remove this height property.

IE8-compatibility is bug-compatible with old IE versions, so pay it no mind because they are wrong.
 
Last edited:

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
Thank you so much... I do not even remember why I had that there in the first place...
 
Top