Style sheet <link> issue (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

tgt -> Style sheet <link> issue (6/4/2009 12:31:24)

I am building a new website using EW2. I have one master page and one style sheet.

In the HEAD section of the master page I have posted a link to the style sheet:

<link href="http://www.mywebsite.com/CSS/style-1.css" rel="stylesheet" type="text/css" />

Sometimes, when I open my master page, it does load the images on the master page. (The images are visable in preview and when all pages are posted.)

If I click "attach style sheet" and it put this link in the HEAD section:

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

Then, the images show up, but I have two identical style sheets attached to one page. If I delete either of these lines of text, the master pages loses images again.

Every image on the master page has the full web address, ie "http://www.mywebsite/images/photo1.jpg"

Why is this happening? Can I have two style sheets? But why, if it is the same style sheet? Please help. I'm not so happy with EW2. It goes all-white on me and shuts down at least twice a day. Annoying... plus it is impossible to highlight text!

thanks so much,
tgt



TexasWebDevelopers -> RE: Style sheet <link> issue (6/4/2009 14:09:41)

The format for stylesheest looks like this:
<link href="styles-screen.css" rel="stylesheet" type="text/css" media="screen">
You may have another one that is for, say, print media rather than screen like this:
<link href="styles-print.css" rel="stylesheet" type="text/css" media="print">
You may have more than one stylesheet per page but you should NOT duplicate element style definitions (don't define the body tag in each sheet--only once, in one sheet.)
The link to the CSS file should be relative (not http:// etc.)
If you have two sheets, or even two styles, then the last one referenced will be the one that takes precedence. In other words, if you have a style in a stylesheet for an <h1> tag but re-define the <h1> style in-line then the in-line style wins---thus the "cascade" in cascading style sheets.
The references to the images in the style sheet itself can be relative to the stylesheet:

div#header {
background-image: url(images/header-background.jpg);
}

But much more useful to be relative to the URI (note the additional forward slash in front of "images"):

div#header {
background-image: url(/images/header-background.jpg);
}

This way images referenced in the css will always show up.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125