In light of my wisdom of all things web design related. I though it was time to begin a CSS tip n trick page, especially in the light of HTML 4 deprecating a lot of current tags.

In the list of deprication, tags such as font, alink, vlink, body, margin, table cell background images and colours etc are being phased out in favour of CSS.

Here's my little ditty for starters:

1. a:link
Most of you should be aware of a:link, a:hover and a:visited in CSS, but CSS also allows you to have multiple styles on links for example:

a.menu, a.menu:visited and a.menu:hover can also exist with the usual link declarations in CSS, all you have to do is associate the class with the so fo examle gain: xx will allow you to render this link in line with a.menu instead of a:link. (hope that made sense)

2. The evil
In NS4+ the is treated as a block element and renders anything contained in a span as a

pushing it onto another line. to cure this, in you CSS file place:

.span{display:inline}

This will allow you to use the in your formatting and avoid the NS4 bug of redering as a

3. margin
This has never been a supported element in any of the HTML DTD's, but most of you may have noticed that DW uses this in your to set the page margins. The correct use for this should be in CSS:

.body{margin:0,0,0,0}

I have more, but wanted to get the ball rolling and see if any of you knew of any other little tips n trick of CSS?

sorry, my mistake. and u dont know of any equivalent for innerHTML??? shame...

Nimco wrote:
> Tyla wrote:
> a) fine, but innerHTML is an IE specific DOM statement, so it woun't
> work in NS anyway!
>
> no, i got rid of the innerHTML bit and changed it to availWidth so
> that it would be compatible with netscape.
>
> availwidth will return the width of the browser window when full
> sized, so if u run it on a palmtop, it will retun 160 (or whatever)
> and work. it just doesnt differentiate between a full sized and
> restored size window.

in the code you supplied you have:
var mySize = (screen.availWidth / headline.innerHTML.length) * 1.35 ;

Tyla wrote:
> a) fine, but innerHTML is an IE specific DOM statement, so it woun't
> work in NS anyway!

no, i got rid of the innerHTML bit and changed it to availWidth so that it would be compatible with netscape.

availwidth will return the width of the browser window when full sized, so if u run it on a palmtop, it will retun 160 (or whatever) and work. it just doesnt differentiate between a full sized and restored size window.

Nimco wrote:
>1) I changed your offsetWidth to availWidth for 2 reasons:
> a) Netscape compatibility
> b) I don't feel it is necessary to have the script to resize the
> font when the window is resized.

a) fine, but innerHTML is an IE specific DOM statement, so it woun't work in NS anyway!

The whole idea was to take the screen res/size, divide it by the number of chracters and muiltiply it by a set integer of "x" ems

the fon't should resize.. ie: scaleable fonts. The desired effect is that no matter what screen res you have, the scaling is still proportionate. Imagine the difference between 640480, 1160 and 160 on screen, could you imagine the font size being fixed? how big on a lower res? This code works woth graphics too if created in SVG or flash so effectively you site would look the same no matter how big the end users screen is!

> 2) Put the style info into the javascript. this is just to show people
> how you would do this should you so desire, though it probably isnt
> the best option.

True, style in JS is possible, but then what happens when you want to restyle your site? Hence the css, which eventually would be contained in an external CSS file.

Currently working on a NS fix to the innerHTML, but this is proving alittle tricky as NS don't seem to have an equivelent... That's something i do need a solution too.

that script is really cool! i had a look at it, and made a few minor changes.

1) I changed your offsetWidth to availWidth for 2 reasons:
a) Netscape compatibility
b) I don't feel it is necessary to have the script to resize the font when the window is resized.

2) Put the style info into the javascript. this is just to show people how you would do this should you so desire, though it probably isnt the best option.

3) Removed a few of the variables and compressed them into one.

4) Compacted your 'if' statements to reduce code size and made the second one into an 'else if' coz i felt like it. ;)

----------

Heading

----------

I was trying to work it out, but i'm not sure if it is possible, how to get rid of those if statements and just set parameters on the variable.

i was thinking it would be along the lines of:
var mySize ? 14 : 50

but i doubt this is correct. any ideas?

Twain wrote:
> Tyla, you think is evil, what about

?! :-)



 is that evil, I have never used it!:-)  is only evil in NS, but then again, NS IS EVIL!!...						

I've been working on a CSS/Javascript Scaleable script for font sizes, at the moment it only works in IE4+, but will hopefully work cross browser when I've finished it?

It works by taking the number of chrachter and dividing it by the users resolution and mulitplying it by a set figure to give the result...

An example can be found at: htt://wip.blackwellpublishers.co.uk/ wwwbpsblackwell/alant.htm (spaces!)

Currently only the headling works... the code is:

Riffage Buys SF Concert Hall

If this doesn't make sense, have a look at the source code on the url... Anyone with any ideas on evolving this are quite welcome... If I can get this to work properly, this will bring a whole new meaning to scaleable, luquid websites!

More later on my issues with CSS formatted tables elements!! Damn Netscape!!

Tyla, you think is evil, what about

?! :-)						

Because when i first wrote it i wasnt using CSS, and I haven't got round to changing them all yet. (I'm a lazy git, so shoot me!)

Whooo! wrote:
> Certainly is, http://andi.ath.cx/index.php?content=web

just a quick question... if using CSS? Why ?