Trouble linking to external CSS [Archive]

View Full Version : Trouble linking to external CSS

tiercel

08-14-2008, 06:54 AM

I'm new to CSS and interested in the example codes shown here. Problem is, at least for some of the CSS examples, while they work just fine if I cut-and-paste the CSS code between <style></style> tags in the HTML header, they don't seem to work so well when I save the CSS code into an external .css file.

For instance, CSS square buttons (http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/P50/). If I paste the CSS code verbatim into the provided HTML, slap some DTD and <body></body> tags, etc., on, it works just fine (screenshot) (http://www.geocities.com/tierceloffers/ScreenA.png).

If I instead paste the given code unchanged into a tabs.css file, and drop:

<link rel=stylesheet type="text/css" href="tabs.css" />

into the HTML header in place of the CSS code, I get garbage (screenshot) (http://www.geocities.com/tierceloffers/Screen.png). Note that the only change I make is replacing <style type="text/css">CSSpastedfrompage</style> with the line above.

I'm using Firefox, Fedora 9, and XAMPP for Linux to run the Apache web server. I've just dropped both the test HTML files and the CSS files I refer to straight into the web root directory, for simplicity, though I have created a "media" subdirectory to hold the .gif images. I've even changed XAMPP/Apache's httpd.conf file to contain an explicit "AddType text/css .css" statement in case that was the problem.

Clearly the problem isn't that CSS files can't be served at all -- in the "Fail" case, where I try to use external CSS, it is still somehow finding the right-hand portions of the buttons, but it isn't resizing them and is missing the left-hand portions altogether.

Interestingly, I have a similar problem with vertical wire frame menus (http://www.dynamicdrive.com/style/csslibrary/item/wire-frame-menu/) (when I drop the CSS into the test HTML directly, it renders just like the example page, but when I try to refer to it as an external CSS file I get wire frames that extend the width of the browser instead), but the animated horizontal tabs (http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/) seem to work fine as an external CSS file.

I'm excited when I see the CSS working, but I'd really like to use these styles to help design an entire site, not just a single page, and I kind of thought that was the point -- being able to dump all your style/presentation information into a separate page and focus the HTML pretty much on content.

For reference, the complete HTML I'm using to reference the "button.css" (itself an exact unaltered paste of the Square Button CSS code (http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/P50/)) is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Fail</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel=stylesheet type="text/css" href="button.css" />

</head>
<body>
<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="squarebutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="squarebutton" href="#"><span>Submit</span></a> <a class="squarebutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>

</body>
</html>

fodo

08-14-2008, 05:05 PM

i'm no expert, but try

<link rel=stylesheet type="text/css" href="/button.css" />

ObsessiO

08-14-2008, 10:22 PM

Look carefully :)

<link rel=stylesheet type="text/css" href="tabs.css" />

<link rel="stylesheet" type="text/css" href="tabs.css" />

EDIT: And I suggest;

<link href="tabs.css" rel="stylesheet" type="text/css" />

code order.

tiercel

08-15-2008, 12:04 AM

OK, first off, sorry about using "tabs.css" in the text of my post and "button.css" in the actual full HTML (the latter is what I am actually working on at the moment).

I tried all the variations posted, including

<link rel="stylesheet" type="text/css" href="button.css" />
<link rel="stylesheet" type="text/css" href="/button.css" />
<link href="button.css" rel="stylesheet" type="text/css" />
<link href="/button.css" rel="stylesheet" type="text/css" />

and I still get exactly the same problem as above (screenshot (http://www.geocities.com/tierceloffers/Screen.png)).

Medyman

08-15-2008, 01:34 PM

Do you have a link to your site? Or have you tried doing it on another server?

tiercel

08-16-2008, 06:50 AM

I was trying to do it on my own server, which isn't online (just localhost), but I fiddled with the HTML/CSS so all references were to a flat directory and dumped it into my Yahoo Geocities acct:

http://www.geocities.com/tierceloffers/testX.html

which references these files:

http://www.geocities.com/tierceloffers/buttonX.css
http://www.geocities.com/tierceloffers/square-gray-left.gif
http://www.geocities.com/tierceloffers/square-gray-right.gif

The result of the testX page looks just like my screenshot above, so I guess it's not my server -- I must be doing something wonky in the CSS call. Note that if I copy-paste the CSS code directly into the testX HTML page:

http://www.geocities.com/tierceloffers/testX-inline.html

where the only thing I change is removing the <link href=....> line and replace it by pasting in the contents of buttonX.css (and changing the HTML title). testX-inline works, but testX, which links to the very same CSS, doesn't.

[Edit to add:]

Just for kicks and giggles, I tried putting the <link href=....> reference to the CSS file in the BODY section of the HTML instead of the HEAD, but no change (testX2.html instead of testX.html).

Medyman

08-16-2008, 07:59 PM

I suspected this was the case but I was making sure...

In your external CSS files, you have the <style> tags. Take those out. When using external CSS, you don't need those. In fact, it messes up the parsing.