Firefox vs IE6 - Losing my mind
newbie
Posted: Sun, 2008-05-18 08:05
Okay, so I've been designing my site and it always worked fine in firefox - now I check it out in IE and parts of it are off. I'm really not sure what to do at this point, I've tried just about everything. Anyone care to offer me a few tips? the site is http://www.sporenormous.com
My problem is with the right part of the nav bar and the side bar's bottom image. I've included all the relevant CSS and HTML. Hopefully someone can help me out as I'm just about to slam my head through my monitor.
Thanks a lot!
Side Bar (feed is the left part, search is to the right, subheader is beneath the navbar - it should be small, but its big because it's being pushed down):
.search_field {
text-align: right;
float: right;
width: 300px;
height: 38px;
background: #464548 url(images/searchbg.gif) no-repeat top right;
color: #000;
clear: both;
padding: 10px 10px 0 0;
}
.grey {
font-size: 1.2em;
font-weight: bold;
color: #ccc;
background: inherit;
}
.search {
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background: inherit;
}
.feed {
float: left;
height: 33px;
padding: 15px 0 0 15px;
width: 625px;
background: #464548;
background: #464548 url(images/newsletterbg.gif) no-repeat;
color: #FFF;
margin: 0 0 0px 0;
font-size:18px;
font-decoration:bold;
}
.feed img {
border:0;
vertical-align: top;
background: #464548 url(images/newsletterbg.gif) no-repeat;
}
.feed a {
color:#fff;
font-size:18px;
font-decoration:none;
text-decoration:none;
}
.feed a:hover {
color:#ffeaa2;
font-size:18px;
font-decoration:none;
text-decoration:none;
}
.subheader {
clear: both;
margin: 8px 0 12px 0;
padding: 10px;
background: #f4f4f4;
color: #808080;
border-bottom: 1px solid #ccc;
}The header is organized like this:
<div class="content">
<div class="logo" style="text-align:center">
<div>
<img src="http://www.sporenormous.com/images/forum_logo.gif" alt="Sporenormous: A Spore Fansite" />
</div></div>
<div style="clear:both"></div>
<div class="search_field">
<form id="searchform" method="get" action="<?php echo get_settings('home'); ?>">
<p><span class="grey"></span> <input type="text" class="search" name="s" id="s" value="<?php echo wp_specialchars($s, 1); ?>" /> <input type="submit" value="Search" class="button" /></p>
</form>
</div>
<div class="feed">
<div style="margin-right:10px"><a href="http://www.sporenormous.com">Home</a> <a href="http://www.sporenormous.com/forum">Discussion Board</a> <a href="http://www.sporenormous.com/register/">Register</a> <a href="http://www.sporenormous.com/encyclopedia-galactica/">Encyclopedia Galactica</a>
</div></div>
<div class="subheader">
</div>Sidebar (rt = top image, lt = bottom image)
.sidebar {
float: right;
width: 150px;
margin: 0 0 0px 0;
}
.sidebar h2 {
color:#FFFFFF;
border-bottom:1px solid #efefef;
}
.sidebar a {
color: #FFFCD1;
font: 12px Arial, Helvetica, sans-serif;
background: inherit;
text-decoration:none;
}
.sidebar a:hover {
color: #ffffff;
text-decoration:underline;
}
.sidebar li {
list-style-type:none;
list-style-position:outside;
}
.sidebar li ul li{
list-style-type:none;
list-style-position:outside;
margin-left:20px;
}
.rt {
background: #C85E35 url(images/rt.gif) no-repeat;
color: #FFF;
height: 9px;
}
.lt2 {
background: #C85E35 url(images/lt.gif) no-repeat;
color: #FFF;
height: 10px;
margin-top:0px;
margin-bottom:10px;
}
.right_articles {
font-size: 0.9em;
background: #C85E35 url(images/rb.gif) no-repeat bottom;
color: #FEE1D5;
padding: 4px 8px;
margin: 0 0 0px 0;
}
While the side bar is organized like this:
<div class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<div class="rt"></div>
<div class="right_articles">
<h2>Hut</h2>
<a href="http://www.sporenormous.com/">Home</a><br>
<a href="http://www.sporenormous.com/forum/">Discussion Board</a><br>
<a href="http://www.sporenormous.com/spore-contest/">Spore Contest & Prizes</a><br>
<a href="http://www.sporenormous.com/what-is-spore/">What is Spore?</a><br>
<a href="http://www.sporenormous.com/official-fansite-links/">Offical & Fansite Links</a><br>
<a href="http://www.sporenormous.com/about-sporenormous/">About Sporenormous</a><br>
</div>
<div class="lt2"></div>
<div class="rt"></div>
<div class="right_articles">
<h2>Encyclopedia</h2>
<a href="http://www.sporenormous.com/creatures/">About Creatures</a><br>
<a href="http://www.sporenormous.com/creature-parts/">Creature Parts & Pieces</a><br>
<a href="http://www.sporenormous.com/currencies/">Currencies by Phase</a><br>
<a href="http://www.sporenormous.com/phases-of-spore/">Phases of Spore</a><br>
<a href="http://www.sporenormous.com/planets/">Planets & Environments</a><br>
<a href="http://www.sporenormous.com/spore-release-and-platforms/">Release & Platforms</a><br>
<a href="http://www.sporenormous.com/social-behavior/">Social & Behavior</a><br>
<a href="http://www.sporenormous.com/sporepedia/">Sporepedia & Metaverse</a><br>
<a href="http://www.sporenormous.com/terraforming/">Terraforming</a><br>
<a href="http://www.sporenormous.com/ufo-devices/">UFO Devices & Tools</a><br>
<a href="http://www.sporenormous.com/what-happens-when/">What happens when...</a><br>
</div><div class="lt2"></div>
<?php endif; ?>
<div class="rt"></div>
<div class="right_articles">
<h2>Science of Spore</h2>
<a href="http://www.sporenormous.com/life-elsewhere-maybe/">Life elsewhere, Maybe?</a><br>
<a href="http://www.sporenormous.com/origin-of-stars/">Origin of Stars & Planets</a><br>
<a href="http://www.sporenormous.com/planetary-attributes/">Planetary Attributes</a><br>
<a href="http://www.sporenormous.com/tidal-heating/">Tidal Heating & Moons</a><br>
<a href="http://www.sporenormous.com/time-dilation/">Time Dilation</a><br>
<a href="http://www.sporenormous.com/what-is-dna/">What exactly is DNA?</a><br>
</div><div class="lt2"></div>
</div>
newbie
Posts: 2
Joined: 2008-05-18
I've fixed the side bar to a
Posted: Sun, 2008-05-18 08:24
I've fixed the side bar to a certain extent, but there is more space than I'd like (compared to Firefox)
Enthusiast
Posts: 201
Joined: 2008-03-16
Please read the forum's
Posted: Sun, 2008-05-18 13:04
Please read the forum's rules about posting complete markup and css, not just partial, as well as valid code. Yours has about 100 errors that could cause some browsers misinterprete your html. See your [http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sporenormous.com&charset=%28detect+automatically%29&doctype=Inline&group=0]Test Results[/url]
Please make your code valid and return if the problem still persists.
Guru
Posts: 2679
Joined: 2004-09-01
Location: MA, USA
Caposoft, while I agree with
Posted: Sun, 2008-05-18 14:06
Caposoft,
while I agree with the need to correct validation errors, posting a link to a live page more than trumps the need to post all code.
Enthusiast
Posts: 201
Joined: 2008-03-16
Sorry
Posted: Sun, 2008-05-18 14:55
messed it up as you can see.