Weird Html Output

aarchaic

Hi guys i quickly need to get your insight on this and i have no idea whats happening and why its happening.

Firstly i'm doing a mock html code which will be echoed with different values later...

What i'm trying to do is write a div with info in it which works like a charm but i'm enclosing the whole DIV with a <A Href> tag to make the whole element clickable.

this is the part that will be repeating with the values pulled from the database and linked to the next relevant page..

here is my mock code which is in plain HTML with my style.

<?php
session_start(); 
include("includes/database.php");

$partyquery = ("select * from gigguide order by date desc;");
$partyresult = mysql_query($partyquery);
?>

<head>
<title>title</title>
<link href="css/ANstyle.css" rel="stylesheet" type="text/css" />
</head>
<style>
	#gigs {
		width:594px;
		padding-bottom:3px;
		}
	#monthheader {
		background:url(gfx/partymonth_bg.jpg) repeat-x;
		height:26px;
		width:589px;
		padding-left:5px;
		margin-top:5px;
		text-align:left;
		font:  Bold 15px/19px arial, verdana, sans-serif;
		line-height:1.7em;
		color:#3399cc;
		float:left
		}
	#gigbox {
		display:block;
		height:92px;
		padding:2px;
		width:590px;
		background:#222222;
		margin-top:3px;
		float:left;
		}
	#gigboximg {
		width:151px;
		padding-left:2px;
		padding-right:2px;
		padding-top:4px;
		padding-bottom:4px;
		height:84px;
		background:#333333;
		/* background:#252525; */
		float:left;
		}
	#gigboximg img{
		height:80px;
		background:#252525;
		padding:2px;
		}

#gigboxinfo {
	width:431px;
	padding-left:2px;
	padding-right:2px;
	padding-top:4px;
	padding-bottom:4px;
	height:84px;
	background:#333333;
	/* background:#252525; */
	float:left;
	}
#title {
	height:16px;
	width:308px;
	padding-left:3px;
	padding-bottom:2px;
	text-align:left;
	font:  Bold 16px arial, verdana, sans-serif;
	float:left;
	}
#titledate {
	height:16px;
	width:115px;
	padding-Right:3px;
	padding-bottom:2px;
	text-align:right;
	font:  Bold 11px/15px arial, verdana, sans-serif;
	float:left;
	}
#info {
	width:425px;
	padding-top:2px;
	padding-left:3px;
	text-align:left;
	font:  normal 11px/15px arial, verdana, sans-serif;
	float:left;
	}
a img { 
	border:0px; 
	}
a #gigbox {
	text-decoration:none;
	color:#CCCCCC;
	}
a #gigbox:hover {
	background:#3399cc;
	color:#FFCC00;
	}
</style>
<body id="GIGGUIDE">
    <div id="wrapper">
        <div id="header">
            <div id='container'>
            	<div id="gigs">
            		<div id="monthheader">January / February / March / April / May / June / July / August / September</div>
                    <a href="/">
                        <div id="gigbox">
                            <div id="gigboximg"><img src="gallery/host_logo/alpha_nightlife_logo.jpg" /></div>
                            <div id="gigboxinfo">
                                <div id='title'>DJ Fresh - Goes Electro 2 Cd Tour</div><div id='titledate'>24 September 2009</div>
                                <div id='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</div>
                                <div id='info'></div>
                                <div id='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</div>
                                <div id='info'>082**** 3835</div>
                            </div>
                        </div>
                    </a>
                    <a href="/">
                        <div id="gigbox">
                            <div id="gigboximg"><img src="gallery/host_logo/alpha_nightlife_logo.jpg" /></div>
                            <div id="gigboxinfo">
                                <div id='title'>DJ Fresh - Goes Electro 2 Cd Tour</div><div id='titledate'>24 September 2009</div>
                                <div id='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</div>
                                <div id='info'></div>
                                <div id='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</div>
                                <div id='info'>082 *** 3835</div>
                            </div>
                        </div>
                    </a>
                    <div id="monthheader">January / February / March / April / May / June / July / August / September</div>
                    <a href="/">
                        <div id="gigbox">
                            <div id="gigboximg"><img src="gallery/host_logo/alpha_nightlife_logo.jpg" /></div>
                            <div id="gigboxinfo">
                                <div id='title'>DJ Fresh - Goes Electro 2 Cd Tour</div><div id='titledate'>24 September 2009</div>
                                <div id='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</div>
                                <div id='info'></div>
                                <div id='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</div>
                                <div id='info'>082 *** 3835</div>
                            </div>
                        </div>
                    </a>
                </div>
          	</div>
        </div>
        <div id="sidebar">

    </div>
    <div id="clear"> </div>
    <div id="footer">


    </div>
</div>
</body>
</html>

what happens now is once you call the code up there the code goes funny in Mozilla and in IE7 and its unpredictable...

the first 2 blocks is perfectly clickable and the 3rd block is not then on the next refresh its all turned up again and the first 2 is not clickable and the 3rd is...

when i look at the source code of the elements acting strange this is what it shows me....

 <div id="gigs">
            		<div id="monthheader">January / February / March / April / May / June / July / August / September</div>
                    <a href="/">
                        </a><div id="gigbox">
<a href="/">                            </a><div id="gigboximg"><a href="/"><img src="gallery/host_logo/alpha_nightlife_logo.jpg"></a></div>
<a href="/">                            </a><div id="gigboxinfo">
<a href="/">                                </a><div id="title"><a href="/">DJ Fresh - Goes Electro 2 Cd Tour</a></div><div id="titledate"><a href="/">24 September 2009</a></div>

<a href="/">                                </a><div id="info"><a href="/"><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</a></div>
<a href="/">                                </a><div id="info"></div>
<a href="/">                                </a><div id="info"><a href="/"><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</a></div>
<a href="/">                                </a><div id="info"><a href="/">082 437 3835</a></div>

<a href="/">                            </a></div>
<a href="/">                        </a></div>
<a href="/">                    </a>
                    <a href="/">
                        <div id="gigbox">
                            <div id="gigboximg"><img src="gallery/host_logo/alpha_nightlife_logo.jpg"></div>
                            <div id="gigboxinfo">
                                <div id="title">DJ Fresh - Goes Electro 2 Cd Tour</div><div id="titledate">24 September 2009</div>

                            <div id="info"><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</div>
                            <div id="info"></div>
                            <div id="info"><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</div>
                            <div id="info">082 437 3835</div>

                        </div>
                    </div>
                </a>
                <div id="monthheader">January / February / March / April / May / June / July / August / September</div>
                <a href="/">
                    </a><div id="gigbox">
<a href="/">                            </a><div id="gigboximg"><a href="/"><img src="gallery/host_logo/alpha_nightlife_logo.jpg"></a></div>
<a href="/">                            </a><div id="gigboxinfo">

<a href="/">                                </a><div id="title"><a href="/">DJ Fresh - Goes Electro 2 Cd Tour</a></div><div id="titledate"><a href="/">24 September 2009</a></div>
<a href="/">                                </a><div id="info"><a href="/"><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</a></div>
<a href="/">                                </a><div id="info"></div>
<a href="/">                                </a><div id="info"><a href="/"><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</a></div>

<a href="/">                                </a><div id="info"><a href="/">082 437 3835</a></div>
<a href="/">                            </a></div>
<a href="/">                        </a></div>
<a href="/">                    </a>
                </div>

Any bit of help would be greatly appreciated!!!

Thanks

Bjom

A <div> shouldnt reside inside a <a>. Div is allowed to live inside these only:

applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th

I don't know whether this is the source of your problems, but thy to follow this first and if the error persists I'll have a more thorough look.

aarchaic

ok i went and rewrote my code using bits and pieces i found on the net.

the code works extremely nice in firefox! but IE is another matter it works and it hovers but the whole element is not clickable... only the 2px frame i made shows the hand and although the background of the text is clickable the text and the images is not any idea how i can make the whole element clickable now?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<META NAME="Pragma" CONTENT="no-cache">
<meta name="robots" content="index" />
<META NAME="AUTHOR" CONTENT="">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en,za">
<META NAME="Expires" CONTENT="0">
<META NAME="DESCRIPTION" CONTENT="...summary of web page...">
<meta name="keywords" content="" />
<title></title>
<link href="css/ANstyle.css" rel="stylesheet" type="text/css" />
</head>
<style>
<style type="text/css">
#gigs {
	width:594px;
	padding-bottom:3px;
	list-style: none;
	}

#gig {
	margin: 0px;
	padding: 0px;
	list-style: none;

}
#gig li {
	display: block;
	float:left;
	width:590px;
	margin-top:3px;
	background:#222222;
	padding:2px;
	}

#gig a {
	text-decoration: none;
	display: block;
	padding:2px;
	color: #FFFFFF;
	height:92px;
	background:#222222;
	}
#gig a:hover {
	color: #3399cc;
	background:#252525;
	}

.gigboximg {
	display: block;
	width:151px;
	padding-left:2px;
	padding-right:2px;
	padding-top:4px;
	padding-bottom:4px;
	height:84px;
	background:#333333;
	/* background:#252525; */
	float:left;
	}
.gigimg{
	display: block;
	height:80px;
	background:#252525;
	padding:2px;
	}
a img { 
	border:0px; 
	}

.title {
	height:16px;
	width:306px;
	padding-left:3px;
	padding-bottom:2px;
	text-align:left;
	font:  Bold 16px arial, verdana, sans-serif;
	float:left;
	}
.titledate {
	height:16px;
	width:115px;
	padding-Right:3px;
	padding-bottom:2px;
	text-align:right;
	font:  Bold 11px/15px arial, verdana, sans-serif;
	float:left;
	}
.info {
	width:423px;
	padding-top:2px;
	padding-left:3px;
	text-align:left;
	font:  normal 11px/15px arial, verdana, sans-serif;
	float:left;
	}
#monthheader {
		background:url(gfx/partymonth_bg.jpg) repeat-x;
		height:26px;
		width:589px;
		padding-left:5px;
		margin-top:5px;
		margin-bottom:3px;
		text-align:left;
		font:  Bold 15px/19px arial, verdana, sans-serif;
		line-height:1.7em;
		color:#3399cc;
		float:left
		}
</style>
<body id="GIGGUIDE">
    <div id="wrapper">
        <div id="header">
            <ul>
                <li id="AlphaHome"><a href="index.php">Home</a></li>
                <li id="AlphaAbout"><a href="about_alphanightlife.html">About Alpha</a></li>
                <li id="AlphaGallery"><a href="gallerylist.php">Galleries</a></li>
                <li id="AlphaGig"><a href="partyguide.php">Party Guide</a></li>
                <li id="AlphaPubs"><a href="pubsclubs/index.html">Pubs & Clubs</a></li>
                <li id="AlphaMusic"><a href="music/index.html">Music</a></li>
                <li id="AlphaContact"><a href="contact.php">Contact</a></li>
            </ul>
        <img src="gfx/headerfooter/Alphanightlife_logo.jpg" alt="Alpha Nightlife - Nightlife Photographers - Gauteng - Pretoria - Johannesburg " /> </div>
    	<div id="content"><img src="gfx/recentgalleries.jpg" width="610" height="26" alt="Recent Alpha Nightlife Galleries" title="Alpha Nightlife most Recent Galleries"/>
        	<div id='container'>
            	<div id="monthheader">January / February / March / April / May / June / July / August / September</div>
            	<div id="gigs">
    <ul id="gig">
        <li><a href="#"><span class="gigboximg">
                            <img src="gallery/host_logo/alpha_nightlife_logo.jpg" class='gigimg'/>
                        </span>

                        <span class='title'>DJ Fresh - Goes Electro 2 Cd Tour</span><span class='titledate'>24 September 2009</span>
                        <span class='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</span>
                        <span class='info'>&nbsp;</span>
                        <span class='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</span>
                        <span class='info'>082 437 3835</span>
                    </a></li>
     <li><a href="#"><span class="gigboximg">
                        <img src="gallery/host_logo/alpha_nightlife_logo.jpg" class='gigimg'/>
                    </span>
                    <span class="boks">
                        <span class='title'>DJ Fresh - Goes Electro 2 Cd Tour</span><span class='titledate'>24 September 2009</span>
                        <span class='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</span>
                        <span class='info'>&nbsp;</span>
                        <span class='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</span>
                        <span class='info'>082 437 3835</span>
                    </span></a></li>
</ul>
</div>
<div id="monthheader">January / February / March / April / May / June / July / August / September</div>
<div id="gigs">
    <ul id="gig">
        <li><a href="#"><span class="gigboximg">
                            <img src="gallery/host_logo/alpha_nightlife_logo.jpg" class='gigimg'/>
                        </span>
                        <span class="boks">
                            <span class='title'>DJ Fresh - Goes Electro 2 Cd Tour</span><span class='titledate'>24 September 2009</span>
                            <span class='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</span>
                            <span class='info'>&nbsp;</span>
                            <span class='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</span>
                            <span class='info'>082 437 3835</span>
                        </span></a></li>
         <li><a href="#"><span class="gigboximg">
                            <img src="gallery/host_logo/alpha_nightlife_logo.jpg" class='gigimg'/>
                        </span>
                        <span class="boks">
                            <span class='title'>DJ Fresh - Goes Electro 2 Cd Tour</span><span class='titledate'>24 September 2009</span>
                            <span class='info'><strong>Feat:</strong> DJ Fresh, DJ Stereologik and DJ Mamba</span>
                            <span class='info'>&nbsp;</span>
                            <span class='info'><strong>Venue:</strong> News Cafe Hartbeesport Dam &nbsp;&nbsp;<strong>Location:</strong> Hartbeespoor Village Mall</span>
                            <span class='info'>082 437 3835</span>
                        </span></a></li>
    </ul>
</div>
          	</div>
        </div>
        <div id="sidebar">

    </div>
    <div id="clear"> </div>
    <div id="footer">

    </div>
</div>
</body>
</html>

JPnyc

well just at a glance I notice you have 4 divs with the same ID, which is incorrect. IDs must be unique.

paulnaj

Hi,

add ...

cursor: hand;

... to #gig a {}

To test 'clickability' set the href's to some real URL to see what happens.

Also, just wondering why you sometimes use single-quotes for HTML attributes - I know you can mix both but surely simpler to use double-quotes all the time?

aarchaic

Hi,

add ...
Code:

cursor: hand;

... to #gig a {}

To test 'clickability' set the href's to some real URL to see what happens.

Also, just wondering why you sometimes use single-quotes for HTML attributes - I know you can mix both but surely simpler to use double-quotes all the time?

P.
Today 03:57 PM

Thanks for the advice reason why i'm using the single quotes is for code repetition i have a set of information that is different and i need to repeat it all the time rather than adding \ to the code its just easier to make it single quote and php echo dont have issues.

I'm going to try the cursor code thanks 🙂

paulnaj

Hi again,

Though it might be so. But you can (nearly) always use single quotes for strings in PHP, unless you absolutely have to use doubles. I know almost every textbook and tutorial on PHP uses double-quotes for everything, but imho using singles ...

Means that you can't embed variables in strings. I've never understood why people do this ... it's ripe for errors and unreadability. Think it spills over from Perl.
Means that you can echo out normal xhtml - double-quotes wherever you like!

<?php
// This is definitely less error-prone ...
echo '<a href="'.$row['url'].'">'.$row['text'].'</a>';

// ... than ...
echo "<a href='$row[url]'>$row[text]</a>";
?>

P 😉

aarchaic

thanks for the tip i normaly do mock ups of the pages in plain html first then see how it behaves in before adding the php code.

but i guess people learn bad habits and that is one of mine now 😛

but this block element links is realy working my nerves...

Btw the styling code worked fine. the hand shows nicely 🙂 but its still not realy making the element clickable on all areas... only the background seems clickable not the image nor the text...

paulnaj

Just checking - did you add real urls in the href?

And ...

What version of IE is having the problems? Only got 8 in front of me at the moment and it works fine.

Also, has that 'messed up' code gone now? The empty a-tags?

PS. Hmm - just a thought - sometimes IE6 plays up with spaces - try closing up all whitespace between the elements inside the container link.

aarchaic

it happening in IE6 and 7.

this is what i'm trying to replicate but with my own sizes maybe i'm just trying to make it too complicated for myself...

[URL="http://*****anightlife.com/gallery/showGalleries.aspx"]http://*****anightlife.com/gallery/showGalleries.aspx[/URL]

note the highlight when you hover on a gallery...

and this is the code they used and it works across IE and Firefox

 <ul id="ctl00_gl_gl_ul" class="galleryListSmall">

        <li>

            <a id="ctl00_gl_gl_ctrl0_l" href="/gallery/showGallery.aspx?gid=2340"><img id="ctl00_gl_gl_ctrl0_i" src="/images/galleries/d76376f5-516d-4a52-8089-ab79e7ed36a8_crop.jpg" alt="Thursday 23 Jul 2009 | Uni Night | Sands Tavern | Maroochydore" style="border-width:0px;" />
                <div id="text">
                    <span id="ctl00_gl_gl_ctrl0_t1" class="l1">Thu 23 Jul 2009<br/></span><span id="ctl00_gl_gl_ctrl0_t2" class="l2">Uni Night<br/>Sands Tavern, Maroochydore</span>
                </div>
            </a>
        </li>

any guidance will be appreciated to get close to that.

i'm still going to try and recreate it in the meantime...

paulnaj

There's nothing really unusual about the snippet you shown - except that they've put a div inside a link - which won't validate.

Sorry to go on but did you put in some real urls - nothing will happen otherwise.

aarchaic

yes i did unfortunately i cant show you cause its on my pc where i'm running the setup server before exporting and replacing the real site.

the big problem is it seems to me is that once i get make it a class or change the element in a way the image and text loses its link property and only links if you click on the back ground of the element..

paulnaj

Again, just checking ... when you change the duplicated ids to classes, you do go to the css and change the relevant '#''s to '.'s ?

aarchaic

OK i managed to get the element working with no link issues but now i have a styling issue....

in firefox it works no problems but once i goto IE7/8 the layout of the image is wrong the text is not where it suppose to be and the 2 block flows over to the next line and i just cant seem to get the issue..

can someone have a look and tell me where i'm going wrong?

heres the code...

<style media="screen">
#recentgal {
	padding:9px;
	width:592px;
	height:315px;
	background:#111111;
	}
#galelement {
	margin:0px;
	padding:0px;
	list-style:none;
	}
#listitem{
		display:inline;
		height:153px;
		width:144px;
		margin:2px;
		float:left;
		background:#333333;
	}
#galelement #links{
		display:block;
		height:147px;
		width:138px;
		margin:3px;
		float:left;
		background:#252525;
	}
a img{
	display:block;
	padding-top:15px;
	padding-left:21px;
	padding-right:21px;
	padding-bottom:15px;
	border:none;
	border-bottom-width:0px;
	}
a {
	text-decoration:none;
	color:#ffcc00;
	font:normal 11px/15px Arial, Helvetica, sans-serif;
	text-align:center;
	}
a:hover {
	color:3399cc;

}
#galelement #links:hover{
		background:#222222;
	}
.galtitle {
	font-weight:bold;
	}
</style>
<body>
	<div id="recentgal">
    	<ul id='galelement'>
        	<li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
       </ul>
</div>

</body>

aarchaic

i just wend from 592 to 601 in IE7/8 to get the 4 blocks in a row and yet in firefox that is perfect on 592... what am i missing? and why dont the image want to style as i want it to? IE is so bloody frustrating!!!

aarchaic

ok i manage to do something right just not realy sure what i did but this is the source code....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#recentgal {
	padding:9px;
	width:592px;
	height:317px;
	background:#111111;
	}
#galelement {
	margin:0px;
	padding:0px;
	list-style:none;
	}
#listitem{
		display:inline;
		height:153px;
		width:144px;
		margin:2px;
		float:left;
		background:#333333;
	}
#galelement #links{
		display:block;
		height:147px;
		width:138px;
		margin:3px;
		float:left;
		background:#252525;
	}
a img{
	display:block;
	padding-top:15px;
	padding-left:21px;
	padding-right:21px;
	padding-bottom:15px;
	border:none;
	border-width:0px;
	}
a {
	text-decoration:none;
	color:#ffcc00;
	font:normal 11px/15px Arial, Helvetica, sans-serif;
	text-align:center;
	border:none;
	border-width:0px;
	}
a:hover {
	color:3399cc;

}
#galelement #links:hover{
	color:3399cc;
		background:#000000;
	}
.galtitle {
	font-weight:bold;
	}
-->
</style>
</head>

<body>
	<div id="recentgal">
    	<ul id='galelement'>
        	<li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
            <li id="listitem">
            	<a href="#" id="links">
                	<img name="" src="" width="95" height="63" alt="image">
                    <span class="galtext"><span class="galtitle">2009-08-30</span><br/>johan<br/>kotze</span>
                </a>
            </li>
       </ul>
     </div>
</body>
</html>