CSS on my links and an image not working

kralcx · May 7, 2010

Hello and thanks in advance for any help you can give me. I just started working on my site in Dreamweaver and I've run into a problem. I want my links to have different colors, change when hovered on etc. I also have an image which I want aligned to the top of the text it is next to. Everything looks fine in the Dreamweaver window and all of my code validates in HTML strict and CSS strict. However the links are set to default and the image does not line up properly in any of the browsers that I have tested (Opera, Firefox, IE, nor Chrome).

Here is the external style sheet with the style for the image and the links

a:link {color: black;

text-decoration: underline;

}

a:visited {color: #A68200;

text-decoration: none;

}

a:focus {color: yellow;

text-decoration: none;

}

a:hover {color: yellow;

text-decoration: none;

}

a:active {color: yellow;

text-decoration: none;

}

img {

border:0px;

vertical-align:top;

}

and here is the code for the home page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="generator" content="Adobe Dreamweaver CS4" />

<meta name="Author" content="www.hiygin.com" />

<title>hiygin > Health Is Yours Get It Now > AIM International</title>

<link rel="icon" href="favicon.ico" type="image/x-icon" />

<link href="css/layout.css" rel="stylesheet" title="layout" type="text/css" media="screen" />

<link href="css/styles.css" rel="stylesheet" title="styles" type="text/css" media="screen" />

</head>

<body class="thrColHybHdr">

<div id="wrap">

<div id="container">

<div id="header">

<h1>Header</h1>

</div>

<div id="sidebar1">

<h3>sidebar1 Content</h3>

<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>

<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>

</div>

<div id="sidebar2">

<h3>sidebar2 Content</h3>

<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar2 div. </p>

<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>

</div>

<div id="mainContent">

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>

<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. </p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

</div>

<br class="clearfloat" />

<div id="footer">

<div class="footerbox">

<h5>This page contains copyrighted materials and/or trademarks of AIM International, Inc. (the official AIM corporate web site) and is reprinted with permission.</h5></div><br class="clearfloat" />

<div class="footerbox">

<h5>Products of The AIM Companies™ have not been evaluated by the U.S. Food and Drug Administration FDA) and are not intended to diagnose, treat, cure, or prevent any disease or illness. Results may vary per person.</h5></div>

<p><a href="#" title="Site Map">Site Map</a> | <a href="#" title="Help">Help</a> | <a href="#" title="Accessibility">Accessibility</a> | <a href="#" title="Terms of Use">Terms of Use</a> | <a href="#" title="Privacy Policy">Privacy Policy</a> | <a href="http://www.copyscape.com/online-copyright-protection/"><img src="http://banners.copyscape.com/images/cs-wh-88x31.gif" alt="Protected by Copyscape Online Copyright Checker" width="88 height='31" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." /></a> 2010 ©hiygin - All Rights Reserved </p>

<p> </p>

</div>

</div>

</div>

</body>

</html>

If I put too much information up here I apologize. I wasn't sure how much to give. Also if it helps the web site is http://w ww.hiy gin.com

Thanks again for any help or suggestions.

falkencreative · May 7, 2010

The first thing I would check is if you have the paths to the CSS file are correct... According to your code:

css/layout.css

css/styles.css

According to this, your file should look something like this:

-- root folder that contains everything
   -- html files
   -- /css/ folder
       -- layout.css
       -- styles.css

Have you confirmed that all the files are in the right place? If you have uploaded this to your web hosting, have you confirmed that you uploaded everything correctly?

Andrea · May 7, 2010

Ben, his paths are fine - HOWEVER, there is something totally weird going on. Go to the source - view-source:http://www.hiygin.com/ - and you can see both stylesheets: layout and styles.

If you go to the page, the links in the footer do NOT change on hover, etc. But once I've used my webdeveloper - CSS/Edit CSS, where strangely, I only see layout.css, but not styles.css, then close it again, THEN I see the hover affect on the links......

The only thing odd I noticed was that on layout.css, everything is surrounded by < -- ... -- >

falkencreative · May 7, 2010

Oops, didn't see that he linked the website.

The CSS file being surrounded by "" doesn't seem to be causing any issues, but I'm not sure why that's there.

However, it seems like the source of the issue is the "title" attribute in the CSS links:

<link href="css/styles.css" rel="stylesheet" title="styles" type="text/css" media="screen" />
<link href="css/layout.css" rel="stylesheet" title="layout" type="text/css" media="screen" />

If you remove the "title='__'" section from both CSS links, things start working fine for me. Try that?

kralcx · May 7, 2010

Thank you so much for the quick reply. I never would have figured that one out on my own. Can someone explain to me the proper use of the 'title' tag in conjunction with external style sheet link?

I just wanted to say everything is working for me now and I've also removed the comment symbols at the beginning and end of my style sheets.

falkencreative · May 7, 2010

Here's a post that explains this in a bit more depth: http://blogs.telerik.com/dimodimov/posts/08-05-15/title_attributes_in_css_link_tags_prevent_styles_from_being_applied.aspx

I'd personally suggest not using title tags in your CSS link -- I can't see how that helps, since the browser doesn't read title tags within the <head> section like it does within the <body>.

kralcx · May 7, 2010

Thanks for that. That blog was helpful.

Sign In

CSS on my links and an image not working

Recommended Posts

kralcx

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

kralcx

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

kralcx

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support