More on Safari table width problem

#1 July 20th, 2005, 10:25 PM

I'm still trying to solve a problem I have experienced in Safari. This is my
third post on the subject. I'm hoping someone can shed some light.

The problem is that, in Safari, a table with no specified width inside a
containing div with a specified width seems to break out of that div when
margins are applied to the table.

It seems the table's width defaults to 100% of the parent div. But when I
apply left and right margins to the table, instead of the table collapsing,
it keeps this 100% width and extends beyond the right border of the
containing div.

Neither NN7 nor IE5.1 on the Mac exhibit this behavior. In each of those
browsers, the table collapses so that it has margins on either side.

I use this method of applying margins to divs within divs or tables within
divs to avoid problems with IE/PC's box model nonsense. It's a sort of
pseudo-padding.

Can anyone help me understand why Safari behaves the way it does? It's
really driving me nuts.

One other note: It only seems to do this with TABLES within divs. Divs
within divs seem to collapse the way I want them to.

Here are some links to pages that demonstrate the problem:

http://www.fredbearcd.com/contact2.html
http://www.3chordrecords.net/merchandise.html

Thanks for any ideas you all can offer.

--Josh

#2 July 20th, 2005, 10:25 PM

Josh Renaud wrote:[color=blue]
> I'm still trying to solve a problem I have experienced in Safari.
> This is my third post on the subject. I'm hoping someone can shed
> some light.[/color]

I suspect that there aren't a lot of Mac users here. When I've had
problems with IE/Mac, I've often had to solve them without assistance,
or at least without as much assistance as I receive with non-Mac
platform browsers.
[color=blue]
> The problem is that, in Safari, a table with no specified width
> inside a containing div with a specified width seems to break out
> of that div when margins are applied to the table.[/color]

I don't have a Mac, so I cannot test. I can test this for you at my
sister's next time I'm there, but that could be months down the road.
[color=blue]
> It seems the table's width defaults to 100% of the parent div.[/color]

If so, that would be wrong. It should use the width it needs. Have you
tried a test case of a table with dummy data in <body> by itself? Set
borders, and tell us how much of the browser window it takes up. It
should not take up the whole window width unless the data requires it.
I'm curious to know the results.
[color=blue]
> But when I apply left and right margins to the table, instead of
> the table collapsing, it keeps this 100% width and extends beyond
> the right border of the containing div.[/color]

The width of an element in css box model is the content width + margin
+ padding + border. So this part might be correct behavior. But the
content width should not be 100%; that's where the error lies.
[color=blue]
> Can anyone help me understand why Safari behaves the way it does?[/color]

Nope. Sorry. I know little about the codebase.
[color=blue]
> Thanks for any ideas you all can offer.[/color]

Have you tried replacing the table's margins with padding on the
containing div?

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

#3 July 20th, 2005, 10:26 PM

Josh Renaud wrote:
[color=blue]
> I'm still trying to solve a problem I have experienced in Safari. This is my
> third post on the subject. I'm hoping someone can shed some light.
>
> The problem is that, in Safari, a table with no specified width inside a
> containing div with a specified width seems to break out of that div when
> margins are applied to the table.[/color]

The table will overflow if the content exceeds available dimensions. The
table has width:auto as default while the div must have overflow:visible
as default: so this behavior is normal and expectable.

2 questions.
1- Can you produce a reduced demopage of this situation?
2- Does the table really need to be embedded inside a div?
[color=blue]
>
> It seems the table's width defaults to 100% of the parent div.[/color]

Not in my tests with MSIE 6 for Windows and Mozilla 1.6 final. Width's
will default to the minimum necessary to render the whole table.

But when I[color=blue]
> apply left and right margins to the table, instead of the table collapsing,
> it keeps this 100% width and extends beyond the right border of the
> containing div.
>
> Neither NN7 nor IE5.1 on the Mac exhibit this behavior. In each of those
> browsers, the table collapses so that it has margins on either side.
>
> I use this method of applying margins to divs within divs or tables within
> divs to avoid problems with IE/PC's box model nonsense. It's a sort of
> pseudo-padding.
>[/color]

If that IE/PC box model nonsense was fixed in MSIE 6 for windows
(assuming you trigger standards compliant rendering mode), then you are
try to counter nonsense awkwardly.
[color=blue]
> Can anyone help me understand why Safari behaves the way it does? It's
> really driving me nuts.
>
> One other note: It only seems to do this with TABLES within divs. Divs
> within divs seem to collapse the way I want them to.
>
> Here are some links to pages that demonstrate the problem:
>
> http://www.fredbearcd.com/contact2.html
> http://www.3chordrecords.net/merchandise.html
>[/color]

That last document has 160 markup errors. Best is to build a reduced
testcase enlightning the problem.

DU
[color=blue]
> Thanks for any ideas you all can offer.
>
> --Josh
>[/color]

#4 July 20th, 2005, 10:26 PM

On 1/22/04 9:16 PM, in article buq3lo$90u$1@news.eusc.inter.net, "DU"
<drunclear@hotWIPETHISmail.com> wrote:
[color=blue]
> Josh Renaud wrote:
>[color=green]
>> I'm still trying to solve a problem I have experienced in Safari. This is my
>> third post on the subject. I'm hoping someone can shed some light.
>>
>> The problem is that, in Safari, a table with no specified width inside a
>> containing div with a specified width seems to break out of that div when
>> margins are applied to the table.[/color]
>
> The table will overflow if the content exceeds available dimensions. The
> table has width:auto as default while the div must have overflow:visible
> as default: so this behavior is normal and expectable.
>
> 2 questions.
> 1- Can you produce a reduced demopage of this situation?
> 2- Does the table really need to be embedded inside a div?[/color]

After making a test page and testing it myself, I determined that you are
right, the table is overflowing because the content was too wide.

The answer to #2 is yes, it does.

But now I see that this is not a bug in Safari. Using the button to reduce
the size of the text, causes the table to shrink and fit inside the DIV.

Thanks for your helpful response!

--Josh

#5 July 20th, 2005, 10:35 PM

re: testing on safari .. i got a hold of a $100 533 Mhz machine an
loaded it with RedHat9 and KDE - part of KDE is the Konqueror we
browser that mimics Safari -- pretty well -- not 100% BUT moreso tha
IE and Netscape for PC !!

Unregistered
-----------------------------------------------------------------------
Posted via http://www.forum4designers.co
-----------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message36088.htm

#6 July 20th, 2005, 10:35 PM

Unregistered wrote:[color=blue]
> re: testing on safari .. i got a hold of a $100 533 Mhz machine and
> loaded it with RedHat9 and KDE - part of KDE is the Konqueror web
> browser that mimics Safari[/color]

Erm, other way round mate.

Though atm they each play catch up with changes made to the other, if
the devels wish to merge in such changes aiui.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

What is Bytes?

Popular Articles