Unfortunately I dont have hosting at the minute and cant really be bothered setting up something free just for the purpose of this post. Anyways, Can anyone tell me why one image will display on my webpage while others, exactly the same dimensions will not? (Sorry about the very messy markup)

 

 

 

What I mean

 

 

The image "smoke.jpg" will display fine in any column

 

 

When I try and set the images to two seperate to "smoke" below they will not display at all, nor will any image for that matter. Each image is exactly the same size.

 

 

The HTML/CSS

 

<div id="col1">
<h1>Title</h1>
<hr />
<img src="images/iphone.png" class="logoright" alt="logoright" width="265" height="149" />

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s</p>

<h1>Featured Work</h2>
</div>

<div class="column1">
		<img src="images/smoke.jpeg" alt="smoke cessation" class="img"/>
			<h4>Smoking Cessation</h4>

			<small>Cras condimentum arcu elementum nibh condimentum</small>
			<hr />
			<p>Cras condimentum arcu elementum nibh condimentum elementum. Sed in sem eget ligula pulvinar facilisis et ut tellus. Praesent feugiat, ipsum non luctus ultrices, neque diam venenatis purus, eu mollis justo quam vitae dolor. </p>
		</div>

		<div class="column2">
		<img src="images/mono.jpeg" alt="monogram" class="img"/>
			<h4>Personal Identity Devlopment</h4>
			<small>Cras condimentum arcu elementum nibh condimentum</small>

			<hr />
			<p>Cras condimentum arcu elementum nibh condimentum elementum. Sed in sem eget ligula pulvinar facilisis et ut tellus. Praesent feugiat, ipsum non luctus ultrices, neque diam venenatis purus, eu mollis justo quam vitae dolor. </p>
		</div>
		<div class="column3">
	<img src="images/ico.jpeg" alt="icon" class="img"/>
			<h4>Iconographic Development</h4>
			<small>Cras condimentum arcu elementum nibh condimentum</small>
			<hr />

			<p>Cras condimentum arcu elementum nibh condimentum elementum. Sed in sem eget ligula pulvinar facilisis et ut tellus. Praesent feugiat, ipsum non luctus ultrices, neque diam venenatis purus, eu mollis justo quam vitae dolor.</p>
		</div>

 

#col1 {
width: 980px;
height: auto;
float: left;
margin: 0px;

}
.column1 {
float: left;
width: 290px;
margin-top: 15px;
}

.column2 {
float: left;
width: 290px;
margin-left: 50px;
margin-right:50px;
margin-top: 15px;
}

.column3 {
float: left;
width: 290px;
margin-top: 15px;
}

 

 

Please tell me if the post does not make sense and I will try and improve my explanaton. Problem is not incorrect directory related etc, tested on multiple browsers, same problem. It has to be the dodgy markup !

 

Thanks

It can't find the images.

 

Right click where it says monogram > Open image in new tab

 

It won't be there. Double check the file names, capitals and extensions. You've put jpeg, are they jpg?

Ahh, I am such an idiot ! I really need to sleep more. Got confused with mixed extensions, jpeg and jpg. Never thought to check. Issue is resolved, thanks bocaj.

Ahh, I am such an idiot ! I really need to sleep more. Got confused with mixed extensions, jpeg and jpg. Never thought to check. Issue is resolved, thanks bocaj.

 

lol, i only know because i've spent time scratching my head at that one. Occasionally photoshop seems to enjoy changing my extensions from .jpg to .jpeg and then to .JPEG >

 

Glad it's fixed though (:

School boy error but to be honest little things like this catch alot out iv had similer small simple things take forever to solve then laugh at myself and think what a plonk.