473,221 Members | 1,889 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 software developers and data experts.

Centering Tables with CSS on Mac IE5

Hi,

We have an application that requires IE. We recently incorporated CSS
scroll areas. The scroll fields are supposed to be centered. They are
except for IE5 for the Mac. I have tried various suggestions on the net
without any luck. I have the code for the whole page below. I've taken
out all the Mac specific code that I tried and didn't work. Centering
is done by a separate <div> tag. If anyone knows how to get the scroll
area to center for Mac IE5 I'd very much appreciate the info.

Thanks,
Raffi

----------------------------------------------------------------

<style type="text/css">
div.scroll {
height: 100px;
width: 350px;
overflow: auto;
border: 2px solid #0000ff;
background-color: #ffffff;
padding: 8px;}
</style>

<html><body>
<div align="center">
<h4>Bill's Electrical Supply Order Form</h4>
<form action="index.php" method="post">
<div class="scroll">
<table width="300" border="2" cellpadding="2" cellspacing="2"
bordercolor="#0099FF">
<tr>
<td>
Item:
</td>
<td>
<select name="item">
<option selected>Wire</option>
<option>Connector</option>
<option>Screw</option>
</select>
</td>
</tr>
<tr>
<td>
Quantity:
</td>
<td>
<input name="quantity" type="text" />
</td>
</tr>
<tr>
<td>
Color:
</td>
<td>
<input name="color" type="text" />
</td>
</tr>
<tr>
<td>
Brand:
</td>
<td>
<input name="brand" type="text" />
</td>
</tr>
<tr>
<td>
Model:
</td>
<td>
<input name="model" type="text" />
</td>
</tr>
</table>
</div>

<br><br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
<?php
if ($_POST['submit'] || $_POST['quantity']){
echo $_POST['item'], " ", $_POST['quantity'];
}
?>

Sep 3 '05 #1
13 1925
Els
Raffi wrote:
Hi,

We have an application that requires IE. We recently incorporated CSS
scroll areas. The scroll fields are supposed to be centered. They are
except for IE5 for the Mac. I have tried various suggestions on the net
without any luck. I have the code for the whole page below. I've taken
out all the Mac specific code that I tried and didn't work. Centering
is done by a separate <div> tag. If anyone knows how to get the scroll
area to center for Mac IE5 I'd very much appreciate the info.


I'd think you mean horizontally centered?
Give the div that needs to be centered a left and right margin of
equal width. That's also how you center divs in other browsers, like
Opera and Firefox.

The only browser that does not center block level elements (like divs)
this way, is WinIE5, and WinIE6 when in Quirksmode.

[snip code]

It's better to provide a URL, so we don't have to copy, paste and
upload... That's all your job :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Sep 3 '05 #2
"Raffi" <th*********@yahoo.com> wrote:
We have an application that requires IE.


Requiring a certain browser means that you are off topic here,
this group is restricted to issues related to authoring for the www.

--
Spartanicus
Sep 3 '05 #3
Let's analyse your statement:

comp.infosystems.www.authoring.stylesheets

comp - my question is definitely computer/computing related
infosystems - it's a database application. definitely infosystems
www - the application is accessed over the internet (aka www)
authoring - i'm authoring code and page design for my application
stylesheets - i'm using (or trying to use) stylesheets

How then is my question not appropriate for this forum? Please be
specific in your response.

Sep 3 '05 #4
On 2 Sep 2005 17:10:55 -0700, "Raffi" <th*********@yahoo.com> wrote:
Hi,

We have an application that requires IE. We recently incorporated CSS
scroll areas. The scroll fields are supposed to be centered. They are
except for IE5 for the Mac.
You do realize that MacIE is a completely different browser than IE
for Windows?
I have tried various suggestions on the net
without any luck. I have the code for the whole page below. I've taken
out all the Mac specific code that I tried and didn't work. Centering
is done by a separate <div> tag. If anyone knows how to get the scroll
area to center for Mac IE5 I'd very much appreciate the info.


In the stylesheet, add this style to the <table> element directly (not
the <div> element around the table:

{
margin-left: auto;
margin-right: auto;
}

which should work for all CSS-conformant browsers.

For more than you want to know, see:

<http://theodorakis.net/tablecentertest.html>

Nick

--
Nick Theodorakis
ni**************@hotmail.com
contact form:
http://theodorakis.net/contact.html
Sep 3 '05 #5
"Raffi" <th*********@yahoo.com> wrote:
www - the application is accessed over the internet (aka www)


The question is: is it suitable for the www, the answer is no. Post your
question to a suitable group in the microsoft.* hierarchy.

--
Spartanicus
Sep 3 '05 #6
Nick,

Thanks for the reply. I've come to realize Mac and Windows version of
IE are very different, as these sorts of little difference keep coming
up.

I'll try your suggestion in a few days. I only have access to Macs at
work.

Raffi

Sep 3 '05 #7
You have already stated your opinion twice. If you want my question off
this group, you have to be very specific about why. Otherwise, you're
just being a troll. So, why is my question not suitable for the web?

If your next reply continues to reiterate your opinion without valid
reasoning to back it up, I'm going to assume you're a troll and ignore
you...

Sep 3 '05 #8
"Raffi" <th*********@yahoo.com> wrote:
So, why is my question not suitable for the web?


This group is about authoring for the *public* world wide web. As stated
by you your "application" isn't suitable for use by the public.

--
Spartanicus
Sep 3 '05 #9
Not good enough.

Sep 3 '05 #10
Els wrote:
Raffi wrote:

Hi,

We have an application that requires IE. We recently incorporated CSS
scroll areas. The scroll fields are supposed to be centered. They are
except for IE5 for the Mac. I have tried various suggestions on the net
without any luck. I have the code for the whole page below. I've taken
out all the Mac specific code that I tried and didn't work. Centering
is done by a separate <div> tag. If anyone knows how to get the scroll
area to center for Mac IE5 I'd very much appreciate the info.

I'd think you mean horizontally centered?
Give the div that needs to be centered a left and right margin of
equal width.


No. Correct CSS to center element horizontally is
margin: auto
(or, to include lengths for top margin or bottom margin, or both,
margin: <top-margin-length> auto <bottom-margin-length>; )

That's also how you center divs in other browsers, like Opera and Firefox.

The only browser that does not center block level elements (like divs)
this way, is WinIE5, and WinIE6 when in Quirksmode.


- Jacques
Sep 4 '05 #11
Els
Jacques wrote:
Els wrote:
Raffi wrote:
Hi,

We have an application that requires IE. We recently incorporated CSS
scroll areas. The scroll fields are supposed to be centered. They are
except for IE5 for the Mac. I have tried various suggestions on the net
without any luck. I have the code for the whole page below. I've taken
out all the Mac specific code that I tried and didn't work. Centering
is done by a separate <div> tag. If anyone knows how to get the scroll
area to center for Mac IE5 I'd very much appreciate the info.
I'd think you mean horizontally centered?
Give the div that needs to be centered a left and right margin of
equal width.


No. Correct CSS to center element horizontally is
margin: auto


Right, so, using margin:auto; is not giving the left and right margin
an equal width? It surely is. It also gives the top and bottom margin
an auto width though, which is not needed for centering, and may not
be wanted either.
(or, to include lengths for top margin or bottom margin, or both,
margin: <top-margin-length> auto <bottom-margin-length>; )


And if you do that, do the right and left margin have equal width?
Yes, they surely do. Both methods work.
margin-left:auto;margin-right:auto; also works btw.

And what if I have 5 divs, and I want them all centered, but they all
need to have different top- and bottom-margin values?
Then certainly nor margin:auto; nor margin: <top-margin-length> auto
<bottom-margin-length>; will do what I want.

Then there's another scenario: You want the margins to be 10% of the
total available width.
So, you set margin-left:10%;margin-right:10%; and leave the width of
the element auto.
Does that center the element? Yes. Is it correct CSS? Yes.

So, to cater for all these possible scenarios, giving left and right
margin equal width (whether auto combined with set element width or a
set width combined with element auto), is correct.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Sep 4 '05 #12
Els wrote:
Jacques wrote:

Els wrote:
Raffi wrote:
Hi,

We have an application that requires IE. We recently incorporated CSS
scroll areas. The scroll fields are supposed to be centered. They are
except for IE5 for the Mac. I have tried various suggestions on the net
without any luck. I have the code for the whole page below. I've taken
out all the Mac specific code that I tried and didn't work. Centering
is done by a separate <div> tag. If anyone knows how to get the scroll
area to center for Mac IE5 I'd very much appreciate the info.

I'd think you mean horizontally centered?
Give the div that needs to be centered a left and right margin of
equal width.
No. Correct CSS to center element horizontally is
margin: auto

Right, so, using margin:auto; is not giving the left and right margin
an equal width?


Only in the sense that turning on a light is the same as making it not
dark; horizontal margins of equal dimensions are the physical result,
but giving the left and right margins equal values is not the correct
way to the result (unless the value is 'auto').
Also, there is no legal width value to any margin property - top, right,
bottom or left - though each of these can take a length value, among others.

It surely is. It also gives the top and bottom margin
an auto width though, which is not needed for centering, and may not
be wanted either.

(or, to include lengths for top margin or bottom margin, or both,
margin: <top-margin-length> auto <bottom-margin-length>; )

And if you do that, do the right and left margin have equal width?
Yes, they surely do. Both methods work.
margin-left:auto;margin-right:auto; also works btw.


I agree with the last line; it not only "works" but it is technically
correct in this instance to use two declarations in place of one.

And what if I have 5 divs, and I want them all centered, but they all
need to have different top- and bottom-margin values?
Then certainly nor margin:auto; nor margin: <top-margin-length> auto
<bottom-margin-length>; will do what I want.
Right, again; this is what is the cascade is for - relying on correct
use of inheritance, precedence and specificity.

Then there's another scenario: You want the margins to be 10% of the
total available width.
So, you set margin-left:10%;margin-right:10%; and leave the width of
the element auto.
Does that center the element? Yes. Is it correct CSS? Yes.
I agree, a different desired effect is likely to call for a different
CSS solution.

So, to cater for all these possible scenarios, giving left and right
margin equal width (whether auto combined with set element width or a
set width combined with element auto), is correct.

Best,
Jacques
Sep 5 '05 #13
Els
Jacques wrote:
Els wrote:
Jacques wrote:
Els wrote: [centering block level element] I'd think you mean horizontally centered? Give the div that needs
to be centered a left and right margin of equal width.

No. Correct CSS to center element horizontally is margin: auto
Right, so, using margin:auto; is not giving the left and right
margin an equal width?


Only in the sense that turning on a light is the same as making it
not dark;


Although I do get your point, I don't think the analogy holds, and
also I don't agree really. Well, I agree that I should have expanded
my sentence with a short explanation of two possible options of
setting left and right margin to equal width. One being having the
margin-width set to auto, to be used when the div has a defined width,
the other being having the margin-left- and -right-width set to an
equal lengt value, to be used when the div has an auto width value.
horizontal margins of equal dimensions are the physical
result, but giving the left and right margins equal values is not
the correct way to the result (unless the value is 'auto').
Or unless the width of the element is set to 'auto'.
Also, there is no legal width value to any margin property - top,
right, bottom or left - though each of these can take a length
value, among others.


What is a "legal width value"?
I'd say that if the specs say "The properties defined in this section
refer to the <margin-width> value type, which may take one of the
following values" and then the values that follow are length,
percentage and auto, that's legal enough for me.
http://www.w3.org/TR/CSS21/box.html#margin-properties

Or wait - you're not nitpicking about me saying 'margin-left-width
value' because it is actually a length value, are you? When I say
"margin-width value", I mean the "value for the property that's called
'margin-width'". Does that help?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Sep 5 '05 #14

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

Similar topics

19
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...
3
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...
5
by: Robert J. O'Hara | last post by:
For some time I've made use of the max-width property in CSS to cause my pages to appear as a centered block against a contrasting background. This works well in new browsers (Mozilla, etc.) and...
6
by: Simon Wigzell | last post by:
I have the following funciton that centers my website content for any size window and will center it in real time as the window is expanded or shrunk. It is activated by a onresize="CenterIt();"...
3
by: Robert Latest | last post by:
Hello, me again. This time I'd like to align a DIV both horizontally and vertically centered within a larger DIV. The only alignment-relevant CSS property I could think of was text-align, and...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
2
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.