Page rebuilt using CSS; please check it?

[hommealone]

OK. Now that my learning curve for CSS is leveling off a bit, can you please check the page that I've rebuilt? I took my old homepage (see signature below, for comparison) and tried to more or less duplicate it using CSS design, as a learning exercise. It seems, to me, to be working well in IE6, NN7, and firefox.

Can you please check it - especially with Safari, Opera, older browser versions, etc. - and let me know how it's working?

The new version is on line here.

Any suggestions or critisisms about my CSS would be greatly appreciated!

Thanks so much!

p.s. The problem that I posted about earlier (DIVs not scaling well in NN7) seemed to happen when all the elements in the DIV were floated, or had potentially variable heights. I had to make up a nasty work-around to avoid it, but at least it works. Perhaps there is a better way, but I haven't found it yet. This is what I did:

div.cutoff { clear: both; }
<div class="cutoff">[img]HHimages/pixel.gif[/img]</div>

I know this is a messy cheat, but at least it puts a definite "end" to the divs that were giving me problems so that nothing scales out of them in NN or firefox.

[vivekar]

looks fine in Opera 7.10

[speed]

Not too good on IE5 or Opera 5.11, on these the page becomes very long with a lot of white space between text blocks, in the white panel area.

On NS 6.1 there is a small gap between the white panel and the panel top and panel bottom graphics.

I think you need to fix it for IE5 but the other 2 is debatable.

The only thing I would say about the CSS is that I would have a single CSS file, and I would avoid having both class= and style= on a div as it makes finding bugs harder.

The use of the clear: both is perfectly acceptable.

Getting the page to display on 3 browsers the same is a fair accomplishment, so don't give up.

[hommealone]

Thanks for the comments so far.

Getting the page to display on 3 browsers the same is a fair accomplishment, so don't give up.

Oh my gosh, I'm feeling beaten by this right now!

I don't know how I'm going to fix it for IE5; can't put that back on my computer when it already has IE6.

Sometimes I don't know why I'm bothering either. If "old style" HTML pages with tables and spacers read more or less correctly across a spectrum of browsers, and CSS pages show differently, well, I don't get it. I'm despairing over this...

[paulhiles]

Originally Posted by hommealone

I don't know how I'm going to fix it for IE5; can't put that back on my computer when it already has IE6.

You can install multiple copies of IE and run them from folders (ask mikmik for more details!)
Personally, I wouldn't get too distressed over not looking perfect in IE5, if you can get your pages looking consistent across the majority of 'modern' browsers, that's still a good job done!

If you've really got a bee in your bonnet about cracking this, and haven't got time to install every IE browser, you might want to check out ieCapture and hopefully you'll get a decent screengrab if their server's not too overloaded! :o)

Paul

[speed]

Originally Posted by paulhiles

Personally, I wouldn't get too distressed over not looking perfect in IE5

hommealone in its current state I would say that visitors using IE5 would just hit the back button. I would suggest you check your server logs and see how many visitors are using IE5 and then you can decide if it’s a problem.

For me I have enough visitors using IE5 to warrant supporting it.

It should be possible to get your layout working 100% in IE5 and better!

Sometimes I don't know why I'm bothering

Reasons to go CSS can be found within WPW, but it should give you smaller simpler (X)HTML, and make it easier to have an accessible site.

Where to go from here, first I’d get down to a single css file, second I’d would move all the style information into the css file ie. No style= in the HTML. It will make it easier for others to follow the code when you ask for help.

The fix for NS6 is to add style="display: block" to the panel top and bottom images, naturally this should become a CSS class.

I did start looking at the CSS but it was too time consuming merging the CSS and style information, sorry.

Don’t give up with this, we all had to start somewhere and you have got off to a great start!

[paulhiles]

Originally Posted by speed

Where to go from here, first I’d get down to a single css file, second I’d would move all the style information into the css file ie. No style= in the HTML. It will make it easier for others to follow the code when you ask for help.

Agreed 100%, importing 3 stylesheets, in addition to the 'main' site stylesheet seems like overkill to me for such an apparently straightforward layout... and removing the inline styles would help in defining that single stylesheet.

Originally Posted by speed

For me I have enough visitors using IE5 to warrant supporting it.

I was curious to find out what percentage of your visitors are using IE5. My stats show IE6 users at just below 80%, Firefox, Netscape, account for a further 18% or so.

[speed]

Originally Posted by paulhiles

I was curious to find out what percentage of your visitors are using IE5

Looking very quickly around 6%.

For me if 1% of visitors a month used IE5 I'd support it, as its usually no more effort.

After all their moneys as good as anyone's!

[hommealone]

Thanks, guys, for your suggestions. I was just feeling especially low the last time I posted. Thanks for your encouragement; I'll keep plugging away at it. Your suggestions will help.

Why do you both recommend using only a singel style sheet? I've read tutorials showing the use of @import sheets, and even ones that say to keep the style sheets as short as possible. My plan was to use one main overarching site style sheet, use @import sheets for sections of the pages that are used for some pages but not others, and when neccesary, an @import sheet for elements that would be specific to that page only. But you're saying that you think that's not the best approach?.

[speed]

Why do you both recommend using only a singel style sheet?

My main reason is when I'm trying to find a bug I only have to look in 1 file.

It also avoids precedence problems if you use the same class name in 2 different CSS files by accident, or at least makes it easy to spot.

The CSS file is downloaded once and cached by the browser, or at least that's the theory, so you may as well load every thing in one go.

The only reason I would use more than 1 style sheet is if I had an area of the site drastically different from the rest e.g. administration area.

[paulhiles]

I've used the @import style method myself in the past, for much the same reasons you're now using it. I just think that it's a lot easier to 'debug' your CSS styles if you simply stick to a single file whilst you're in the development stage.

The same logic applies to taking out the inline styles from your page. If you change something in your CSS file, you want to be able to track down 'cause and effect' - this is made all the more difficult if you're chasing down multiple suspects! :o)

[hommealone]

So, here's what I've done so far:

Managed to load a copy of IE5 onto my computer along with IE6(!), thanks to Ryan Parman. (Anyone else can too, by visiting his website at http://www.skyzyx.com/downloads/. Just wanted to add that to my post for anyone else who reads this. Thanks, Mikmik, for passing that link along to me.)

Now I see what speed means about IE5 adding big blank areas to the page! Where ever I "fixed" a DIV so that it would expand properly to fully contain floated elements by using the "float clear" fix (note: see http://www.positioniseverything.net/easyclearing.html for info on how to do that.), the "fixed" DIV gets messed up in IE5 only!

Does anyone have any idea of how to fix this???