CSS Assistance..having problems with design

Hi guys…

I am having some issues with a specific design that i have been given from a client.

the enclosed attachment shows the design that I need. The other requirement which is not in the design is that while there is a minimum of two rows to be shown even if there are no events. each date section can expand by more rows. also the date on the left needs to be always horizontally aligned in the middle.

Below is my code i managed so far but i am having problems…i am using some background images, but this needs to be completely cross browser right back to IE6.

Thank you in advance sitepointers :slight_smile:


<!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>
/*
==============================
==== RESET & BASE STYLES =====
==============================*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	height:100%;
	color:#333;
	background:#5e7d91;
	margin:0;
	padding:0;
	position:relative;
}
html
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	height:100%;
	color:#333;
	margin:0;
	padding:0;
	position:relative;
}
html,* html #wrap
{
	height:100%;
}

div
{
	border:none;
}

object
{
	margin:0;
	padding:0;
}

form
{
	margin:0;
}

img
{
	border:0;
}

li
{
	font-size:11px;
}

hr
{
	width:100%;
	border:none 0;
	border-top:1px #369 solid;
	height:1px;
}

h1
{
	font-size:2em;
	font-weight:400;
	color:#000;
	background:inherit;
	margin:10px 5px 5px;
	padding:0;
}

h2
{
	font-size:1em;
	font-weight:700;
	color:#081355;
	background:inherit;
	margin:10px 5px 5px;
	padding:0;
}

a
{		
	text-decoration:none;
	color:#678796
}

a:visited
{
	color:#678796
}

a:hover
{
	text-decoration:underline;
}


.eventContainer
{
	width:940px;
}

.eventContainer_Day
{
	background-color:red;	
	float:left;
}

.eventContainer_Date
{
	background-color:#f2f2f2;
	color:#5f7e91;
	width:44px;
	height:44px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:2em;
	text-align:center;
	vertical-align:middle;

	float:left;	
}


.eventContainer_Items
{
	width:891px;
	float:left;	
	background-image:url(images/events_eventsback.png);	
	border-top: 1px solid #92b1c2;
	border-bottom: 1px solid #92b1c2;	
}

.eventContainer_Event
{
	width:296px;
	height:20px;
	float:left;	
	background-image:url(images/events_eventback.png);
	margin-right:1px;
	margin-bottom:1px;	
}
</style>
</head>

<body>

<div class='eventContainer'>
	<div class='eventContainer_Day'>
		<div class='eventContainer_Date'>44</div>    
		<div class='eventContainer_Items'>
			<div class='eventContainer_Event'>Event</div>        
			<div class='eventContainer_Event'>Event</div>        
			<div class='eventContainer_Event'>Event</div>        
			<div class='eventContainer_Event'>Event</div>                                                                    
        </div>        
    </div>      
</div>
</body>
</html>


Hi, I can’t see the final output but you mention the date must be horizontally centered. You can just set text-align:center; on the .eventContainer_Date div (I’m assuming the date will be in “.eventContainer_Date”)

Do you have a link to look at? That way we can get images and we can debug it more easily :slight_smile:
I notice this

html,* html #wrap 
{ 
    height:100&#37;; 
} 

div 
{ 
    border:none; 
}
  1. Remove the html, otherwise IE6 won’t recognize the star selector hack.
  2. <div>'s don’t have borders by default. Remove that.
  3. In your html{} code remove position:relative (along with it on the body) since it isn’t needed :slight_smile:
  4. You shouldn’t set px fonts because IE won’t allow for text resize :slight_smile:
  5. You should realize that the value “inherit” for just about every property (there are a a few) aren’t supported in IE7 and down
  6. It’s extremely hard to get the <hr> styling cross browser compatible. It’d be best to wrap the <hr> in a <div> and set the styles on the <div> and set the hr to display:none;
[b]div.[/b]hr 
{ 
    width:100%; 
    border:none 0; 
    border-top:1px #369 solid; 
    height:1px; 
   overflow:hidden;/*for ie6*/
}
[b]hr{display:none;}[/b]
....
<div class="hr"><hr /></div>

I’d use a 4 cell table for that which would take care of the vertical alignment easily. It looks like tabular data anyway from what I can see.