Can you please check my CSS

  The GnoMe 09:15 27 Jan 2004
Locked

Hi all, after trying to get to grips with CSS, and following some advice from taran, I have tried to improve my useage and understanding of css.
When i first did it i couldnt get my head around it so i did lots of different Style sheets for my site, one for text one for titles etc.
I have now learnt a bit more and have used one Sheet for a few different things such as links, background, etc
Can someone please check it out to see if i am on the right track? please?
my site is click here
and my style sheet is called newcss
many thanks

  tomleady 09:45 27 Jan 2004

there dont seem to be any problems with it.

lookin at your code (on Location page),you still have some fonts tags in, which could be removed using css.

like i said, there dont appear to be any glaring errors at first glance.

one thing i will add though, your links hovers, when they go italic. that really bugs me, especially on the home page for the 'directions' and 'charges' links, becuase they change the way the text next to them appear.

Tom

  The GnoMe 11:36 27 Jan 2004

thanks for the response, i have tried to change the css sheet so instead of going into itallics the link just goes under lined
but it doesnt work, the normal state for the link is not changing so it is not underlined and the hover state is not doing it
also some of the links are still going itallic
how can i change it
please help me

  The GnoMe 14:28 27 Jan 2004

i have done all the css, but sometimes it will work sometimes it will not even though i use 3 different browsers to view it.
it looks fine in edit view of dreamweaver but as soon as i goto look at it in a browser, it is diffenrent

  The GnoMe 14:29 27 Jan 2004

ps. syle sheet is now mystyle.css

  Taran 15:58 27 Jan 2004

Sometimes Dreamweaver throws a wobbly with stylesheets. It's just on of the many delightful "surprises" it has in store.

I spent an hour or so a few weeks ago roundly cursing Dreamweaver MX for not applying the styles I was referencing from one of my sheets.

I deleted the browser chache, my temp files and all kinds of other things and in the end I saved the stylesheet to the desktop, created a new web root folder in Dreamweaver and started afresh after importing the stylesheet. Things suddenly started working once more. I've had this happen several times with different versions of Dreamweaver on Windows 98, 2000 Pro and XP Home and Pro.

Regarding your browser problem, to get a CSS to render properly in some browsers requires quite a few CSS hacks. The bottom line is that browsers are, by and large, lousy at interpreting CSS [among other things]. All mainstream browsers claim to fully support CSS 1 and either fully or partially support CSS 2. The truth is that not one of them does and getting NetScape to implement your scripts properly is just one browser headache. There are other hacks for Opera and still more for IE, which also manages to mangle CSS layouts at times.

I've looked at your code and part of the problem is that you've missed out quite a few semi-colons [at the last entry of every element] and you also specify just one font as a font family, which it isn't.

Change this:

.mystyle A:link {
FONT-SIZE: 14px; COLOR: #0033cc; FONT-FAMILY: Verdana; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 14px; COLOR: #0033cc; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: underline
}
H1 {
FONT-WEIGHT: 300; FONT-SIZE: 36px; LEFT: auto; WORD-SPACING: normal; COLOR: #666666; FONT-STYLE: normal; FONT-FAMILY: "Times New Roman"; LETTER-SPACING: normal
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: Verdana
}
BODY {
FONT-WEIGHT: normal; FONT-SIZE: 14px; BACKGROUND-IMAGE: url(images/backg.gif); COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Verdana
}
TABLE {

}

To this:

.mystyle A:link {
FONT-SIZE: 14px; COLOR: #0033cc; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}
A:hover {
FONT-SIZE: 14px; COLOR: #0033cc; FONT-STYLE: normal; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline;
}
H1 {
FONT-WEIGHT: 300; FONT-SIZE: 36px; LEFT: auto; WORD-SPACING: normal; COLOR: #666666; FONT-STYLE: normal; FONT-FAMILY: "Times New Roman", Times, serif; LETTER-SPACING: normal;
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: Verdana;
}
BODY {
FONT-WEIGHT: normal; FONT-SIZE: 14px; BACKGROUND-IMAGE: url(images/backg.gif); COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
TABLE {

}

And I'd also suggest that you change that last entry called TABLE and simply reference it at the top of your stylesheet as part of the body content, using the td tag, like this:

html, body, td {
FONT-WEIGHT: normal; FONT-SIZE: 14px; BACKGROUND-IMAGE: url(images/backg.gif); COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

}

.mystyle A:link {
FONT-SIZE: 14px; COLOR: #0033cc; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}
A:hover {
FONT-SIZE: 14px; COLOR: #0033cc; FONT-STYLE: normal; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline;
}
H1 {
FONT-WEIGHT: 300; FONT-SIZE: 36px; LEFT: auto; WORD-SPACING: normal; COLOR: #666666; FONT-STYLE: normal; FONT-FAMILY: "Times New Roman", Times, serif; LETTER-SPACING: normal;
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: Verdana;
}

Of course, that will make the body and table content the same format, so if you want them to be different you can use the td {...} tag on its own to control your table layout, like this.

html, body {}

td {}

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

a: {}

a:hover {}

a:link {}

a:visited {}

I seem to remember warning you that CSS was not necessarily the holy grail you may think it is. Like everything else it has its own set of problems which are mainly due to todays current crop of browsers inability to correctly interpret stylesheets, despite claims to the contrary.

  Taran 16:04 27 Jan 2004

One of these days I'll remember that this forum mangles my responses if I don't double hard return lines to separate them.

I've only been using this site for 3 years or so.

It'll sink in one of these days.

I hope...

;o)


Here you go:

html, body, td {

FONT-WEIGHT: normal;

FONT-SIZE: 14px;

BACKGROUND-IMAGE: url(images/backg.gif);

COLOR: #333333;

FONT-STYLE: normal;

FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.mystyle A:link {

FONT-SIZE: 14px;

COLOR: #0033cc;

FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;

TEXT-DECORATION: none;

}
A:hover {

FONT-SIZE: 14px;

COLOR: #0033cc;

FONT-STYLE: normal;

FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;

TEXT-DECORATION: underline;

}


H1 {

FONT-WEIGHT: 300;

FONT-SIZE: 36px;

LEFT: auto;

WORD-SPACING: normal;

COLOR: #666666;

FONT-STYLE: normal;

FONT-FAMILY: "Times New Roman", Times, serif;

LETTER-SPACING: normal;

}

H2 {

FONT-WEIGHT: bold;

FONT-SIZE: 16px;

COLOR: #000000;

FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

  The GnoMe 17:51 27 Jan 2004

I have used your new code thanks very much taran, but the link is still doing the same on some links
what files are best to delete(you mentioned tmp?)

  Taran 19:34 27 Jan 2004

What is the exact problem with the hyperlinks ?

For standard CSS links, you should use this format:

a: {}

a:hover {}

a:link {}

a:visited {}

Obviously this will affect all links on your site and you don't need to reference the style in the link code since anything with an <a href=... tag will automatically be styled with the a: style.

If you want different styles of link, you create a site element and reference it as an id in the hyperlink tag, not a class.

Say you use the above example for your main links but you want a different overall look for the links on your navigation bar, you could do something like this:

.nav a: {}

.nav a:hover {}

.nav a:link {}

.nav a:visited {}

Then in your main navigation bar hyperlinks you reference this as:

a href="" id=".nav"

Your footer may need another style, so you could do something like this:

.footer a: {}

.footer a:hover {}

.footer a:link {}

.footer a:visited {}

And your hyperlink would read <a href"" id=".footer"

As long as your link is referenced like that, since you told the browser that they are .nav or .footer links, the browser interprets all of the other .nav and .footer variations for all the link states [visited, hover and so on].

I hope I haven't just made things more commplicated.

T

  The GnoMe 20:06 27 Jan 2004

hi thanks for the help, it is just that even after i have created the style sheet to display a:hover as just underlined, it is still going into itallic and the link normal state is under lined
i wanted it to just go underlined when you hover
the code reflects that but for some reason the page doesnt

  Taran 20:25 27 Jan 2004

I'm sorry, but I think I may have inadvertently caused this problem to begin with by giving you too much information and too little explanation.

Use this:

a:link {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

If you are using this:

a: {}

a:link {}

a:hover {}

It will all go wrong since a: {} will override a:link {} tag.

Try getting rid of any a: reference and just use:

a:link {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

If you do that you won't need to include anything in the hyperlink code itself - all hyperlinks will be altered without requiring a coded reference to the style in the a href="" tag.

Make the change and see what happens. If you need to, upload a new copy of the page to a test address and I'll take a look for you.

T

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Fujitsu Lifebook P727 laptop review

Lightwell software lets you create mobile apps without using code

Best value Mac: Which is the best £1249 Mac to buy

Comment désactiver les programmes qui s'exécutent au démarrage de Windows 10 ?