We are using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Using CSS (not html since align=center and <center> are deprecated)
I can get it to work in IE6 (but not NS 7 or Firefox) with.
<div style="text-align:center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>
I can get it to work in NS 7 or Firefox (but not IE6) with.
<div style="text-align:-moz-center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>
I've seen many solutions that work in IE only does anyone know how to do it
in both?
Thanks
Mike 13  31732 
On Wed, 10 Nov 2004 14:43:03 -0500, Mike <no**@nospam.com> wrote:
We are using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Oh goody.
Using CSS (not html since align=center and <center> are deprecated)
Indeed. Though, why are you bothering to use a loose DTD if you're
avoiding deprecated markup?
<div style="text-align: center;"><img src="myimg.gif" alt="My logo"
width="201" height="56" /></div>
Note:
1) As img is in a block element, there's no point in display: block;
2) When using XHTML served to HTML browsers you need a space <img />
before the slash.
Once upon a time *Mike* wrote: We are using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Using CSS (not html since align=center and <center> are deprecated)
I can get it to work in IE6 (but not NS 7 or Firefox) with.
<div style="text-align:center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>
That works very well in Mozilla 1.7.3 so I wonder why Firefox and NS 7
is so different? Do you really need the "display:block" there? Not that
I know if it makes any different (it does'nt in Moz 1.7) but still....
--
/Arne http://w1.978.telia.com/~u97802964/
On Wed, 10 Nov 2004 14:43:03 -0500, Mike wrote: I can get it to work in IE6 (but not NS 7 or Firefox) with.
<div style="text-align:center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>
I can get it to work in NS 7 or Firefox (but not IE6) with.
<div style="text-align:-moz-center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>
I've seen many solutions that work in IE only does anyone know how to do it
in both?
This *might* be a job for either CSS import hacks or
IE conditional comments. (If both you understand the
problem correctly and I understand you correctly.)
Hark.. ( listens for the sound of being shouted down.. ;)
--
Andrew Thompson http://www.PhySci.org/codes/ Web & IT Help http://www.PhySci.org/ Open-source software suite http://www.1point1C.org/ Science & Technology http://www.LensEscapes.com/ Images that escape the mundane
*Mike* <no**@nospam.com>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Using CSS (not html since align=center and <center> are deprecated)
Why Transitional then?
<div style="text-align:center; display:block; ">
'Div's are already 'block' by default.
<img src="myimg.gif" alt="My logo" width="201" height="56"/></div>
It works this way in any CSS enabled browser (except for the ending of the
'img' tag, which doesn't conform to XHTML*1.0 Annex C), e.g. Mozilla,
Opera and even IE. I don't see your problem.
--
Proudly sent from eContinent.
On Wed, 10 Nov 2004 21:19:53 +0100, Christoph Paeper wrote: *Mike* <no**@nospam.com>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Using CSS (not html since align=center and <center> are deprecated)
Why Transitional then?
In case we wish to switch our site to strict in the future it will be less
painful. <div style="text-align:center; display:block; ">
'Div's are already 'block' by default.
<img src="myimg.gif" alt="My logo" width="201" height="56"/></div>
It works this way in any CSS enabled browser (except for the ending of the
'img' tag, which doesn't conform to XHTML*1.0 Annex C), e.g. Mozilla,
Opera and even IE. I don't see your problem.
Ok it turns out that there was a problem with the style sheet. The Style
sheet contained the following line: "img { display: block; border: 0; }
The display: block was causing the problem. Once I took it out of the style
sheet, using <div style="text-align:-moz-center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>, worked in both browsers
properly.
By the way, is the following the best way to center an image Using CSS (not
html since align=center and <center> are deprecated)?
div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>
Can you point me to a standard that says an image is a block?
Thanks
On Fri, 12 Nov 2004 10:49:41 -0500, Mike wrote: div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>
Can you point me to a standard ..
<http://www.w3.org/TR/REC-html40/index/elements.html>
.. that says an image is a block?
Please learn how to quote Mike, and how to interpret the
in-line (with trimming) style that others use. For example,
Christoph did *not* say that images were block level, here
is a copy of the thread at the time.
<quoting deleted text>
(You) <div style="text-align:center; display:block; ">
(Christoph)
'Div's are already 'block' by default.
<img src="myimg.gif" alt="My logo" width="201" height="56"/></div>
It works this way in any CSS enabled bro....
</quoting deleted text>
Christoph was commenting that *div*s are block level, that
is why he put his comment directly after the div element.
Your image element came after that..
--
Andrew Thompson http://www.PhySci.org/codes/ Web & IT Help http://www.PhySci.org/ Open-source software suite http://www.1point1C.org/ Science & Technology http://www.LensEscapes.com/ Images that escape the mundane
On Fri, 12 Nov 2004 10:49:41 -0500, Mike wrote: By the way, is the following the best way to center an image Using CSS (not
html since align=center and <center> are deprecated)?
div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>
Can you point me to a standard that says an image is a block?
Thanks
I see that style="margin: auto" works as well and seems like it might be a
better approach. Any opinions?
*Mike* <no**@nospam.com>: On Wed, 10 Nov 2004 21:19:53 +0100, Christoph Paeper wrote: *Mike* <no**@nospam.com>: Using CSS (not html since align=center and <center> are deprecated)
Why [XHTML 1.0] Transitional then?
In case we wish to switch our site to strict in the future it will be
less painful.
Uh, what? You don't want to use deprecated elements and attributes, but
still want to stick with Transitional? I just don't get it.
Ok it turns out that there was a problem with the style sheet. The Style
sheet contained the following line: "img { display: block; border: 0; }
You come here with a assumably minimised testcase---which is a good
thing---and then there's still another stylesheet involved?
The display: block was causing the problem.
Of course. If you had shown it or given an test URL, I (or someone else)
would have told you.
| is the following the best way to center an image Using CSS (...)?
|
| <div style="text-align:center;"><img src="myimg.gif"
| alt="My logo" width="201" height="56" /></div>
That depends.
The best way of centering the inline contents of an 'div' is "text-align:
center". Preferably not in a 'style' attribute, though.
The best way of centering an image inside a container that has other
inline children as well (like text), that shall to be centered, is
img {display: block; margin: auto;}.
That doesn't work in some browsers or (insane) browser modes, though.
| Can you point me to a standard that says an image is a block?
'Img's are not, but 'div's are. That's why 'text-align' works; it applies
to a block-level element and affects its inline-level children. "Margin:
auto" is the approach for block-level elements themselves. 'Display' is
the property to change between 'block' and 'inline' (among others, e.g.
'inline-block'). That's pretty much CSS basics.
--
Useless Fact #4:
Coca Cola was originally green.
On Fri, 12 Nov 2004 19:24:21 +0100, Christoph Paeper wrote: In case we wish to switch our site to strict in the future it will be
less painful.
Uh, what? You don't want to use deprecated elements and attributes, but
still want to stick with Transitional? I just don't get it.
Am I missing something here, should we not try to make our site more strict
for the chance of a future DTD upgrade? We would like to go all strict now,
but there are too many old and buggy browsers out there to go through with
it. When a browser sees Transitional, will the strict coding throw them off
some how?
Ok it turns out that there was a problem with the style sheet. The Style
sheet contained the following line: "img { display: block; border: 0; }
You come here with a assumably minimised testcase---which is a good
thing---and then there's still another stylesheet involved?
Yes, I'm still learning. I would have provided a link but the site is in
development in house at this time. The display: block was causing the problem.
Of course. If you had shown it or given an test URL, I (or someone else)
would have told you.
| is the following the best way to center an image Using CSS (...)?
|
| <div style="text-align:center;"><img src="myimg.gif"
| alt="My logo" width="201" height="56" /></div>
That depends.
The best way of centering the inline contents of an 'div' is "text-align:
center". Preferably not in a 'style' attribute, though.
The best way of centering an image inside a container that has other
inline children as well (like text), that shall to be centered, is
img {display: block; margin: auto;}.
That doesn't work in some browsers or (insane) browser modes, though.
The above will work for about the 80% of our customers who use IE6, NS 6,
Firefox and greater versions, but there are still a lot of IE 5.5 users out
there according to last months stats. Still it is probably the way we will
go as the positioning of an img will not alter the content to much.
Another funny thing is that Dreamweaver 7 displays the img {display: block;
margin: auto;} images as left justified like IE 5.5.
| Can you point me to a standard that says an image is a block?
'Img's are not, but 'div's are. That's why 'text-align' works; it applies
to a block-level element and affects its inline-level children. "Margin:
auto" is the approach for block-level elements themselves. 'Display' is
the property to change between 'block' and 'inline' (among others, e.g.
'inline-block'). That's pretty much CSS basics.
On Fri, 12 Nov 2004, Mike wrote: Am I missing something here, should we not try to make our site more
strict for the chance of a future DTD upgrade?
It's a judgment call, but I'd say a definite "yes" to that.
We would like to go all strict now, but there are too many old and
buggy browsers out there to go through with it.
That depends on what you are trying to achieve. You rate to get
better results (cosmetically) if you get rid of that legacy HTML/3.2
crud, at least for new documents, and concentrate on using CSS for the
presentation. If you do that properly, then there are recognised
techniques for shielding old and CSS-buggy browsers: they can still
get the structural HTML, and display the content as HTML intended,
even if the cosmetics of the result leave something to be desired.
You're the one who has to decide which is more important to you: best
results with modern browser, or dragging modern browsers down to the
level of old and buggy browsers in the interests of compatibility. And
I say that as someone who has lived right through the lean years of
HTML/3.2(spit) and done all of that legacy crud, and many of my pages
are still infested by it. If/when I ever get time, I'll be only too
happy to rid myself of it, and - as I say - my advice to you would be,
at any rate for newly made pages, to keep clear of it. Users of old
browsers have their own reasons for staying with them, and IMHO have
every right to expect to browse your content - but they don't have
much right to expect a beautiful and harmonious visual result.
When a browser sees Transitional, will the strict coding throw them off
some how?
It's certainly "on the cards" that a browser designer would treat
strict as calling for specification-conforming results, while
transitional would be treated as a request for reproducing the popular
bugs in old browsers (like the so-called "quirks" mode).
After all, "transitional" was defined over half a decade back. So I
ask you, when are you finally going to make that "transition"? I'm
stuck with a legacy of old ballast, that I'd be only too glad to be
rid of: you've less excuse for starting that now, half a decade later.
good luck
I guess that means I know what to ask Santa for. But whether I'll get
it is another matter. SCNR.
Mike wrote: On Fri, 12 Nov 2004 10:49:41 -0500, Mike wrote:div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>
That's one way. text-align: center; centers the content of the element
within the box, whereas...
I see that style="margin: auto" works as well and seems like it might be a
better approach. Any opinions?
....setting left and right margins to 'auto', centers the box
horizontally within the containing block. In this case, margin: auto;
is effectively the same as saying:
margin-left: auto;
margin-right: auto;
Even though 'margin-top' and 'margin-bottom' are also being set to
'auto', they have essentially no effect since, (in most cases) their
computed values are 0. They do not center the box vertically, as many
people think when they find out that is true for 'margin-left' and
'margin-right'.
The difference between setting margins and text-align is best
illustrated with an example. Load the following up in Firefox, Mozilla,
Opera or another browser that supports data: URIs. IE doesn't.
data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9XM0MvL 0RURCBIVE1MIDQuMDEvL0VOIg0KICAgImh0dHA6Ly93d3cudzM ub3JnL1RSL2h0bWw0L3N0cmljdC5kdGQiPg0KPGh0bWwgbGFuZ z0iZW4iPg0KPGhlYWQ%2BDQoJPHRpdGxlPk1hcmdpbnMgYW5kI HRleHQtYWxpZ248L3RpdGxlPg0KCTxtZXRhIGh0dHAtZXF1aXY 9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sO2NoY XJzZXQ9dXRmLTgiPg0KCTxtZXRhIGh0dHAtZXF1aXY9IkNvbnR lbnQtU3R5bGUtVHlwZSIgY29udGVudD0idGV4dC9jc3MiPg0KC TxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BDQoJcCB7IHdpZHRoO iA1MCU7IGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOyB9DQoJPC9 zdHlsZT4NCjwvaGVhZD4NCjxib2R5Pg0KICAgIDxwIHN0eWxlP SJ0ZXh0LWFsaWduOmNlbnRlcjsiPlRoaXMgbGluZSBoYXMgdGh lDQogICAgICAgIHN0eWxlIDxjb2RlPnRleHQtYWxpZ246Y2Vud GVyOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KDQo gICAgPHAgc3R5bGU9Im1hcmdpbi1sZWZ0OmF1dG87bWFyZ2luL XJpZ2h0OmF1d
G87Ij5UaGlzIGxpbmUgaGFzIHRoZQ0KICAgICAgICBzdHlsZSA 8Y29kZT5tYXJnaW4tbGVmdDphdXRvO21hcmdpbi1yaWdodDphd XRvOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KPC9 ib2R5Pg0KPC9odG1sPg%3D%3D
--
Lachlan Hunt http://lachy.id.au/ http://GetFirefox.com/ Rediscover the Web http://SpreadFirefox.com/ Igniting the Web
Lachlan Hunt wrote: data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9XM0MvL 0RURCBIVE1MIDQuMDEvL0VOIg0KICAgImh0dHA6Ly93d3cudzM ub3JnL1RSL2h0bWw0L3N0cmljdC5kdGQiPg0KPGh0bWwgbGFuZ z0iZW4iPg0KPGhlYWQ%2BDQoJPHRpdGxlPk1hcmdpbnMgYW5kI HRleHQtYWxpZ248L3RpdGxlPg0KCTxtZXRhIGh0dHAtZXF1aXY 9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sO2NoY XJzZXQ9dXRmLTgiPg0KCTxtZXRhIGh0dHAtZXF1aXY9IkNvbnR lbnQtU3R5bGUtVHlwZSIgY29udGVudD0idGV4dC9jc3MiPg0KC TxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BDQoJcCB7IHdpZHRoO iA1MCU7IGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOyB9DQoJPC9 zdHlsZT4NCjwvaGVhZD4NCjxib2R5Pg0KICAgIDxwIHN0eWxlP SJ0ZXh0LWFsaWduOmNlbnRlcjsiPlRoaXMgbGluZSBoYXMgdGh lDQogICAgICAgIHN0eWxlIDxjb2RlPnRleHQtYWxpZ246Y2Vud GVyOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KDQo gICAgPHAgc3R5bGU9Im1hcmdpbi1sZWZ0OmF1dG87bWFyZ2luL XJpZ2h0OmF
1d G87Ij5UaGlzIGxpbmUgaGFzIHRoZQ0KICAgICAgICBzdHlsZSA 8Y29kZT5tYXJnaW4tbGVmdDphdXRvO21hcmdpbi1yaWdodDphd XRvOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KPC9 ib2R5Pg0KPC9odG1sPg%3D%3D
That wasn't supposed to wrap. Copy it and make sure it's all on one
line for it to work, or just use the following source and make your own
file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Margins and text-align</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
p { width: 50%; border: 1px solid black; }
</style>
</head>
<body>
<p style="text-align:center;">This line has the
style <code>text-align:center;</code>.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus eleifend. In hac habitasse platea dictumst. Vestibulum in
tortor ut orci pretium bibendum.</p>
<p style="margin-left:auto;margin-right:auto;">This line has the
style <code>margin-left:auto;margin-right:auto;</code>.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus eleifend. In hac habitasse platea dictumst. Vestibulum in
tortor ut orci pretium bibendum.</p>
</body>
</html>
--
Lachlan Hunt http://lachy.id.au/ http://GetFirefox.com/ Rediscover the Web http://SpreadFirefox.com/ Igniting the Web This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Tony Vasquez |
last post by:
Can somoene give me an example of how to center a div, according to it's
image size... I am using different images, and so I have to resize it in a
functino according to the image's size. So I use...
|
by: sylvian stone |
last post by:
Hi, I'm trying to do something that has always been easy with tables -
namely use a three column layout, and above the main layout, show three
images - one on the absolute left, one on the absolute...
|
by: Sean |
last post by:
Hi,
I have a tab control containing few tab pages. On each tab
pages, I put an image on the tab page's title bar (the
area on top of a tab page, ie where tooltip will appear).
If i put both...
|
by: Gary |
last post by:
I am new at this, css, and am having trouble doing what I want to do.
I want div columns on the left and right that have a background
image. Then I want a div in the center, of fixed width, with...
|
by: jobs |
last post by:
I have a simple login page with roughly a 300px x 300px image behind
the asp.net login control. I need the login control to land in the
middle of the image. I want both the image and the login...
|
by: Summercool |
last post by:
in
http://www.0011.com/test_size3.html
to center the logo "HTML 4.01 check" button at the bottom of the page,
I used
<div style="width: 10px; margin: 0px auto">
</div>
|
by: GloStix |
last post by:
I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to...
|
by: jerrygadd |
last post by:
Can some body help me vertically center an image using CSS?
The customer only uses IE, and so the code is not debugged for other browsers!
The image in question is found on line 1075 :...
|
by: gaijinco |
last post by:
I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm...
|
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...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
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,...
|
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...
|
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...
|
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,...
|
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...
| |
