Yet another CSS layout problem/issue - I'll get there soon!?

[Si]

Hi All.

I am trying to use CSS to layout a typical 3 col page.

I usually don't have a problem with this, but I decided to go down the
route of structuring the doc so that the content section is the first
part of the body layout, hence, first in the doc as far as search
engines are concerned. This I have done many times with tables in the
past and is dead quick.

Again, as per a post of mine weeks ago on another issue, Opera (8) and
FF have no issues with page, bar the fact the content width varies
slightly, (any pointers on that would be a bonus), but IE hates the
layout, you can see why on viewing.

Using prominent shades for clarity sake on the page as well!

http://test.thedigitalvision.co.uk/

Any ideas as to what I am missing, I think it may a problem with the abs
positioning and 'box structure', if thats the correct term.

TIA

Si

 

[rf]

http://test.thedigitalvision.co.uk/

How wide is centrecol? Hint: Its exactly as wide as the viewport. That is
what width: auto means, if you take the IE box model bugs into account where
the margins are ignored in the width calculation...

Why position at the left and then use margins (with width: auto).

position: absolute; left: 180px; right: 180px; seems to work. It is also
much simpler and more intuitive.

 

[Toby Inkster]

I am trying to use CSS to layout a typical 3 col page.
I usually don't have a problem with this, but I decided to go down the
route of structuring the doc so that the content section is the first
part of the body layout

Only thoroughly tested in Opera 8b1, but I can't imagine any problems in
IE6, Gecko, etc.

http://examples.tobyinkster.co.uk/3col

 

[rf]

Only thoroughly tested in Opera 8b1, but I can't imagine any problems in
IE6, Gecko, etc.

http://examples.tobyinkster.co.uk/3col

Doesn't work in IE6 :-(

 

[Barbara de Zoete]

Doesn't work in IE6 :-(

This one should:
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.html>


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[rf]

[Tobys example doesn't work in IE]

This one should:

<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.h
tml>

Not bad in FF. Bit shabby at the bottom though.

http://users.bigpond.net.au/rf/temp/b1.jpg

IE6... well I'll await your opinion

http://users.bigpond.net.au/rf/temp/b2.jpg

 

[Si]

How wide is centrecol? Hint: Its exactly as wide as the viewport. That is
what width: auto means, if you take the IE box model bugs into account where
the margins are ignored in the width calculation...

I'm not sure why width: auto was in there, I think I was playing with
permutations of width to try to fix the issue.

Why position at the left and then use margins (with width: auto).

Same as above

position: absolute; left: 180px; right: 180px; seems to work. It is also
much simpler and more intuitive.

This works perfectly! I had no idea I could set the position using left
& right for the corners. Logical really when thinking about it though.

Many Thanks

Si

 

[rf]

rf wrote:

This works perfectly! I had no idea I could set the position using left
& right for the corners.

That would be for the left and right edges, not corners

Logical really when thinking about it though.

Yep. Go over to the recommendations and read them for a few weeks, thats all
it takes. All will become clear, eventually

Many Thanks

Welcome.

 

[Barbara de Zoete]

[Tobys example doesn't work in IE]

This one should:

<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.h
tml>

Not bad in FF. Bit shabby at the bottom though.

http://users.bigpond.net.au/rf/temp/b1.jpg

IE6... well I'll await your opinion

http://users.bigpond.net.au/rf/temp/b2.jpg

Thanks for pointing that out. Some time ago I've put some Google AdSense in my
pages. Didn't go over all of them to check the looks. Seems the ad is too wide
for the centre column. So it overflows in FF (as it does in Opera too) and in IE
the centre div streches. Hmm. I'm not used to working with wixed width content,
so I was off my guard on this

Eventhoug the bottom looks a bit shabby, if the ads are taken out, the page
works just fine. Yes, also in IE. I took the ads out and now they are okay.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[WebMaster]

you can make some latin text here: http://www.lipsum.com/

Rudy

 

[Toby Inkster]

Doesn't work in IE6 :-(

I was in a rush. Was supposed to meet my girlfriend at the shops in 15
minutes and I was still in my dressing gown.

Fixed now. Even works in NN4.

http://examples.tobyinkster.co.uk/3col

 

[Toby Inkster]

Fixed now. Even works in NN4.
http://examples.tobyinkster.co.uk/3col

No standing ovation?

 

[Els]

No standing ovation?

Not yet

Define "works in NN4" ?
NN4 shows both left and right column with no background colour
horizontally below main text which remains in the middle,
leaving sides free.
That is: NN4.79. If you say it really works in NN4.8, I'll
believe you, not keen on downloading another dead browser ;-)

IE6 gets a horizontal scrollbar when the window is narrower than
about 1000px wide.

 

[Beauregard T. Shagnasty]

Define "works in NN4" ?

Not me!

IE6 gets a horizontal scrollbar when the window is narrower than
about 1000px wide.

This could be due to your choice of font-size. Using Smaller, I get a
horizontal scrollbar at about 750px. With Medium, it is around 1000px.
It seems IE will not push the long non-breaking comment lines in the
displayed CSS under the right column. Firefox does, and there is no
scrollbar until the comment lines hit the right margin of the viewport
(visible in the body margin at the edge under the right column).

Looks like a working solution to me.

 

[Els]

Not me!



This could be due to your choice of font-size. Using
Smaller, I get a horizontal scrollbar at about 750px. With
Medium, it is around 1000px. It seems IE will not push the
long non-breaking comment lines in the displayed CSS under
the right column.

Ah, didn't realize that. Yup, normal IE behaviour then.

Firefox does, and there is no scrollbar
until the comment lines hit the right margin of the
viewport (visible in the body margin at the edge under the
right column).

Looks like a working solution to me.

Yup, agreed.

 

[Beauregard T. Shagnasty]

Yup, agreed.

So, standing ovation, then? <clapclapclapclapclapclap/>

 

[Toby Inkster]

Define "works in NN4" ?
NN4 shows both left and right column with no background colour
horizontally below main text which remains in the middle,
leaving sides free.
That is: NN4.79. If you say it really works in NN4.8, I'll
believe you, not keen on downloading another dead browser ;-)

Yes, it did work in NN 4.8 but I don't have 4.79 for testing. I do however
have 4.08, and I've massaged it a little to get it to work there as well!

So it works in NN 4.08, 4.8, 6.23 and 7.1. (So hopefully in NN 4.79 as
well!)

 

[Els]

Yes, it did work in NN 4.8 but I don't have 4.79 for
testing. I do however have 4.08, and I've massaged it a
little to get it to work there as well!

So it works in NN 4.08, 4.8, 6.23 and 7.1. (So hopefully in
NN 4.79 as well!)

Yes!
/stands up claps hands

(just must not resize window, although a reload does get it back
in place at any window width.)

 

[Els]

Yes, it did work in NN 4.8 but I don't have 4.79 for
testing. I do however have 4.08, and I've massaged it a
little to get it to work there as well!

So it works in NN 4.08, 4.8, 6.23 and 7.1. (So hopefully in
NN 4.79 as well!)

In addition to the list mentioned on the page:
Works also in
Win: IE5.01, Moz1.4, Opera 7.51 and 8.00 beta, Firebird 0.6
Linux: Konqueror 3.2.1 and Firefox 1.0.

 

[Duende]

While sitting in a puddle Toby Inkster scribbled in the mud:

No standing ovation?

IE6
http://wipkip.biz/toby.png