Broken crossbrowser CSS (IE/Mozilla)

maxheadroom

Hi,


I have a <DIV> set to float on the front page of my site (http://www.dublin2003.net/index.htm), containing some news. I've used CSS to set some pretty garish colours on it as it answers about 90% of all emails we get. Unfortunately, the box displays very strangely in Mozilla Phoenix and Netscape 6.2. I don't know if mozilla is correct here or IE, but I want it to look like it does in IE.

The CSS validates and the HTML does too (with the exception of some missing ALT attributes on some pics which I'll fix when I get home).

Here's what it looks like in IE : (http://www.netsoc.tcd.ie/~maxhead/ie.gif)

Here's what it looks like in Phoenix and other Mozilla browsers: (http://www.netsoc.tcd.ie/~maxhead/phoenix.gif)

Here's the relevant HTML:

<div class="newsbox" id="newsbox"> 
              <p class="newsboxhead">Breaking News!</p>

              <p class="newsboxitem">Application forms and eligibility information 
                are available in our &quot;Contact Us&quot; pages</p>
              <p class="newssig"><a href="news.htm" target="_parent">News Archive</a></p>
            </div>

Here's the Relevant CSS:

.newssig {
	font-size: xx-small;
	text-align: right;
}

.newsbox {
	float: right;
	left: 530px;
	right: 700px;
	z-index: 1;
	width: 170px;
	height: 135px;
	background-color: #87CEFA;
	color: Black;
}


.newsboxhead {
	font-family: Helvetica, Arial, sans-serif;  
	font-size: medium;
	width: 100%;
	background-color: Silver;
	color: Black;
	text-align: center;
	margin-bottom: 2px;
}

.newsboxitem {
	font-family: Helvetica, Arial, sans-serif;  
	font-size: small;
	width: 100%;
	background-color: #87CEFA;
	color: Black;
	text-align: left;
	padding: 3px;
}

Can anybody offer any tips or tricks to make this work?


Thanks.

peterd

Delete the width: 100%; in .newsboxhead and .newsboxitem . The <p> tag is a block element, so it will span across the screen until it hits something else anyway, read: (width=100%)