HTML gurus: question about usage of...

May 3rd, 2009 at 10:32 AM
User 597929 Photo

Spinny
Registered User
1,332 posts

Okay, I have a web gadget embedded in a page, and getting the code they provided to validate properly has been a chore. I have it all fixed now except for one nagging issue, and I have no clue how to fix this.

At the start of the provided code they have a <link> tag, thusly:

<link rel="stylesheet" type="text/css" media="screen" href="http://img.weather.weatherbug.com/Style/stickers/v2/Stickers_125x125.css">


Now, I've read that a <link> has to be in the document header, not in the body, so this won't validate. I can't just comment it out, it affects the style of the gadget. How do I move it and still have it affect the proper section of code, or can I re-write this using a tag and syntax that's allowed to be in the body of the document?

Here's the whole code snippet, after lots of correcting to make the rest of it valid:

<link rel="stylesheet" type="text/css" media="screen" href="http://img.weather.weatherbug.com/Style/stickers/v2/Stickers_125x125.css">

<div class="wXbody">
<div class="wXguts">

<iframe id="WeatherBugSticker_125x125_v2" src="http://weather.weatherbug.com/desktop-weather/web-widgets/getSticker.html?ZipCode=13502&amp;ZCode=z5545&amp;Size=125x125&amp;StationID=KRME&amp;units=0&amp;Version=2" width="123" height="70" frameborder="0" scrolling="no"></iframe>

<div class="wXlinks">
<span class="link"><a href="http://weather.weatherbug.com/weather-forecast.html" target="_blank" onclick="nojavascript...this.href='http://weather.weatherbug.com/NY/Utica-weather/local-forecast/7-day-forecast.html?zcode=z5545&amp;units=0'">Forecast</a></span>
<span class="link"><a href="http://weather.weatherbug.com/doppler-radar.html" target="_blank" onclick="nojavascript...this.href='http://weather.weatherbug.com/NY/Utica-weather/local-radar/doppler-radar.html?zcode=z5545&amp;units=0'">Radar</a></span>
<span class="link"><a href="http://weather.weatherbug.com/weather-cams.html" target="_blank" onclick="nojavascript...this.href='http://weather.weatherbug.com/NY/Utica-weather/weather-cams/local-cams.html?zcode=z5545&amp;units=0'">Cameras</a></span>
</div>
<div class="wXlogo">
<a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="nojavascript...this.href='http://weather.weatherbug.com/NY/Utica-weather.html?zcode=z5545&amp;units=0'"><img src="http://img.weather.weatherbug.com/images/stickers/v2/125x125/wxbug-logo.jpg" border="0" alt="WeatherBug"></a>
</div>
</div>
</div>
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
May 3rd, 2009 at 12:01 PM
User 597929 Photo

Spinny
Registered User
1,332 posts

Oh: this needs to validate under HTML 4.01 Transitional, not XHTML. It's something on a VSD 6.0 page.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
May 3rd, 2009 at 01:10 PM
User 597929 Photo

Spinny
Registered User
1,332 posts

Well, I figured it out! Yay me!

It was simple. Just moved the <link> into the header and everything worked as well as validated.

I don't really understand how you can invoke the style sheet up in the header and the code later in the page knows what to look for, I didn't see any explicit "id" type attributes to make it easy for me to see the linkage. Still curious how it works.
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz
May 3rd, 2009 at 02:08 PM
User 463058 Photo

Cary
Ambassador
1,086 posts

Spinny wrote:
I don't really understand how you can invoke the style sheet up in the header and the code later in the page knows what to look for, I didn't see any explicit "id" type attributes to make it easy for me to see the linkage. Still curious how it works.


The code you pasted has several classes specified which are styled by the css you linked. There are a few other styles in that css that don't affect the code you inserted, but they are used at least in part for the code at the url being shown by the iframe.

Basically, when a page is loaded, the browser caches all the rules contained in all the linked style sheets. This way it can apply styles whenever rule selectors match something on the page, regardless of where the style rule originated.
May 3rd, 2009 at 05:04 PM
User 597929 Photo

Spinny
Registered User
1,332 posts

Thanks, Cary. You're the guru I had in mind when I posted that, actually. ;)

Being an AI guy by education background I can relate to cached rules waiting to be matched. Makes perfect sense.

Thanks again!
"You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa

Visit Spinland Studios: http://www.spinland.biz

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.