Log in

View Full Version : Link CSS not working correctly in FF?


Kakouhai
02-09-2007, 08:08 PM
Okay, I'm having some troubles with my links on a website I'm creating. They works fine in IE, but not so well in FF :/

How it looks in IE:
http://i112.photobucket.com/albums/n166/starzkaye/codeIE.gif

How it looks in FF:
http://i112.photobucket.com/albums/n166/starzkaye/codeFF.gif

Both the margins and the width aren't working in FF. Is there anything I can do to fix this? :confused:

Here's my coding,


<style>
body { background-image: url(IMG URL); }

body, td, p, div { font-family: tahoma; color: #7C7C7C; font-size: x-small; }
b{
color: #E8A6A6;
font-family:tahoma;
font-size:8pt;
font-weight:bold;}

A:link, A:visited, A:active
{color: #525151;
text-decoration: none;
font-family: tahoma;
border-style: solid;
border-width: 1px;
Width: 100%;
margin-bottom: 1px;
font-size: 8pt;
letter-spacing:1px;
}
A:Hover { color: #000000;
text-transform: uppercase;
background-color: #EBD5D5;
border-style: solid;
border-width: 1px;
Width: 100%;
margin-bottom: 1px;
letter-spacing: 5px;
font-weight: none;

</style></i>
<div style="position:absolute; left:0px; top:0px;width:500">
<img src="IMG URL"></div>

<div style="width:480; height:1000; overflow: auto; left: 260; top: 220; position: absolute;"><br>
TEXT HERE
</div>

<div style="width:110; height:1000; overflow: auto; left: 80; top: 280; position: absolute;">
<a href="URL">link</a><br>
<a href="URL">link</a><br>
<a href="URL">link</a><br>
<a href="URL">link</a><br>
<a href="URL">link</a><br>
</div>
coothead
02-10-2007, 12:13 PM
Hi there Kakouhai,

and a warm welcome to these forums. ;)

Try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-image:url();
}
body,td, p, div {
font-family:tahoma,sans-serif;;
font-size: x-small;
color: #7c7c7c;
background-color:#fff;
}
#nav {
width:110px;
margin:220px 0 0 80px;
float:left;
}
#content {
width:480px;
margin:220px 0 0 70px;
float:left;
}
#nav {
list-style:none;
}
#nav a:link,#nav a:visited,#nav a:active {
width:100&#37;;
display:block;
padding:4px;
font-size:8pt;
color:#525151;
letter-spacing:1px;
text-decoration: none;
background-color:#fff;
border:1px solid #000;
margin-bottom:1px;
}
#nav a:hover {
color:#000;
text-transform:uppercase;
background-color:#ebd5d5;
letter-spacing:5px;
}
</style>



</head>
<body>

<div><img src="#" alt=""/></div>

<ul id="nav">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p><p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
</p>
</div>

</body>
</html>
Notice the DOCTYPE, it is important for cross browser compatibility to always use one.
Also note that it is rarely necessary to use absolute positioning for layout purposes.
You will also see that a list has been used in preference to <br>s for the links.
Finally use a compliant browser like Opera or Firefox for coding and then 'tweak' for IE.

coothead
Kakouhai
02-10-2007, 02:37 PM
Thank you so much! I'll try it :3