This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Dreamweaver > March 2005 > CSS challenge - page check please





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author CSS challenge - page check please
Tim Gallant

2005-03-09, 4:19 am

So I've tried Al's challenge:

http://www.pactumgroup.com/tutorial...nge/3column.htm

Okay, I just noticed that I was supposed to keep the CSS in the same order -
I altered it slightly because I always like to have my CSS read "right to
left" (left column > main > right).

I haven't checked this in the older browsers or on a Mac yet, but it seems
to work fine in the current IE, Netscape, Firefox, and Opera. Perhaps
someone with the other browsers can break the news how the page holds up
there. Passes the XHTML Strict validator, and as far as I can tell it's okay
in the accessibility checkers (maybe somebody who knows more about them can
say for sure).

No fancy footwork with min-width or anything, so let me know how it looks
before I submit to PVII.

tim


Tim Gallant

2005-03-09, 4:19 am

> I altered it slightly because I always like to have my CSS read "right to
> left" (left column > main > right).


Uh duh, left to right. Pttt.

:^p


--
Tim Gallant
http://www.pactumgroup.com

Basic tutorials: http://www.timgallant.org/web.htm


Kramerica Industries

2005-03-09, 4:22 am

Tim,
Looks great! (IE6/WIN)

I don't know if these issues will make it or break it for you - but -

1-When I shrink the page "skip to main content" goes under the "simply
practical".
2-The border (black line ) between cols 2 & 3 looks like it starts halfway
down.
3-When I shrink, the background of the image (simply practical) starts to
show up, and changes colors the smaller I go,
and when I scroll to the right it has multiple colors shown.
4-The copyright symbol seems to be cut off on the left side.

In FF 1.0 - Bad News!
-The columns are completely messed up when I resize the page, Here is a
screen shot: http://www.kramericaindustries.com/dw4m/tim1.JPG

Good luck.


"Tim Gallant" <tim@timgallant.org> wrote in message
news:d0lsq2$k47$1@forums.macromedia.com...
> So I've tried Al's challenge:
>
> http://www.pactumgroup.com/tutorial...nge/3column.htm
>
> Okay, I just noticed that I was supposed to keep the CSS in the same
> order - I altered it slightly because I always like to have my CSS read
> "right to left" (left column > main > right).
>
> I haven't checked this in the older browsers or on a Mac yet, but it seems
> to work fine in the current IE, Netscape, Firefox, and Opera. Perhaps
> someone with the other browsers can break the news how the page holds up
> there. Passes the XHTML Strict validator, and as far as I can tell it's
> okay in the accessibility checkers (maybe somebody who knows more about
> them can say for sure).
>
> No fancy footwork with min-width or anything, so let me know how it looks
> before I submit to PVII.
>
> tim
>



Tim Gallant

2005-03-09, 4:22 am

Kramerica,

Try it one more time, if you would.

Thx.

tim

"Kramerica Industries" <dw4m@kramericapleasedontindustries.com> wrote in
message news:d0m02r$nu8$1@forums.macromedia.com...
> Tim,
> Looks great! (IE6/WIN)
>
> I don't know if these issues will make it or break it for you - but -
>
> 1-When I shrink the page "skip to main content" goes under the "simply
> practical".
> 2-The border (black line ) between cols 2 & 3 looks like it starts halfway
> down.
> 3-When I shrink, the background of the image (simply practical) starts to
> show up, and changes colors the smaller I go,
> and when I scroll to the right it has multiple colors shown.
> 4-The copyright symbol seems to be cut off on the left side.
>
> In FF 1.0 - Bad News!
> -The columns are completely messed up when I resize the page, Here is a
> screen shot: http://www.kramericaindustries.com/dw4m/tim1.JPG
>
> Good luck.
>
>
> "Tim Gallant" <tim@timgallant.org> wrote in message
> news:d0lsq2$k47$1@forums.macromedia.com...
>
>



Osgood

2005-03-09, 4:22 am

Tim,

I just thought I'd let you know that I have'nt been able to get onto
your server for a couple of weeks. Once or twice I've tried to get to
the pages which you have posted but I get 'server could not be found'.
I've tried in various browsers and various urls, even the homepage,
www.pactumgroup.com, but nothing gets me in.

Obviously other people are getting through as they have answered your
question, but not me. I used to be able to access it ok but not now. I'm
in the UK.

You might want to look into it.

Cheers.


Tim Gallant wrote:
> Kramerica,
>
> Try it one more time, if you would.



Tim Gallant

2005-03-09, 4:22 am

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0m46r$scn$1@forums.macromedia.com...
> Tim,
>
> I just thought I'd let you know that I have'nt been able to get onto your
> server for a couple of weeks. Once or twice I've tried to get to the pages
> which you have posted but I get 'server could not be found'. I've tried in
> various browsers and various urls, even the homepage, www.pactumgroup.com,
> but nothing gets me in.
>
> Obviously other people are getting through as they have answered your
> question, but not me. I used to be able to access it ok but not now. I'm
> in the UK.


Oo, goodness, thanks for letting me know. Nobody else has reported a
problem.

You're not on AOL, are you? :^p

tim


Osgood

2005-03-09, 7:15 am

Tim Gallant wrote:

> You're not on AOL, are you? :^p


yup :0 thought it might be something to do with that. Have you blocked it?

Tim Gallant

2005-03-09, 7:15 am

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0mbl0$84t$1@forums.macromedia.com...
> Tim Gallant wrote:
>
>
> yup :0 thought it might be something to do with that. Have you blocked it?


No, I haven't blocked it, but somebody on another forum (webdevbiz, I think)
was having an identical problem - the client couldn't see the site, and it
turned out they were using AOL. I don't know what the issue is.

tim


Osgood

2005-03-09, 7:15 am

Tim Gallant wrote:

> No, I haven't blocked it, but somebody on another forum (webdevbiz, I think)
> was having an identical problem - the client couldn't see the site, and it
> turned out they were using AOL. I don't know what the issue is.


I'd have a word with your web hosting company and see if they have
changed anything recently. As I say it was ok up until about 2 weeks ago.

Kramerica Industries

2005-03-09, 6:19 pm

Much better in IE & FF

However the "skip to main content" still goes under the simply practical in
both.


"Tim Gallant" <tim@timgallant.org> wrote in message
news:d0m1hi$pjt$1@forums.macromedia.com...
> Kramerica,
>
> Try it one more time, if you would.
>
> Thx.
>
> tim
>
> "Kramerica Industries" <dw4m@kramericapleasedontindustries.com> wrote in
> message news:d0m02r$nu8$1@forums.macromedia.com...
>
>



Tim Gallant

2005-03-09, 6:33 pm

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0mhue$j27$1@forums.macromedia.com...
> Tim Gallant wrote:
>
>
> I'd have a word with your web hosting company and see if they have changed
> anything recently. As I say it was ok up until about 2 weeks ago.


Has it been okay since the pactumgroup.com home page has had its *present
look*? Because that's a new webhost since then.

They said to do a tracert. If you feel like doing me a favour, I understand
it's to be done like this:

1. Go to dos prompt by clicking START > RUN, type in cmd and hit ENTER.

2. Type in "tracert pactumgroup.com" and hit ENTER

3. When it has finished, right click in window and select MARK. Then select
all of the text on the dos screen and hit ENTER.

No point me doing this myself, since I'm not having any problems viewing.
Haven't had any other reports either. It sounds like it's an AOL-related
problem somehow, but I have no clue what.

Thx!

tim


Tim Gallant

2005-03-09, 6:34 pm

"Kramerica Industries" <dw4m@kramericapleasedontindustries.com> wrote in
message news:d0mso1$6og$1@forums.macromedia.com...
> Much better in IE & FF
>
> However the "skip to main content" still goes under the simply practical
> in both.


What are you talking about? Visually? I'm not seeing that. If you mean the
link: Using the named anchor skips to the main content - that's what it's
supposed to do.

tim


Osgood

2005-03-09, 6:36 pm

Tim Gallant wrote:

> Has it been okay since the pactumgroup.com home page has had its *present
> look*? Because that's a new webhost since then.


Well it was ok when the site was in production but I suspect you have
changed hosts since its completion?


> They said to do a tracert. If you feel like doing me a favour, I understand
> it's to be done like this:
>
> 1. Go to dos prompt by clicking START > RUN, type in cmd and hit ENTER.
>
> 2. Type in "tracert pactumgroup.com" and hit ENTER
>
> 3. When it has finished, right click in window and select MARK. Then select
> all of the text on the dos screen and hit ENTER.



Hummm..... I'm on Mac.




Tim Gallant

2005-03-09, 6:37 pm

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0nea9$9bn$1@forums.macromedia.com...
> Tim Gallant wrote:
>
>
> Well it was ok when the site was in production but I suspect you have
> changed hosts since its completion?


The present look has only ever been on the current host. My previous one
didn't have PHP.

tim


Kramerica Industries

2005-03-09, 6:37 pm

Yes visually.
Refresh the print screen I gave you above. You'll see what I mean.


"Tim Gallant" <tim@timgallant.org> wrote in message
news:d0n7vj$q6o$1@forums.macromedia.com...
> "Kramerica Industries" <dw4m@kramericapleasedontindustries.com> wrote in
> message news:d0mso1$6og$1@forums.macromedia.com...
>
> What are you talking about? Visually? I'm not seeing that. If you mean the
> link: Using the named anchor skips to the main content - that's what it's
> supposed to do.
>
> tim
>



Tim Gallant

2005-03-09, 6:37 pm

<dw4m@kramericapleasedontindustries.com> wrote in message
news:d0nlvf$l0c$1@forums.macromedia.com...
> Yes visually.
> Refresh the print screen I gave you above. You'll see what I mean.


Oh, I see - if you collapse the window to 100px.

I could force it to say on one line, I suppose, but I really wonder if it's
worth the bother.

Thx.

tim


Kramerica Industries

2005-03-09, 6:38 pm

Forcing it to stay on one line is not much of a bother you can solve that
with
#skipto a {white-space: nowrap;}

But forcing it wouldn't be a challenge, would it?
:-)


"Tim Gallant" <tim@timgallant.org> wrote in message
news:d0nm72$le7$1@forums.macromedia.com...
> <dw4m@kramericapleasedontindustries.com> wrote in message
> news:d0nlvf$l0c$1@forums.macromedia.com...
>
> Oh, I see - if you collapse the window to 100px.
>
> I could force it to say on one line, I suppose, but I really wonder if
> it's worth the bother.
>
> Thx.
>
> tim
>



Tim Gallant

2005-03-09, 6:38 pm

"Kramerica Industries" <dw4m@kramericapleasedontindustries.com> wrote in
message news:d0nrtf$gi$1@forums.macromedia.com...
> Forcing it to stay on one line is not much of a bother you can solve that
> with
> #skipto a {white-space: nowrap;}
>
> But forcing it wouldn't be a challenge, would it?


Heehee.

I may as well nowrap it, but to be honest I'm much more concerned about why
IE5 Mac displays the center column a half inch lower than the side columns.
That's the one that baffles me.

tim


Pablo

2005-03-09, 11:16 pm

Hi Tim

What the hell are you trying to do? And Why? And you look a right prick for
trying btw. I'll tell you what to do, create a table layout to die for and
I'll give you mine without tables. If you follow the crap about MacIE5 then
you should consider NN4. You still don't get it do you? No you don't. I
invite anyone one on this forum to give me
one.............................Yes ONE good reason to think about Mr
Wonderful IE MAC or PC without thinking about NN4.

I might be a bit of a wild boy, I don't give a shit to honest, my clients
know where they are going, yeah, I point them in the right direction and
towards the future, who the hell wants to play games with IE5 Mac is beyond
me.



--
Cheers Pablo

_____________________

Whoever said "image doesn't matter" was lying.
http://www.dellwebsites.com
______________________________________
"Tim Gallant" <tim@timgallant.org> a écrit dans le message de news:
d0nsit$1ig$1@forums.macromedia.com...
> "Kramerica Industries" <dw4m@kramericapleasedontindustries.com> wrote in
> message news:d0nrtf$gi$1@forums.macromedia.com...
that[color=darkred]
>
> Heehee.
>
> I may as well nowrap it, but to be honest I'm much more concerned about

why
> IE5 Mac displays the center column a half inch lower than the side

columns.
> That's the one that baffles me.
>
> tim
>
>



Tim Gallant

2005-03-09, 11:17 pm

"Pablo" <dunno@dunno.com> wrote in message
news:d0nuaq$41f$1@forums.macromedia.com...
> Hi Tim
>
> What the hell are you trying to do? And Why? And you look a right prick
> for
> trying btw.


I'm taking up this challenge, because I thought it would be a good
opportunity for me to stretch and learn my CSS-P, that's why. And in my
opinion, it was.

>I'll tell you what to do, create a table layout to die for and
> I'll give you mine without tables.


Uh, are you drunk? (Oops, it's Pablo, silly question....) That's precisely
what I am doing, recreating Al's table page without tables....

>If you follow the crap about MacIE5 then
> you should consider NN4.


Because, silly boy, it was part of the challenge rules.

http://www.projectseven.com/tutoria...les/2005/e1.htm

Of course, I've already accomplished the terms of the rules, I think - the
layout "works" in IE5 Mac, but obviously it would be nicer without that
strange little gap.

tim


Osgood

2005-03-10, 4:23 am

Pablo wrote:


I invite anyone one on this forum to give me
one.............................Yes ONE good reason to think about Mr
Wonderful IE MAC or PC without thinking about NN4.

One reason would be if youre still on os9 where the browser of choice is
IE5.1

I take it into account not so much because I feel its critical, although
I still do know quite a few people on os9 using IE5.1 but because
generally it presents few css-p problems, which can't be overcome.

I don't consider N4x simply because that has major issues when using
css/css-p. Feeding it a seperate stylesheet just isnt worth the extra
effort in my opinion, plus even if you do it wont look like you really,
really want it to look, just a rather watered down version.

Tim Gallant

2005-03-10, 4:23 am

Gee, Osgood, I really wish you could see my page, because it's precisely
IE5.2 that I'm having the small glitch with (my laptop is running OS X
10.2.4 - was that a few months before Safari?).

tim

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0oqe4$98e$1@forums.macromedia.com...
> oooops totally mis-read that. We are talking about IE5.2 for Mac on osX
>
> I would'nt be advising anyone not to design for that browser because
> generally if you write good clean css-p it poses very few problems that
> cant be sorted out. I still use it for surfing around. Actually I don't
> know how it got on this machine but I guess I must have loaded it up at
> some point.
>
> I can see Pablos point that it is fast becoming an extinct reptile. I
> guess if you have bought a new Mac over the last 18 months most would be
> using Safari or another browser, Firefox maybe.
>
> I don't consider Mac IE5.2 a difficult browser to take into consideration.
> Having said that I know there is a lot of issues posted by people. Mostly
> when I look at their css-p code its not the way I would do it. I dunno who
> is right or wrong. My positioning methods don't necessarily specifically
> take into account Mac IE5.2, but they generally work, theirs don't. I
> don't know where they learnt or who taught them their css-p coding, quite
> frankly I'm not bothered either.
>
>
>
>
>
>
> Osgood wrote:
>
>



Osgood

2005-03-10, 4:23 am

oooops totally mis-read that. We are talking about IE5.2 for Mac on osX

I would'nt be advising anyone not to design for that browser because
generally if you write good clean css-p it poses very few problems that
cant be sorted out. I still use it for surfing around. Actually I don't
know how it got on this machine but I guess I must have loaded it up at
some point.

I can see Pablos point that it is fast becoming an extinct reptile. I
guess if you have bought a new Mac over the last 18 months most would be
using Safari or another browser, Firefox maybe.

I don't consider Mac IE5.2 a difficult browser to take into
consideration. Having said that I know there is a lot of issues posted
by people. Mostly when I look at their css-p code its not the way I
would do it. I dunno who is right or wrong. My positioning methods don't
necessarily specifically take into account Mac IE5.2, but they generally
work, theirs don't. I don't know where they learnt or who taught them
their css-p coding, quite frankly I'm not bothered either.






Osgood wrote:

> One reason would be if youre still on os9 where the browser of choice is
> IE5.1
>
> I take it into account not so much because I feel its critical, although
> I still do know quite a few people on os9 using IE5.1 but because
> generally it presents few css-p problems, which can't be overcome.
>
> I don't consider N4x simply because that has major issues when using
> css/css-p. Feeding it a seperate stylesheet just isnt worth the extra
> effort in my opinion, plus even if you do it wont look like you really,
> really want it to look, just a rather watered down version.
>


Osgood

2005-03-10, 4:23 am

Tim Gallant wrote:

> Gee, Osgood, I really wish you could see my page, because it's precisely
> IE5.2 that I'm having the small glitch with


Try pasting it here if the code is not too long. I'll have a look and
try and understand how you've set it up. I didn't bother with Als
challenge as Im not familiar with 508 compliancy, xhml, bobby or
whatever and dont use percent or or ems to specify fonts. So although Im
happy with the way I code and all my pages validate to 4.01 html
standards its not the criteria needed for the exercise.

(my laptop is running OS X
> 10.2.4 - was that a few months before Safari?).


I don't really know at what time Safari was introduced. I'm on 10.2.6.
and it was standard when I bought the machine. I havent upgraded to a
newer os as everything on this machine is running very smoothly. I'm
loathed to upgrade when I don't really need to.


Osgood

2005-03-10, 4:23 am

Tim Gallant wrote:

> Gee, Osgood, I really wish you could see my page, because it's precisely
> IE5.2 that I'm having the small glitch with (my laptop is running OS X
> 10.2.4 - was that a few months before Safari?).


Tim,

I have a sneaky idea that it is probably to do with the order the <divs>
flow in. Again that was a stipulation of the exercise which needed to be
followed.

Al may be being a bit clever here by demanding so many critera be
adhered to. In that way you do get a true reflection of what browsers
things work in and which ones they don't.

David Brewer

2005-03-10, 4:23 am

Osgood wrote:

>
>
> I don't really know at what time Safari was introduced. I'm on 10.2.6.
> and it was standard when I bought the machine. I havent upgraded to a
> newer os as everything on this machine is running very smoothly. I'm
> loathed to upgrade when I don't really need to.
>
>



You should think about up-grading to 10.3.8. You'll feel the difference.
But let me tell you Safari isn't all it is cracked up to be. It has some
major bugs in to compared to IE or Fire fore. If you use Safari to check
your pages. You have to hit refresh all the time or empty the cache
file. And a few other things that can drive a web developers up the
wall. Like I said it not what Apples says it is..............
Osgood

2005-03-10, 7:14 am

David Brewer wrote:


> You should think about up-grading to 10.3.8. You'll feel the difference.


Well I'll probably upgrade when Tiger comes out later this year, I think


If you use Safari to check
> your pages. You have to hit refresh all the time or empty the cache
> file.


I don't usually have to do that in Safari Version 1. However I do have
to do that with IE5.2 practically everytime. Yup youre right, it drives
you nuts.


Pablo

2005-03-10, 7:19 am

>>>>We have a hard enough time fighting off the
window people.


Pomme :)

http://www.dellwebsites.com/web/box/pomme.jpg

--
Cheers Pablo

_____________________

Whoever said "image doesn't matter" was lying.
http://www.dellwebsites.com
______________________________________
"David Brewer" <davidbrewer4982@comcast.net> a écrit dans le message de
news: d0p1bk$i37$1@forums.macromedia.com...
> Osgood wrote:
>
>
> I haven't heard one person say that Tiger will run on a G-4. 64 bit on a
> 32 bit machine.........mmmm.....
> Besides Apple having a big problem in making a G-5 laptop. Go to their
> site. Their pushing Panther harder now than ever.
>
> Hey don't get me wrong I love Apple. Been with them since the beginning.
>
> I just thought that the Key Note talk in?San Fan?...Was all hype. Apple
> didn't say what future we had as owners to what new OS, apps....blahs
> blahs bash.....most of us are owners not new buyers .....
>
>
> Ok enough about Apple...We have a hard enough time fighting off the
> window people.
>



David Brewer

2005-03-10, 7:19 am

Osgood wrote:

> Well I'll probably upgrade when Tiger comes out later this year, I think
>


I haven't heard one person say that Tiger will run on a G-4. 64 bit on a
32 bit machine.........mmmm.....
Besides Apple having a big problem in making a G-5 laptop. Go to their
site. Their pushing Panther harder now than ever.

Hey don't get me wrong I love Apple. Been with them since the beginning.

I just thought that the Key Note talk in?San Fan?...Was all hype. Apple
didn't say what future we had as owners to what new OS, apps....blahs
blahs bash.....most of us are owners not new buyers .....


Ok enough about Apple...We have a hard enough time fighting off the
window people.

Pablo

2005-03-10, 7:19 am

> Uh, are you drunk?

What a complete nerd you really are, that is one of the most stupid
questions I have ever seen. I can no longer tell people that there are no
silly questions. You should be ashamed :)

>
> Because, silly boy, it was part of the challenge rules.


I will mail you a blue peter badge.


There is no such thing as CSS-P, that thing is used by geeks that once used
layers and by dragging them around the screen they actually thought it was
cool and they were actually building a mess and they told everyone it was
CSS-P. I suppose it's like meeting a girl and saying something like, no I
don't build normal sites, I use CSS-P and xhtml and I used to know a bloke
who had IE 5 Mac, way-out dude, he was cool and funky. He's recently been
shot because some other bloke said

"There can be only one"
[color=darkred]
> Uh, are you drunk?


I still can't believe you asked that :)


Cheers Pablo


"Tim Gallant" <tim@timgallant.org> a écrit dans le message de news:
d0o210$8t1$1@forums.macromedia.com...
> "Pablo" <dunno@dunno.com> wrote in message
> news:d0nuaq$41f$1@forums.macromedia.com...
>
> I'm taking up this challenge, because I thought it would be a good
> opportunity for me to stretch and learn my CSS-P, that's why. And in my
> opinion, it was.
>
>
> Uh, are you drunk? (Oops, it's Pablo, silly question....) That's precisely
> what I am doing, recreating Al's table page without tables....
>
>
> Because, silly boy, it was part of the challenge rules.
>
> http://www.projectseven.com/tutoria...les/2005/e1.htm
>
> Of course, I've already accomplished the terms of the rules, I think - the
> layout "works" in IE5 Mac, but obviously it would be nicer without that
> strange little gap.
>
> tim
>
>



David Brewer

2005-03-10, 7:19 am

Pablo wrote:
>
> window people.
>
>
> Pomme :)
>
> http://www.dellwebsites.com/web/box/pomme.jpg
>
> --
> Cheers Pablo
>
> _____________________
>
> Whoever said "image doesn't matter" was lying.
> http://www.dellwebsites.com
> ______________________________________
> "David Brewer" <davidbrewer4982@comcast.net> a écrit dans le message de
> news: d0p1bk$i37$1@forums.macromedia.com...
>
>
>
>


And one Commodore 64 person.

http://www.portcommodore.com/commodore/

Now that a web site. Popsicle sticks and all...............
Tim Gallant

2005-03-10, 7:19 am

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0os9f$bk0$1@forums.macromedia.com...
> I have a sneaky idea that it is probably to do with the order the <divs>
> flow in. Again that was a stipulation of the exercise which needed to be
> followed.
>
> Al may be being a bit clever here by demanding so many critera be adhered
> to. In that way you do get a true reflection of what browsers things work
> in and which ones they don't.


Hm. Well, I don't know. The source code html is logically ordered, and
although at one point I had the CSS is different order, I re-ordered it to
match his.

tim


David Brewer

2005-03-10, 7:19 am

Tim Gallant wrote:
So you're going to tell me that you don't position
> anything?
>
> tim
>
>

Only his next stance at the bar.



in humor
Tim Gallant

2005-03-10, 7:19 am

> There is no such thing as CSS-P,

Um... yeah, okay. So you're going to tell me that you don't position
anything?

tim


Tim Gallant

2005-03-10, 7:19 am

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0ortj$b4g$1@forums.macromedia.com...
> Try pasting it here if the code is not too long. I'll have a look and try
> and understand how you've set it up. I didn't bother with Als challenge as
> Im not familiar with 508 compliancy, xhml, bobby or whatever and dont use
> percent or or ems to specify fonts.


Well, xhtml wasn't difficult in DW. And I just borrowed the original code as
far as setting up fonts etc. I take this to be a positioning exercise rather
than an attempt to duplicate everything from scratch.

Anyway, here's my code (to save space, I've deleted the text from the main
column and cut down list sizes; I've also removed a small amount of the
purely stylistic CSS):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 column CSS-P layout</title>
<style type="text/css">
<!--
body {
background-color: #5A5A5A;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
margin: 20px;
padding: 0;
background-image: url(pbg.jpg);
min-width: 550px;
}
#skipto {
position: absolute;
top: 20px;
left: 20px;
font-size: .7em;
white-space: nowrap;
}
#skipto a {
color: #999999;
text-decoration: none;
}
#skipto a:hover, #skipto a:active, #skipto a:focus {
color: #CCCCCC;
text-decoration: underline;
}
#mainlayoutbox {
position: relative;
top: 25px;
left: 0;
border-bottom: 6px solid #333;
border-top: 1px solid #ccc;
border-right: 1px solid #333;
border-left: 1px solid #ccc;
background: #6C6D91 url(graystripe.gif) repeat-y;
background-position: top right;
}
#masthead {
background-color: #575757;
border-bottom: 1px solid #333;
background-image: url(mastheadbg.jpg);
text-align: right;
margin: 0;
height: 53px;
}
#masthead img {
margin: 8px;
margin-left: 218px;
}
#newsbar {
position: absolute;
top: 55px;
right: 1px;
border-top: 1px solid #CECAC1;
font-size: 0.75em;
padding: 12px;
width: 159px;
float: right;
}
#newsbar ul {
margin: 12px 0 0 0;
padding: 0;
}
#newsbar li {
background-image: url(bulletimg.gif);
background-repeat: no-repeat;
background-position: 0em .25em;
list-style-type: none;
margin: 0 0 3px 0;
padding: 0 0 0 12px;
}
#maincolumn {
background-color: #fff;
border-right: 1px solid #333;
border-left: 1px solid #333;
border-top: 1px solid #B6B6B6;
font-size: 0.9em;
padding: 12px;
width: auto;
margin-top: 0;
margin-left: 160px;
margin-right: 184px;
margin-bottom: 0;
}
#maincolumn p {
line-height: 1.5em;
}
#navcolumn {
position: absolute;
top: 55px;
left: 0;
background-color: #6C6D91;
font-size: 0.75em;
padding: 0;
width: 160px;
margin: 0;
z-index: 2;
}
#navcolumn ul {
border-bottom: 1px solid #9899B1;
margin: 0;
padding: 0;
width: 160px;
}
#navcolumn li {
margin: 0;
padding: 0;
list-style-type: none;
}
#navcolumn h3, #navcolumn p {
padding: 0 12px;
}
#navcolumn ul a, #navcolumn ul a:visited {
background-color: #6C6D91;
border-top: 1px solid #9697B1;
border-bottom: 1px solid #4B4D65;
color: #ccc;
display: block;
padding: 3px 8px;
text-decoration: none;
height: 1.4em;
}
#navcolumn ul a:hover, #navcolumn ul a:active, #navcolumn ul a:focus {
background-color: #919191;
border-top-color: #ccc;
color: #333333;
height: 1.4em;
}
..topflush {
margin-top: 0;
}
#footer {
position: relative;
top: 14px;
left: 1px;
font-size: .7em;
margin: 12px 0 0 0;
}
-->
</style>
</head>

<body>
<div id="skipto"><a href="#maincontent" title="skip to main content">skip
to main content</a></div>
<div id="mainlayoutbox">
<div id="masthead"><img src="pcssLogo.gif" alt="Simply practical CSS"
width="315" height="34" /></div>
<div id="navcolumn">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
<!--end navcolumn -->
<div id="maincolumn"><a name="maincontent" id="maincontent"></a>
</div> <!--end maincolumn -->
<div id="newsbar">
<h3 class="topflush" id="shimmed">The criteria</h3>
<ul>
<li>Valid XHTML 1 Strict</li>
<li>Meets Section 508</li>
<li>Meets WAI Level AAA</li>
<li>Three columns</li>
<li>Fluid center column</li>
<li>Column backgrounds extend to height of tallest column</li>
<li>Source code ordering same as this page</li>
<li>CSS embedded in document head</li>
<li>Layout works in Firefox, Opera, IE6, IE5.x (Windows), IE5.x (Mac),
and Safari</li>
</ul>
</div>
<!--end newsbar -->
</div> <!--end mainlayoutbox -->
<div id="footer">
<p><a href="http://www.pactumgroup.com" title="Pactumgroup web
design">&nbsp; © 2005 Pactumgroup</a></p>
</div>
</body>
</html>


Pablo

2005-03-10, 7:19 am

No I get held up, that's what friends are for :)

--
Cheers Pablo

_____________________

Whoever said "image doesn't matter" was lying.
http://www.dellwebsites.com
______________________________________
"David Brewer" <davidbrewer4982@comcast.net> a écrit dans le message de
news: d0p3rq$juo$3@forums.macromedia.com...
> Tim Gallant wrote:
> So you're going to tell me that you don't position
> Only his next stance at the bar.
>
>
>
> in humor



Pablo

2005-03-10, 7:19 am

CSS is CSS and nothing more or nothing less, css-p is a coined geek thing
and needs to be drowned in whisky, heated and set on fire.

--
Cheers Pablo

_____________________

Whoever said "image doesn't matter" was lying.
http://www.dellwebsites.com
______________________________________
"Tim Gallant" <tim@timgallant.org> a écrit dans le message de news:
d0p39c$o60$1@forums.macromedia.com...
>
> Um... yeah, okay. So you're going to tell me that you don't position
> anything?
>
> tim
>
>



David Brewer

2005-03-10, 7:19 am

Pablo wrote:
> No I get held up, that's what friends are for :)
>
> --
> Cheers Pablo
>
> _____________________
>
> Whoever said "image doesn't matter" was lying.
> http://www.dellwebsites.com
> ______________________________________
> "David Brewer" <davidbrewer4982@comcast.net> a écrit dans le message de
> news: d0p3rq$juo$3@forums.macromedia.com...
>
>
>
> gn,,,burp

David Brewer

2005-03-10, 7:19 am

Pablo wrote:
> CSS is CSS and nothing more or nothing less, css-p is a coined geek thing
> and needs to be drowned in whisky, heated and set on fire.
>
> --
> Cheers Pablo
>
> _____________________
>
> Whoever said "image doesn't matter" was lying.
> http://www.dellwebsites.com
> ______________________________________
> "Tim Gallant" <tim@timgallant.org> a écrit dans le message de news:
> d0p39c$o60$1@forums.macromedia.com...
>
>
>
>

and waste good whiskey....and how i'm i going to light my cig, when you
have use up all the matches. But hell it's winter burn em'...cheaper
than turning on the furnace.
Osgood

2005-03-10, 6:24 pm

Tim Gallant wrote:

> Well, xhtml wasn't difficult in DW.


No its not that difficult, just a slash added here and there plus lowercase.


> Anyway, here's my code (to save space, I've deleted the text from the main
> column and cut down list sizes; I've also removed a small amount of the
> purely stylistic CSS):


Well its certainly not the way I'd approach doing a center column fluid
three column table.

However the way I do it and Al's criteria won't match my <div> order
would be

<div id="nav">navColumn</div>
<div id="news">newsBar</div>
<div id="mainColumn"</div>


As the 'newsBar' <div> would come before the 'mainColumn' <div> it would
make it invalid as far as Al's exercise is concerned. You'd have to ask
him why that is. He obviously has some hidden agenda as they use <divs>
in the wrong flowing order in some of their template designs.


Osgood

2005-03-10, 6:24 pm

ooops better get that right. This order, with the correct <div> names
this time.

<div id="navColumn">nav</div>
<div id="newsBar">news</div>
<div id="mainColumn">main</div>


Osgood

2005-03-10, 6:27 pm

Tim try this, code below. Seems to work in the specified browsers
mentioned. I've just got the engineering right, I think. You'll have to
tidy up in some areas. Basically I've used your code, with some slight
alterations. You'll have to re-link the two bg images (mainlayoutbox1
and 2 <divs> ) which 'hack' the equal height.

Normally I would'nt use this sort of construction method for the two
outer <divs>, which I have positioned absolutely.

Whilst its perfectly ok it does depend on the text in the middle column
being the longest content otherwise the text will spill out of the the
bottom. However that was not on the list of specifics.

Usually I would use a float construction, which in my opinion is more
reliable. However unless I re-order the <divs> slightly I can't achieve
this as the right <div> fall down.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 column CSS-P layout</title>
<style type="text/css">
<!--
body {
background-color: #5A5A5A;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
margin: 40px 20px;
padding: 0;
min-width: 550px;
}
#skipto {
position: absolute;
top: 20px;
left: 20px;
font-size: .7em;
white-space: nowrap;
}
#skipto a {
color: #999999;
text-decoration: none;
}
#skipto a:hover, #skipto a:active, #skipto a:focus {
color: #CCCCCC;
text-decoration: underline;
}
#header {
height: 60px;
background-color: #ab1;
}
#mainlayoutbox1 {
position: relative;
border-bottom: 6px solid #333;
border-top: 1px solid #ccc;
border-right: 1px solid #333;
border-left: 1px solid #ccc;
background: url(graystripe.gif);
background-repeat: repeat-y;
background-position: top right;
}
#mainlayoutbox2 {
background-image: url(graystripe.gif);
background-repeat: repeat-y;
background-position: top left;
}

#masthead {
background-color: #575757;
border-bottom: 1px solid #333;
background-image: url(mastheadbg.jpg);
text-align: right;
margin: 0;
height: 53px;
}
#masthead img {
margin: 8px;
margin-left: 218px;
}
#navcolumn {
position: absolute;
top: 53px;
left: 0;
font-size: 0.75em;
width: 160px;
}
#navcolumn ul {
border-bottom: 1px solid #9899B1;
margin: 0;
padding: 0;
width: 160px;
}
#navcolumn li {
margin: 0;
padding: 0;
list-style-type: none;
}
#navcolumn h3, #navcolumn p {
padding: 0 12px;
}
#navcolumn ul a, #navcolumn ul a:visited {
background-color: #6C6D91;
border-top: 1px solid #9697B1;
border-bottom: 1px solid #4B4D65;
color: #ccc;
display: block;
padding: 3px 8px;
text-decoration: none;
height: 1.4em;
}
#navcolumn ul a:hover, #navcolumn ul a:active, #navcolumn ul a:focus {
background-color: #919191;
border-top-color: #ccc;
color: #333333;
height: 1.4em;
}
#maincolumn {
border-right: 1px solid #333;
border-left: 1px solid #333;
border-top: 1px solid #B6B6B6;
font-size: 0.9em;
margin-left: 160px;
margin-right: 184px;
}
#maincolumn p {
line-height: 1.5em;
padding: 12px;
margin: 0;
}
#newsbar {
position: absolute;
right: 0;
top: 53px;
border-top: 1px solid #CECAC1;
font-size: 0.75em;
width: 184px;
padding-top: 12px;
}
#newsbar ul {
margin: 12px 0 0 0;
padding: 0;
}
#newsbar li {
background-image: url(bulletimg.gif);
background-repeat: no-repeat;
background-position: 0em .25em;
list-style-type: none;
margin: 0 0 3px 0;
padding: 0 0 0 12px;
}
#newsbar h3 {
padding: 0 12px;
margin: 0;
}
#footer {
margin: 0 20px;
}
-->
</style>
</head>

<body>
<div id="skipto"><a href="#maincontent" title="skip to main content">skip
to main content</a></div>
<div id="mainlayoutbox1">
<div id="mainlayoutbox2">
<div id="masthead"><img src="pcssLogo.gif" alt="Simply practical CSS"
width="315" height="34" /></div>
<div id="navcolumn">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
<div id="maincolumn">
<p>This is some text to fill up the middle column. This is some text
to fill up the middle column.
This is some text to fill up the middle column.</p>
<p>This is some text to fill up the middle column. This is some text to
fill up the middle column.
This is some text to fill up the middle column.</p>
<p>This is some text to fill up the middle column. This is some text
to fill up the middle column.
This is some text to fill up the middle column.</p>
<p>This is some text to fill up the middle column. This is some text
to fill up the middle column.
This is some text to fill up the middle column.</p>

</div>
<div id="newsbar">
<h3 class="topflush" id="shimmed">The criteria</h3>
<ul>
<li>Valid XHTML 1 Strict</li>
<li>Meets Section 508</li>
<li>Meets WAI Level AAA</li>
<li>Three columns</li>
<li>Fluid center column</li>
<li>Column backgrounds extend to height of tallest column</li>
<li>Source code ordering same as this page</li>
<li>CSS embedded in document head</li>
<li>Layout works in Firefox, Opera, IE6, IE5.x (Windows), IE5.x (Mac),
and Safari</li>
</ul>
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Joe {RoastHorse}

2005-03-10, 6:27 pm

an elegant solution. i see you have used absolutely positioned side
columns which means that the centre column needs to be the longest to
prevent the layout breaking. does that matter?

my solution uses floats - though PC IE is not playing nice yet, i'll fix
it when i get time...


joe




Tim Gallant wrote:
> So I've tried Al's challenge:
>
> http://www.pactumgroup.com/tutorial...nge/3column.htm
>
> Okay, I just noticed that I was supposed to keep the CSS in the same order -
> I altered it slightly because I always like to have my CSS read "right to
> left" (left column > main > right).
>
> I haven't checked this in the older browsers or on a Mac yet, but it seems
> to work fine in the current IE, Netscape, Firefox, and Opera. Perhaps
> someone with the other browsers can break the news how the page holds up
> there. Passes the XHTML Strict validator, and as far as I can tell it's okay
> in the accessibility checkers (maybe somebody who knows more about them can
> say for sure).
>
> No fancy footwork with min-width or anything, so let me know how it looks
> before I submit to PVII.
>
> tim
>
>


--

=================================

Kanzo Limited
www.kanzostudio.com

=================================
Osgood

2005-03-10, 6:29 pm

Joe {RoastHorse} wrote:


i see you have used absolutely positioned side
> columns which means that the centre column needs to be the longest to
> prevent the layout breaking. does that matter?


half and half :)


#newsbar {
position: absolute; /* ABSOLUTE * /
top: 55px;
right: 1px;
border-top: 1px solid #CECAC1;
font-size: 0.75em;
padding: 12px;
width: 159px;
float: right; /* FLOAT RIGHT */
}

> my solution uses floats - though PC IE is not playing nice yet, i'll fix
> it when i get time...


I'd interested in seeing that when your done. I can do it with floats
but only if the left/right col come before the main content <div> in the
flow, which for some reason is not allowed in Als experiment.


Joe {RoastHorse}

2005-03-10, 6:29 pm

works perfectly in FF (of course) PC IE is buggy and i'm sure IE mac is
a mess.

my div structure looks like this:

+-------------------------------+
| +------+ +------------------+ |
| | | | +------+ +-----+ | |
| | | | | | | | | |
| | | | | | | | | |
| +------+ | | | | | | |
| | +------+ +-----+ | |
| | | |
| | | |
| | | |
| +------------------+ |
+-------------------------------+

don't want to give too much away otherwise i think the purpose of the
experiment is compromised.


joe




Osgood wrote:
> Joe {RoastHorse} wrote:
>
>
> i see you have used absolutely positioned side
>
>
>
> half and half :)
>
>
> #newsbar {
> position: absolute; /* ABSOLUTE * /
> top: 55px;
> right: 1px;
> border-top: 1px solid #CECAC1;
> font-size: 0.75em;
> padding: 12px;
> width: 159px;
> float: right; /* FLOAT RIGHT */
> }
>
>
>
> I'd interested in seeing that when your done. I can do it with floats
> but only if the left/right col come before the main content <div> in the
> flow, which for some reason is not allowed in Als experiment.
>
>


--

=================================

Kanzo Limited
www.kanzostudio.com

=================================
Osgood

2005-03-10, 6:29 pm

ok I'll wait until the official text have been carried out and a winner
is announced lol.




Joe {RoastHorse} wrote:

> works perfectly in FF (of course) PC IE is buggy and i'm sure IE mac is
> a mess.
>
> my div structure looks like this:
>
> +-------------------------------+
> | +------+ +------------------+ |
> | | | | +------+ +-----+ | |
> | | | | | | | | | |
> | | | | | | | | | |
> | +------+ | | | | | | |
> | | +------+ +-----+ | |
> | | | |
> | | | |
> | | | |
> | +------------------+ |
> +-------------------------------+
>
> don't want to give too much away otherwise i think the purpose of the
> experiment is compromised.
>



Tim Gallant

2005-03-10, 6:34 pm

"Joe {RoastHorse}" <joe@roast-horse.commmmm> wrote in message
news:d0piou$4ps$1@forums.macromedia.com...
> an elegant solution. i see you have used absolutely positioned side
> columns which means that the centre column needs to be the longest to
> prevent the layout breaking. does that matter?


Thank. I don't think it matters, since in this case, the center column is
most likely to be longest anyway (my thought is that main content is usually
longer than menus etc). Of course, on a given site, that may not be the
case. As long as there was consistency, it's easy to fix (i.e. absolutely
position whichever would be the shortest two columns).

> my solution uses floats - though PC IE is not playing nice yet, i'll fix
> it when i get time...


Yeah, I tried working it all out with floats at the start, but I was having
some cross-browser difficulties. But I'm still early in my learning curve,
which is one reason I took on the project to begin with.

tim


Tim Gallant

2005-03-10, 6:34 pm

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0pi0r$hnn$1@forums.macromedia.com...
> Tim try this, code below. Seems to work in the specified browsers
> mentioned. I've just got the engineering right, I think. You'll have to
> tidy up in some areas. Basically I've used your code, with some slight
> alterations.


Thanks, Osgood. I'll try to study your code sometime today and discern what
you've done and why. I may have some questions for you once I manage to do
that. Given the nature of the project, I'm not just trying to get a page
that works (which could be accomplished by borrowing code); I'm trying to
learn how and why etc.

tim


Tim Gallant

2005-03-11, 4:18 am

Osgood, could you repost the code you suggested, so I can look it over? I
looks to me like I must have accidentally deleted the message....

tim


"Tim Gallant" <tim@timgallant.org> wrote in message
news:d0q16r$eng$1@forums.macromedia.com...
> "Osgood" <notavailable@atthisaddress.com> wrote in message
> news:d0pi0r$hnn$1@forums.macromedia.com...
>
> Thanks, Osgood. I'll try to study your code sometime today and discern
> what you've done and why. I may have some questions for you once I manage
> to do that. Given the nature of the project, I'm not just trying to get a
> page that works (which could be accomplished by borrowing code); I'm
> trying to learn how and why etc.
>
> tim
>



Osgood

2005-03-11, 4:25 am

Tim Gallant wrote:
> Osgood, could you repost the code you suggested, so I can look it over? I
> looks to me like I must have accidentally deleted the message....





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 column CSS-P layout</title>
<style type="text/css">
<!--
body {
background-color: #5A5A5A;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
margin: 40px 20px;
padding: 0;
min-width: 550px;
}
#skipto {
position: absolute;
top: 20px;
left: 20px;
font-size: .7em;
white-space: nowrap;
}
#skipto a {
color: #999999;
text-decoration: none;
}
#skipto a:hover, #skipto a:active, #skipto a:focus {
color: #CCCCCC;
text-decoration: underline;
}
#header {
height: 60px;
background-color: #ab1;
}
#mainlayoutbox1 {
position: relative;
border-bottom: 6px solid #333;
border-top: 1px solid #ccc;
border-right: 1px solid #333;
border-left: 1px solid #ccc;
background: url(graystripe.gif);
background-repeat: repeat-y;
background-position: top right;
}
#mainlayoutbox2 {
background-image: url(graystripe.gif);
background-repeat: repeat-y;
background-position: top left;
}

#masthead {
background-color: #575757;
border-bottom: 1px solid #333;
background-image: url(mastheadbg.jpg);
text-align: right;
margin: 0;
height: 53px;
}
#masthead img {
margin: 8px;
margin-left: 218px;
}
#navcolumn {
position: absolute;
top: 53px;
left: 0;
font-size: 0.75em;
width: 160px;
}
#navcolumn ul {
border-bottom: 1px solid #9899B1;
margin: 0;
padding: 0;
width: 160px;
}
#navcolumn li {
margin: 0;
padding: 0;
list-style-type: none;
}
#navcolumn h3, #navcolumn p {
padding: 0 12px;
}
#navcolumn ul a, #navcolumn ul a:visited {
background-color: #6C6D91;
border-top: 1px solid #9697B1;
border-bottom: 1px solid #4B4D65;
color: #ccc;
display: block;
padding: 3px 8px;
text-decoration: none;
height: 1.4em;
}
#navcolumn ul a:hover, #navcolumn ul a:active, #navcolumn ul a:focus {
background-color: #919191;
border-top-color: #ccc;
color: #333333;
height: 1.4em;
}
#maincolumn {
border-right: 1px solid #333;
border-left: 1px solid #333;
border-top: 1px solid #B6B6B6;
font-size: 0.9em;
margin-left: 160px;
margin-right: 184px;
}
#maincolumn p {
line-height: 1.5em;
padding: 12px;
margin: 0;
}
#newsbar {
position: absolute;
right: 0;
top: 53px;
border-top: 1px solid #CECAC1;
font-size: 0.75em;
width: 184px;
padding-top: 12px;
}
#newsbar ul {
margin: 12px 0 0 0;
padding: 0;
}
#newsbar li {
background-image: url(bulletimg.gif);
background-repeat: no-repeat;
background-position: 0em .25em;
list-style-type: none;
margin: 0 0 3px 0;
padding: 0 0 0 12px;
}
#newsbar h3 {
padding: 0 12px;
margin: 0;
}
#footer {
margin: 0 20px;
}
-->
</style>
</head>

<body>
<div id="skipto"><a href="#maincontent" title="skip to main content">skip
to main content</a></div>
<div id="mainlayoutbox1">
<div id="mainlayoutbox2">
<div id="masthead"><img src="pcssLogo.gif" alt="Simply practical CSS"
width="315" height="34" /></div>
<div id="navcolumn">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
<div id="maincolumn">
<p>This is some text to fill up the middle column. This is some text
to fill up the middle column.
This is some text to fill up the middle column.</p>
<p>This is some text to fill up the middle column. This is some
text to fill up the middle column.
This is some text to fill up the middle column.</p>
<p>This is some text to fill up the middle column. This is some text
to fill up the middle column.
This is some text to fill up the middle column.</p>
<p>This is some text to fill up the middle column. This is some text
to fill up the middle column.
This is some text to fill up the middle column.</p>

</div>
<div id="newsbar">
<h3 class="topflush" id="shimmed">The criteria</h3>
<ul>
<li>Valid XHTML 1 Strict</li>
<li>Meets Section 508</li>
<li>Meets WAI Level AAA</li>
<li>Three columns</li>
<li>Fluid center column</li>
<li>Column backgrounds extend to height of tallest column</li>
<li>Source code ordering same as this page</li>
<li>CSS embedded in document head</li>
<li>Layout works in Firefox, Opera, IE6, IE5.x (Windows), IE5.x (Mac),
and Safari</li>
</ul>
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>


Tim Gallant

2005-03-11, 4:25 am

Thanks, Osgood. I'm going to print it off and compare it with mine.

tim

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:d0re25$hgu$1@forums.macromedia.com...
> Tim Gallant wrote:
>
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>



Tim Gallant

2005-03-11, 7:17 am

Thanks, Osgood. After studying your code and doing some thinking, I made
*one* change in my code and my Mac IE 5.2 problem has vanished.

As I mentioned, my IE5 problem was that the main column was sucking down a
bit, so that there was a gap between it and the masthead. I noticed that you
had taken the numbers off the mainlayoutbox (I had it positioned as top:
20px) and added that amount to the top margin. It occurred to me that
perhaps Mac IE5 was "carrying over" that 20px and applying it to the main
column somehow. Sure enough. I took the 20px positioning out and added it to
the top margin, and presto! the main column is snug up against the masthead.

Which means I think that's a wrap:

http://www.pactumgroup.com/tutorial...nge/3column.htm

Thanks again.

tim

--
Tim Gallant
http://www.pactumgroup.com

Basic tutorials: http://www.pactumgroup.com/tutorials/


Osgood

2005-03-12, 4:14 am

ooops better get that right. This order, with the correct <div> names
this time.

<div id="navColumn">nav</div>
<div id="newsBar">news</div>
<div id="mainColumn">main</div>


Osgood

2005-03-12, 4:14 am

Joe {RoastHorse} wrote:


i see you have used absolutely positioned side
> columns which means that the centre column needs to be the longest to
> prevent the layout breaking. does that matter?


half and half :)


#newsbar {
position: absolute; /* ABSOLUTE * /
top: 55px;
right: 1px;
border-top: 1px solid #CECAC1;
font-size: 0.75em;
padding: 12px;
width: 159px;
float: right; /* FLOAT RIGHT */
}

> my solution uses floats - though PC IE is not playing nice yet, i'll fix
> it when i get time...


I'd interested in seeing that when your done. I can do it with floats
but only if the left/right col come before the main content <div> in the
flow, which for some reason is not allowed in Als experiment.


Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews