I’m working on someone’s site, as a favour. This guy has been trying to build his own website, for his business. He is a total beginner, and I offered to help him after he expressed that it was stressful for him having to learn HTML and CSS.
So, he sent me his HTML document that he was working on. when I looked at it, it was a total mess. He told me that he was using Dreamweaver, and so I guessed he wasn’t coding the page by hand. Dreamweaver was doing it for him. I have advised him to start coding by hand instead of relying on Dreamweaver, and I’ve explained why. But I don’t think he has the time to do it.
So, I have rebuilt the structure of his page (redone the HTML), and I’ve redone the CSS, because there were so many errors in his markup and CSS. It’s almost finished (just need to finish styling the images, run it through the validator and do some final checks), except for this problem that I caught a hour ago. I’ve not seen this issue before, and I’ve spent a good hour trying to figure it out. It’s now nearly 7am and I am stumped.
Basically, there are some images in the page, and they display fine in Firefox and Safari. But in Opera, Chrome and IE8, one of them has stretched horizontally, and I don’t get it. This particular image, it’s floated left, and I have a 10px padding on the right and bottom edge of the image in place. It refuses to go back to normal after I’ve removed all styling from this particular image.
In Opera, it has a width of 562px according to Dragonfly. In Chrome, it’s got a width of 560px according to Firebug Lite. In IE8, its width has stretched indefinitely. It’s gone off the screen into infinity.
It’s probably an error I’ve made or down to a bug of some sort, but I can’t figure it out. I’m tired as I’ve been up since 2.30pm yesterday.
Here’s the code related to the image in question:
<img class="float-img-left" "width="171" height="171" src="images/TZR-MA.gif" alt="Please insert a description of this image, for accessibility purposes.">
<p>En sak är säker - Inom en snar framtid kommer alltfler produkter att kopplas upp mot Internet. Och när det sker kommer TempWatch vara där. Teknikföretaget Ericsson har visionen att år 2020 kommer antalet uppkopplade produkter på Internet att vara 50 miljarder <a href="http://www.businessweek.com/globalbiz/content/jun2009/gb20090629_492027.htm">http://www.businessweek.com/globalbiz/content/jun2009/gb20090629_492027.htm</a> medan Cisco, en annan teknikleverantör, tror att nätet vuxit 1000 gånger.</p>
<p>Anledningen till visonen är enkel - genom nya tekniker har lösningar på gamla problem blivit möjliga. Och idag och imorgon sker på revolutionen nätet. Ett exempel är de trådlösa tekniker som idag möjliggör en snabb uppkoppling av detektorer och givare mot ett webbaserat gränssnitt. Idag kan vi både övervaka temperatur och vind, eller varför inte, hjärtverksamheten hos en patient trådlöst. Imorgon kanske vi låter både spisen, kylen och värmen i huset styras trådlöst medan vi för säkerhets skull har försett bilen med en trådlös GPS som anger position utifall att den skulle bli stulen.</p>
img.float-img-left {
float:left;
padding:0 10px 10px 0;
}
The image had the correct dimensions before I applied the styling. So I don’t know what happened. 
Please help. I can’t post an URL as I’m working on this on my local server which isn’t accessible to anyone else. 
Thanks.