PDA

Click to See Complete Forum and Search --> : CSS menu, ie and firefox display it differently.

fab0990
02-17-2006, 09:15 AM
Hiya, there is two parts of my site that appear different in internet explorer. On my left menu there is spaces between each link, they are also at the top and bottom of the menu which i dont want. Im having the same problem with a bit of javascript that i use so this leads me to believe that ive done something wrong or missed something out in the CSS.

Im not very good at explaining things so just incase you didnt understand me here is a picture of the problem:
http://img113.imageshack.us/img113/2413/gaps6oz.jpg

Here is a link to the site: http://enemyterritorys.the-ggn.com/2.php

And heres the code :)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

</div>

<html><head><title>Quake Wars Center - The Quake Wars Community.</title>

<style type="text/css">
body { text-align:center; margin: 0; background-color: #A19FA0; }

#frame { width:775px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left; }

#frame2 { width:831px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left; background: url(images/pagebackground.jpg); }

#contentleft { width:183px; padding-left:1px; float:left; text-align:left; }

#contentcenter { width:407px; padding:0px; float:left; }

#contentright { width:180px; padding:0px; float:left; }

#forumtext { padding:10px; background-image: url('images/forumimg.jpg'); background-repeat: no-repeat; background-position: 10px 0px; }

#pagetext { padding:10px; background-image: url('images/random/textbg/textbg.jpg'); background-repeat: no-repeat; background-position: 60px 20px; }

#men{ margin-left:-15px; }

#contentheader { margin:0px 0px 0px -1px }

#forumframe { background: url(images/forumbutbg.jpg); width:371px; margin-right:auto; margin-left:auto; margin-top:10px; padding:0px; text-align:left; }

#contentheader { }

#menu li{ list-style-type: none; border-top: 0px solid; border-bottom: 0px solid; margin: 0; padding: 0; }
#menu li a{ text-decoration: none; color: #0F5747; display: block; background: url(images/menu/up.jpg) #E6E4E5 no-repeat 0 0; width: 150px; height: 16px; padding-top; 0px; }
#menu span{ padding-left: 20px; padding-top: 0; }
#menu li a:hover{ color: #000000; background: url(images/menu/down.jpg) #E6E4E5 no-repeat 0 0; }

.style1 { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #0F5747; }
.style3 { font-weight: bold; color: #0F5747; font-family: Arial, Helvetica, sans-serif; }
.style9 { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style5 { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #0F5747; }

a:link { color: #13715B; }
a:visited { color: #13715B; }
a:hover { color: #0A382E; }
a:active { color: #13715B; }

.style10 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #0F5747; }
.style12 {color: #494949}
.style14 {color: #8B8B8B}
.style21 {color: #555555}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body>
<div id="frame2">
<div id="frame">
<div id="contentheader"> <img src="images/topleft.jpg" width="380" height="76" /><img src="images/topright.jpg" width="395" height="76" /><img src="images/random/title/mainimage.jpg" width="775" height="221" /><img src="images/menuleft1.jpg" width="89" height="41" /><a href="#"><img src="images/mainbut2.jpg" width="74" height="41" border="0" /></a><a href="#"><img src="images/aboutbut3.jpg" width="75" height="41" border="0" /></a><a href="#"><img src="images/screensbut4.jpg" width="76" height="41" border="0" /></a><a href="#"><img src="images/faqbut5.jpg" width="74" height="41" border="0" /></a><a href="#"><img src="images/linksbut6.jpg" width="76" height="41" border="0" /></a><a href="#"><img src="images/submitbut7.jpg" width="74" height="41" border="0" /></a><a href="#"><img src="images/contactbut8.jpg" width="77" height="41" border="0" /></a><a href="#"><img src="images/forumsbut9.jpg" width="73" height="41" border="0" /></a><img src="images/menuright10.jpg" width="87" height="41" /></div>
<div id="contentleft"> <img src="images/mainmenu.jpg" width="183" height="33" />
<div id="men">
<ul class="style9" id="menu">
<li><a href="index.php"><span>Main</span></a></li>
<li><a href="http://www.redgfxforums.com/"><span>About</span></a></li>
<li><a href="graphics.php"><span>Game Info </span></a></li>
<li><a href="contact.php"><span>System Requirements </span></a></li>
</ul>
</div>
<img src="images/interactive.jpg" width="183" height="26" />
<div id="men">
<ul class="style9" id="menu">
<li><a href="index.php"><span>Maps</span></a></li>
<li><a href="http://www.redgfxforums.com/"><span>Mods</span></a></li>
<li><a href="graphics.php"><span>Movies</span></a></li>
<li><a href="photo.php"><span>Patches</span></a></li>
<li><a href="downloads.php"><span>Submit</span></a></li>
</ul>
</div><img src="images/downloads.jpg" width="183" height="28" /> <div id="men">
<ul class="style9" id="menu">
<li><a href="index.php"><span>Forums</span></a></li>
<li><a href="http://www.redgfxforums.com/"><span>Submit</span></a></li>
<li><a href="affiliate.php"><span>Advertise</span></a></li>
</ul>
</div><img src="images/advertisements.jpg" width="183" height="25" /><br/></div><div id="contentcenter">
<div id="forumframe">
<div><img src="images/forumbuttop.jpg" width="371" height="28" /></div>
<div class="style5" id="forumtext"><script language="JavaScript" type="text/javascript" src="forums/topics_anywhere.php?mode=show&f=a&n=50&a=y&s=y&l=y&m=y&h=asmpl&so=d&b=dis&br=y&bl+y"></script>
</div>
<div><img src="images/forumbutbot.jpg" width="371" height="16" /></div>
</div>
<div id="pagetext"><div class="style3"><strong>Gamespy Preview</strong></div>
<div align="left" class="style5"><a href="http://enemyterritorys.the-ggn.com/forums/viewtopic.php?t=3">Comments
<br />
</p>
<div align="center" class="style10"><span class="style14">-----------------------------------------------------------------------------</span><br />
<span class="style12">Website copyright &copy; 2005 - 2006 C Longridge -
All rights reserved. <br />
All trademarks are property of their respective owners.<br />
This site is part of the Global Gaming Network <a href="http://www.the-ggn.com">www.The-GGN.com</a></span></div>
</div>
</div>

<div id="contentright">
<img src="images/potd.jpg" width="183" height="36" /><br/><div>
<div align="center"><table width="100%" border="0">
<tr>
<td><div align="center"><a href="http://enemyterritorys.the-ggn.com/forums/viewtopic.php?t=6"> <img src="http://enemyterritorys.the-ggn.com/thumb.jpg" boarder="0"><br />
<a href="http://enemyterritorys.the-ggn.com/forums/viewtopic.php?t=6"></a></a></div></td>
</tr>
<tr>
<td><div align="center"><font size="2"><a href="http://enemyterritorys.the-ggn.com/forums/viewtopic.php?t=6">Comments (0) </a></font></div></td>
</tr>
</table></div>
</div><img src="images/polltop.jpg" width="183" height="34" /><br/>
<div align="center" class="style5"><table width="150" border="0" cellspacing="0" cellpadding="1" bgcolor="#359287">
<tr align="center">
<td><style type="text/css">
<!--
.input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt}
.links { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; color: #13715B}
-->
</style><font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#FFFFFF"><b>Quake Wars Poll</b></font></td>
</tr>
<tr align="left">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" bgcolor="#E7E5E6">
<tr>
<td height="40" valign="middle"><font face="Verdana, Arial, Helvetica, sans-serif" color="#13715B" size="1"><b>Who will you play as first?</b></font></td>
</tr>
<tr align="right" valign="top">
<td>
<form method="post" action="2.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top" align="left">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="1" align="center">
<tr>
<td width="15%"><input type="radio" name="option_id" value="Stogg"></td>
<td width="85%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#13715B">Stogg</font></td>
</tr>
<tr>
<td width="15%"><input type="radio" name="option_id" value="GDF"></td>
<td width="85%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#13715B">GDF</font></td>
</tr>
</table><div align="center">
<input type="hidden" name="action" value="vote">
<input type="hidden" name="poll_ident" value="4">
<input type="submit" value="Vote" class="input">
<br>
<br>
<font face="Verdana, Arial, Helvetica, sans-serif" color="#13715B" size="1"><a href="2.php?action=results&amp;poll_ident=4">View Results</a>
</font></div>
</td>
</tr>
</table>
</form>
<font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<img src="images/pollbottom.jpg" /></div>
<br clear="all" />
</div>
</div>
</body>
</html>
The Little Guy
02-17-2006, 09:25 AM
You have 153 HTML errors, and it wouldn't let me Check CSS I get an error:

Please, validate your XML document first!

Line 3

Column 2

The markup in the document preceding the root element must be well-formed.

Your problem probably is because of errors in your HTML, and/or CSS
fab0990
02-17-2006, 10:19 AM
damn thats embarasing i have been validating it reguarly but ive been uploading the source code and not entering the webpage url. I only had 18 errors and i cant change them because all of them are part of the javescript. I guess that means all the other errors are coming from the scripts im using for content management which is a bugger.
fab0990
02-17-2006, 03:25 PM
I just spent the last 4 hours working on it and i still cant figure out whats wrong, its starting to do my head in. I have it stuck in my head that its a matter of simply adding in ( or taking out ) a little code so ive been trying everything but to no avail....... i look forward to more replies.
Kravvitz
02-17-2006, 03:35 PM
& should be &amp;

You need to terminate the empty elements. (http://www.w3.org/TR/xhtml1/#h-4.6)

This is a bit old, but much of what it says is relevant -- What's wrong with the FONT element? (http://www.mcsr.olemiss.edu/~mudws/font.html)

Why tables for layout is stupid (http://www.hotdesign.com/seybold/index.html)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Tables Vs. CSS - A Fight to the Death (http://www.sitepoint.com/article/tables-vs-css/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
The layout is dead, long live the layout (http://www.westciv.com/style_master/house/good_oil/dead_layout/)
Tables or CSS: Choosing a layout (http://evolt.org/article/Tables_or_CSS_Choosing_a_layout/25/21429/)
fab0990
02-17-2006, 08:00 PM
Ive got rid of some of the <font> tags, however there are some that are embeded within the content management stuff that i cannot change. I also got rid of the empty elements but still its the same. I hope i dont need to recode the entire thing :(

still looking for help guys.....

Oh and Kravvitz i read "What's wrong with the FONT element?" and that info was very helpfull, ill remember that in the future thanks.