...

View Full Version : Works in FF, IE bugs extremely weird



Collussus
08-30-2010, 03:55 PM
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:


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:


<!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&amp;bgFlg=1&amp;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&amp;bgFlg=1&amp;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.

met
08-30-2010, 04:14 PM
remove height:100% from #content, add "overflow:auto;"

and see if that fixes it

Collussus
08-30-2010, 05:02 PM
remove height:100% from #content, add "overflow:auto;"

and see if that fixes it

That fixed the height issue, but now we somehow have 2 navigation bars..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum