CSS Errors in IE

Chief · Aug 5, 2008

I completely scratched my previous design and decided to go a little more... complex? but, IE is screwing up the code. I used to love IE more than FF but now that i'm getting into some heavy CSS, IE isn't working the way its supposed to.
here is the page in FireFox:

http://img112.imageshack.us/img112/6514/vrscreenac9.png[/img]

here is the page in InternetExplorer:

http://img229.imageshack.us/img229/4484/vrscreen2jq9.png[/img]

here is my HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ViZualResolution × Think | Create | Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<div class="container" id="bigbox">
<div id="banner">
</div>
<div id="navigationTop">
<b>
Home
<img src="images/menu_sep.png">
Forums
<img src="images/menu_sep.png">
Resources
</b>
</div>

<div class="container" id="LEFT">
<span id="barLeft">

<span id="barCenter">
<b>Home</b>

<span id="barRight">

</div>
<div class="container" id="MIDDLE">
<span id="barLeft">

<span id="midBarCenter">
<b>Anouncement</b>

<span id="barRight">

</div>
<div class="container" id="RIGHT">
<span id="barLeft">

<span id="barCenter">
<b>Games</b>

<span id="barRight">

</div>
</div>
</center>
</body>
</html>

Here is my CSS:

/**********************************************
/* ViZualResolution STYLE-SHEET:
/**********************************************/

/**********************************************
/* GLOBAL STYLES:
/**********************************************/

*
{
margin-top: 0px;
margin-left:0px;
padding: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

body
{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
background-image:url(bodyback.jpg);
background-position:top;
color:000000;
}

a:link
{
color: #000000;
text-decoration: none;
}

a:visited
{
color: #000000;
text-decoration: none;
}

a:hover
{
color:#990000;
text-decoration:none;

}

h1
{
color:#000000;
font-size:14px;
}

FONT
{
font-size:12px;
color:#000000;
}

/**********************************************
/* DIV STYLES:
/**********************************************/

#banner
{
width:900px;
height:160px;
color:FFFFFF;
padding: 0px 0px 0px 0px;
background-image:url(top_header.png);
background-repeat:repeat-x;
text-align:right;
}

#barLeft
{
background-image:url(images/tbl_h_l.gif);
background-repeat:no-repeat;
width:27px;
height:29px;
padding:0px;
float:left;
margin:0px;
}

#barRight
{
background-image:url(images/tbl_h_r.gif);
background-repeat:no-repeat;
width:27px;
height:29px;
padding:0px 0px 0px 0px;
float:left;
margin:0px 0px 0px 0px;
}

#barCenter
{
background-image:url(images/tbl_h_c.gif);
background-repeat:repeat-x;
width:71px;
height:29px;
padding:5px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:left;
}

#midBarCenter
{
background-image:url(images/tbl_h_c.gif);
background-repeat:repeat-x;
width:546px;
height:29px;
padding:5px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:left;
}

#barBox
{
width:900px;
height:29px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

#navigationTop
{
background-image:url(images/bg_buttons.gif);
background-repeat:repeat-x;
width:900px;
height:25px;
padding:0px 0px 0px 0px;
margin:0px 0px 5px 0px;
font-size:13px;
border-top-width:1px;
border-bottom-width:1px;
border-style:solid;
border-color:000000;
border-left-width:0px;
border-right-width:0px;
float:none;
}

#bigbox
{
width:918px;
padding:0px;
margin:0px;
height:100%;
}

#LEFT
{
width:125px;
height:100%;
padding:0px;
float:left;
margin-left:14px;
font-size:13px;
background-repeat:repeat-x;
}

#RIGHT
{
width:125px;
height:100%;
padding:0px;
float:right;
margin-right:14px;
font-size:13px;
background-repeat:repeat-x;
}

#MIDDLE
{
width:600px;
height:100%;
padding:0px 0px 0px 0px;
float:none;
font-size:13px;
background-repeat:repeat-x;
}

now, the links and banner are just there as fillers. there is going to be actual content there so please no criticism on the content... but any on the design is welcome but as youc an see, its not quite done yet XD

but, any ideas? or any tops n' tricks? i have no idea how to fix this.

___ · Aug 6, 2008

Looks like a Double Float-Margin Bug. Try adding {display:inline;} to your floated menu bars to fix it. In a *real* browser this will have no effect but it should fix the problem in IE6. Also when posting code use the code tag rather than spoiler, or put the code inside a spoiler. The forum is rendering your post very strangely.

Envision, Create, Share

CSS Errors in IE

Chief

___

Share this page

Thank you for viewing

Discord

RPG Maker

Content