Jump to content
Stef's Coding Community
Sign in to follow this  
rafmedia

Help with CSS

Recommended Posts

Whats wrong with my CSS? =(

 

A:link {color: #008cdc, text-decoration: underline}

A:visited {color: #008cdc, text-decoration: underline}

A:hover {color: #008cdc, text-decoration: none}

 

Please help

Share this post


Link to post
Share on other sites
Whats wrong with my CSS? =(

 

A:link {color: #008cdc, text-decoration: underline}

A:visited {color: #008cdc, text-decoration: underline}

A:hover {color: #008cdc, text-decoration: none}

 

Please help

 

You need ";" following your css statements, rather than commas. For example, this is the correct code:

a:link    { color: #008cdc; text-decoration: underline; }

Share this post


Link to post
Share on other sites

CSS is case sensitive.

 

You are calling for a change in the CSS for the element "A" where as the HTML is most likely a lower case "a".

(as in: Link text)

 

It's a good habit to write ALL of your code in lower case lettering. =)

Edited by JBall

Share this post


Link to post
Share on other sites
CSS is case sensitive

 

I don't think you are right, but I may be corrected. It's a requirement of XHTML to use lower case, but I don't think XHTML fails with upper case, it just brings up validation errors.

 

It's good practice to use lower case with HTML.

 

Lower case and upper case are critical with filenames and urls, so that if the filename is File.HTML and the link has file.html most servers will fail to make the connection.

 

Edit: You were almost right and so was I.

With this code:-

br />   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">







Test

<br />#Wrapper { position: relative; background-color: blue; width: 500px; <br />height: 500px; }<br />#inner { position: absolute; left: 80px; bottom: 15px; background-color: <br />pink; width: 200px; height: 100px; }<br />A { color: green; }<br />A:hover { color: blue; }<br />






Inner div

Inner div

Inner div


Test
Test





 

The links have correct colors in both links even though one has conflicting lower case while the style is upper case (using IE7).

 

However, with the #wrapper it must be the same, either both lower case or both upper case, in the markup and style or the div background doesn't show, so the rule is that tags are OK if not the same but IDs must be the same (like filenames).

 

The

Edited by Wickham

Share this post


Link to post
Share on other sites

I'm sure you're right. But, it doesn't seem right to me.

 

"a" and "A" seem like apples and oranges...

 

Out of curiosity, how does that hold up in FX3? I've always heard that IE shows you what you want it to look like but, FX shows you what you wrote.

Share this post


Link to post
Share on other sites

It's the same in Firefox 3. Both links work with color change on hover even though one has a lower case/upper case mismatch but the #wrapper must be spelled with the same lower or upper case as the markup or the styles don't work.

 

We both agree, though, that lower case is preferred, even for HTML.

Edited by Wickham

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...