By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,763 Members | 1,609 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,763 IT Pros & Developers. It's quick & easy.

Centering Tables with CSS on Mac IE5

P: n/a
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
Share this Question
Share on Google+
13 Replies


P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
Not good enough.

Sep 3 '05 #10

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.