CSS Forum

**HitRaj47** · 03-19-2005, 11:16 AM

im currently redesigning my site and ive run into some CSS problems.

my site is located here: http://fnar.sytes.net/redesign/

The top navbar looks how I want it on Firefox, but not on IE. My CSS is located here: http://fnar.sytes.net/redesign/fnar.css

Please help. Thanks.

**dk01** · 03-19-2005, 12:35 PM

In your CSS you have:

#topnav ul li a {
. . .
margin: 0 0 10px 0;
. . .
}

change it to
margin: 0 0 0 0;

If you want to add a bottom margin to the topnav you should instead have it like this:

#topnav {
. . .
margin: 0 0 10px 0;
. . .
}

Here's the updated css code:

Code:

body

{

background-color: #fff;

color: #000;

font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

font-size: 10pt;

}



#topnav

{
height: 26px;

margin: 0 0 10px 0;

padding: 0;

font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

background-color: #000;

}



#topnav ul

{

border: 0;

margin: 0;

padding: 0;

list-style-type: none;

text-align: center;

}



#topnav ul li

{

display: block;

float: left;

text-align: center;

padding: 0;

margin: 0;

}



#topnav ul li a

{

background: #fff;

width: 150px;

height: 24px;

border-top: 1px solid #f00;

border-left: 1px solid #f00;

border-bottom: 1px solid #f00;

border-right: none;

padding: 0;

margin: 0 0 0 0;

color: #000;

text-decoration: none;

display: block;

text-align: center;

font-size: 14pt;

}



#topnav ul li a#mkradio

{

border-right: 1px solid #f00;

}



#topnav ul li a:hover

{

color: #fff;

background: #000;

}



#topnav a#current

{

background: #000;

color: #f00;

}



#leftnav

{

position: absolute;

top: 100px;

left: 20px;

background-color: #fff;

border: 1px dashed #f00;

line-height: 17px;

voice-family: "\"}\"";

voice-family: inherit;

width: 141px;

font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

}



#leftnav ul

{

list-style-type: none;

padding: 0;

margin: 0;

}



#leftnav a

{

display: block;

color: #000;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}



#leftnav a:hover

{

background-color: #000;

color: #fff;

}



#content 

{

margin: 0px 50px 50px 200px;

padding: 10px;

}



#content h1

{

color: #f00;

font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

font-size: 22pt;

font-weight: bold;

}

Good luck!

-dk

**HitRaj47** · 03-19-2005, 12:49 PM

w00t fixed

thanks for your help

**thevirus** · 03-19-2005, 02:34 PM

Now can someone help me? my header looks how I want it to in firefox but not in ie
you can see it here http://www.webmastershed.com/header.html

**dk01** · 05:07 PM

Virus if you must use tables for your design then try to minimize the number of nested tables. It will speed up rendering times (since you have some large images already). In the code below I took your two tables and merged them into one table that works in IE6, FF 1.0.1, and NS 7.2.

Code:

<html>
<body>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=98%>
<tr>
<td valign=top width=142 rowspan=2><img src=http://www.webmastershed.com/images/logo.gif></td>
<td valign=top width=95 rowspan=2><img src=http://www.webmastershed.com/images/turn1.gif></td>
<td body background=http://www.webmastershed.com/images/top1.gif height=55>&nbsp;</td>
<td width=3><img src=http://www.webmastershed.com/images/top2.gif></td>
<td width=200 body background=http://www.webmastershed.com/images/top3.gif>&nbsp;</td>
<td rowspan=4 width=2><img src=http://www.webmastershed.com/images/right2.gif></td>
</tr>
<tr>
<td rowspan=1 height=139 align=center valign=center><a href=http://www.webmastershed.com><img alt="Webmaster Shed - Website Development & Website Promotion" title="Webmaster Shed - Website Development & Website Promotion" border=0 src=http://www.webmastershed.com/images/title4.gif width=320></a></td>
<td body background=http://www.webmastershed.com/images/line.gif width=3></td>
<td rowspan=1>
<center>

<b>Sponsored Links:</b></center>
&nbsp;1.<br>
&nbsp;2.<br>
&nbsp;3.<br>
&nbsp;4.<br>
&nbsp;5.<br>
</td>
</tr>
<tr> 
	<td colspan="3" height="23" background="http://www.webmastershed.com/images/navbar.gif" style="text-align:right;"><img src="http://www.webmastershed.com/images/navbar.gif"></td>
	<td height="23" style="width:3px;text-align:right;"><img src="http://www.webmastershed.com/images/div1.gif" width="3" height="23"></td>

        <td background="http://www.webmastershed.com/images/navbar3.gif" height="23" width="200">&nbsp;</td>
</tr>
<tr> 
<td colspan="5" body background="http://www.webmastershed.com/images/navbar2.gif" height="30">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><a href=http://www.webmastershed.com>Home</a> :
<b><a href=http://www.webmastershed.com/clipart>Clipart</a> : 
<a href=http://www.webmastershed.com/articles>Articles</a> :
<a href=http://www.webmastershed.com/newsletter>Newsletter</a></b> : <a href=http://www.webmastershed.com/contact>Contact</a> : <a href=http://www.webmastershed.com/link>Partners</a></b>


</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Again one of the things I can't stress enough is the great use of the [url=http://validator.w3.org]w3c code validator[/code]. By validating you will catch errors and will have properly formed code. As of right now your code doesn't have any of the specs recommended by the w3c for webdesigners to follow. You may also want to look at using css. You could really get rid of a bunch of code and table junk. Anyhow I hope I don't sound too negative, I just want anyone who wants to have a site for webmasters to have a properly coded site.

I know, I am a pain....but I wish you the best.

-dk

**thevirus** · 03-19-2005, 09:48 PM

I agree you are right, and thank you VERY much for doing that for me. Now, what is interesting is that on the forum page the header is still messed up, while on all other pages its not...

I cant figure out what the problem is because they both share the same css file...