image alignment and Safari

Discussion in 'HTML' started by Ron, May 1, 2007.

  1. Ron

    Ron Guest

    Hi all,

    I'm in need of an opinion. The code following is meant to have an
    image on the left and to the right of it a header and then a new
    paragraph and some info that should run down the right of the image.
    It does this fine in IE, then wraps underneath, but in Safari after
    the H3 the new paragraph starts under the image. Not a huge deal but
    wondering of others have experienced this. Thoughts on a better
    layout? Could easily use a table.

    for ($i=0; $i <$num_results; $i++)
    {
    $row = mysql_fetch_array($result);
    echo "<h3>";
    echo "<img align=left src=";
    echo $row["icon_url"];
    echo ">";
    echo $row["name"];
    echo "</h3>";
    echo "<p>";
    echo $row["address"];
    echo "<br>";
    echo $row["city"];
    echo ", ";
    And so on.......

    Thanks for any help.
     
    Ron, May 1, 2007
    #1
    1. Advertising

  2. Scripsit Ron:

    > I'm in need of an opinion.


    Here's one: you didn't read this group even for a few days before posting.
    Otherwise you would have noticed that you are expected to post a URL, not a
    snippet of code, and posting PHP (which won't be seen by any browser) was
    particularly foolish.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 1, 2007
    #2
    1. Advertising

  3. Ron

    Ben C Guest

    On 2007-05-01, Ron <> wrote:
    > Hi all,
    >
    > I'm in need of an opinion. The code following is meant to have an
    > image on the left and to the right of it a header and then a new
    > paragraph and some info that should run down the right of the image.
    > It does this fine in IE, then wraps underneath, but in Safari after
    > the H3 the new paragraph starts under the image. Not a huge deal but
    > wondering of others have experienced this.


    In standards-conforming browers <img align=left> is equivalent to <img
    style="float: left">.

    This means that text in the <p> following should go to the right of the
    <img>, but only if there is enough room for it to go there without
    overflowing.

    But in quirks mode, align=left may be treated differently.

    It's also possible that the difference is just due to differences in
    font size, so that in IE the text happens to fit and in Safari it
    doesn't.

    Use the strict doctype:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

    and use 'style="float: left"' rather than "align=left". This won't solve
    your problem but hopefully it will make results more consistent.

    Then if you want the <p> to the right of the <img>, the best thing is
    probably just to make sure there's likely to be enough room for the
    text, but it's hard to say without seeing more of your markup.

    > Thoughts on a better
    > layout? Could easily use a table.
    >
    > for ($i=0; $i <$num_results; $i++)
    > {
    > $row = mysql_fetch_array($result);
    > echo "<h3>";
    > echo "<img align=left src=";
    > echo $row["icon_url"];
    > echo ">";
    > echo $row["name"];
    > echo "</h3>";
    > echo "<p>";
    > echo $row["address"];
    > echo "<br>";
    > echo $row["city"];
    > echo ", ";
    > And so on.......
    >
    > Thanks for any help.
     
    Ben C, May 1, 2007
    #3
  4. Ron

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-05-01, Ron <> wrote:
    > > Hi all,
    > >
    > > I'm in need of an opinion. The code following is meant to have an
    > > image on the left and to the right of it a header and then a new
    > > paragraph and some info that should run down the right of the image.
    > > It does this fine in IE, then wraps underneath, but in Safari after
    > > the H3 the new paragraph starts under the image. Not a huge deal but
    > > wondering of others have experienced this.

    >
    > In standards-conforming browers <img align=left> is equivalent to <img
    > style="float: left">.
    >
    > This means that text in the <p> following should go to the right of the
    > <img>, but only if there is enough room for it to go there without
    > overflowing.
    >
    > But in quirks mode, align=left may be treated differently.


    But is not in fact really different in latest Safari. I think I
    have no "really really badly" conforming browsers left on this
    Mac. Even Mac IE treats the two possibilities you mention pretty
    much the same. This Mac IE which I fire up now and then is like a
    good old boxer, still able to mix it with the best on special
    occasions. Or like a chicken that is a bit hard to knock out
    completely. <g>

    --
    dorayme
     
    dorayme, May 1, 2007
    #4
  5. Ron

    Ben C Guest

    On 2007-05-01, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2007-05-01, Ron <> wrote:
    >> > Hi all,
    >> >
    >> > I'm in need of an opinion. The code following is meant to have an
    >> > image on the left and to the right of it a header and then a new
    >> > paragraph and some info that should run down the right of the image.
    >> > It does this fine in IE, then wraps underneath, but in Safari after
    >> > the H3 the new paragraph starts under the image. Not a huge deal but
    >> > wondering of others have experienced this.

    >>
    >> In standards-conforming browers <img align=left> is equivalent to <img
    >> style="float: left">.
    >>
    >> This means that text in the <p> following should go to the right of the
    >> <img>, but only if there is enough room for it to go there without
    >> overflowing.
    >>
    >> But in quirks mode, align=left may be treated differently.

    >
    > But is not in fact really different in latest Safari.


    If you try two <table align="left">s next to each other in a container
    that isn't wide enough for both of them, in quirks mode, Firefox will
    leave them side by side overflowing the container. If you float them,
    the second one drops down, as it should.

    But I don't think FF does that with <img align="left"> only with
    <table align="left">, and then only in quirks mode.

    Konqueror, which is similar to Safari, doesn't bother to implement this
    quirk, and <table align="left"> is always the same as <table
    style="float: left">, whatever the doctype.

    But if Mac IE doesn't do this quirk with <img> either, then it's
    probably a red herring and has nothing to do with the OP's problem. It
    may be that it only ever affects <table>, not <img>, even in IE.
     
    Ben C, May 1, 2007
    #5
  6. Ron

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-05-01, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >


    > >> In standards-conforming browers <img align=left> is equivalent to <img
    > >> style="float: left">.
    > >>
    > >> This means that text in the <p> following should go to the right of the
    > >> <img>, but only if there is enough room for it to go there without
    > >> overflowing.
    > >>
    > >> But in quirks mode, align=left may be treated differently.

    > >
    > > But is not in fact really different in latest Safari.

    >
    > If you try two <table align="left">s next to each other in a container
    > that isn't wide enough for both of them, in quirks mode, Firefox will
    > leave them side by side overflowing the container. If you float them,
    > the second one drops down, as it should.
    >


    Yes, the situation is quite different with tables attempted to be
    side by side, at least on my tests.

    --
    dorayme
     
    dorayme, May 1, 2007
    #6
  7. Ron

    Ron Guest

    On Wed, 02 May 2007 08:45:11 +1000, dorayme
    <> wrote:

    >In article <>,
    > Ben C <> wrote:
    >
    >> On 2007-05-01, dorayme <> wrote:
    >> > In article <>,
    >> > Ben C <> wrote:
    >> >

    >
    >> >> In standards-conforming browers <img align=left> is equivalent to <img
    >> >> style="float: left">.
    >> >>
    >> >> This means that text in the <p> following should go to the right of the
    >> >> <img>, but only if there is enough room for it to go there without
    >> >> overflowing.
    >> >>
    >> >> But in quirks mode, align=left may be treated differently.
    >> >
    >> > But is not in fact really different in latest Safari.

    >>
    >> If you try two <table align="left">s next to each other in a container
    >> that isn't wide enough for both of them, in quirks mode, Firefox will
    >> leave them side by side overflowing the container. If you float them,
    >> the second one drops down, as it should.
    >>

    >
    >Yes, the situation is quite different with tables attempted to be
    >side by side, at least on my tests.

    Just for reference my IE is on my XP laptop versus Safari on my iMac.
    For now I used a table but the layout is doing weird things in not
    following the percntage I set for the td's. I think a css solution
    will work best....

    Thanks all that responded!
     
    Ron, May 2, 2007
    #7
  8. Ron

    dorayme Guest

    In article <>,
    Ron <> wrote:

    > >Yes, the situation is quite different with tables attempted to be
    > >side by side, at least on my tests.


    > Just for reference my IE is on my XP laptop versus Safari on my iMac.


    The talk about Mac IE in the thread is just a bit of a curiosity
    that some of us now and then still indulge in.

    --
    dorayme
     
    dorayme, May 2, 2007
    #8
  9. Ron

    Ron Guest

    On Thu, 03 May 2007 05:38:44 +1000, dorayme
    <> wrote:

    >In article <>,
    > Ron <> wrote:
    >
    >> >Yes, the situation is quite different with tables attempted to be
    >> >side by side, at least on my tests.

    >
    >> Just for reference my IE is on my XP laptop versus Safari on my iMac.

    >
    >The talk about Mac IE in the thread is just a bit of a curiosity
    >that some of us now and then still indulge in.

    Gotcha.
    Since buying my Mac I have been on a mission to not use ANY microsoft
    products in it. Some type of experiment I guess. Has taken me a while
    to find replacements for much of my normal progs but been a good way
    to learn some new tricks. So I have Open Ofice, GIMP, Filezilla and a
    few others. Getting OT now... Could use a nice editor for Mac...

    Have a great day
     
    Ron, May 3, 2007
    #9
  10. Ron

    dorayme Guest

    In article <>,
    Ron <> wrote:

    > On Thu, 03 May 2007 05:38:44 +1000, dorayme
    > <> wrote:
    >
    > >In article <>,
    > > Ron <> wrote:
    > >
    > >> >Yes, the situation is quite different with tables attempted to be
    > >> >side by side, at least on my tests.

    > >
    > >> Just for reference my IE is on my XP laptop versus Safari on my iMac.

    > >
    > >The talk about Mac IE in the thread is just a bit of a curiosity
    > >that some of us now and then still indulge in.

    > Gotcha.
    > Since buying my Mac I have been on a mission to not use ANY microsoft
    > products in it. Some type of experiment I guess. Has taken me a while
    > to find replacements for much of my normal progs but been a good way
    > to learn some new tricks. So I have Open Ofice, GIMP, Filezilla and a
    > few others. Getting OT now... Could use a nice editor for Mac...
    >


    When you get OT you come into my territory more and more.

    Instead of Open Office, get the free NeoOffice, it runs more
    natively and mac-like, does not require the enabling X11 program
    to run.

    As for Text editors, you really are in luck. Look at the free
    TextWrangler from Barebones or the pro version, shareware BBedit.

    Did I tell you or do you know that you can run Windows and all
    the browsers for it on an Intel mac?

    --
    dorayme
     
    dorayme, May 3, 2007
    #10
  11. Ron

    Ron Guest

    <sniP>
    >> >> Just for reference my IE is on my XP laptop versus Safari on my iMac.
    >> >
    >> >The talk about Mac IE in the thread is just a bit of a curiosity
    >> >that some of us now and then still indulge in.

    >> Gotcha.
    >> Since buying my Mac I have been on a mission to not use ANY microsoft
    >> products in it. Some type of experiment I guess. Has taken me a while
    >> to find replacements for much of my normal progs but been a good way
    >> to learn some new tricks. So I have Open Ofice, GIMP, Filezilla and a
    >> few others. Getting OT now... Could use a nice editor for Mac...
    >>

    >
    >When you get OT you come into my territory more and more.
    >
    >Instead of Open Office, get the free NeoOffice, it runs more
    >natively and mac-like, does not require the enabling X11 program
    >to run.
    >
    >As for Text editors, you really are in luck. Look at the free
    >TextWrangler from Barebones or the pro version, shareware BBedit.
    >
    >Did I tell you or do you know that you can run Windows and all
    >the browsers for it on an Intel mac?

    Will take a look at NeoOffice for sure. Although OO works pretty well.
    Does act a bit weird using x11.

    Will have to try those editors, my old Dreamweaver MX on my aging
    laptop is getting a bit sad. Nice editor though.

    Definitely aware of parallels to run both OS's but hard to swallow the
    cost of the 2nd OS. Easier to replace my old software.

    Thanks for your input!
     
    Ron, May 6, 2007
    #11
    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. Nathan Sokalski
    Replies:
    2
    Views:
    457
    Eliyahu Goldin
    Jun 8, 2005
  2. Don@NoSpam

    Help with image/text alignment

    Don@NoSpam, May 30, 2004, in forum: HTML
    Replies:
    10
    Views:
    714
    Don@NoSpam
    Jun 2, 2004
  3. Adrian Bailey

    Image alignment

    Adrian Bailey, Apr 1, 2005, in forum: HTML
    Replies:
    2
    Views:
    505
    Nico Schuyt
    Apr 1, 2005
  4. Rich
    Replies:
    8
    Views:
    1,652
  5. Roger
    Replies:
    1
    Views:
    107
Loading...

Share This Page