Safari problem with images and floats

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

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

Dec 1 '08 #1

Subscribe Post Reply

2509

serdar

Expand|Select|Wrap|Line Numbers

 <img style="display:block;" src="pic.jpg" />

<p style="float:left">text</p>

Expand|Select|Wrap|Line Numbers

 <img src="pic.jpg" />

<p style="clear:left">text</p>

or simply

Expand|Select|Wrap|Line Numbers

 <img src="pic.jpg" />

<p>text</p>

Dec 1 '08 #2

saag paneer

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

serdar

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

 <html>

<p></p>

<img src="pic.jpg" />

<p style="float:left">text</p>

</html>

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

 <html>

<a href="#" style="background:#000; color:#fff;">London, Paris, Rome.</a>

<p style="background:#000; color:#fff; float:left">text</p>

</html>

Dec 1 '08 #4

saag paneer

That's really weird when you add the empty block-level element above. Thanks again for the help.

Dec 1 '08 #5

serdar

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

by: Joe Cox | last post by:

I am having a problem with style properties for dynamic images in Mac OS X Safari. By dymanic images, I mean images allocated with the javascript 'new Image()' call. With static images (created...

Javascript

Horizontal navbar formatting incorrectly in IE7 and Safari

by: dartanian | last post by:

I have a fluid horizontal navbar on my website which is formatted using floats and percentage widths to make it fluid. This looks great in WinXP Firefox, Opera, and even IE6. Safari and IE7 render...

HTML / CSS

Safari and float problem

by: John | last post by:

Hi Suppose I want a header containing an image floated left and a list of horizontal links floated right. So I float the image left. I then do the following with the list: ul = float:...

HTML / CSS

Re: Problem in the FF Opera Safari world

by: BMc | last post by:

I just want to take a moment to say thank you to so many of you who posted a response to my request for help about the problem with THE GAP (see below?)! Your suggestions were not only a...

HTML / CSS

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Safari problem with images and floats

Similar topics