IE doesn't show picture in the middle

Discussion in 'HTML' started by Fokke Nauta, Oct 25, 2013.

  1. Fokke Nauta

    Fokke Nauta Guest

    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
    Fokke Nauta, Oct 25, 2013
    #1
    1. Advertising

  2. Fokke Nauta <> writes:

    > 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>

    <snip>
    > 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>
    --
    Ben.
    Ben Bacarisse, Oct 25, 2013
    #2
    1. Advertising

  3. Fokke Nauta

    BootNic Guest

    In article <>,
    Fokke Nauta <> wrote:

    > 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-----
    BootNic, Oct 25, 2013
    #3
  4. Ben Bacarisse <> writes:

    > Fokke Nauta <> writes:
    >
    >> 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>

    > <snip>
    >> 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.


    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.

    --
    Ben.
    Ben Bacarisse, Oct 25, 2013
    #4
  5. Fokke Nauta

    Hot_Text Guest

    "Fokke Nauta" <> wrote in message news:...
    > 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">
    Hot_Text, Oct 25, 2013
    #5
  6. On Fri, 25 Oct 2013 11:04:38 +0200, Fokke Nauta wrote:

    > 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.

    --
    Denis McMahon,
    Denis McMahon, Oct 26, 2013
    #6
  7. Fokke Nauta

    se Guest

    "Fokke Nauta" <> skrev i meddelelsen
    news:...
    > 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, Oct 26, 2013
    #7
  8. Fokke Nauta

    se Guest

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

    "se" <> skrev i meddelelsen news:l4f07o$g5i$...
    >
    > "Fokke Nauta" <> skrev i meddelelsen
    > news:...
    >> 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, Oct 26, 2013
    #8
  9. Fokke Nauta

    Fokke Nauta Guest

    On 25/10/2013 11:04, Fokke Nauta wrote:
    > 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, Oct 26, 2013
    #9
  10. Fokke Nauta

    Fokke Nauta Guest

    On 25/10/2013 17:48, Hot_Text wrote:
    > "Fokke Nauta" <> wrote in message news:...
    >> 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">
    >
    >


    The picture is placed within a <div> element. It would then be centered
    within that element.
    Fokke Nauta, Oct 26, 2013
    #10
  11. Fokke Nauta

    Fokke Nauta Guest

    On 26/10/2013 01:07, Denis McMahon wrote:
    > On Fri, 25 Oct 2013 11:04:38 +0200, Fokke Nauta wrote:
    >
    >> 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.


    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, Oct 26, 2013
    #11
  12. Fokke Nauta

    Fokke Nauta Guest

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

    <cut>

    > 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
    the <p align="center"> came in.

    > 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 :)
    Fokke Nauta, Oct 26, 2013
    #12
  13. Fokke Nauta

    Hot_Text Guest

    "Fokke Nauta" <> wrote in message news:...
    > On 25/10/2013 17:48, Hot_Text wrote:
    >> "Fokke Nauta" <> wrote in message news:...
    >>> 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">
    >>
    >>

    >
    > 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>
    Hot_Text, Oct 27, 2013
    #13
  14. Fokke Nauta

    Fokke Nauta Guest

    On 27/10/2013 07:21, Hot_Text wrote:
    > "Fokke Nauta" <> wrote in message news:...
    >> On 25/10/2013 17:48, Hot_Text wrote:
    >>> "Fokke Nauta" <> wrote in message news:...
    >>>> 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">


    align="middle" is a vertical alignment


    >> 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>
    >


    Basically, this problem was due to a missing doctype declaration.
    Fokke Nauta, Oct 28, 2013
    #14
  15. Hot-Text wrote:

    > 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".

    --
    Christoph M. Becker
    Christoph Michael Becker, Oct 28, 2013
    #15
  16. Fokke Nauta

    dorayme Guest

    In article <526eb84c$0$9519$-online.net>,
    Christoph Michael Becker <> wrote:

    > Hot-Text wrote:
    >
    > > Why this one work with out it doctype declaration?

    ....
    > >
    > > 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".


    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.

    --
    dorayme
    dorayme, Oct 28, 2013
    #16
  17. Fokke Nauta

    Fokke Nauta Guest

    On 28/10/2013 20:18, Christoph Michael Becker wrote:
    > Hot-Text wrote:
    >
    >> 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".
    >


    I fully agree with this.

    Fokke
    Fokke Nauta, Oct 29, 2013
    #17
  18. Fokke Nauta

    dorayme Guest

    In article <>,
    "Hot-Text" <> wrote:

    > "Christoph Michael Becker" <>
    > wrote in message
    > news:526eb84c$0$9519$-online.net.
    > > 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.

    --
    dorayme
    dorayme, Oct 29, 2013
    #18
  19. dorayme <> writes:

    > In article <>,
    > "Hot-Text" <> wrote:
    >
    >> "Christoph Michael Becker" <>
    >> wrote in message
    >> news:526eb84c$0$9519$-online.net.
    >> > 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!

    --
    Ben.
    Ben Bacarisse, Oct 29, 2013
    #19
  20. Hot-Text wrote:

    > <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= "id:pic;"><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>

    --
    Christoph M. Becker
    Christoph Michael Becker, Oct 29, 2013
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. zhulijun
    Replies:
    1
    Views:
    367
    Ravikanth[MVP]
    Aug 19, 2003
  2. Sam
    Replies:
    3
    Views:
    22,258
    cheepeng1984
    Aug 29, 2007
  3. Boki
    Replies:
    1
    Views:
    478
    Roedy Green
    Oct 17, 2005
  4. Daniel Forster

    IE on a mac doesn't show picture

    Daniel Forster, Feb 7, 2005, in forum: HTML
    Replies:
    1
    Views:
    462
    Jim Royal
    Feb 7, 2005
  5. Replies:
    8
    Views:
    1,243
    Mick White
    Apr 19, 2005
Loading...

Share This Page