I've built a website, which I'm getting quite frustrated by.
I built it using CSS, in Dreamweaver.(and an occasional php/javascript template, for forms, etc).
The problem?
The text/images were all ligned up perfectly (in firefox/safari and even IE!) - until I changed one of the images - which is went all a bit skewiff. It still looks fine in Firefox, but in Safari/IE, images stick to the right and flow over to the next line.
I've used the exact same lines of coding,I've inspected each line, and it's exactly the same. The images are also exactly the same format and size (used one template for all images).
My html looks like this:
<!--artwork1-->
<div id="thumbnails">
<img src="images/thumbnails/eye.png" height="184" />
<img src="images/thumbnails/eye1.png" height="184" style="padding-left:20px;" />
</div>
<div id="artinfo"> <img src="images/artwork_titles/info_eye.png" style="padding-top:20px" /> </div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!--artwork2-->
<div id="thumbnails">
<img src="images/thumbnails/englishness.png" height="184"/>
<img src="images/thumbnails/englishness2.gif" height="184" style="padding-left:20px;"/>
</div>
<div id="artinfo"> <img src="images/artwork_titles/info_essence.png" /> </div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!--artwork3-->
<div id="thumbnails"><img src="images/thumbnails/dandad.png" height="184" /> <img src="images/thumbnails/dandad1.png" height="184" style="padding-left:20px;" /></div>
<div id="artinfo"><img src="images/artwork_titles/info_dandad.png" width="336" /></div>
Anyone know why it should act any differently? I thought it must be the images - as that's the only thing that's changed, but like I said, I've checked format, size, etc.
Help please would be muuuuch appreciated :)