Forum Moderators: not2easy

Message Too Old, No Replies

CSS breaks my links in Safari

am I doing something wrong?

         

too much information

12:25 am on Oct 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I thought my links looked pretty good in IE, then I tried it in Safari.

Although it looks great, it only displays as text. I'm thinking the problem is with my CSS setup, maybe I just can't see it?

Here's what I'm using for my text link over a background image:

<div>
<a href="#" class="ver10"><h2>Subscribe</h2></a></div>

Here's the CSS code that applies to this line:

h2 {
font-family: Times, Times New Roman;
font-size: 14px;
text-decoration: none;
color: #000000;
position: relative;
top: 25%;
text-align: center;
}
.ver10 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
color: #000000;
}

any ideas?

MonkeeSage

2:05 am on Oct 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't see anything wrong with your CSS there, but just on a hunch...try putting these two entries on the link instead of the h2...

position: relative;
top: 25%;

...it shouldn't matter, but mabye Safari doesn't like having a positioned element nested in a link.

Or mabye leave your CSS as is and change the markup to...

<div>
<h2><a href="#" class="ver10">Subscribe</a></h2></div>

Jordan

too much information

3:43 am on Oct 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey, thanks! that worked great.

Here's what I ended up with:

<div>
<h2><a href="#">Subscribe</a></h2></div>

I also added

a{
text-decoration: none;
color: #000000;
}

to my stylesheet. The class call in the anchor tag was overriding the style for the h2

thanks again