image alignment and Safari

R

Ron

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

Jukka K. Korpela

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

Ben C

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

dorayme

Ben C said:
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>
 
B

Ben C

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

dorayme

Ben C said:
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.
 
R

Ron

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

dorayme

Yes, the situation is quite different with tables attempted to be
side by side, at least on my tests.
[/QUOTE]
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.
 
R

Ron

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.[/QUOTE]
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
 
D

dorayme

Ron said:
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?
 
R

Ron

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!
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top