CSS probelm with Safari or IE or Netscape?

link elements not showing up in Safari between div

[Astrogen]

Hi,

I'm fairly new to CSS2, and designing to work with Safari. I have a site that looks good under IE 6.0 however wierd things happen under the other browsers.

I have confirmed that I am CSS2 valid, and XHTML 1.1 valid. using the W3C Validator.

The first problem I am having is I have news articles..

formatted roughly like so...
<div class="article>
<div class="story">
This is the story....<a href="more.cgi">Read more</a>
</div>
</div>

The problem is the hyperlink does not show up under safari. I thought Safari was supposed to be the most CSS2 compliant browser out there.

Where can I look, or what can I do?

If you wanted to check it out live <Sorry, no URLs. See TOS [webmasterworld.com]>

Thanks much.

-Astrogen

[edited by: tedster at 5:50 pm (utc) on Feb. 16, 2004]

[Birdman]

Welcome to WebmasterWorld, Astrogen.

Most likely because these rules are defined in the wrong order:

a.story:visited { color: #a02000}
a.story:link { color: #FF0000 }
a.story:active { color: #0000FF }
a.story:hover { color: #00FFFF }

This is the proper order:
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

Read more about pseudo classes [w3schools.com].

By the way, posting specific websites is against the rules [webmasterworld.com].

[DrDoc]

Welcome to Webmaster World!

the hyperlink does not show up

As in... gone?

[Astrogen]

Thanks and sorry about the link.

I fixed the order of the link pseudo classes but the problem is still present.

I think the problem may be related to the first-letter pseudo class (see it used in div.story:first-letter below, As this is messed up in Safari too; though it does work properly in IE. 6.0

Now that the link is removed here is another example of the code.

<div class="article">
<div class="selector"><input name="ad122" type="checkbox" /></div>
<div class="headline"> Blanket burning</div>
<div class="author">Marcy Nicholson</div>
<div class="category">Local News</div>
<div class="identifier">122</div>
<div class="story">
A 23-year-old Brandon man has been treated for smoke inhalation after the blanket he was wrapped in caught fire.

The Brandon Fire Department responded to the Victoria Avenue house fire at 8:45 p.m. Saturday.

&ldquo;The individual
... <a href="displayad.cgi?adnum=122" class="story">Read More...
</a></div>
</div>

and the CSS:

div.article { margin: 0.5em; display: block }
div.selector {position: relative; top: 20px }
div.story { margin: .2em; position: relative; left: 2em; width: 90%; color: black; text-align: left}
p.story { margin: .2em; position: relative; left: em; width: 90%; color: black; text-align: left}
div.story:first-letter {padding-right: 250%; font-size: 2em; font-style: italic; font-weight: bold; float: left }
div.identifier { display: none; position:relative; width: 95%; text-align: right; bottom: 1px; vertical-align: bottom; color: #000000}
div.category { position:relative; width: 95%; color: #000000; font-weight: bold; top: 1px; text-align: left; vertical-align: top}
div.headline { font-size: 2em; text-align: center; font-weight: bolder; color: #000000 }
div.author { text-align: center; font-weight: bold; color: #000000 }

[Astrogen]

Yes, Dr. Doc. You just can't see, or click on it anywhere.

Another problem that I have that isn't posted but may be related is that sometimes in Safari, I can see a link (similar to this example) but just can't click on it. But I'll start working on that after I get this problem fixed.

-Astrogen.

[aevea]

If your going to float the

::first-letter

, you should probably declare a width. Also, I would recommend taking the class off the link and call it with:

.story a:whatever

.
You can do the same for the paragraphs since their also nested within a div with a class of story.

Adam

[Astrogen]

First Letter Psuedo class.

Infact... I just removed the first letter CSS from the page, and it fixed the problem with the link... Whats up with that?

div.story:first-letter {padding-right: 250%; font-size: 2em; font-style: italic; font-weight: bold; float: left }

[Astrogen]

aevea:

Thanks for the suggestion; but it still doesn't work.

I removed the class="story" from the anchor <a>,
and changed the CSS to

div.story:first-letter {width: 200%; padding-right: 250%; font-size: 2em; font-style: italic; font-weight: bold; float: left }

for the first letter. Same problem exactly.

[aevea]

I don't have a mac, so I can't test. Did you try changing :first-letter to ::first-letter? If all else fails, you can wrap the first-letter in a span and try styling that instead of the pseudo-element.

Adam

[Astrogen]

Nope ::first-letter gives me the same thing.

ist it supposed to be ::first-letter or is it supposed to be :first-letter?

-Astrogen

[aevea]

:first-letter is correct, I just thought safari might be looking ahead. ::first-letter is the css3 recommendation.

[w3.org...]

I've experienced strange things with :first-line and :first-letter before. I know it's kind of bloaty, but you could also try enclosing all your text in paragraphs and giving the first paragraph a class of "first", and then applying the declarations to

.first:first-letter

Adam