No replies
johnyboy
Offline
Enthusiast
Last seen: 13 years 12 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

could anyone offer a solution for how to get this page: http://www.walsham-le-willows.org/news/diaryofevents

to look like the following screen shot (layout wise) in ie6 please?:

the column of text on the right ("Bank Holiday" and "Kickboxing Academy , Juniors" etc.) in ie6 is jumping to the left of the page and looking a bit of a mess. i don't have access to ie6 and i'm not much good at css so am not sure how to fix it but i have seen it in ie6 and it isn't good. it works and looks fine in the two browsers i test in (safari and firefox for the mac).

here's a snippet of some relevent html:

<div id="diaryofevents">

<div class="oneday">
<h4>Tuesday 30th</h4>
<div class="bar"></div>

<h5><a href="../sports/kickboxing">Kickboxing Academy</a>, Juniors</h5>
<ul>
	<li><em>6.30 pm: <a href="../clubs+organisations/communitycouncil#villagehall">Village Memorial Hall</a></em></li>
</ul>

<br />

<h5><a href="../sports/kickboxing">Kickboxing Academy</a>, Seniors</h5>
<ul>
	<li><em>7.30 pm: <a href="../clubs+organisations/communitycouncil#villagehall">Village Memorial Hall</a></em></li>
</ul>

</div><!-- oneday - end -->


</div><!-- diaryofevents - end -->

and here's the relevent css (this is the "diaryofevents.css"):

#diaryofevents * {padding:0;margin:0}
#diaryofevents div.oneday {
	display: table;
	margin-bottom: 2em;
	}

#diaryofevents h3, #diaryofevents h4, #diaryofevents h5, #diaryofevents li, p {
	font-family: Arial;
	color: #3A4B60;
	font-size: small;
	line-height:1.2em;
}

#diaryofevents ul {
	list-style: none;
	margin-bottom:-5px;
}

#diaryofevents ul ul {
	padding-left:0.5em;
	margin-left:1em;
	list-style:square;
	}

#diaryofevents h5, #diaryofevents ul { margin-left:10px; }

#diaryofevents div.bar
	{
	display: table-cell;
	width: 2px;
	background-color: #D3D7DC;
	}

#diaryofevents h4
	{
	text-align:right;
	display: table-cell;
	width: 9em;
	padding-right:15px;
	padding-left:3em;
	}
	
#diaryofevents h3 {
	font-size:1.4em;
	font-weight:bold;
	padding-top:6px;
	margin-bottom:1em;
	margin-top:2em;
	border-top: 2px solid #D3D7DC;
	}

#diaryofevents h4, #diaryofevents h5 { font-weight:bold; }

#date {
	margin-top:2em;
}

#date, .getitlisted {
	float:right;
	border: 2px solid #D3D7DC;
	padding:4px 6px;
}

.getitlisted {
	margin:0;
	text-align:center;
}
	
.getitlisted a { font-weight:bold }

#date { clear:both }

#diaryofevents h2 { margin-top:3.5em; margin-bottom:-0.5em;}

any possibly solutions would be great. thanks. Smile