IE doesn't show picture in the middle

[Fokke Nauta]

Hi all,

I want to have a picture horizontally centered on a web page.
This is the code I used:

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

This is in the header:

<style type="text/css">
..pic {
float: none;
height: 265px;
width: 200px;
position:relative;
margin: auto;
}
</style>

The ID "k" is specified in an external style sheet.

In all browsers but IE9 the picture is neatly in the middle of the page
with the text underneath. In IE9 it's at the left side. How can I make
this appear in IE9 in the middle as well? And what about IE 10 and
newer? Will it also show it at the left side?

Thanks for your answers.

Fokke Nauta

 

[Ben Bacarisse]

I want to have a picture horizontally centered on a web page.
This is the code I used:

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

This is in the header:

<style type="text/css">
.pic {
float: none;
height: 265px;
width: 200px;
position:relative;
margin: auto;
}
</style>

In all browsers but IE9 the picture is neatly in the middle of the
page with the text underneath. In IE9 it's at the left side. How can I
make this appear in IE9 in the middle as well?

I don't have IE9, but the relative positioning is not needed and it may,
possibly, be confusing IE9.

<snip>

 

[BootNic]

Hi all,

I want to have a picture horizontally centered on a web page.
This is the code I used:

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

This is in the header:

<style type="text/css">
.pic {
float: none;
height: 265px;
width: 200px;
position:relative;
margin: auto;
}
</style>

The ID "k" is specified in an external style sheet.

In all browsers but IE9 the picture is neatly in the middle of the page
with the text underneath. In IE9 it's at the left side. How can I make
this appear in IE9 in the middle as well? And what about IE 10 and
newer? Will it also show it at the left side

• DOCTYPE if any?
â—¦ DOCTYPE or the lack of one may cause this.

• Server headers?
â—¦ Server header may cause this.

• Meta elements?
â—¦ Meta element may cause this.

• Compatibility mode?
â—¦ Local settings may cause this.

Snippets are not enough to trouble shoot this issue.


--
BootNic Fri Oct 25, 2013 10:22 am
My problem lies in reconciling my gross habits with my net income.
*Errol Flynn*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlJqfpUACgkQOcdbyBqMFBG7vQCcDlptFExsMOLXzy2HAhlfCLZf
TWQAn2CTDJSBPupph9TF7QIaPxsOTq6Q
=GcZm
-----END PGP SIGNATURE-----

 

[Ben Bacarisse]

I don't have IE9, but the relative positioning is not needed and it may,
possibly, be confusing IE9.

Nope. It is, of course, quirks more. Just installed a virtual IE10 and
you need a proper DOCTYPE to prevent quirks mode and the div is centred.

 

[Hot_Text]

Hi all,

I want to have a picture horizontally centered on a web page.
This is the code I used:

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

This is in the header:

<style type="text/css">
.pic {
float: none;
height: 265px;
width: 200px;
position:relative;
margin: auto;
}
</style>

The ID "k" is specified in an external style sheet.

In all browsers but IE9 the picture is neatly in the middle of the page with the text underneath. In IE9 it's at the left side.
How can I make this appear in IE9 in the middle as well? And what about IE 10 and newer? Will it also show it at the left side?

Thanks for your answers.

Fokke Nauta

align the picture to the middle

<img src="picture.jpg" width="200" height="255" border="1" align="middle">

 

[Denis McMahon]

In all browsers but IE9 the picture is neatly in the middle of the page
with the text underneath. In IE9 it's at the left side.

This was a common problem in earlier versions of ie where setting left
and right margins to auto did not center an element.

I believe one suggested fix is / was to use an extra wrapper div with
style="text-align:center" around the div with the auto margin elements.

Others seem to relate around doctypes etc. Remember that if you declare a
doctype to a browser and your html does not match the doctype, the
browser may do it's own thing anyway.

 

[se]

Hi all,

I want to have a picture horizontally centered on a web page.
This is the code I used:

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

This is in the header:

<style type="text/css">
.pic {
float: none;
height: 265px;
width: 200px;
position:relative;
margin: auto;
}
</style>

The ID "k" is specified in an external style sheet.

In all browsers but IE9 the picture is neatly in the middle of the page
with the text underneath. In IE9 it's at the left side. How can I make
this appear in IE9 in the middle as well? And what about IE 10 and newer?
Will it also show it at the left side?

Thanks for your answers.

Fokke Nauta

As others said, you need a doctype. And the
relative is not needed. Moreover, you are using a
css markup that is not valid with most doctypes in
common use. It's a bad doing practicing with too old
coding (you should not). Also, when having a <div>
container, there's no reason also putting the image
in a <p>.

Below is an exchange for your code to look at:
You did the container .pic same width as the picture.
First; it must be 2 pixels broader to contain the
2 x 1 pixel image borders. I prefer making it even broader
(if anough room on both sides), selecting a width
that allow a visitor to rezise the text without
breaking. I changed the <span> with a <div> and moved
it out of the container, so as to control the distance
of the text top to the picture. Enthough it worked
your way doing it (making a taller container). I
left out the <p>. When pictures have borders, it
generally best to set it's text-decoration to none.
When a pictures width and height are given in external
style sheet, you don't need to put them inline too.
You did margin:auto;. It should be margin: 0 auto;
Alternate use margin-left:auto; and margin-right:auto;


<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
..pic {
float: none;
width: 300px;
height: 257px; /*add the 2 image borders of 1px*/
padding: 0;
margin:0 auto; /*or: margin-left:auto; margin-right:auto;*/
text-align:center;
border-style:none;
border:1px #000 solid;
}
..pic img {
border:1px #FF9933 solid;
width:200px;
height:255px;
text-decoration:none;
}
#k {
font-size:1em;
width: 300px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
text-align:center;
}
</style>
</head>
<body>
<div class="pic">
<img alt=""src="picture.jpg"/>
</div>
<div id="k">Some tekst here</div>
</body>
</html>

 

[se]

Forgot to delete in .pic this: border:1px #000 solid;
And to remark: "alt" is required in img.
/se

 

[Fokke Nauta]

Hi all,

I want to have a picture horizontally centered on a web page.
This is the code I used:

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

This is in the header:

<style type="text/css">
.pic {
float: none;
height: 265px;
width: 200px;
position:relative;
margin: auto;
}
</style>

The ID "k" is specified in an external style sheet.

In all browsers but IE9 the picture is neatly in the middle of the page
with the text underneath. In IE9 it's at the left side. How can I make
this appear in IE9 in the middle as well? And what about IE 10 and
newer? Will it also show it at the left side?

Thanks for your answers.

Fokke Nauta

Thanks to all of you.
Indeed, there was no doctype declared. It was an old page, in the header
it said "<meta name="GENERATOR" content="Microsoft FrontPage 4.0">".
Image how old!

I declared the doctype "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">" and now it
works fine in IE9. And the rest, I guess.

On hardly any of the pages of this site a doctype is declared. It's an
old site which I took over. On all the pages I will declare the doctype
and change the css where needed.

Fokke

 

[Fokke Nauta]

align the picture to the middle

<img src="picture.jpg" width="200" height="255" border="1" align="middle">

The picture is placed within a <div> element. It would then be centered
within that element.

 

[Fokke Nauta]

This was a common problem in earlier versions of ie where setting left
and right margins to auto did not center an element.

I believe one suggested fix is / was to use an extra wrapper div with
style="text-align:center" around the div with the auto margin elements.

That's a good one. I'll remember that.

Others seem to relate around doctypes etc. Remember that if you declare a
doctype to a browser and your html does not match the doctype, the
browser may do it's own thing anyway.

There was no doctype declared.

 

[Fokke Nauta]

On 26/10/2013 01:52, se wrote:

As others said, you need a doctype.

No doctype was specified as it was an old page. I declared "<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">"

And the
relative is not needed. Moreover, you are using a
css markup that is not valid with most doctypes in
common use.

What do you mean by that? Can you be a bit more specific about what I
have done wrong?

It's a bad doing practicing with too old
coding (you should not). Also, when having a <div>
container, there's no reason also putting the image
in a <p>.

I know, but I have centered the text in the container and that's where

Below is an exchange for your code to look at:
You did the container .pic same width as the picture.
First; it must be 2 pixels broader to contain the
2 x 1 pixel image borders.

You are right. My mistake.

I prefer making it even broader
(if anough room on both sides), selecting a width
that allow a visitor to rezise the text without
breaking. I changed the <span> with a <div> and moved
it out of the container, so as to control the distance
of the text top to the picture. Enthough it worked
your way doing it (making a taller container). I
left out the <p>. When pictures have borders, it
generally best to set it's text-decoration to none.
When a pictures width and height are given in external
style sheet, you don't need to put them inline too.
You did margin:auto;. It should be margin: 0 auto;
Alternate use margin-left:auto; and margin-right:auto;


<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.pic {
float: none;
width: 300px;
height: 257px; /*add the 2 image borders of 1px*/
padding: 0;
margin:0 auto; /*or: margin-left:auto; margin-right:auto;*/
text-align:center;
border-style:none;
border:1px #000 solid;
}
.pic img {
border:1px #FF9933 solid;
width:200px;
height:255px;
text-decoration:none;
}
#k {
font-size:1em;
width: 300px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
text-align:center;
}
</style>
</head>
<body>
<div class="pic">
<img alt=""src="picture.jpg"/>
</div>
<div id="k">Some tekst here</div>
</body>
</html>

Thanks for your example. And, indeed, the solution with using a separate
<div> element is much better and neater than placing the text in the
same container as the picture. But I was a bit lazy

 

[Hot_Text]

The picture is placed within a <div> element. It would then be centered within that element.

No the picture is placed within a <p> element.
so it need to be centered within <p> element

For the <p> element is "within" a <div> element
<p align=center> that centered within <div> element
not the picture and you did just that.

by Default all "in side" <p align=center> align to the lift and it did.....

Do this and it will be centered the we you need it to be.
<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1" align="middle"><br>
<span id="k">Some tekst here</span>
</p>
</div>

Or this one
And for with style

<style type="text/css">
pic {
align:middle; float: none;
height: 265px; width: 200px;
position:relative; margin: auto; }
</style>

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

 

[Fokke Nauta]

align="middle" is a vertical alignment

No the picture is placed within a <p> element.
so it need to be centered within <p> element

For the <p> element is "within" a <div> element
<p align=center> that centered within <div> element
not the picture and you did just that.

by Default all "in side" <p align=center> align to the lift and it did.....

Do this and it will be centered the we you need it to be.
<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1" align="middle"><br>
<span id="k">Some tekst here</span>
</p>
</div>

Or this one
And for with style

<style type="text/css">
pic {
align:middle; float: none;
height: 265px; width: 200px;
position:relative; margin: auto; }
</style>

<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

Basically, this problem was due to a missing doctype declaration.

 

[Christoph Michael Becker]

Why this one work with out it doctype declaration?

<style type="text/css">
pic {
align:middle; float: none;
height: 265px; width: 200px;
position:relative; margin: auto; }
</style>
<div class="pic">
<p align="center">
<img src="picture.jpg" width="200" height="255" border="1"><br>
<span id="k">Some tekst here</span>
</p>
</div>

The problem was due to a missing align : middle is the style

I'm not aware that there is some CSS property called "align" at all.
You might confuse this with the deprecated HTML attribute "align".

 

[dorayme]

I'm not aware that there is some CSS property called "align" at all.
You might confuse this with the deprecated HTML attribute "align".

Agreed.

There seems little awareness in the thread about separating HTML from
styling.

Unless someone has said this before, there is not a lot wrong with
separating the HTML from the styling and using CSS to .... well...
style the html. This business of "in case CSS is off in a browser some
HTML attribute styling is advisable..." is not all that convincing.
Looks *mostly* a recipe for muddleheadedness. If you HTML well, your
page should be useful with default browser styling, where author CSS
is disabled or absent.

Maybe the old pages of the OP were before this idea of separation
became better grounded. But I get the feeling reading the thread that
it is as if this idea of separating the HTML from the styling is not
considered important.

 

[Fokke Nauta]

I'm not aware that there is some CSS property called "align" at all.
You might confuse this with the deprecated HTML attribute "align".

I fully agree with this.

Fokke

 

[dorayme]

"Christoph Michael Becker" <[email protected]>
wrote in message

Hot-Text wrote: .....
I'm not aware that there is some CSS property called "align" at all.

The problem was due
to a missing
align : middle in
the style : class [text=HTML]

Search for "align" at

<http://www.w3.org/TR/CSS21/propidx.html>

You will see text-align and vertical-align, but no align; but the
latter is used in HTML style attributes.

 

[Ben Bacarisse]

"Christoph Michael Becker" <[email protected]>
wrote in message

Hot-Text wrote: ....
The problem was due to a missing align : middle is the style
I'm not aware that there is some CSS property called "align" at all.

The problem was due
to a missing
align : middle in
the style : class [text=HTML]

Search for "align" at

<http://www.w3.org/TR/CSS21/propidx.html>

You will see text-align and vertical-align, but no align; but the
latter is used in HTML style attributes.

This confused me. I think it's clearer to say that HTML has an "align"
attribute that is used for styling. The former two (text-align and
vertical-align) can be used in what I'd call HTML style attributes!

 

[Christoph Michael Becker]

<style type="text/css" id="pic">
pic
{
margin: auto; align: middle;
height: 265px; width: 200px;
position: relative; float: none;
border: 1px; Color: RED;
}
</style>
<div class="pic">
<p align="center">
<img src="picture.jpg" style= "idic;"><br>
<span id="k">Some tekst here</span>
</p>
</div>
Why this one work
with out it
doctype declaration?

It works even in quirks mode, because inside the P element with the
align=center attribute there are only "inline" elements, and there is
actually no CSS in use in your code sample. The given STYLE element
doesn't have a rule for class=pic (that had to be written .pic), and the
style attribute of the IMG element is invalid. The document fragment
you have posted is equivalent to:

<div>
<p align="center">
<img src="picture.jpg"><br>
<span>Some tekst here</span>
</p>
</div>