I'm creating a design for a website and it works entirely in FF. Now in IE i have an extremely weird bug where the navigation is around 200 - 300 px high, even though the css states it should only be 23 px.
Here's my css:
Code:
html,body
{
height: 100%;
}
body
{
background-image: url('http://www.tiniergoodies.com/v2/_img/bg.png');
background-repeat: repeat-x;
margin: 0;
padding: 0;
}
img
{
border-style: none;
}
a
{
text-decoration: none;
color: #9e9997;
font-weight: bold;
}
a:active, a:active *
{
outline: none !important;
-moz-outline-style: none !important;
}
a:focus, a:focus *
{
outline: none !important;
-moz-outline-style: none !important;
}
#header
{
height: 195px;
width: 962px;
margin: auto;
background-image: url('http://www.tiniergoodies.com/v2/_img/header.png');
background-position: top center;
background-repeat: none;
}
#logo
{
height: 46px;
width: 280px;
padding-top: 20px;
padding-left: 10px;
}
#content
{
width: 960px;
background-color: #ffffff;
margin: auto;
height: 100%;
border-left: 1px solid #e4914f;
border-right: 1px solid #e4914f;
}
#nav
{
width: 947px;
height: 27px;
margin: auto;
background-image: url('http://www.tiniergoodies.com/v2/_img/nav.png');
background-repeat: no-repeat;
}
#undernav
{
height: 16px;
font-family: Arial;
font-size: 14px;
margin-left: 16px;
margin-top: 8px;
}
#selfyBox
{
float: left;
width: 233px;
margin-left: 15px;
margin-top: 15px;
}
#selfyHeader
{
height: 24px;
background-image: url('http://www.tiniergoodies.com/v2/_img/selfy_bar.png');
background-repeat: no-repeat;
text-align: center;
font-family: Arial;
font-weight: bold;
color: #58694b;
font-size: 15px;
line-height: 23px;
}
#selfyContent
{
text-align: center;
background-color: #ffffff;
border-left: 1px solid #6f9815;
border-right: 1px solid #6f9815;
}
#selfyContent embed
{
padding-top: 11px;
}
#selfyBot
{
height: 11px;
background-image: url('http://www.tiniergoodies.com/v2/_img/selfyBot.png');
background-repeat: no-repeat;
}
#itemBox
{
width: 441px;
margin-left: 268px;
margin-top: 15px;
}
#itemHeader
{
height: 24px;
background-image: url('http://www.tiniergoodies.com/v2/_img/item_bar.png');
background-repeat: no-repeat;
text-align: center;
font-family: Arial;
font-weight: bold;
color: #0a3142;
font-size: 15px;
line-height: 23px;
}
#itemContent
{
padding: 5px;
background-color: #ffffff;
border-left: 1px solid #1e5266;
border-right: 1px solid #1e5266;
}
#itemBot
{
height: 12px;
background-image: url('http://www.tiniergoodies.com/v2/_img/itemBot.png');
background-repeat: no-repeat;
}
#selectBox
{
width: 235px;
margin-top: 35px;
float: right;
font-family: Arial;
color: #615B5A;
font-size: 14px;
line-height: 22px;
}
#selectBox li
{
list-style-type: none;
}
#selectBox ul
{
padding: 0;
margin: 0;
margin-left: 5px;
}
#selectBox span.minus
{
background-image: url('http://www.tiniergoodies.com/v2/_img/bullet_minus.png');
background-repeat: no-repeat;
padding-left: 20px;
}
#selectBox span.plus
{
background-image: url('http://www.tiniergoodies.com/v2/_img/bullet_plus.png');
background-repeat: no-repeat;
}
#divider
{
width: 960px;
height: 1px;
}
.navlist
{
vertical-align: middle;
padding: 0;
margin: 0;
padding-top: 1px;
padding-left: 1px;
}
.navlist li
{
display: inline;
list-style-type: none;
padding-right: 0px;
}
And my html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href='_inc/_css/core.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="header">
<div id="logo"><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/logo.png"</a></div>
</div>
<div id="content">
<div id="nav">
<ul class="navlist">
<li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/home.png" /></a></li>
<li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
<li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/activity.png" /></a></li>
<li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
<li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/dream.png" /></a></li>
<li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
<li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/contact.png" /></a></li>
<li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
</ul>
</div>
<div id="undernav">
<ul class="navlist">
<li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/house.png" /></a></li>
<li><img src="http://www.tiniergoodies.com/v2/_img/arrow_right.png" /></li>
<li><a href="#">Dream Selfy</a></li>
</ul>
</div>
<div id="selfyBox">
<div id="selfyHeader">
<span>Selfy</span>
</div>
<div id="selfyContent">
<object width="231" height="300" align="middle" id="avatar" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="always" name="allowScriptAccess"><param value="http://image2.tinierme.com/selfy.swf?account_id=6037892&bgFlg=1&pBaseURL=http%3A%2F%2Fimg.tinierme.com%2F" name="movie">
<param value="false" name="menu">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<param value="transparent" name="wmode">
<embed width="231" height="300" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="avatar" bgcolor="#ffffff" quality="high" menu="false" src="http://image2.tinierme.com/selfy.swf?account_id=6037892&bgFlg=1&pBaseURL=http%3A%2F%2Fimg.tinierme.com%2F">
</object>
</div>
<div id="selfyBot"></div>
</div>
<div id="selectBox">
<span class="minus">Types</span>
<ul id="types">
<li>
<input type="checkbox" name="type" value="hair">Hairstyles
</li>
<li>
<input type="checkbox" checked="" name="type" value="face">Facial Features
</li>
<li>
<input type="checkbox" name="type" value="top">Shirts / Blouses
</li>
<li>
<input type="checkbox" name="type" value="coat">Jackets / Coats
</li>
<li>
<input type="checkbox" name="type" value="bottom">Trousers / Skirts
</li>
<li>
<input type="checkbox" name="type" value="shoe">Footwear
</li>
</ul>
<span class="minus">Accessories</span>
<ul id="acces">
<li><input type="checkbox" name="type" value="hat">Bandana / Headgear</li>
<li><input type="checkbox" name="type" value="accef">Glasses</li>
<li><input type="checkbox" name="type" value="accen">Necklaces</li>
<li><input type="checkbox" name="type" value="acceh">Hand</li>
<li><input type="checkbox" name="type" value="back">Back</li>
<li><input type="checkbox" name="type" value="bg">Background</li>
</ul>
</div>
<div id="itemBox">
<div id="itemHeader">
items
</div>
<div id="itemContent">
Content
</div>
<div id="itemBot"></div>
</div>
<div id="divider">a</div>
</div>
</body>
</html>
And here's the page where the bug happens:
http://www.tiniergoodies.com/v2/
Any idea what's going on? I'm lost here.
Before you post, read our: 
