0

I want to display four images - two on row one and two underneath.

Only the top row displays for some reason and I just cannot see why.

Here is the very simple code:

<img class="social" src="http://www.c5d.co.uk/racenight.png" alt="Race Night">
<img class="social2" src="http://www.c5d.co.uk/mothersday.png" alt="Mothers' Day>
<p>
<img class="social" src="http://www.c5d.co.uk/carlosax.png" alt="Carlo Sax>
<img class="social2" src="http://www.c5d.co.uk/eastersunday.png" alt="Easter Sunday"></p>

The web page is: http://www.c5d.co.uk/socialeventsfour.php

Why don't the lower two images display?

Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179

2 Answers2

1

Because you forget to close "Mothers' Day and "Carlo Sax on your second and third <img>

Here's the corrected one:

http://jsfiddle.net/ytmvy/2/

<img class="social" src="http://www.c5d.co.uk/racenight.png" alt="Race Night">
<img class="social2" src="http://www.c5d.co.uk/mothersday.png" alt="Mothers' Day">
<p>
    <img class="social" src="http://www.c5d.co.uk/carlosax.png" alt="Carlo Sax">
    <img class="social2" src="http://www.c5d.co.uk/eastersunday.png" alt="Easter Sunday">
</p>
Andreas Wong
  • 59,630
  • 19
  • 106
  • 123
  • @IamStalker I'm just following the OP's question, and what do you mean by not correct HTML? HTML5 still has it as far as I know – Andreas Wong Feb 18 '13 at 06:32
  • If I don't use a

    or a
    it doesn't render properly, the right hand image on the second row doesn't align under the one on the first row. What would you suggest I use please ?

     –  Feb 18 '13 at 06:43
  • `` is perfectly valid inside a `

    `, I don't know where people get that kind of impression... See here: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 `The P element represents a paragraph. It cannot contain block-level elements (including P itself).`, then the list of all block elements here: https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements. I don't see `` listed there.

     – Andreas Wong Feb 18 '13 at 06:47
  • Thanks. I thought I had never come across that before ! Antony –  Feb 18 '13 at 07:00
  • thank you for your correction, i've deleted the comment, ohhh and i haven't touched your carma. – hackp0int Feb 18 '13 at 07:23
1
<img class="social" src="http://www.c5d.co.uk/racenight.png" alt="Race Night" />
<img class="social2" src="http://www.c5d.co.uk/mothersday.png" alt="Mothers' Day" />
<p>
  <img class="social" src="http://www.c5d.co.uk/carlosax.png" alt="Carlo Sax" />
  <img class="social2" src="http://www.c5d.co.uk/eastersunday.png" alt="Easter Sunday" />
</p>

You may use /> when using images(img). Along with the obvious missing " from your alt attribute.

hjpotter92
  • 78,589
  • 36
  • 144
  • 183
  • I knew it had to be something simple like the missing ", but you know how it is when you have looked at something for ages ! Thanks for the response –  Feb 18 '13 at 06:32
  • also HTML5 http://dev.w3.org/html5/markup/img.html An img element must have a start tag but `must not` have an end tag. – Andreas Wong Feb 18 '13 at 06:36
  • @SiGanteng http://dev.w3.org/html5/markup/syntax.html#syntax-start-tags **#05** - Optionally, a "/" character, which may be present only if the element is a void element. – hjpotter92 Feb 18 '13 at 06:45
  • 1
    Yeah, it's `optional`, not `should always use`, they imply two different meaning. – Andreas Wong Feb 18 '13 at 06:49