DIVS and padding work differently in Firefox and IE6 (Help please)

Hi,

I have a problem with divs and padding in IE6 and Firefox. Basically my
example that I have attached works exactly how I want in IE6, but
padding is treated differently in Firefox. My example is below.

http://www.villas2u.com/example/test.htm
http://www.villas2u.com/example/styles.css

I realise that the issue is with the padding of 10px pushing the
alignment out, is there a way of having exactly 10px at each side of a
text block and still have the page cut across the full 100%.

Help appreciated.

Thanks.

Spondishy wrote:[color=blue]
> Hi,
>
> I have a problem with divs and padding in IE6 and Firefox. Basically my
> example that I have attached works exactly how I want in IE6, but
> padding is treated differently in Firefox. My example is below.
>
> http://www.villas2u.com/example/test.htm
> http://www.villas2u.com/example/styles.css
>
> I realise that the issue is with the padding of 10px pushing the
> alignment out, is there a way of having exactly 10px at each side of a
> text block and still have the page cut across the full 100%.
>
> Help appreciated.
>
> Thanks.
>[/color]

google on quirks / standard mode

use a doctype that triggers standard mode

I've added doctype declarations to the page for quirky/standard, but
that doesn't make a blind bit of difference. Do I have to accept that
when divs are padded in Firefox they pad outwards and IE pads inwards?

Thanks.

Martin! wrote:[color=blue]
> Spondishy wrote:[color=green]
> > Hi,
> >
> > I have a problem with divs and padding in IE6 and Firefox.[/color][/color]
Basically my[color=blue][color=green]
> > example that I have attached works exactly how I want in IE6, but
> > padding is treated differently in Firefox. My example is below.
> >
> > http://www.villas2u.com/example/test.htm
> > http://www.villas2u.com/example/styles.css
> >
> > I realise that the issue is with the padding of 10px pushing the
> > alignment out, is there a way of having exactly 10px at each side[/color][/color]
of a[color=blue][color=green]
> > text block and still have the page cut across the full 100%.
> >
> > Help appreciated.
> >
> > Thanks.
> >[/color]
>
> google on quirks / standard mode
>
> use a doctype that triggers standard mode[/color]

OK, I've got IE6 and Firefox working in the same way adding the
following doc type:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">

The issue is, is that I liked the way it worked in IE6, so I'll
rephrase the question. I have three divs in a three column layout (20%,
60%, 20%).

How can I get the text in the middle div to have a gap of exactly 10px
either side of it without pushing the third div out of line?

Thanks for you help.

Spondishy wrote:[color=blue]
> OK, I've got IE6 and Firefox working in the same way adding the
> following doc type:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/DTD/strict.dtd">
>
> The issue is, is that I liked the way it worked in IE6, so I'll
> rephrase the question. I have three divs in a three column layout
> (20%, 60%, 20%).
>
> How can I get the text in the middle div to have a gap of exactly
> 10px either side of it without pushing the third div out of line?[/color]

If you reduce the 60% to about 55%, your right div is no longer shoved
under the middle. Your total is 100% PLUS any default margins, which
is more than 100%, therefore wider than the browser port.

(Please don't use "text-align:justify;" in your final product - hard
to read.)

--
-bts
-This space intentionally left blank.

If you are determined to use floating elements I would recommend fixing
some of the width dimensions to a certain number of pixels. In addition,
use two divs for each block. One for the "box" and one to contain the
text and other elements. Instead of using padding and margins, you
simply adjust the width of the inner div element. Experiment a little
with it and I am sure you can make it work.

I have tried numerous times to use floating elements so the page would
display nicely regardless of the clients resolution. In the end I have
more or less given up.

I now use fixed widths and absolute positioning of the div elements. I
know this seems frustrating, but in the end it has saved me a lot of
time tweaking the CSS/HTML output.

Spondishy wrote:[color=blue]
> Hi,
>
> I have a problem with divs and padding in IE6 and Firefox. Basically my
> example that I have attached works exactly how I want in IE6, but
> padding is treated differently in Firefox. My example is below.
>
> http://www.villas2u.com/example/test.htm
> http://www.villas2u.com/example/styles.css
>
> I realise that the issue is with the padding of 10px pushing the
> alignment out, is there a way of having exactly 10px at each side of a
> text block and still have the page cut across the full 100%.
>
> Help appreciated.
>
> Thanks.
>[/color]

Thanks for the advice chaps...

Ståle Sæbøe wrote:[color=blue]
> If you are determined to use floating elements I would recommend[/color]
fixing[color=blue]
> some of the width dimensions to a certain number of pixels. In[/color]
addition,[color=blue]
> use two divs for each block. One for the "box" and one to contain[/color]
the[color=blue]
> text and other elements. Instead of using padding and margins, you
> simply adjust the width of the inner div element. Experiment a little[/color]
[color=blue]
> with it and I am sure you can make it work.
>
> I have tried numerous times to use floating elements so the page[/color]
would[color=blue]
> display nicely regardless of the clients resolution. In the end I[/color]
have[color=blue]
> more or less given up.
>
> I now use fixed widths and absolute positioning of the div elements.[/color]
I[color=blue]
> know this seems frustrating, but in the end it has saved me a lot of
> time tweaking the CSS/HTML output.
>
> Spondishy wrote:[color=green]
> > Hi,
> >
> > I have a problem with divs and padding in IE6 and Firefox.[/color][/color]
Basically my[color=blue][color=green]
> > example that I have attached works exactly how I want in IE6, but
> > padding is treated differently in Firefox. My example is below.
> >
> > http://www.villas2u.com/example/test.htm
> > http://www.villas2u.com/example/styles.css
> >
> > I realise that the issue is with the padding of 10px pushing the
> > alignment out, is there a way of having exactly 10px at each side[/color][/color]
of a[color=blue][color=green]
> > text block and still have the page cut across the full 100%.
> >
> > Help appreciated.
> >
> > Thanks.
> >[/color][/color]

Ståle Sæbøe wrote:
[Please do not top-post.][color=blue]
> If you are determined to use floating elements I would recommend
> fixing some of the width dimensions to a certain number of pixels.[/color]

Not necessary.
[color=blue]
> In addition, use two divs for each block. One for the "box" and one
> to contain the text and other elements. Instead of using padding
> and margins, you simply adjust the width of the inner div element.
> Experiment a little with it and I am sure you can make it work.[/color]

If you want a fluid page, you don't use pixel widths. And you do not
generally need two divs for each column.
[color=blue]
> I have tried numerous times to use floating elements so the page
> would display nicely regardless of the clients resolution. In the
> end I have more or less given up.[/color]

Why? There is nothing difficult about it.
[color=blue]
> I now use fixed widths and absolute positioning of the div
> elements. I know this seems frustrating, but in the end it has
> saved me a lot of time tweaking the CSS/HTML output.[/color]

Just because you can't make it work, is no reason to recommend your
techniques to others.

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:[color=blue]
> Ståle Sæbøe wrote:
> [Please do not top-post.][/color]
Sorry, I will bottom post from now on.[color=blue]
>[color=green]
>> If you are determined to use floating elements I would recommend
>> fixing some of the width dimensions to a certain number of pixels.[/color]
>
>
> Not necessary.
>[color=green]
>> In addition, use two divs for each block. One for the "box" and one
>> to contain the text and other elements. Instead of using padding
>> and margins, you simply adjust the width of the inner div element.
>> Experiment a little with it and I am sure you can make it work.[/color]
>
>
> If you want a fluid page, you don't use pixel widths. And you do not
> generally need two divs for each column.[/color]
I agree, but it can simplify your style definitions in many cases.[color=blue]
>[color=green]
>> I have tried numerous times to use floating elements so the page
>> would display nicely regardless of the clients resolution. In the
>> end I have more or less given up.[/color]
>
>
> Why? There is nothing difficult about it.[/color]
Depends how you - or your client - want the page to look like. "fluid"
pages is not always the way to go.
[color=blue]
>[color=green]
>> I now use fixed widths and absolute positioning of the div
>> elements. I know this seems frustrating, but in the end it has
>> saved me a lot of time tweaking the CSS/HTML output.[/color][/color]
I do not want to resize my browser window to make text readable.If you
have a large window short paragraphs end up on one line, and that can be
quite annyoing. The designer can control the witdh of block elements to
prevent this. Absolute positioning is good for many presentational
purposes.[color=blue]
>
> Just because you can't make it work, is no reason to recommend your
> techniques to others.[/color]

I did not say I could not make it work per se, but point taken. However,
instead of wasting your time on commenting my response, why don't you
say something aboout how you would do it? I am sure the original poster
would be grateful for that.

Ståle Sæbøe wrote:[color=blue]
> Beauregard T. Shagnasty wrote:
>[color=green]
>> Ståle Sæbøe wrote:[/color]
> [Please do not top-post.]
>
> Sorry, I will bottom post from now on.[/color]

Thanks.
[color=blue][color=green][color=darkred]
>>> If you are determined to use floating elements I would
>>> recommend fixing some of the width dimensions to a certain
>>> number of pixels.[/color]
>>
>> Not necessary.
>>[color=darkred]
>>> In addition, use two divs for each block. One for the "box" and
>>> one to contain the text and other elements. Instead of using
>>> padding and margins, you simply adjust the width of the inner
>>> div element. Experiment a little with it and I am sure you can
>>> make it work.[/color]
>>
>> If you want a fluid page, you don't use pixel widths. And you do
>> not generally need two divs for each column.[/color]
>
> I agree, but it can simplify your style definitions in many cases.
>[color=green][color=darkred]
>>> I have tried numerous times to use floating elements so the
>>> page would display nicely regardless of the clients resolution.
>>> In the end I have more or less given up.[/color]
>>
>> Why? There is nothing difficult about it.[/color]
>
> Depends how you - or your client - want the page to look like.
> "fluid" pages is not always the way to go.[/color]

We weren't discussing particular designs, but margins and padding and
so forth. Some content may not work as a fluid design.
[color=blue][color=green][color=darkred]
>>> I now use fixed widths and absolute positioning of the div
>>> elements. I know this seems frustrating, but in the end it has
>>> saved me a lot of time tweaking the CSS/HTML output.[/color][/color]
>
> I do not want to resize my browser window to make text readable.If
> you have a large window short paragraphs end up on one line, and
> that can be quite annyoing. The designer can control the witdh of
> block elements to prevent this. Absolute positioning is good for
> many presentational purposes.
>[color=green]
>> Just because you can't make it work, is no reason to recommend
>> your techniques to others.[/color]
>
> I did not say I could not make it work per se, but point taken.[/color]

Well, you did say "In the end I have more or less given up." ;-)
[color=blue]
> However, instead of wasting your time on commenting my response,[/color]

Ah, but I invoked a retort for further discussion, eh?
[color=blue]
> why don't you say something aboout how you would do it? I am sure
> the original poster would be grateful for that.[/color]

I already did. See my post about reducing the 60% to 55%.

Here are some simple layouts from others in these groups. Lauri's
two-column and Toby's three-column deserve a good look. (I've lost the
links to their pages, but I had copied the source because they are so
good.)

http://home.rochester.rr.com/bshagna...withfloat.html
http://home.rochester.rr.com/bshagna...cssbytoby.html

--
-bts
-This space intentionally left blank.

Hi,

The three column example looks perfect in Firefox, not so IE6...

Beauregard T. Shagnasty wrote:[color=blue]
> Ståle Sæbøe wrote:[color=green]
> > Beauregard T. Shagnasty wrote:
> >[color=darkred]
> >> Ståle Sæbøe wrote:[/color]
> > [Please do not top-post.]
> >
> > Sorry, I will bottom post from now on.[/color]
>
> Thanks.
>[color=green][color=darkred]
> >>> If you are determined to use floating elements I would
> >>> recommend fixing some of the width dimensions to a certain
> >>> number of pixels.
> >>
> >> Not necessary.
> >>
> >>> In addition, use two divs for each block. One for the "box" and
> >>> one to contain the text and other elements. Instead of using
> >>> padding and margins, you simply adjust the width of the inner
> >>> div element. Experiment a little with it and I am sure you can
> >>> make it work.
> >>
> >> If you want a fluid page, you don't use pixel widths. And you do
> >> not generally need two divs for each column.[/color]
> >
> > I agree, but it can simplify your style definitions in many cases.
> >[color=darkred]
> >>> I have tried numerous times to use floating elements so the
> >>> page would display nicely regardless of the clients resolution.
> >>> In the end I have more or less given up.
> >>
> >> Why? There is nothing difficult about it.[/color]
> >
> > Depends how you - or your client - want the page to look like.
> > "fluid" pages is not always the way to go.[/color]
>
> We weren't discussing particular designs, but margins and padding and[/color]
[color=blue]
> so forth. Some content may not work as a fluid design.
>[color=green][color=darkred]
> >>> I now use fixed widths and absolute positioning of the div
> >>> elements. I know this seems frustrating, but in the end it has
> >>> saved me a lot of time tweaking the CSS/HTML output.[/color]
> >
> > I do not want to resize my browser window to make text readable.If
> > you have a large window short paragraphs end up on one line, and
> > that can be quite annyoing. The designer can control the witdh of
> > block elements to prevent this. Absolute positioning is good for
> > many presentational purposes.
> >[color=darkred]
> >> Just because you can't make it work, is no reason to recommend
> >> your techniques to others.[/color]
> >
> > I did not say I could not make it work per se, but point taken.[/color]
>
> Well, you did say "In the end I have more or less given up." ;-)
>[color=green]
> > However, instead of wasting your time on commenting my response,[/color]
>
> Ah, but I invoked a retort for further discussion, eh?
>[color=green]
> > why don't you say something aboout how you would do it? I am sure
> > the original poster would be grateful for that.[/color]
>
> I already did. See my post about reducing the 60% to 55%.
>
> Here are some simple layouts from others in these groups. Lauri's
> two-column and Toby's three-column deserve a good look. (I've lost[/color]
the[color=blue]
> links to their pages, but I had copied the source because they are so[/color]
[color=blue]
> good.)
>
> http://home.rochester.rr.com/bshagna...withfloat.html
> http://home.rochester.rr.com/bshagna...cssbytoby.html
>
> --
> -bts
> -This space intentionally left blank.[/color]

Spondishy wrote:
[color=blue]
> The three column example looks perfect in Firefox, not so IE6...[/color]

/*/*/
#left {
left: -11em; /* Toby had a -10em here */
float: none;
}

Have another look?
http://home.rochester.rr.com/bshagna...cssbytoby.html

--
-bts
-This space intentionally left blank.

>>Ah, but I invoked a retort for further discussion, eh?

I suppose so :)
[color=blue][color=green]
>>http://home.rochester.rr.com/bshagna...withfloat.html
>>http://home.rochester.rr.com/bshagna...cssbytoby.html[/color][/color]

Excellent links! Thank you

Ståle Sæbøe wrote:[color=blue][color=green][color=darkred]
> >>Ah, but I invoked a retort for further discussion, eh?[/color][/color]
>
> I suppose so :)
>[color=green][color=darkred]
>>> http://home.rochester.rr.com/bshagna...withfloat.html
>>> http://home.rochester.rr.com/bshagna...cssbytoby.html[/color][/color]
>
>
> Excellent links! Thank you[/color]
The 3 column does not work on my firefox. The right column appears
beneath the main.

Ståle Sæbøe wrote:[color=blue]
> Ståle Sæbøe wrote:
>[color=green][color=darkred]
>>>> Ah, but I invoked a retort for further discussion, eh?[/color]
>>
>> I suppose so :)
>>[color=darkred]
>>>> http://home.rochester.rr.com/bshagna...withfloat.html
>>>> http://home.rochester.rr.com/bshagna...cssbytoby.html[/color]
>>
>> Excellent links! Thank you[/color]
>
> The 3 column does not work on my firefox. The right column appears
> beneath the main.[/color]

Works fine for me with Firefox 1.0. All columns stay in place, and
the center column floats as necessary. Maybe Toby has an answer?

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:[color=blue]
> Ståle Sæbøe wrote:
>[color=green]
>> Ståle Sæbøe wrote:
>>[color=darkred]
>>>>> Ah, but I invoked a retort for further discussion, eh?
>>>
>>>
>>> I suppose so :)
>>>
>>>>> http://home.rochester.rr.com/bshagna...withfloat.html
>>>>> http://home.rochester.rr.com/bshagna...cssbytoby.html
>>>
>>>
>>> Excellent links! Thank you[/color]
>>
>>
>> The 3 column does not work on my firefox. The right column appears
>> beneath the main.[/color]
>
>
> Works fine for me with Firefox 1.0. All columns stay in place, and the
> center column floats as necessary. Maybe Toby has an answer?
>[/color]
I played around with it and came up with a solution that works fine with
IE and Firefox. Then I added an <ul> element and IE lost the right
column. Seems it would be better to make a script to identify the
browser and choose a stylesheet based on that ...

My sandbox
http://80.202.168.171/sandbox/fluid/

Ståle Sæbøe wrote:
[color=blue]
> I played around with it and came up with a solution that works fine
> with IE and Firefox. Then I added an <ul> element and IE lost the
> right column. Seems it would be better to make a script to identify
> the browser and choose a stylesheet based on that ...[/color]

No. Browser sniffing is never a good idea.
[color=blue]
> My sandbox http://80.202.168.171/sandbox/fluid/[/color]

What happens if you remove the fluid_reset.css? I don't see any need
for that. You also need to stop using pt (or px) for font sizes, and
use percentages, with the body set to 100%. I would dump the Verdana
as well.

Looks like you didn't copy in all of Toby's styles.

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:[color=blue]
> Ståle Sæbøe wrote:
>[color=green]
>> I played around with it and came up with a solution that works fine
>> with IE and Firefox. Then I added an <ul> element and IE lost the
>> right column. Seems it would be better to make a script to identify
>> the browser and choose a stylesheet based on that ...[/color]
>
>
> No. Browser sniffing is never a good idea.[/color]
I never even tried really, the idea never appealed to me.
[color=blue]
> What happens if you remove the fluid_reset.css? I don't see any need for
> that. You also need to stop using pt (or px) for font sizes, and use
> percentages, with the body set to 100%. I would dump the Verdana as well.[/color]
The reset is something I use in developement to clear some default
styles and start from scratch. I sometimes get blindsided by the defaults.[color=blue]
> Looks like you didn't copy in all of Toby's styles.[/color]

Yeah I tweaked it beyond reckognition. I made a new variant with a pure
"toby" css. To be honest I do not see how this is supposed to work. It
fails in IE6, Netscape 7.2 and Firefox 1.0.

The results are the same on my local IIS and the production server
(somewhere in USA)

My sandbox http://80.202.168.171/sandbox/fluid/
Production server http://www.tdz.no/fluid/

Ståle Sæbøe wrote:
[color=blue]
> Beauregard T. Shagnasty wrote:
>[color=green]
>> Ståle Sæbøe wrote:
>>[color=darkred]
>>> I played around with it and came up with a solution that works fine
>>> with IE and Firefox. Then I added an <ul> element and IE lost the
>>> right column. Seems it would be better to make a script to identify
>>> the browser and choose a stylesheet based on that ...[/color]
>>
>> No. Browser sniffing is never a good idea.[/color]
>
> I never even tried really, the idea never appealed to me.[/color]

Well, that's good. <g>
[color=blue][color=green]
>> What happens if you remove the fluid_reset.css? I don't see any need
>> for that. You also need to stop using pt (or px) for font sizes, and
>> use percentages, with the body set to 100%. I would dump the Verdana
>> as well.[/color]
>
> The reset is something I use in developement to clear some default
> styles and start from scratch. I sometimes get blindsided by the defaults.[/color]

So, let's remove it and see if it affects the design, eh? There should
be no reason to change defaults en masse.
[color=blue][color=green]
>> Looks like you didn't copy in all of Toby's styles.[/color]
>
> Yeah I tweaked it beyond reckognition. I made a new variant with a pure
> "toby" css. To be honest I do not see how this is supposed to work. It
> fails in IE6, Netscape 7.2 and Firefox 1.0.[/color]

I don't see pure toby css...
[color=blue]
> The results are the same on my local IIS and the production server
> (somewhere in USA)
>
> My sandbox http://80.202.168.171/sandbox/fluid/
> Production server http://www.tdz.no/fluid/[/color]

Copy this page:
http://home.rochester.rr.com/bshagnasty/test/stale.html

I didn't centre your headings, as I don't care for that, preferring
left justified text.

Once you understand the flow, move the CSS to your separate style
sheet. A clean one.

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:
[color=blue]
> I don't see pure toby css...[/color]

Its used in the index02 (the variant links under the header) I moved it
into the document and removed all but the links and the title (still no
good).
[color=blue]
> Copy this page:
> http://home.rochester.rr.com/bshagnasty/test/stale.html
> Once you understand the flow, move the CSS to your separate style sheet.
> A clean one.[/color]

I will copy this and study the flow as I make my own changes. Generally
It seems to me that IE gets into trouble when the center column becomes
too small.

I have tried a footer like that before, but it has a tendency to crash
with very long sidebars. I work a lot with dynamic content and that
happens sometimes. When I must have it I end up using tables (shudder).

Thank you very much for pursuing this with me! I must admit I much too
often resort to tables. I see now that the stylesheets do offer more
alternatives by stacking rules in the right order. TopStyle's sweeper
elegantly alphabetizes the rules so I never noticed that before :)

BTW: Where did you find the latin text? I used to copy the latin sample
text from the font previews on my old mac years ago, but I dont think
its the same (I do not know any Latin).

Ståle Sæbøe wrote:[color=blue]
> Beauregard T. Shagnasty wrote:
>[color=green]
>> I don't see pure toby css...[/color]
>
> Its used in the index02 (the variant links under the header) I
> moved it into the document and removed all but the links and the
> title (still no good).[/color]

Oh. I didn't realize they were links. No underlines.
[color=blue][color=green]
>> Copy this page:
>> http://home.rochester.rr.com/bshagnasty/test/stale.html Once you
>> understand the flow, move the CSS to your separate style sheet. A
>> clean one.[/color]
>
> I will copy this and study the flow as I make my own changes.
> Generally It seems to me that IE gets into trouble when the center
> column becomes too small.[/color]

My sample works for me in IE6, down to about 400px wide window. At
that point, any three-column page will likely be useless.
[color=blue]
> I have tried a footer like that before, but it has a tendency to
> crash with very long sidebars. I work a lot with dynamic content
> and that happens sometimes. When I must have it I end up using
> tables (shudder).[/color]

As the footer has a { clear: both; } on it, length of sidebar should
not be a problem. Footer will stay below longest column.
[color=blue]
> Thank you very much for pursuing this with me! I must admit I much
> too often resort to tables. I see now that the stylesheets do offer
> more alternatives by stacking rules in the right order.[/color]

Yes, order does matter.
[color=blue]
> TopStyle's sweeper elegantly alphabetizes the rules so I never
> noticed that before :)[/color]

I played with TopStyle Lite a few years ago, but found it too
time-consuming. And, as you mention, it wants to rewrite stuff for
you. It's much faster with a text editor.
[color=blue]
> BTW: Where did you find the latin text? I used to copy the latin
> sample text from the font previews on my old mac years ago, but I
> dont think its the same (I do not know any Latin).[/color]

How much do you want? :-)
http://www.lindquist.dk/tools/LorumIpsumGenerator.asp

I put some of that in one of my client's sites recently - he is
lagging on providing content - and he emailed me with "HOW ARE MY
VISITORS SUPPOSED TO READ THAT!!!"

One other point: Toby's simple and elegant design is one of the very
few 3-col layouts I've seen where the content comes first in the
source. This is important for screen readers (those that don't
translate a graphical page) and for search engines. Here's what they see:

<http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fhome.rochester.rr.co m%2Fbshagnasty%2Ftest%2Fstale.html>

--
-bts
-This space intentionally left blank.

in comp.infosystems.www.authoring.stylesheets, Beauregard T. Shagnasty
wrote:
[color=blue]
> My sample works for me in IE6, down to about 400px wide window. At
> that point, any three-column page will likely be useless.[/color]

Which is good reason to avoid 3 column layouts. But if layout is made
with care, it will collapse/wrap to 2 and 1 column layout, when made
smaller. This is usually hard to do so that it looks nice.
[color=blue]
> One other point: Toby's simple and elegant design is one of the very
> few 3-col layouts I've seen where the content comes first in the
> source.[/color]

This is extreamily hard to get same time with layout that will wrap when
window is not wide enaugh.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

Lauri Raittila wrote:
[color=blue]
> in comp.infosystems.www.authoring.stylesheets, Beauregard T.
> Shagnasty wrote:
> <snip>[color=green]
>> One other point: Toby's simple and elegant design is one of the
>> very few 3-col layouts I've seen where the content comes first in
>> the source.[/color]
>
> This is extreamily hard to get same time with layout that will wrap
> when window is not wide enaugh.[/color]

Quite true. If it were me, I would use Toby's format and surmise that
very few of my visitors will have viewports smaller than maybe 500px.
My experience so far with phones and PDAs is that they ignore the CSS,
so they will get a good layout of the content.

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:[color=blue]
> Ståle Sæbøe wrote:[/color]
[color=blue]
> My sample works for me in IE6, down to about 400px wide window. At that
> point, any three-column page will likely be useless.[/color]
True ... but but :p
[color=blue][color=green]
>> I have tried a footer like that before, but it has a tendency to crash
>> with very long sidebars. I work a lot with dynamic content and that
>> happens sometimes. When I must have it I end up using tables (shudder).[/color]
>
>
> As the footer has a { clear: both; } on it, length of sidebar should
> not be a problem. Footer will stay below longest column.[/color]
I know it is supposed to, but it does not ;) (check out the long column
version.

Sandbox: http://80.202.168.171/sandbox/fluid/index01.html
[color=blue][color=green]
>> BTW: Where did you find the latin text? I used to copy the latin
>> sample text from the font previews on my old mac years ago, but I dont
>> think its the same (I do not know any Latin).[/color]
> How much do you want? :-)
> http://www.lindquist.dk/tools/LorumIpsumGenerator.asp[/color]
Yeah, I did a google and found several just before you replied. And here
I thought you knew latin! :)
[color=blue]
> I put some of that in one of my client's sites recently - he is lagging
> on providing content - and he emailed me with "HOW ARE MY VISITORS
> SUPPOSED TO READ THAT!!!"[/color]
lol![color=blue]
>
> One other point: Toby's simple and elegant design is one of the very
> few 3-col layouts I've seen where the content comes first in the source.
> This is important for screen readers (those that don't translate a
> graphical page) and for search engines. Here's what they see:
>
> <http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fhome.rochester.rr.co m%2Fbshagnasty%2Ftest%2Fstale.html>[/color]
Nice link, bookmarked!

Ståle Sæbøe wrote:
[color=blue]
> Beauregard T. Shagnasty wrote:
>[color=green]
>> As the footer has a { clear: both; } on it, length of sidebar
>> should not be a problem. Footer will stay below longest column.[/color]
>
> I know it is supposed to, but it does not ;) (check out the long
> column version.
>
> Sandbox: http://80.202.168.171/sandbox/fluid/index01.html[/color]

Harrumph. That's terrible news. :-( I've been trying to find a
solution for an hour, and can't seem to make anything shove the footer
below long sidebars. Anyone else reading along see a way?

Quick workaround: move the footer div to within the content div. Yes,
it will display it between the sidebars.

Quick workaround 2: eschew long sidebars! <lol>

I have to leave for a breakfast meeting, but will play more with it later.
[color=blue]
> Yeah, I did a google and found several just before you replied. And
> here I thought you knew latin! :)[/color]

I did, 45 years ago...

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:[color=blue]
> Ståle Sæbøe wrote:
>[color=green]
>> Beauregard T. Shagnasty wrote:
>>[color=darkred]
>>> As the footer has a { clear: both; } on it, length of sidebar
>>> should not be a problem. Footer will stay below longest column.[/color]
>>
>> I know it is supposed to, but it does not ;) (check out the long
>> column version.
>>
>> Sandbox: http://80.202.168.171/sandbox/fluid/index01.html[/color]
>
> Harrumph. That's terrible news. :-( I've been trying to find a solution
> for an hour, and can't seem to make anything shove the footer below long
> sidebars. Anyone else reading along see a way?[/color]
Apparently there is a hack. Found this link from the topic CSS newbie -
positioning thread further down
http://www.alistapart.com/articles/footers/

The CSS file is already getting ugly. I don't want to redesign a lot of
sites when browsers start fixing these hacks so I will try to make do
without a footer for now :p
[color=blue]
> Quick workaround 2: eschew long sidebars! <lol>[/color]
Hehe, problem is that on some sites clients update their own content,
like adding links and ... well you know.
[color=blue][color=green]
>> Yeah, I did a google and found several just before you replied. And
>> here I thought you knew latin! :)[/color]
>
> I did, 45 years ago...[/color]
I read a couple of the articles on the Lorem Ipsum ... funny stuff :)

Ståle Sæbøe wrote:
[color=blue]
> Apparently there is a hack. Found this link from the topic CSS
> newbie - positioning thread further down
> http://www.alistapart.com/articles/footers/[/color]

Just reread that myself this morning. I don't like hacks either.
[color=blue]
> The CSS file is already getting ugly. I don't want to redesign a
> lot of sites when browsers start fixing these hacks so I will try
> to make do without a footer for now :p
>[color=green]
>> Quick workaround 2: eschew long sidebars! <lol>[/color]
>
> Hehe, problem is that on some sites clients update their own
> content, like adding links and ... well you know.[/color]

Ewww. That's always a sticky situation.

Here's the page again, but now with the footer below the main content.
Passable, but not ideal.
http://home.rochester.rr.com/bshagnasty/test/stale.html

--
-bts
-This space intentionally left blank.

DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

re: DIVS and padding work differently in Firefox and IE6 (Help please)

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about