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:

How it looks in FF:

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

Here's my coding,

HTML Code:

<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...

Code:

<!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

Thread: Link CSS not working correctly in FF?

Thread Tools

Search Thread

Link CSS not working correctly in FF?

Bookmarks

Bookmarks

Posting Permissions