problems with IE/FF css pls hlp

Greetings Folks,

I was hoping someone would be able to help me out here. I'm an old school developer that's used tables most of my "coding" life... however l've recently began to try and force myself to use CSS; where l normally would have used tables.

Now one of the reasons l have so much trouble "switching" over to 100% css is that l *always* get cross browser issues and here is one of those cases.

Here l've gotten a simple little content box l was working on:

http://www.vidpit.com/cssprob/box.html


In IE the box renders exactly how l want it to look; pretty much.

However in FF there are 2 main issues with the box - see screen caps here:


Hopefully one of you guys will be able to help me out - the css code is pretty sloppy because l broke it apart several times trying to figure out what it was that is causing this firefox "fall apart".

You can view the source of this page: http://www.vidpit.com/cssprob/box.html

I'll also paste my codes here:

My CSS Used:

#box h3{
width: 207;
height: 40;
background: url('boxHd.gif') no-repeat;
display: block;
padding-top: 11;
margin: 0;
text-align: center;
color: #7E7F82;
font-size: 9pt;
font-weight: 400;
font-family: verdana, arial, sans-serif;
}


#box ul{
background: url(boxContent.gif) no-repeat bottom left;
width: 210;
list-style: none;
margin: 0;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
}


#box li{
background: url(dashed_line.gif) repeat-x 0 100%;
padding-right: 10px;
}

#box li a{
font-family: tahoma, verdana, arial, sans-serif;
font-size: 8pt;
color: #848282;
background: url('arrow2.gif')  no-repeat;
padding-left: 10px;
text-decoration: none;
}

#box li a:hover{
font-family: tahoma, verdana, arial, sans-serif;
font-size: 8pt;
color: #08ADFE;
background: url('arrow.gif') no-repeat;
padding-left: 15px;
text-decoration: none;
}

Code (markup):

My HTML used:

<div id="box">
<div class="wrap">
<h3>Browse By Category</h3>
<ul>
<li><a href="#">Database management</a></li>
<li><a href="#">Blog &amp; News Systems</a></li>
<li><a href="#">Full Site CMS</a></li>
<li><a href="#">Template Systems</a></li>
<li><a href="#">Database management</a></li>
<li><a href="#">Blog &amp; News Systems</a></li>
<li><a href="#">Full Site CMS</a></li>
<li><a href="#">Template Systems</a></li>
</ul>
</div>
</div>

Code (markup):

I hope someone can help me out with these 2 questions.

Best regards,

 

I am not css espert. but i think

margin: 0; is not correct it should

be like margin: 0 0 0 0;

 

Greetings Yiam,

Thanks for the help; l also posted on codingforums and got the problem solved: http://codingforums.com/showpost.php?p=547023&postcount=2

Appears that not having a doc-type in the document caused it to render in quirks mode. But thanks for your help!