Safari problem with images and floats

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • saag paneer
    New Member
    • Dec 2008
    • 3
    #1

    Safari problem with images and floats

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


    The source is:

    Code:
    <html>
<img src="pic.jpg" />
<p style="float:left">text</p>
</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?
    Last edited by eWish; Dec 1 '08, 05:12 AM. Reason: Added code tags
    Tags: None
    • serdar
      New Member
      • Nov 2008
      • 88
      #2
      Code:
      <img style="display:block;" src="pic.jpg" />
<p style="float:left">text</p>
      or

      Code:
      <img src="pic.jpg" />
<p style="clear:left">text</p>
      or simply

      Code:
      <img src="pic.jpg" />
<p>text</p>

        Comment

        • saag paneer
          New Member
          • Dec 2008
          • 3
          #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.

            Comment

            • serdar
              New Member
              • Nov 2008
              • 88
              #4
              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:
              Code:
              <html>
<p></p>
<img src="pic.jpg" />
<p style="float:left">text</p>
</html>
              or
              Code:
              <html>
<div></div>
<img src="pic.jpg" />
<p style="float:left">text</p>
</html>

              Also notice that same problem occurs when using other inline level elements:
              Code:
              <html>
<a href="#" style="background:#000; color:#fff;">London, Paris, Rome.</a>
<p style="background:#000; color:#fff; float:left">text</p>
</html>

                Comment

                • saag paneer
                  New Member
                  • Dec 2008
                  • 3
                  #5
                  That's really weird when you add the empty block-level element above. Thanks again for the help.

                    Comment

                    • serdar
                      New Member
                      • Nov 2008
                      • 88
                      #6
                      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.

                        Comment

                        Previous template Next
                        Working...