CSS & Link - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS & Link

When clicked, they all move to the side

Athrus

7:36 pm on Apr 17, 2007 (gmt 0)

10+ Year Member

Hey guys, after a bit 'o time fooling around with CSS and links, I finally got them to look the way I wanted. They look great and work great in IE, but I don't use IE.

In firefox, when I click the links, they all get shifted over to the left side of the page which is really annoying.

here's the code:


Table.Main {
 background-color: #000000;
}
Table.Menu{
background-color: #000000;
}
Table.Menu td{
background-color: #000000;
}
Table.Menu A:link{
display: -moz-inline-block;
alignment: center;
 background-image: url('boxB.jpg');
background-repeat: repeat-y;
background-color: #000000;
border: 1px solid #434343;
font-family: Arial;
 font-size: 12;
 width: 100px;
 text-indent: 13px ;
 color: #434343;
 text-decoration: none;
}
Table.Menu A:visited{
display: -moz-inline-block;
 background-image: url('boxB.jpg');
background-repeat: repeat-y;
background-color: #000000;
border : 1px solid #434343;
font-family:Arial;
 font-size: 12;
 width: 100px;
 text-indent: 13px ;
 color: #434343;
 text-decoration: none;
}
Table.Menu A:hover{
display: -moz-inline-block;
 background-image: url('boxW.jpg');
background-repeat: repeat-y;
background-color: #000000;
border : 1px solid #aeaeae;
font-family:Arial;
 font-size: 12;
 width: 100px;
 text-indent: 13px;
 color: #aeaeae;
 text-decoration: none;
}
Table.Menu A:active{
display: -moz-inline-block;
 background-image: url('boxW.jpg');
background-repeat: repeat-y;
background-color: #000000;
border : 1px solid #aeaeae;
font-family:Arial;
 font-size: 12;
 width: 100px;
 text-indent: 13px ;
 color: #aeaeae;
 text-decoration: none;
}

cmarshall

8:12 pm on Apr 17, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to WebmasterWorld!

Doesn't happen for me.

I always use a pretty strict DOCTYPE. maybe that has something to do with it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Untitled
</title>
<style type="text/css">
/* <![CDATA[ */
Table.Main {
background-color: #000000;
}
Table.Menu{
background-color: #000000;
}
Table.Menu td{
background-color: #000000;
}
Table.Menu A:link{
display: -moz-inline-block;
alignment: center;
background-image: url('boxB.jpg');
background-repeat: repeat-y;
background-color: #000000;
border: 1px solid #434343;
font-family: Arial;
font-size: 12;
width: 100px;
text-indent: 13px ;
color: #434343;
text-decoration: none;
}
Table.Menu A:visited{
display: -moz-inline-block;
background-image: url('boxB.jpg');
background-repeat: repeat-y;
background-color: #000000;
border : 1px solid #434343;
font-family:Arial;
font-size: 12;
width: 100px;
text-indent: 13px ;
color: #434343;
text-decoration: none;
}
Table.Menu A:hover{
display: -moz-inline-block;
background-image: url('boxW.jpg');
background-repeat: repeat-y;
background-color: #000000;
border : 1px solid #aeaeae;
font-family:Arial;
font-size: 12;
width: 100px;
text-indent: 13px;
color: #aeaeae;
text-decoration: none;
}
Table.Menu A:active{
display: -moz-inline-block;
background-image: url('boxW.jpg');
background-repeat: repeat-y;
background-color: #000000;
border : 1px solid #aeaeae;
font-family:Arial;
font-size: 12;
width: 100px;
text-indent: 13px ;
color: #aeaeae;
text-decoration: none;
}
/* ]]> */
</style>
</head>
<body>
<table class="Main" cellpadding="0" cellspacing="0">
<tr><td><table class="Menu" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#">Link A</a></td>
<td><a href="#">Link B</a></td>
</tr>
</table></td></tr>
</table>
</body>
</html>

Athrus

10:16 pm on Apr 17, 2007 (gmt 0)

10+ Year Member

Awesome it works. Thanks a lot for your help!

edit:fixed firefox problem

[edited by: Athrus at 10:38 pm (utc) on April 17, 2007]