CSS Turmoil

They have: 82 posts

Joined: Jun 2002

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 Sad
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 Smiling

Cheers in hopeful anticipation

Andrew

Busy's picture

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's picture

He has: 3,022 posts

Joined: Oct 2002

http://www.w3schools.com/ is also a good CSS tutorial site, I learnt CSS from them Laughing out loud

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's picture

He has: 6,151 posts

Joined: May 2001

Silly me, first time I looked at the links I thought they were both pictures Laughing out loud

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 Smiling

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

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 Sad

Hope you don't mind if I ask some (potentially stupid) questions please?
Wink

"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_color after the line A.link_title_color :hover
i.e. the fourth line in the style .link_title_color following:-
[=1]

  • A.link_title_color {COLOR: #ffffff; ....................
  • A.link_title_color :visited................
  • A.link_title_color :hover...........
  • [*].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
    Confused

    Re: the tables tip, have I not aready done that, I'm confused Sad

    Any help much appreciated and highly valued

    Regards

    Andrew[/]

    Busy's picture

    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)

    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 Smiling
    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.