I've created a layout in css and it works in Safari, Chrome and IE but not Firefox. I thought IE was the odd one out. Anyway I seem to have narrowed it down. It's the logo in the top left, if it has a link on it it seems to move the margin a lot to the right. Try it out.
How can I make the code work in firefox as well?
Code:
body
{
margin: 0;
padding: 0;
text-align:left;
color: black;
font: medium Arial, Helvetica, Verdana,sans-serif;
}
ul, li
{
list-style-type: none;
}
#header
{
margin-right: 10px;
margin-left: 10px;
border: 2px solid black;
position: relative;
filter:alpha(opacity=80);
opacity: 0.80;
height: 62px;
background-color: white;
}
#sidebarleft
{
float: left;
margin-left: 10px;
margin-top: 10px;
height: 600px;
border: 2px solid black;
position: relative;
filter:alpha(opacity=80);
opacity: 0.80;
width: 170px;
background-color: white;
}
#sidebarleft b
{
position: absolute;
left: 0px;
right: 0px;
background: #d9eaff;
}
#sidebarleft a:link
{
color: black;
text-decoration: none;
}
#sidebarleft a:visited
{
color: black;
text-decoration: none;
}
#sidebarleft a:hover
{
color: black;
text-decoration: underline;
}
#sidebarleft a:active
{
color: black;
text-decoration: underline;
}
#sidebarleft ul
{
margin: 0;
padding: 0;
border: 2px solid white;
}
HTML:
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- header start -->
<div id = "header">
<a href="index.htm"><img src="images/logo.png" align="left" height="61" width="262"></a>
</div>
<!-- header end -->
<!-- sidebarleft start -->
<div id="sidebarleft">
<center><b><u>Navigation</b></u></center>
<br/>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="link1.htm">link1</a></li>
<li><a href="link2.htm">link2</a></li>
<li><a href="/link3/">link3</a></li>
<li><a href="link4.htm">link4</a></li>
</ul>
</div>
<!-- sidebarleft end -->
</html>How can I make the code work in firefox as well?
