Welcome to WebmasterWorld Guest from 54.226.62.251

Forum Moderators: not2easy

Message Too Old, No Replies

CSS probelm with Safari or IE or Netscape?

link elements not showing up in Safari between div

     

Astrogen

4:49 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

5:05 pm on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

6:16 pm on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to Webmaster World!

the hyperlink does not show up

As in... gone?

Astrogen

6:20 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

6:23 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

6:34 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

6:36 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

6:43 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

6:58 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

8:27 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



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

8:46 pm on Feb 16, 2004 (gmt 0)

10+ Year Member



: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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month