I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
Here's a copy/pasteable test page that will work offline that exhibits
the scenario. You see in IE6+ that everything is aligned (the image, the
text, the table and the div). Try it in Safari or Firefox and you see
that the table and div aren't affected by the text-align property in the
parent div. I'm not saying that's wrong, but I'm encountering a site (or
two) that are using text-align to achieve centralization and consider
that there's something wrong with my DIV that I write into it if it's
not aligned centrally in Firefox/Safari. Now I know (or at least think)
they're wrong in that assumption, but I'm the one that needs to (a)
prove it, and (b) come up with a workaround on my end.
<html><body>
<table border=1 width=500>
<tr>
<td>
<div style="text-align:center">
<b>Using text-align:center</b>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
<img width=100 height=30 border=1>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
TEXT
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
<div style="background-color:yellow;width:60px;">DIV</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
<table><tr><td>table</td></tr></table>
</div>
</td>
</tr>
<tr>
<td>
<center>
<b>Using regular <center> tag</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<img width=100 height=30 border=1>
</center>
</td>
</tr>
<tr>
<td>
<center>
TEXT
</center>
</td>
</tr>
<tr>
<td>
<center>
<div style="background-color:yellow;width:60px;">DIV</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<table><tr><td>table</td></tr></table>
</center>
</td>
</tr>
</table>
</body></html> 13  3195 
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
* Use a proper doctype; I would say this is good:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
* And you might care to see my latest draft of
<http://netweaver.com.au/centring/>
* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.
* Try not to use deprecated things like <center>
--
dorayme
Stevo wrote:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
As someone else said, first use a DOCTYPE which triggers standards mode.
The standards basically say that "text-align:center;" centers inline
content, not blocks.
To center a block, use "margin-left:auto, margin-right:auto;" instead.
You can use IE conditional comments to ensure that IE gets the broken
CSS it needs to center things as you expect.
On 2008-06-09, Stevo <no@mail.invalidwrote:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
You can do it with classes:
..centre { text-align: center }
..centre table, .centre div { margin-left: auto; margin-right: auto }
Then you put class="centre" on the outside div.
Here's a copy/pasteable test page that will work offline that exhibits
the scenario. You see in IE6+ that everything is aligned (the image, the
text, the table and the div). Try it in Safari or Firefox and you see
that the table and div aren't affected by the text-align property in the
parent div. I'm not saying that's wrong
It's not.
, but I'm encountering a site (or
two) that are using text-align to achieve centralization and consider
that there's something wrong with my DIV that I write into it if it's
not aligned centrally in Firefox/Safari. Now I know (or at least think)
they're wrong in that assumption, but I'm the one that needs to (a)
prove it, and (b) come up with a workaround on my end.
Proof is here: http://www.w3.org/TR/CSS21/text.html#propdef-text-align
"Left, right, center, and justify text, respectively, as described
in the section on inline formatting"
They don't align blocks.
dorayme wrote:
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
>I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
* Use a proper doctype; I would say this is good:
I don't think I can use a doctype on my DIV. All I have available to it
is style properties.
* And you might care to see my latest draft of
<http://netweaver.com.au/centring/>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.
* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.
* Try not to use deprecated things like <center>
I don't have any CSS in my HTML content and don't use <center>.
C A Upsdell wrote:
Stevo wrote:
>I've found that for IE6+, if you add the property text-align:center to
a DIV, then *anything* inside it gets centered. That can be a table,
an object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that
way. In my tests on those browsers, they only centers images and text.
Any DIVs, object/embeds or tables remain default unaligned and
generally appear on the left.
As someone else said, first use a DOCTYPE which triggers standards mode.
The standards basically say that "text-align:center;" centers inline
content, not blocks.
To center a block, use "margin-left:auto, margin-right:auto;" instead.
You can use IE conditional comments to ensure that IE gets the broken
CSS it needs to center things as you expect.
I think none of that can be applied to my DIV to help it achieve what I
want :( As I just said in reply to dorayme though, I might be able to
use your margin-left:auto and margin-right:auto if I wrap my DIV in
another DIV that has those properties.
Ben C wrote:
On 2008-06-09, Stevo <no@mail.invalidwrote:
>I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
You can do it with classes:
.centre { text-align: center }
.centre table, .centre div { margin-left: auto; margin-right: auto }
Then you put class="centre" on the outside div.
That's not my div though, I can't do anything to that one. I'm looking
for something I can do to *my* div. I think wrapping it with another DIV
that has a center attribute might do the trick.
I just need to figure out how to detect (in JS) if the outer DIV has
text-align set to center.
Scripsit C A Upsdell:
As someone else said, first use a DOCTYPE which triggers standards
mode.
Clarification: even triggering "standards" mode does not make IE (even
IE 7) behave as regards to align="center" or text-align: center on a
<divelement. In both modes, IE centers any inner block, in addition to
centering lines.
You can use IE conditional comments to ensure that IE gets the broken
CSS it needs to center things as you expect.
In practice, the safest way to center a block is to wrap it inside a
single-cell table that has align="center". (By the HTML specs,
align="center" centers the entire table, so this is different from
align="center" on a <divelement.)
--
Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
dorayme wrote:
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
* Use a proper doctype; I would say this is good:
I don't think I can use a doctype on my DIV. All I have available to it
is style properties.
Doctypes are for HTML documents not elements. Take a look at the the top
of the HTML source, for example, in the pages of the URL I supplied
below.
* And you might care to see my latest draft of
<http://netweaver.com.au/centring/>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.
If you read pages 2 and 3 of the above URL or follow Ben C's advice
(which gives a practical way), you will be able to solve this problem.
Otherwise post a URL.
>
* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.
* Try not to use deprecated things like <center>
I don't have any CSS in my HTML content and don't use <center>.
Take a look at your first post and the mass of code you included:
<div style="text-align:center">
That is what I meant. It is not a crime. It is just that you will
probably benefit from using classes and putting all your CSS in the head
or in an external style sheet.
And you have:
"<td>
<center>
<b>Using regular <center> tag</b>"
That looks like <center>!
--
dorayme
dorayme wrote:
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
>dorayme wrote:
>>In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?
* Use a proper doctype; I would say this is good:
I don't think I can use a doctype on my DIV. All I have available to it
is style properties.
Doctypes are for HTML documents not elements. Take a look at the the top
of the HTML source, for example, in the pages of the URL I supplied
below.
I don't have control over the HTML document. I'm controlling a library
JS function that will inject a DIV into a specific place. I'm not
allowed to change the page or the outer DIV. All I can control is what I
write into that outer DIV :(
>>* And you might care to see my latest draft of
<http://netweaver.com.au/centring/>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.
If you read pages 2 and 3 of the above URL or follow Ben C's advice
(which gives a practical way), you will be able to solve this problem.
Otherwise post a URL.
Unfortunately I don't have a URL because I don't have a site I'm working
on, just a library function. That's why I threw together that example
HTML that was built just to exhibit the problem I was describing.
>>* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.
* Try not to use deprecated things like <center>
I don't have any CSS in my HTML content and don't use <center>.
Take a look at your first post and the mass of code you included:
<div style="text-align:center">
That is what I meant. It is not a crime. It is just that you will
probably benefit from using classes and putting all your CSS in the head
or in an external style sheet.
And you have:
"<td>
<center>
<b>Using regular <center> tag</b>"
That looks like <center>!
Yeah but that's just a simplest example case to exhibit the problem. I
wouldn't want to post hundreds or thousands of lines of code, and/or
post/attach numerous files, when a simple example snippet will do the
job. The <centerusage was there just to illustrate that a DIV is
center aligned by that tag, but it's not centered by a
text-align:center. Same goes for the inline style code. It's easier to
follow than including a separate CSS file.
Stevo wrote:
dorayme wrote:
>In article <g2*************@news.t-online.com>, Stevo
<no@mail.invalidwrote:
>>Considering that I'm trying to write my own DIV or a table inside of
an existing DIV that *might* have the text-align property set to
center, is there anything I can do to my own DIV or table to make it
center if the parent DIV has text-align:center set?
>* And you might care to see my latest draft of
<http://netweaver.com.au/centring/>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.
I got it now. I just need to wrap my DIV inside another one that has
align="center" and that does the trick as shown here. The first table
row has a DIV that won't center in FF/Safari but will in IE. The second
row (with the extra align=center div level) does align in all :-)
<html><body>
<table border=1 width=500>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<div style="background-color:yellow;width:60px;">DIV1</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<div align="center">
<div style="background-color:yellow;width:60px;">DIV2</div>
</div>
</div>
</td>
</tr>
</table>
</body></html>
I haven't figured out yet how to determine (in JS) whether the outerdiv
has text-align:center but in IE and Firefox it's easy enough.
IE:
document.getElementById("outerdiv").currentStyle.t extAlign=="center"
FF:
(document.defaultView.getComputedStyle(document.ge tElementById("outerdiv"),"")).textAlign=="center"
Jukka K. Korpela wrote:
In practice, the safest way to center a block is to wrap it inside a
single-cell table that has align="center". (By the HTML specs,
align="center" centers the entire table, so this is different from
align="center" on a <divelement.)
Oh, so my wrapping my DIV inside another one that has align=center on
it, is not as good as wrapping my DIV inside a single cell table with
align=center. Just tried it. I like the result even better, thanks :)
<html><body>
<table border=1 width=500>
<tr>
<td>
<div style="text-align:center">
<div style="background-color:yellow;width:60px;">DIV1</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<div align="center">
<div style="background-color:yellow;width:60px;">DIV2</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<table align="center"><tr><td>
<div style="background-color:yellow;width:60px;">DIV2</div>
</td></tr></table>
</div>
</td>
</tr>
</table>
</body></html>
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
Stevo wrote:
dorayme wrote:
In article <g2*************@news.t-online.com>, Stevo
<no@mail.invalidwrote:
Considering that I'm trying to write my own DIV or a table inside of
an existing DIV that *might* have the text-align property set to
center, is there anything I can do to my own DIV or table to make it
center if the parent DIV has text-align:center set?
* And you might care to see my latest draft of
<http://netweaver.com.au/centring/>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.
I got it now. I just need to wrap my DIV inside another one that has
align="center" and that does the trick as shown here.
Well, you are not quite on to the idea of getting by with CSS but if you
are happy, so be it.
--
dorayme
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
Doctypes are for HTML documents not elements. Take a look at the the top
of the HTML source, for example, in the pages of the URL I supplied
below.
I don't have control over the HTML document. I'm controlling a library
JS function that will inject a DIV into a specific place. I'm not
allowed to change the page or the outer DIV. All I can control is what I
write into that outer DIV :(
OK, I was not aware of this. You are, then, indeed hampered.
Centring things for the web is a tricky business because of browser
differences and because of the lack of one to one correspondence between
the HTML presentational methods and the CSS ones.
It might be best to simply rely on CSS and get to know how to deal with
difficult browsers like IE6. With IE6, one can deliver things for its
eyes only via conditional comments in the HTML.
--
dorayme This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: FL |
last post by:
Hi Everyone,
I know howto center a block using
margin-left: auto ;
margin-right: auto ;
but I'm trying to center vertically a box, any idea to solve this?
|
by: john T |
last post by:
Is there anyway to vertically center a html table using css in such a
way it does not alter the html table. When I tryied it just screws up.
|
by: Matt Silberstein |
last post by:
I would like to have a page that has some images arrange around the
center. The idea is to design it for 800 wide and just allow the
margins to grow on larger displays. Here is a link to an image...
|
by: Petesman |
last post by:
I am trying to make a prompt that will ask the user for some input...
If I just use var input = prompt("dafa") everything works fine but the
box is put in the top left corner of the window. I need...
|
by: MK |
last post by:
Hi,
I don't have much experience with Javascript and have a simple question.
Suppose one wants to write some text in the web page which needs to be
center aligned, then how to do it?
The...
|
by: Alex |
last post by:
Hi Everone,
I need some advice on how to setup 4 columns where the outside two are
absolute (120px) and the inner two (side by side) are relevent (Fluid)
and change with the screen.
Here's my...
|
by: kpg |
last post by:
Here's an easy one.
I have an asp:label on a web page.
How do I center the text in the label?
???
TIA
kpg
|
by: -Lost |
last post by:
Anyone know offhand how to center a text within the bounding box of an
image (width-wise at least) without the Freetype library?
GD- or ImageMagick-specifc code would do nicely.
--
-Lost...
|
by: MarkoKlacar |
last post by:
Hi!
I have a problem, I want to select the number of elements within an element.
All I need is the number (count), and I just want to it once for "one row" so to speak.
Picture this XML file:...
|
by: Csaba Gabor |
last post by:
I have a table with 3 rows, and two pieces of data to display
in each row. However, the first element of the last two rows
and the 2nd element of the 1st row are very short. This would
seem to...
|
by: Rina0 |
last post by:
Cybersecurity engineering is a specialized field that focuses on the design, development, and implementation of systems, processes, and technologies that protect against cyber threats and...
|
by: erikbower65 |
last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps:
1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal.
2. Connect to...
|
by: linyimin |
last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
|
by: erikbower65 |
last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA:
1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
|
by: Taofi |
last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same
This are my field names
ID, Budgeted, Actual, Status and Differences
...
|
by: Rina0 |
last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
|
by: DJRhino |
last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer)
If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _
310030356 Or 310030359 Or 310030362 Or...
|
by: lllomh |
last post by:
How does React native implement an English player?
|
by: Mushico |
last post by:
How to calculate date of retirement from date of birth
| |
