Cross Browser Image Positioning Issue

[ridgedale]

Hi,

I wonder if someone might be able to point out where I’ve gone wrong.

On the home page of the following website:

http://www.nickponting.com

there is an issue with the positioning of a couple of the images if the home page (- all other pages display correctly) is viewed in the following web browsers:

Firefox 4.0b6 MacOSX 10.6.4 (- haven’t tested the Windows version but will assume it’s the same.)
Google Chrome 7.0.517.41 Windows XP & 7 and MacOSX 10.6.4
Safari 5.0.2 Windows XP & 7 and MacOSX 10.6.4

The following web browsers all display the page correctly:

Camino 2.0.5 MacOSX 10.6.4
Firefox 3.6.12 Windows XP & 7 and MacOSX 10.6.4
Internet Explorer 8 Windows XP & 7
Opera 10.6 Windows XP & 7

The relevant code is as follows:

(Note: I’ve replaced the angled brackets with square brackets so the code displays. Sorry if I’m not supposed to do this.)

[div id=”main”]
…
[p class=”p2″][span class=”lfloat-std”][img src=”images/bldg_IMG_1154.jpg” border=”0″ height=92 alt=”Building work in progress.” /][/span]
…
[p class=”p2″ align=”center”][img src=”images/bldg_IMG_0775.jpg” border=0 height=200 alt=”The build of a conservatory in progress.” /][/p]
…
[/div]

The relevant css code is as follows:

#main {
font-size: 85%;
color: #333;
height: 100%;
padding-left: 40px;
padding-top: 20px;
padding-right: 40px;
}

.lfloat-std img {
margin: 0.2em 1.0em 0 0;
float: left;
}

Nothing I have tried has worked. Any advice or pointers would be appreciated.

Thanks in advance.

[Eclipse]

In your html it says align: center for the paragraph which contains the conservatory image

In your html, the border and height values aren’t within hooks, ie. “200” instead of 200. I don’t know what these characters are called in English, sorry for that.

Furthermore you could add:
img {border: none;} in your CSS, that way you keep your html tidy and faster, plus it’s good practice to seperate structure from layout and functionality.

To further speeden up the thing I would make sure the images called for in your code match these width and height values so you can omit them in your html entirely.

If this isn’t helpful and/or solves your problem, then I wouldn’t know also.

[ridgedale]

Hi Eclipse,

Thank you for your feedback. I will have a look at applying your suggestions overnight and come back to you. In the meantime you mention:

“… in your CSS, that way you keep your html tidy and faster, plus it’s good practice to seperate structure from layout and functionality.”

Do you know of any documentation online where I can ready up on separating layout and functionality?

Many thanks again.

[Author]

Posts