PDA

View Full Version : problems with IE/FF css pls hlp



Coastal Web
Mar 19th, 2007, 07:55 AM
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:
http://www.vidpit.com/cssprob/css_problems.gif

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;
}



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>

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

Best regards,

_Aerospace_Eng_
Mar 19th, 2007, 09:05 AM
You can't expect things to work the way you want when your code is bad. You need a doctype. You also need units on your CSS values. Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#box h3 {
width: 207px;
height: 40px;
background: url(boxHd.gif) no-repeat;
padding:0;
margin: 0;
line-height:40px;
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: 210px;
list-style: none;
margin: 0;
padding:0 10px 15px 0;
}


#box li {
background: url(dashed_line.gif) repeat-x 0 100%;
padding-right: 10px;
padding-left: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;
}
</style>
</head>
<body>
<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>
</body>
</html>

Coastal Web
Mar 19th, 2007, 05:15 PM
Thank you _Aerospace_Eng_,

Your code does the trick just great ;) - so l guess the main 2 things are the doc type, and the lack of determining what units l meant to be used within my styles.

Thanks so much for the help.