PDA

View Full Version : Firefox and IE problems.



oliver111
Aug 17th, 2007, 07:57 PM
Ok www.forwardsites.com

Here is my problem, in firefox the image goes down with the padding, in IE the image stays the same, heres the code.

body{
margin:0px auto;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#header{
margin:20px auto;
padding:0px;
width:625px;
height:80px;
}

#ul {
padding:32px 0px 0px 0px;
background-image:url(images/img03.gif);
text-align:center;
float:left;
width:125px;
height:80px;
}

.bp:hover{text-decoration:line-through;color:#000000;}
.bp:link{text-decoration:none;color:#000000;}
.bp:visited{text-decoration:none;color:#000000;}
.bp:hover, visited{text-decoration:line-through;color:#000000;}

bp{
width:125px;
height:80px;
}

srule_
Aug 17th, 2007, 08:30 PM
You need to add padding to the text not the entire #ul ID. Adding padding to all of the UL make it and everything inside it move down.

but your main problem is in the HTML not the css.
you made your horizontal navigation like this :


<div id="ul"><a href="index.html" class="bp"></a></div>
<div id="ul"><a href="index.html" class="bp">HOME</a></div>
<div id="ul"><a href="about.html" class="bp">ABOUT</a></div>
<div id="ul"><a href="contact.html" class="bp">CONTACT</a></div>
<div id="ul"><a href="index.html" class="bp"></a></div>


This is very very wrong. 1st of all u can not have multiple ID's. If u want to use the same ID more then once the use class="ul", and in the css it would be .ul instead of #ul. However that is just the begging of your problems. the major one is that you should make your nav like this:



<ul>
<li><a href="index.html"></a></li>
<li><a href="index.html" ></a></li>
<li><a href="index.html"></a></li>
</ul>


end then add the appropriate css styling to make it horizontal
ex:
li { display:inline;}

or

li {float:left;}

I recommend u search good for some tutorial on horizontal navigation bars, and learn to them the right way instead of experimenting your self and getting into bad habits.