More on Safari table width problem

Josh Renaud

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

Jul 20 '05 #1

Subscribe Post Reply

12313

Brian

Josh Renaud wrote:

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.
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.
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.
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.
It seems the table's width defaults to 100% of the parent div.
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.
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.
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.
Can anyone help me understand why Safari behaves the way it does?
Nope. Sorry. I know little about the codebase.
Thanks for any ideas you all can offer.

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/

Jul 20 '05 #2

Josh Renaud wrote:

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

It seems the table's width defaults to 100% of the parent div.
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 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.

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

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

DU
Thanks for any ideas you all can offer.

--Josh

Jul 20 '05 #3

Josh Renaud

On 1/22/04 9:16 PM, in article bu**********@news.eusc.inter.net, "DU"
<dr*******@hotWIPETHISmail.com> wrote:

Josh Renaud wrote:
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.

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?

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

Jul 20 '05 #4

Unregistered

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

Jul 20 '05 #5

Michael Rozdoba

Unregistered wrote:

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

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

Jul 20 '05 #6

Similar topics

Safari table width problem

by: Josh Renaud | last post by:

I'm still trying to solve a problem I experienced in Safari. This is my second post on the subject. Here are the relevant links: page: http://www.joshrenaud.com/fredbear/contact2.html css: ...

HTML / CSS

Interesting Safari Problem

by: Lorenzo Gordon | last post by:

Hi all, I've trawled the archives in vain for a similar problem: In building a client's site, I've got a menu section where each menu heading sits in a table cell. It's _paramount_ that the...

HTML / CSS

How to Center content / table under Safari (mac) and Konqueror (Linux) without using frames

by: dumblede | last post by:

Hello fellows, i would like to center a 800px wide 600px high content area without using frames. I have "come up" with the following solution so far. It works under IE 6.0, Firefox 1 (under...

HTML / CSS

Why is Safari not inserting a new row/field in the same order like IE, Mozilla and Opera

by: Stefan Mueller | last post by:

I'm really very confused. With the following code I can add rows/fields in frame 1 and 2. If I use IE, Mozilla or Opera the new rows/fields get added in ascending order. However, if I use Safari...

Javascript

Firefox/Safari alignment problems

by: cbjewelz | last post by:

Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical...

HTML / CSS

Function doesnt work in Safari

by: effendi | last post by:

I wrote the following function and tested it in MSIE, Firefox and Mac Safari, Works in all but the Safari. What can I do to rectify this? function processBackground(){ for (n=1;n<11;n++) { ...

Javascript

Safari and form variables in html page

by: justplain.kzn | last post by:

Hi, I have a table with dynamic html that contains drop down select lists and readonly text boxes. Dynamic calculations are done on change of a value in one of the drop down select lists. ...

Javascript

div overflow doesn't scroll in Safari

by: hanness | last post by:

Hello, i'm trying to make a scrollable area in my website. The area (a DIV) is 500 x 200 pixels and shows a table which is much larger (>2000 pixels in width). Everything works fine in IE, but on...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA