CSS Help

[timwhit]

I'm have a bit of trouble with cascading style sheets.

You can see my attempt to use css here: http://www.timwhit.com/sisk This was created using Dreamweaver and one of their templates. I changed the CSS to suit my needs (however, I failed).

The problem I am having is that the footer is being spaced down slightly and not running right up to the content area.

The other area that is causing problems is the left and right sidebars. I would like the background colors of these areas to be the same all the way to the footer. Basically, I want both of these content areas to be the same height as the middle content area, and I would like to have this happen automatically. Though, I don't know if this is possible.

If I should post code, then I will do so.

Thanks for any help, I am pulling my hair out trying to fix this, and I have little to no experience with CSS. I could have achieved the same thing using tables in a quarter of the time, but I need to learn CSS sometime.

 

[fb]

Perhaps you could make a background image for the 'columns' div that is 1 pixel high and 750 pixels wide with the same colors as the columns?
If you repeat it vertically it will look like all columns has the same height.

A List Apart has a better explanation of the principle: http://www.alistapart.com/articles/fauxcolumns/

 

[Tannin]

http://redhill.net.au/timwhit/tim.html

 

[timwhit]

Thanks Tannin!!! I can't believe you fixed the whole thing for me. I can't take the time now to look at all the code, but when I get home I will try to figure out exactly what you have done to make it work.

Thanks again!

 

[Buck]

Creating one table for this type of setup is perfect. It allows you to center your entire site without letting the width change.

 

[Tannin]

That was my pleasure, Tim. I like playing with HTML.

Besides, it was nice, after all the wonderful tech help I've had from the whole Storage Forum crew all these years, to get a question that was clearly inside my skill set for a change.

I left the code pretty messy, and did a lot of reformatting that wasn't needed (especially of the CSS) just because I wanted it to be easier to read (i.e., laid out the way I lay CSS pages out, not the way misbegotten bloody c programmers do everything). All that might make it a bit hard to see what I did.

But aside from that, I didn't do all that much. The key item was to get the content all inside the wrapper, and in this particular case, the rest of the design just works. It's a relatively simple page and the block elements mostly "want" to slot themselves into the proper places just through the natural flow of the document. This is a Good Thing! Makes life simple.

Some time ago, I revisited a page I coded for an organisation that came to me with a ready-written design, right down to the last detail. It was a bugger of a job to code, and when I came back to it the other day, just to tidy it up a little here and there and make sure it validated, I found myself completely unable to understand the index page.

Yup. I looked at at the code for that simple-seeming page for a good couple of hours, simply trying to understand how it worked. And, in the end, I had to admit defeat. Although I'd written it myself, I just couldn't understand it. What a mess! I still don't know why it worked. So modifying it to make it comply with web standards a little more closely was out of the question. In the end, I just junked the whole thing and started from scratch. Took about an hour and a half (half an hour to write, an extra hour to tweak it for Internet Explorer 5, same as usual), and it ended up looking exactly the same as te original (which was what I wanted), but having 3 key improvements:

* It validated
* It worked on several of the minor browsers that broke on it before (notably Opera 6 and 7).
* Because the new code was clean and simple, I can (a) understand it, and (b) modify it if I need to one day.

Err .. I seem to be rambling. Bedtime!

Sing out if you have more questions.

 

[fb]

I don't know if I missunderstood the problem. But I added one picture and one line of code in the css file and ended up with this:

http://hem.bredband.net/bosfre/timwhit/

It didn't solve that you can't scroll down to the siteInfo in IE, like Tannins solution did.

 

[Buck]

Here is a CSS version: http://www.mittelsmann.net/tim/

 

[timwhit]

Buck,

Thanks for helping with this. I know you have a ton of experience with this stuff, so I was hoping that you would chime in.

What type of differences are there between Tannin's version and Buck's version?

Does Buck's version work correctly with IE5? I don't have a machine that has IE5 so I will have a tough time testing this.

Thanks guys!

 

[Buck]

Does Buck's version work correctly with IE5? I don't have a machine that has IE5 so I will have a tough time testing this.

I don't have IE5 running either, although the site did work with Opera 7.0 build 2637 (and of course the html & CSS pages were validated). I made a lot of changes to your CSS code Tim. It made it easier for me to work with the data.

 

[Handruin]

The web developer toolbar for firefox is very handy when working on any type of web page. It'll give you two click access for validating your page's code, and also your CSS. There are many other features that are worth checking out.

 

[fb]

I like Bucks solution. The only problem is if the headline (or the menu) column are longer then the center column: http://hem.bredband.net/bosfre/timwhit/2/

 

[Buck]

That is correct; there is no current CSS solution. You would need to use tables or scripts.

 

[fb]

On the other hand, I don't think the columns actually need to be the same height. It only has to look like it, and that's where the faux column trick can help.

http://hem.bredband.net/bosfre/timwhit/2/index2.html

 

[Buck]

That is certainly a useable trick fb.

 

[timwhit]

On the other hand, I don't think the columns actually need to be the same height. It only has to look like it, and that's where the faux column trick can help.

http://hem.bredband.net/bosfre/timwhit/2/index2.html

FB, thanks for sharing that with me. That could very definately come in handy with this site.

 

[Tannin]

OK guys, it's time we got some logical version numbering going here. I am arbitarily calling this next one Version 3.1. It's Buck's code, as modified by FB, further modified by me so that IE 5/Win doesn't break on it. Any further mods can be 3.2 or etc. This will save us getting confused.

http://redhill.net.au/timwhit/tim3.1.html
http://redhill.net.au/timwhit/tim3.1.css

The changes are simple:

The HTML is unchanged (except for using a different style sheet, of course).

The CSS adds the rule text-align:center; to the body element. This has no effect on anything (except IE5) as there are no inline elements in body, only block-level elements. But IE5, being broken in lots of different ways, incorrectly applies the text-align:center to the #wrapper div.

The second change is to add the rule text-align:left; to #wrapper. This is to stop IE 5 from wrongly inheriting the text-align:center into the wrapper and centering all the text in it.

That's it. Easy stuff.

Oh, as before, you need to make sure that the centre column is the longest one, Tim.

 

[Tannin]

Oh. There was an absolute URL in there for the image. I changed that to a relative one. Works now. Shortened the column a bit too.

 

[Tannin]

Oh, one more thing. You can have IE 5 installed alongside IE 6 on the same machine. Essential stuff if you are going to write web pages. See:

Multiple IEs in Windows : http://labs.insert-title.com/labs/?ID=795

Taming Your Multiple IE Standalones: http://www.positioniseverything.net/articles/multiIE.html

You can have IE 5.5 as well, if you want to, but who would want to?

 

[Buck]

Thanks for the tips Tannin, that will be very helpful.

 

[timwhit]

Here is the mostly finished site.

www.siskcompanies.com

I really only checked it in Mozilla, Firefox, and IE6. I looks alright, which is about all I care about. If someone who has IE5 wants to load it for me and see how many things are broken that would be sweet.

Yeah, I know the bold mouseovers are annoying, they insisted upon it. The hompage also has a flash element, if you don't have flash, the page should still be viewable.

I mostly used Buck's original version of the CSS file for the code, I had to edit it more later to do some different things. I also had to add some tables onto the homepage, because I was tired of messing with div's for a single page.

Thanks for the help with this one guys.

 

[Buck]

ooooh aaaaah . . . nice tim. I like the flash. Did you create that?

 

[Tannin]

Looking good! Well done, Tim.

Works fine in all my browsers, except IE 5.0. In IE 5 (because IE is broken) everything is alligned left, not centered on the page. Now there is a limit to the amount of coding I'm prepared to put in just to clean up after IE 5, but in this instance, you can get it working properly very easily, just follow what I posted before:

The changes are simple:

The CSS adds the rule text-align:center; to the body element. This has no effect on anything (except IE5) as there are no inline elements in body, only block-level elements. But IE5, being broken in lots of different ways, incorrectly applies the text-align:center to the #wrapper div.

The second change is to add the rule text-align:left; to #wrapper. This is to stop IE 5 from wrongly inheriting the text-align:center into the wrapper and centering all the text in it.

That's it. Easy stuff.

Yup: add text-align:center; to body, and text-align:left; to #wrapper. Then you are done.

Nice work!

PS: The site still works even in those browsers that don't have Flash installed. This is a Good Thing. Probably like a lot of people who don't install Flash and other bandwidth-hogging crap (sorry for language — I hate Flash, Realplayer, Actixe-X, useless Javascript, and the like), I just don't bother trying to buy from companies that are so stupid they make Flash-only websites that you can't navigate with an ordinary web browser. Your design uses Fl;ash, but I can still navigate it and read all the important stuff. Good!

I don't much like seeing the ugly "download plugin" either, but I'll try to ignore it and carry on surfing the site anyway. I guess a lot of other users are like this. If you want the site to look really professional, see if you can figure out a way to put a nice background image into div #flash. It only needs a suitable image and one line in the css, and it will result in a site that looks (almost) as good to non-Flash people as it does to Flash users.

 

[Tannin]

PPS: I like bold the mouseovers, and I think that they are a real help. They make navigation more obvious and easy. Obvious ansd easy is also a Good Thing.

OK, a real acessability nerd would insist that the links always should be underlined, and some say that they should always use the (ugly) default link colours too, but to hell with that. There are limits. Just bolding them is enough. (I usually go one step further and underline too (only on mouseover though) and often have them change colour, typically to a bright red, but just bolding OR underlining OR changing colour is enough to give the reader the hint that there is something special about this particular word — i.e., that you can click on it.)

 

[Tea]

PPS: I like bold the mouseovers, and ...

Don't mind Tannin. He gets a bit lexdixic sometimes.

 

[Tannin]

PPPS: works fine in Opera.

 

[timwhit]

ooooh aaaaah . . . nice tim. I like the flash. Did you create that?

Yes I created the flash. The siteplans that you see were done by an outside firm.

 

[timwhit]

Looking good! Well done, Tim.

Works fine in all my browsers, except IE 5.0. In IE 5 (because IE is broken) everything is alligned left, not centered on the page. Now there is a limit to the amount of coding I'm prepared to put in just to clean up after IE 5, but in this instance, you can get it working properly very easily, just follow what I posted before:

The changes are simple:

The CSS adds the rule text-align:center; to the body element. This has no effect on anything (except IE5) as there are no inline elements in body, only block-level elements. But IE5, being broken in lots of different ways, incorrectly applies the text-align:center to the #wrapper div.

The second change is to add the rule text-align:left; to #wrapper. This is to stop IE 5 from wrongly inheriting the text-align:center into the wrapper and centering all the text in it.

That's it. Easy stuff.

Yup: add text-align:center; to body, and text-align:left; to #wrapper. Then you are done.

Nice work!

PS: The site still works even in those browsers that don't have Flash installed. This is a Good Thing. Probably like a lot of people who don't install Flash and other bandwidth-hogging crap (sorry for language — I hate Flash, Realplayer, Actixe-X, useless Javascript, and the like), I just don't bother trying to buy from companies that are so stupid they make Flash-only websites that you can't navigate with an ordinary web browser. Your design uses Fl;ash, but I can still navigate it and read all the important stuff. Good!

I don't much like seeing the ugly "download plugin" either, but I'll try to ignore it and carry on surfing the site anyway. I guess a lot of other users are like this. If you want the site to look really professional, see if you can figure out a way to put a nice background image into div #flash. It only needs a suitable image and one line in the css, and it will result in a site that looks (almost) as good to non-Flash people as it does to Flash users.

OK I added the two things that you told me to add into my css file, hopefully this will fix it in any browser that could possibly be used (in this day and age). Does it work now?

The reason that I don't like the bold mouse-overs is that when you mouse-over any of the top menu items it moves the other items. Before, I had it change the font color and add a line underneath before, but they didn't like that.

 

[Tannin]

Works a treat in IE 5.0 Tim. Great work!

It even works in the old Opera 6.0 - which a lot of sites don't. Older Opera versions can be weird. (Not that I recommend coding for old Opera versions, I just checked because I happened to have it handy on my home machine.)

I will break in Netscape 4.x, I presume, but who cares? If you start coding for NS 4.x, you'd probably want to do another version for stone and chisel. In my book, IE 5 is the limit: I'm not prepared to waste my time going any further back than that. (And I won't bother with IE 5.0 too much longer either: it's down to low single-digit percentage figures now.)

The reason that I don't like the bold mouse-overs is that when you mouse-over any of the top menu items it moves the other items. Before, I had it change the font color and add a line underneath before, but they didn't like that.

I agree. The wobbling as the font changes size is a little distracting. You can code around it by setting explicit sizes for the menu items, but it gets tricky. Looking at my own sites, I see that I've only used the flickering bold type on one out of five. I should probably tweak the other one.

Bartender! A large glass of whatever he fancies for my friend Tim, please. I think he deserves one.

 

[timwhit]

Being that it's summer in this hemisphere, I think a margarita would be great.

 

[Bartender]

Margaritas on the house! Anyone for a Cadillac?

 

[Buck]

Margaritas on the house! Anyone for a Cadillac?

Sold.

Good work Tim.

PS: Nice tips Tony.

 

[Tannin]

Cadillac. Did someone say Cadillac? Reminds me of the old sond BB King used to sing:

I gave you a brand new Ford,
but you said: "I want a Cadillac"
I bought you a ten dollar dinner,
and you said: thanks for the snack
I let you live in my penthouse,
you said it just a shack
I gave seven children,
and now you wanna give them back!

 

[Tannin]

Cadillac. Did someone say Cadillac? Reminds me of the old sond BB King used to sing:

I gave you a brand new Ford,
but you said: "I want a Cadillac"
I bought you a ten dollar dinner,
and you said: thanks for the snack
I let you live in my penthouse,
you said it just a shack
I gave seven children,
and now you wanna give them back!