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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>  
<p>&nbsp;</p>
<p>&nbsp;</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 :)

Recommended Answers

All 18 Replies

All of your <div id="thumbnails"> and <div id="artinfo"> lines of code refer to a piece of code in your css. You need to post the css that was used for the page as well for us to be able to give you appropriate help. Without it I do not know what code is refering to the pictures' locations.

And I also just noticed this right here on line 6:

style="padding-top:20px"

Your missing a semi-colon at the end of the line, though my css is a little rusty I believe this may be the source of your problem. (Also just a side note, Dreamweaver has a bad tendency to input more code than necessary for the page to function for example the "padding-top: 20px" is not required for images.)

Ah yes that could help!
I added it to semi-colon - thanks for pointing that out, unfortunately it didn't solve it, though it probably could be something that small!!
Re the padding - I added that myself, needed it to lign something up.

Here is the css:

body
{background-color:#000000; font-family:  Arial, Helvetica, sans-serif; font-size: 100%; color:#FFFFFF; }

#wrapper {position:relative; margin: 0px auto; height: 950px; width: 1000px; }

#construction
{float: left; margin: 40px 0px 0px 300px; padding-left:50px; width: 200px;color: #80367B;}

#navigation
{float:left;margin: 40px 0px 0px 0px;width: 200px; font-size:24px; font-weight:100;height: 800px; border:none; }

#columnc
{float: left;  width: 1000px;}

#columnc2
{float: left; margin: 80px 0px 0px 0px; width: 1000px;}


#column1
{float: left; margin: 50px 0px 0px 0px;width: auto;padding: 0px 0px 0px 50px;font-family: Helvetica, sans-serif;padding: 0px 0px 0px 100px;font-family:"Gill Sans MT"; color: #80367A;font-weight:normal;}

#columncv
{float: left; margin: 50px 0px 0px 50px;width: auto;}

#columncontact
{float: left; margin: 35px 0px 0px 80px;width: auto;}


#thumbnails
{float: left; position: relative; margin: 50px 0px 0px 0px;width:auto;padding: 0px 20px 0px 80px;}
#artinfo
{float: left;  margin-top:50px;padding-top: 90px;  width: auto;}

#column3
{ margin: 40px 0px 0px 0px;width: 120px;padding-left:50px;font-family: Helvetica, sans-serif;font-family:"Gill Sans MT"; color: #80367A;font-weight:normal;}


a:visited { border: 0px;
	 }
a:active { border: 0px;
	 }
a:link { border: 0px ; }

a:hover { border: 0px;
	 }

DO you have a link to your site?

www.chromastudios.co.uk

The pages I'm having problems with are the 'editorial' and 'branding' page, though it's the same layout as the others. Try it out in safari if you can, as well as Firefox(where it shows up properly), and you'll see the difference.

Thanks :)

I added it to semi-colon - thanks for pointing that out, unfortunately it didn't solve it, though it probably could be something that small!!

When I try to validate your site, you have just a few errors. Most of which I think have nothing to do with your issue.

One error though says you neglected to close an img tag, however when I view your source, I see it there. You might want to check you source code as sometimes some browsers may finish unclosed tags for you.

It wouldnt hurt to fix all the errors you can anyway. Most of them are where you didn't set the alt property for your images. You dont have to define a value for the alts, just insert alt="".

I'm still reading over the code trying to figure this out but I will point out in my 5 years of building websites I have never once had any errors thrown from a lack of alt="".

I'm still reading over the code trying to figure this out but I will point out in my 5 years of building websites I have never once had any errors thrown from a lack of alt="".

I think its specific to xhtml document type. Read about it here.

Again, those have nothing to do with this issue. I simply suggested that he should try and fix al his validation errors, since thats what we all should strive to do anyway.

I agree with you completely teedoff, though I will admit this is a rather interesting puzzle. I've read over the code you have several times everything seems to be in place. I'm going to look at the surrounding code in your webpage and see if there is anything you missed.

Not sure if this makes a difference but you have 2 font-family tags in your css in this snippet.

column1{float: left; margin: 50px 0px 0px 0px;width: auto;padding: 0px 0px 0px 50px;font-family: Helvetica, sans-serif;padding: 0px 0px 0px 100px;font-family:"Gill Sans MT"; color: #80367A;font-weight:normal;}

Hi Teedoff and Zoidmaster,

I'm currently making small amendments to the site, after using the validator on w3c's website (couldn't work out the dreamweaver one if I'm honest), so am adding the alt tags for good practice (thanks for pointing it out teedoff).

As the client wants to be able to send the links to her website out, I'm making one more adjustment: as I originally said, it all goes a bit 'off' in safari...however if I add a spare line <p>&nbsp;</p>, it works fine! For simplicity I could just keep this, but I just don't want these massive gaps between each of her projects (this makes sense if you look at the website - link above). So this one adjustment may make it look like it's all fixed, but still not :(

One last thing - I'm a novice still and have self-taught myself most dreamweaver, so this question might seeem silly:
The validator says "ID "artinfo" already defined" - can I not use the same div more than once on the same page???

Not sure if this makes a difference but you have 2 font-family tags in your css in this snippet.

column1{float: left; margin: 50px 0px 0px 0px;width: auto;padding: 0px 0px 0px 50px;font-family: Helvetica, sans-serif;padding: 0px 0px 0px 100px;font-family:"Gill Sans MT"; color: #80367A;font-weight:normal;}

Oops, thnx for noticing, I have a tendency to repeat myself needlessly sometimes! Shall correct that now.

no id's are to be used once. You can reuse classes though

no id's are to be used once. You can reuse classes though

Sounds like I ought to know that already...Think I'll have to read up classes! Cheers for info

Have you been to w3schools? Very good tutorials with example code you can play with.

Have you been to w3schools? Very good tutorials with example code you can play with.

Yep I was on there when I was looking how to use lightbox javascript - which I'll want to eventually be using on the images on the website in question chromastudios.co.uk website, but not even getting into that until this image business is sorted!
Especially since I'll be starting from scratch...

This issue is making me scratch my head enough for now! Hopefully a solution (or coding error) will be found! (need I say needle+haystack!) ;)

This problem occurs many times with many peoples. In this case I suggest you set the width of the images and check the setting of your templates.

Sometimes templates also creates these type of issues. You can try to use another template in this case.

I still stand by the notion of hand coding everything :D

Even then, be careful when using CSS. That language is a little picky on some of the smallest details so being OCD is a must sometimes. If you ever have any problems in the future feel free to PM me and I'll see what I can do. One reccomendation I can make is if your going to use Dreamweaver (which is an enormous program) get a book. Read up on all its features and functions. Also learn a lot fo the code, even if you use Dreamweaver. This will ensure you can fix errors that the program might (and probably will) make. A good example is Dreamweaver corrects its own code for centering text in a page:

align="center"

and to my knowledge there is no other way to do that using html lol.

Anyways good luck man, and "May the Force be with you." :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.