473,761 Members | 2,410 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

More on Safari table width problem

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
5 12350
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
DU
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:visibl e
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
On 1/22/04 9:16 PM, in article bu**********@ne ws.eusc.inter.n et, "DU"
<dr*******@hotW IPETHISmail.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:visibl e
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

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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
797
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: http://www.joshrenaud.com/fredbear/stylesheets/style.css (both have successfully passed the relevant validators)
10
2514
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 text of the menu heading literally sits at the bottom of the cell, so that when you add the table border, the text looks underlined (this is not the reason why the text should sit at the bottom, but it is what the end result should look like.)
1
3382
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 Windows and Linux) but not under Konqueror (could not test Safari, but they have the rendering engine in common (see www.kde.org)): <pre>
8
2275
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 the inserted rows/fields in frame 2 are in descending order (frame 1 is in ascending order). Is this a bug? Is this a known problem? How can I fix this problem? Stefan
2
17080
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 alignments and div widths are off. It's as if firefox has a different definition of a pixel than safari. Here is the url: http://theprize.chemouni.com/testing.php. When you select the Option from the pull down, the first part of the form appears. Then when...
12
2072
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++) { cellrow="r"+n for (i=1;i<17;i++){ cell=cellrow+"w"+i cellName=cell+"_ID"
2
2130
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. Using Safari,my first iteration the script works fine ( indicating that there are 33 form variables ). When trying another dropdown select value, the
1
3005
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 a mac, using Safari, a problem rises: There is no scrollbar, not horizontal, not vertical.. And only the last part of my table is visible.. What should i do? Has someone an example which works in Safari and scrolls aswell? I don't want to use...
0
9538
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10123
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9975
jinu1996
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9909
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9788
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8794
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6623
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5384
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3889
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.