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

**Martin!** · Jul 21 '05, 01:16 AM

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

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

**Spondishy** · Jul 21 '05, 01:17 AM

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

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]

**Spondishy** · Jul 21 '05, 01:17 AM

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

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.

**Beauregard T. Shagnasty** · Jul 21 '05, 01:17 AM

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

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.

**Ståle Sæbøe** · Jul 21 '05, 01:17 AM

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

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]

**Spondishy** · Jul 21 '05, 01:17 AM

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

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]

**Beauregard T. Shagnasty** · Jul 21 '05, 01:17 AM

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

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.

**Ståle Sæbøe** · Jul 21 '05, 01:17 AM

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

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.

**Beauregard T. Shagnasty** · Jul 21 '05, 01:17 AM

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

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.)

403 Forbidden

http://home.rochester.rr.com/bshagnasty/test/2colwithfloat.html

403 Forbidden

http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html

--
-bts
-This space intentionally left blank.

**Spondishy** · Jul 21 '05, 01:17 AM

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

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]

**Beauregard T. Shagnasty** · Jul 21 '05, 01:17 AM

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

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?

403 Forbidden

http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html

--
-bts
-This space intentionally left blank.

**Ståle Sæbøe** · Jul 21 '05, 01:17 AM

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

>>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** · Jul 21 '05, 01:18 AM

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

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.

**Beauregard T. Shagnasty** · Jul 21 '05, 01:18 AM

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

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.

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment