CSS Turmoil
Hello folks
I'm giving my little hard corner of the Infobahn a long overdue overhaul part of which includes the addition of CSS where feasible.
The Site is in the rather unusual position of primarily being a depository for sound clips (in fact I believe it's the UK's largest audio archive to any Broadcaster) so even attempting to display so many sound clips is a challenge in itself.
I'm planning something like this: -
http://www.dannybaker.force9.co.uk/NewTreehouse/index2.htm
However especially if you're viewing the main content table on an older browser, you're probably noticing a number of display errors. Most noticeably: -
Older versions of Netscape (certainly Composer 4) have such a pathological dislike for CSS they refuse to play ball and the table looks worryingly like this
http://www.dannybaker.force9.co.uk/NewTreehouse/graphics/net4.gif
Can I please pick your collective brains and ask two questions.
1 - How do I get around the problem of getting Netscape 4 to pick up my CSS attributes?
I'm aware that's there's very much a price to pay in design terms for backward computability and the only way I could find getting around the same problem for my navigation table was to specify both style sheets and also a background colour for Netscape 4 to pick up. However to do the same for so many large content tables throughout the site seems crazy?
2 - I'm afraid as something of a CSS Virgin, I can't get around how to get those table titles which also link to pop up pictures to pick up the correct font colour (white)? (link_title_color.css)
The page is still very much a work in progress so any other tips or constructive comments I promise to take squarely on the chin
Cheers in hopeful anticipation
Andrew
Busy posted this at 02:32 — 12th February 2003.
He has: 6,151 posts
Joined: May 2001
Looking at those 2 pictures I'd say it's your style sheet at fault, not the CSS.
NS4.* does choke on some CSS but most of it (that works in ALL other browsers) will work or has a work around for NS4.*
you could use the bits of CSS that does work on ALL browsers (which is limited at best anyways) or you can make two style sheets, one for the new browsers and one for the older ones.
it is good if you learn the basics of CSS at least. look around at other threads here on TWF as you could pick up some helpful links or advice etc.
Renegade posted this at 08:30 — 12th February 2003.
He has: 3,022 posts
Joined: Oct 2002
http://www.w3schools.com/ is also a good CSS tutorial site, I learnt CSS from them
Andrew_Samuel posted this at 17:21 — 12th February 2003.
They have: 82 posts
Joined: Jun 2002
Thanks for the replies guys.
Busy any pointers please on where my Style Sheet is letting me down please and what would the work around be for setting the class on the in Netscape 4?
Renegade cheers for the helpful link, I'm ploughing through it as we speak.
All advice most welcome.
Regards
Busy posted this at 20:47 — 12th February 2003.
He has: 6,151 posts
Joined: May 2001
Silly me, first time I looked at the links I thought they were both pictures
there are a couple of things in your css file, things like:
A.audio_links should be A.audio_links:link but you shoud also add A.audio_links:active You're also better to place the class call in the actual link tag instead of the td tag
the link_title_color needs to be changed around, put the color and background stuff in the font and font stuff at the end, you also might want to try an actual font size instead of xx-small
You really need to add something like:
td {font-family .... color .... background-color .. size} or have 3 of them, like so:
.td1 {font-family .... color .... background-color 1 .. size}
.td2 {font-family .... color .... background-color 2 .. size}
.td3 {font-family .... color .... background-color 3 .. size}
the 1,2,3 on the background-color being the color of the td cells and just place class="td1" in the td cells you want that color background, class="td2" in the next ...
You should also look at breaking your tables down, looks like you have one big nested table, use at least 3 seperate ones
top banner section
content section, can have nested tables, not to many thou
footer section, links, thanks ...
Using this method the tables load in stages appearing as if they are actually loading faster as it gives you something to view as they load (but they do load faster this way).
should be enough to keep you going
Andrew_Samuel posted this at 00:19 — 13th February 2003.
They have: 82 posts
Joined: Jun 2002
Busy many, many thanks!
I'm working my way through my Style Sheet and Page code with a fine-toothcomb as per your recommenddations and will report back.
Cheers again, much appreciated
Andrew_Sam posted this at 15:10 — 14th February 2003.
They have: 26 posts
Joined: Apr 2002
Busy
Many thanks again for your detailed explanation.
As you probably had guessed I'm very new to CSS and those employed in my
redesign are WYSIWYG Dreamweaver-created.
I am actually booked to do a HTML Course later in the year but that's
months away.
Anyways, I've been over your reply with a fine-tooth comb and spent the
afternoon trawling w3 Schools CSS
Lesson but franky I'm lost
Hope you don't mind if I ask some (potentially stupid) questions please?
"The link_title_color needs to be changed around, put the color and
background stuff in the font and font stuff at the end".
If I understand this rightly I should insert the line that begins
.link_title_colorafter the lineA.link_title_color :hoveri.e. the fourth line in the style .link_title_color following:-
[=1]
[*].link_title_color {font-family:............
[/=1]
You really need to add something like:
td {font-family .... color .... background-color .. size}
or have 3 of them, like so:
.td1 {font-family .... color .... background-color 1 .. size}
.td2 {font-family .... color .... background-color 2 .. size}
.td3 {font-family .... color .... background-color 3 .. size}
I get your gist here Busy but I'm unsure how to apply. Again if I can
paraphrase you in my Homer-Simpson-esque manner are you stating that
rather than have three seperate styles (audio_links, audio_links_2 and
link_title_color) I could specify all in one?
If so, I'm really confused how to apply the above logic to my own script
Re: the tables tip, have I not aready done that, I'm confused
Any help much appreciated and highly valued
Regards
Andrew[/]
Busy posted this at 22:17 — 14th February 2003.
He has: 6,151 posts
Joined: May 2001
Andrew, You sent me 5 copies of the above in PM and 1 as email, I replied to the PM (private message)
Andrew_Samuel posted this at 23:13 — 15th February 2003.
They have: 82 posts
Joined: Jun 2002
Busy
Many thanks for all your assistance, I'm actually seeing the light at the end of the Style Sheet tunnel now
Re: the multiple messages, apologies but every time I sent one I was greeted with the confusing:-
"No privatemessage specified. If you followed a valid link, please
notify the Webmaster"?
Anyways, Cheers again and top notch site.
Regards
Andrew
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.