Border Issue

HTML & CSS
1

Hi,
How do I get the grey border to appear below each grouping of Image and Text? Can be viewed here.

Thanks.

2

There are many inefficiencies in your code, but w/o how it should be restructured, #participants p { overflow:hidden;} should solve your problem.

3

Thanks! Would really appreciate it if you could highlight inefficiencies.

Using Wordpress as editor so finding it awkward for css.

4

well it’s mostly the the HTML.
you can get rid of all the BRs… just add #participants p a{display:block;}

for example: why do you have a DIV wrapped around your H1 and then a SPAN inside it???

<div class=“post-text”><h1><span class=“post-title”>Participants</span></h1></div>
3 tags doing job of 1 !

WP can be pretty limiting but unless you ined to post other content other than participants in this page <div id=“mainContent”> is superfluous , in a sense so is <div class=“post” id=“post-54”> ( but you may not have a choice because of the way output posts. you could get rid of <div id=“participants”> if you know taht that content will always be number54( then you could do this #post-54 p { overflow:hidden;} and #post-54 p a{display:block;})

Finally, semantically speaking this is a LIST of participants right? Am not ceratin that each name would merit its own h2… So it would be more correct to code it like this:


<h1 class="post-text">Participants</h1>
<ul class="post" id="post-54">
<li><strong>Gordon Ryan</strong><img title="Gordon Ryan" src="http://theatnetwork.com/wp-content/uploads/2011/04/sub_gordon.jpg" alt="Gordon Ryan" width="204" height="130" />My name is Gordon Ryan, I am 37 years old and I have been a leader for the past 14 years with the Irish Wheelchair Association self directed service.<a href="http://theatnetwork.com/gril/?page_id=4">Read More about Gordon</a></li> 
<li><strong>Owen Collumb</strong><img class="alignnone size-full wp-image-124" title="Owen Collumb" src="http://theatnetwork.com/wp-content/uploads/2011/04/sub_owen.jpg" alt="Owen Collumb" width="204" height="130" />Read about Owen and the Personal Assistant Services Dublin.<a title="Owen Collumb" href="http://theatnetwork.com/pasd/">Read More about Owen Collumb</a></li> 
<li><strong>Sean Gardiner</strong><img class="alignnone size-full wp-image-129" title="Sean Gardiner" src="http://theatnetwork.com/wp-content/uploads/2011/04/sub_sean1.jpg" alt="Sean Gardiner" width="204" height="130" /><a title="Sean Gardiner" href="http://theatnetwork.com/sil/">Read more about Sean Gardiner</a></li> 
<li><strong>Martin Naughton</strong><img class="alignnone size-full wp-image-130" title="Martin Naughton" src="http://theatnetwork.com/wp-content/uploads/2011/04/sub_martin.jpg" alt="Martin Naughton" width="204" height="130" /><a title="Martin Naughton" href="http://theatnetwork.com/anseo">Read more about Martin Naughton</a></li> 
</ul>

#post-54 li { overflow:hidden; } 
#post-54 li + li { border-top:1px solid #ccc } 
#post-54 li a, #post-54 li strong{display:block;}
#post-54 {padding:0; margin:0; }/* you may also need to bring in yout rules from main content here as well*/

now, isnt that much cleaner?

5

Chrome gives a border/outline thing to any image without a src, We could set the input type to ‘submit’ and this will go away. Alternatively, Use an with a src and trigger the submit from this, But you may as well just use a type=“submit”. Please produce some more attachments about the topic to view detail information.