Style Sheet Layout (Full Version)

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



Message

Donkey -> Style Sheet Layout (7/5/2004 9:09:19)

I have never seen this mentioned in the forums before, but where you put your styles in a style sheet seems to make a big difference to whether they work properly or not (at least in Firefox and IE, Opera works wherever the styles are).

I found this out this weekend after finishing about 20 pages which I had checked in FF, Opera and IE and all looked perfect. Then suddenly big chunks of the page I was working on reverted to unformatted text except when viewed in Opera. When I checked back the same had happened on all the other pages. I couldn't understand it because I had checked the code was OK and valid, and within the same positioning div one block of text was fine and the next one unformatted.

After much tearing hair out and changing things then changing them back, it occurred to me that the only thing I had done differently before writing the last page was to add a few more styles to the style sheet. Although these styles were not used yet on the page they had the effect of lengthening the style sheet and pushing the text formatting style classes further away from the positioning div classes. (The style sheet is quite long.)

I moved the formatting style classes nearer to the positioning style classes and it all worked perfectly again.



d a v e -> RE: Style Sheet Layout (7/5/2004 10:21:56)

sounds bizarre - the only way it shoud make any difference is if the new styles had a direct influence on the existing ones and won out due to the cascade, or more likely contained errors thus resulting in no styles after that point.



Donkey -> RE: Style Sheet Layout (7/5/2004 12:56:25)

Doh!
quote:

more likely contained errors thus resulting in no styles after that point
Spot on. I had a curly brace instead of a comma which knocked out everything past that point. What a stupid mistake to make! Thanks Dave.



d a v e -> RE: Style Sheet Layout (7/5/2004 13:03:43)

huh i do that all the time, though in topstyle lite it shows when you do something like that. still have to notice it though!



jaybee -> RE: Style Sheet Layout (7/5/2004 19:43:44)

quote:

What a stupid mistake to make!


[sm=lol.gif][sm=lol.gif][sm=lol.gif]

I loved reading all your reasoning at the top though! It must've taken you hours to come up with that one.

First rule of style sheet not working.......

check all ; and }

better still buy Topstyle or Rapid CSS or similar.



Donkey -> RE: Style Sheet Layout (7/5/2004 20:51:27)

quote:

It must've taken you hours to come up with that one.
Correct. At the time I thought it was a logical theory but it was based on a woefully bad misinterpretation of the evidence.

At least I've learnt something and I won't make that mistake again.[;)] Onwards and upwards!



markhawker -> RE: Style Sheet Layout (7/6/2004 4:43:59)

Hi, glad you found the mistake Donkey! Just a question, how do you layout your CSS files? I'd recommend: 

name {
   xxx: xxx;
   xxx: xxx;
   xxx: xxx;
}

I tend to use that when I'm coding too, especially with recursion and IF commands and FOR loops in PERL. Just because it gives you a better insight visually. I've seen some people putting their CSS all on one line, I guess it's personal preference. All on one line saves formatting etc. time, but is harder and takes longer to debug if things go wrong!

Mark



d a v e -> RE: Style Sheet Layout (7/6/2004 5:14:26)

I can recommend that way as well. topstyle et al do it like that.



Donkey -> RE: Style Sheet Layout (7/6/2004 8:22:16)

That's the way I've always used. It's more logical and much easier to read.
My problem was that I didn't realise that a simple mistake would affect the rest of the sheet. I thought it would just affect the style containing the mistake, so I was looking in the wrong place. Still as I said before (famous last words) I won't make that mistake again.

I use notepad for writing css files and Matrixy2K for writing the code.



d a v e -> RE: Style Sheet Layout (7/6/2004 10:36:44)

(i don't work for them) but topstyle lite will be sooooo much easier than using notepad
http://www.bradsoft.com/download/index.asp
and it's free (obviously the pro version is better) but the lite version is great



Donkey -> RE: Style Sheet Layout (7/6/2004 10:45:10)

Thanks, I'll take a look.



why me! -> RE: Style Sheet Layout (7/13/2004 15:43:23)

Are you sure you dont work for them!
I can agree that top style light is a very good free tool and its also very simple to use........ and when i get better i WILL upgrade.
Jim



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625