Menu
Im having a little trouble coding my new design. The first problem is that in internet explorer there is a gap being added just under the header. Here is a screenshot:
[url]http://img100.imageshack.us/img100/3149/gap5oi.jpg
The other problem is that in firefox the bg image is being stopped at the bottom of the header – it should carry on all the way to the bottom like it does in Internet Explorer. Here is an image:
[url]http://img68.imageshack.us/img68/583/bg2uf.jpg
Here is the site: [url]http://www.quakewarscenter.com/v2/test.html
Thanks in advance for the help
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background-color:#006683;text-align:center;margin:0;padding:0;}
.placeholder {font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; color: #3BB1E1;}
#maincontent{float:left;position:relative;width:518px;}
#menu li{
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#menu li a{
margin: 0;
padding: 0;
text-decoration: none;
color: #efe7e4;
display: block;
background: url(images/menu/up.jpg) #282423 no-repeat 0 0;
width: 100%;
height: 19px;
padding-top: 6px;
}
#menu span{
padding-left:15px;
padding-top:0px;
}
#menu li a:hover{
color: #40C5FD;
background: url(images/menu/down.jpg) #1C7AA0 no-repeat 0 0;
}
#menu{
list-style-type: none;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
width: 210px;
font-weight: bold;
}
.content {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}
-->
</style>
</head>
<body>
<div style="width:994px;background-image: url(images/bg.jpg); position:relative; ">
<div style="margin-left:28px;margin-right:28px;width:938px;"><img src="images/quakewarsh1.jpg" alt="top left" width="317" height="41" /><img src="images/quakewarsh2.jpg" alt="top center" width="303" height="41" /><img src="images/quakewarsh4.jpg" alt="top left" width="318" height="41" /><br />
<img src="images/quakewarsh5.jpg" alt="top long" width="938" height="38" /><br />
<img src="images/quakewarsh6.jpg" alt="header 1" width="161" height="105" /><img src="images/quakewarsh7.jpg" alt="header 2" width="261" height="105" /><img src="images/quakewarsh8.gif" alt="glow" width="79" height="105" /><img src="images/quakewarsh9.jpg" alt="header 3" width="277" height="105" /><img src="images/quakewarsh10.jpg" alt="header 4" width="160" height="105" /><br />
<img src="images/quakewarsh11.jpg" width="238" height="40" /><a href="#"><img src="images/quakewarsh12.jpg" alt="main page button" width="136" height="40" border="0" /></a><a href="#"><img src="images/quakewarsh13.jpg" alt="forums button" width="170" height="40" border="0" /></a><a href="#"><img src="images/quakewarsh14.jpg" alt="contact button" width="139" height="40" border="0" /></a><img src="images/quakewarsh15.jpg" alt="header low 1" width="156" height="40" /><a href="#"><img src="images/quakewarsh16.jpg" alt="rss button" width="99" height="40" border="0" /></a>
<div>
<div style="float:left;width:210px;">
<div align="left">
<ul id="menu">
<li><a href="index.php"><span>MAIN PAGE </span></a></li>
<li><a href="http://www.redgfxforums.com/"><span>NEWS ARCHIVE </span></a></li>
<li><a href="graphics.php"><span>LINKS</span></a></li>
</ul>
<div class="placeholder" style="background-image: url(images/placeholder.jpg);width:210px;height:27px;"><div class="style3" style="padding-left:4px;padding-top:4px;">Quake Wars </div>
</div><ul id="menu">
<li><a href="photo.php"><span>ABOUT</span></a></li>
<li><a href="downloads.php"><span>CLASSES</span></a></li>
<li><a href="affiliate.php"><span>VEHICLES</span></a></li>
<li><a href="services.php"><span>WEAPONS</span></a></li>
<li><a href="vote.php"><span>DEPLOYABLES</span></a></li>
<li><a href="submit.php"><span>SCREENSHOTS</span></a></li>
<li><a href="contact.php"><span>FAQ</span></a></li>
</ul>
<div class="placeholder" style="background-image: url(images/placeholder.jpg);width:210px;height:27px;">
<div class="style3" style="padding-left:4px;padding-top:4px;">Downloads</div></div>
<ul id="menu">
<li><a href="photo.php"><span>WALLPAPERS</span></a></li>
</ul>
<div class="placeholder" style="background-image: url(images/placeholder.jpg);width:210px;height:27px;">
<div class="style3" style="padding-left:4px;padding-top:4px;">Interactive</div>
</div>
<ul id="menu">
<li><a href="photo.php"><span>FORUMS</span></a></li>
<li><a href="photo.php"><span>IRC</span></a></li>
<li><a href="photo.php"><span>CONTACT</span></a></li>
<li><a href="photo.php"><span>SUBMIT</span></a></li>
</ul>
<div class="placeholder" style="background-image: url(images/placeholder.jpg);width:210px;height:27px;"> <div class="style3" style="padding-left:4px;padding-top:4px;">Network</div></div>
<ul id="menu">
<li><a href="photo.php"><span>THE GGN</span></a></li>
</ul>
</div>
<div style="width:208px;background-image: url(images/leftbg.jpg);">
<div style="height:55px;width:208px;"><img src="images/sidetitles/affiliates.jpg" width="208" height="55" /></div>
<div class="content" style="padding:5px 40px 10px 40px;"> There has been </div>
<div align="center"><img src="images/sidetitles/linkus.jpg" width="208" height="85" />
<div class="content" style="padding:5px 40px 10px 40px;">[plplplplp gh hgi iuo </div>
</div>
</div><img src="images/sidetitles/leftcap.jpg" />
</div>
<div id="maincontent"><img src="images/ticker.jpg" width="518" height="31" />
<div style="width:518px;background-image: url(images/contentbox/bg.jpg);">
<div style="height:29px;width:518px;background-image: url(images/contentbox/topbg.jpg);">
<div align="right" class="content"><img src="images/contentbox/topleft.jpg" align="left" /><img src="images/contentbox/topright.jpg" align="right" /><div style="padding-top:6px;"><strong>Quake Wars released in June?</strong></div>
</div>
</div><div class="content" style="padding:5px 15px 10px 15px;">
<div align="left">There has been some new information posted over at the Splash Damage Forum. It gives a step by step guide to completing one of the missions and also describes some gameplay aspects that sound very similar to Enemy Territory’s. Here is an extract:<br />
<blockquote>A: Having descended to destroy the Ark's samples and research </blockquote>
</div>
</div><img src="images/contentbox/bottom.jpg" /></div>
<div style="width:518px;background-image: url(images/contentbox/bg.jpg);">
<div style="height:29px;width:518px;background-image: url(images/contentbox/topbg.jpg);">
<div align="right" class="content"><img src="images/contentbox/topleft.jpg" align="left" /><img src="images/contentbox/topright.jpg" align="right" /><div style="padding-top:6px;"><strong>Mech Tactical Simulation MOD</strong></div>
</div>
</div><div class="content" style="padding:5px 15px 10px 15px;">
<div align="left"> Battletech mod productions have announced that they are shifting development of Mech Tactical Simulation to Quake Wars from the originaly p</div>
</div><img src="images/contentbox/bottom.jpg" /></div>
</div>
</div>
<div style="float:right;width:208px;"><div style="width:208px;background-image: url(images/leftbg.jpg);">
<div style="height:55px;width:208px;"><img src="images/sidetitles/potd.jpg" width="208" height="55" /></div>
<div class="content" style="padding:5px 40px 10px 40px;"> There has been </div>
<div align="center"><img src="images/sidetitles/irc.jpg" width="208" height="85" />
<div class="content" style="padding:5px 40px 10px 40px;">[plplplplp gh hgi iuo </div>
</div><img src="images/sidetitles/ads.jpg" width="208" height="85" />
<div class="content" style="padding:5px 40px 10px 40px;">
<script type="text/javascript"><!--
google_ad_client = "pub-9930121214224835";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "136388";
google_color_bg = "000000";
google_color_link = "FFFFFF";
google_color_url = "99C9FF";
google_color_text = "FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div align="center"><img src="images/sidetitles/leftcap.jpg" width="208" height="28" /></div>
</div>
</div>
</div>
<div style="float:left; position:relative; width:100%; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000;"><img src="images/footer.jpg" /></div>
</div>
</body>
</html>
[/CODE]<img src="test_files/quakewarsh16.jpg" alt="rss button" border="0" height="40" width="99">[COLOR=Green]</a><div>[/COLOR]<div id="maincontent"><img [COLOR=Green]style="display:block;"[/COLOR] src="test_files/ticker.jpg" height="31" width="518"><div style="[COLOR=Green]overflow:hidden;[/COLOR] width: 994px; background-image: url(test_files/bg.jpg); position: relative;">0.1.9 — BETA 5.26