By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,461 Members | 1,108 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,461 IT Pros & Developers. It's quick & easy.

Safari problem with images and floats

P: 3
I'm having a very odd problem with Safari. The page is here:
http://gabrielroth.com/safari_problem.html

The source is:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <img src="pic.jpg" />
  3. <p style="float:left">text</p>
  4. </html>
In Firefox, Opera, IE6, and IE7, this displays the image with the word 'text' underneath it, against the left edge of the window.

In Safari, though, the word 'text' is at the top left of the browser window, pushing the image away from the left edge. This only happens with images in portrait orientation, i.e. when the image is taller than it is wide. The behavior's the same when I use a properly formatted HTML document with <head> and <body> tags, an external stylesheet, etc.

Does anyone know anything about this? Can you reproduce it?
Dec 1 '08 #1
Share this Question
Share on Google+
5 Replies


P: 88
Expand|Select|Wrap|Line Numbers
  1. <img style="display:block;" src="pic.jpg" />
  2. <p style="float:left">text</p>
or

Expand|Select|Wrap|Line Numbers
  1. <img src="pic.jpg" />
  2. <p style="clear:left">text</p>
or simply

Expand|Select|Wrap|Line Numbers
  1. <img src="pic.jpg" />
  2. <p>text</p>
Dec 1 '08 #2

P: 3
Thanks for the help. I should have specified: I realize that the layout can be fixed by removing the float:left property. But this is a hypersimplified version of a much more complicated page. I'll experiment with using display:block, but I'd be grateful for some insight into why this is happening. Does Safari just handle images differently from other browsers? And if so, what's the difference.
Dec 1 '08 #3

P: 88
Does Safari just handle images differently from other browsers
I think the rendering engine behind it (WebKit) does. Google Chrome uses the same engine, and it renders your page just the same as Safari naturally.

I don't know if we can call it a bug or not. Check what happens when we just add a block level element to the top:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <p></p>
  3. <img src="pic.jpg" />
  4. <p style="float:left">text</p>
  5. </html>
or
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <div></div>
  3. <img src="pic.jpg" />
  4. <p style="float:left">text</p>
  5. </html>

Also notice that same problem occurs when using other inline level elements:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <a href="#" style="background:#000; color:#fff;">London, Paris, Rome.</a>
  3. <p style="background:#000; color:#fff; float:left">text</p>
  4. </html>
Dec 1 '08 #4

P: 3
That's really weird when you add the empty block-level element above. Thanks again for the help.
Dec 1 '08 #5

P: 88
You're welcome. For being safe in such situations, I would use an inline element always in a block level element. That's how it should be by definition.
Dec 1 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.