CSS - Css Problems With Ie7

I am pretty new to semantic HTML and just started. I used to put a lot of stuff in the html instead of the css.
I have now made a semantic html website which works perfectly in IE, but not in the other browsers I've tried (FF, NN, Opera). I figure the problems must be in the css, so could you please take a look at it?

In the beginning I have a DIV with a background-image, which is the banner of the page. After 160px, a horizontal menu comes on top of that and a little below there will be breadcrums.

For now there 2 things to solve:
1. IE places the background/image at the top of where the DIV starts, All the other browsers place the background/image at the first actual content of the page (which is the horizontal menu). If I add a <br> or a dot at the top of the div, the background-images is moved to the right place. But I would like to do it without a <br> or a dot. Is that possible??
2. The horizontal menu is a series of SPAN's with text in it, the width is set as 19%, and in IE this works. In the other browsers each SPAN is as wide as the text is, though it should be longer.

Could you help me find the solution to these problems?
The code is posted below,

Sjoukje

My CSS:
Code:

BODY {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0; height: 100%;}

#bgimage {
	background-image: url(images/CFD.jpg);
	width: 800px;
	height: 280px;
	margin-top: 20px}
	
#midimage {
	background-image: url(images/contentbg.jpg);
	width: 800px;
	height: 110%;
	background-repeat: repeat-y;
	overflow: hidden;}

#underimage {
	background-image: url(images/contentbottom.jpg);
	width: 800px;
	background-repeat: no-repeat;}

#margin_top {
	margin-top: 180px;}

#hoofdmenu {
	width: 100%;}

.menu_item1, .menu_item2, .menu_item3, .menu_item4, .menu_item5 {
	font-size: 10pt;
	font-weight: bold;
	width: 19%;
	height: 15px;
	text-align: center;
	vertical-align: middle; 
 	padding: 1px;
	color: black;
	text-decoration: none;}
.menu_item1 {background-color: #3CBF02; }
.menu_item2 {background-color: #0059D3; }
.menu_item3 {background-color: #FFF10C; }
.menu_item4 {background-color: #ff6c00; }
.menu_item5 {background-color: #CB0000; }

.mouseover1, .mouseover2, .mouseover3, .mouseover4, .mouseover5
{ 	font-size: 10pt;
	font-weight: bold;
	width: 19%;
	height: 15px;
	text-align: center;
	vertical-align: middle; 
 	padding: 1px;
	color: black;
	text-decoration: none;}
.mouseover1 { background-color: #45de01;}
.mouseover2 { background-color: #006cff;}
.mouseover3 { background-color: #fff998;}
.mouseover4 { background-color: #ff8400;}
.mouseover5 { background-color: #eb0101;}
	
a.menu {
	color: black;
	text-decoration: none;}
	
#breadcrums {
	float: left;
	margin-top: 35px;
	margin-right: 10px;
	margin-left: 200px;
	font-size: 7pt;
	font-weight: bold;
	text-decoration: underline; 
	text-align: left;
	color: Gray;}

p {font-size: 10pt; }

#boxes {	float: left; 
	width:200px;
	text-align:left; 
	padding: 23;
	margin-top: -23px;}
	
.box110, .sub_cfd, .sub_act, .sub_art, .sub_4, .sub_cont {
	background-repeat: no-repeat;
	padding: 6px;
	text-align: left; 
	font-size: 8pt;}
.box110 { background-image: url(images/menulinks110.jpg);	height: 120px;}
.sub_cfd {background-image: url(images/sub_cfd.jpg); 
             height: 156px;}
.sub_act {background-image: url(images/sub_act.jpg); 
            height: 156px;}
.sub_art {background-image: url(images/sub_art.jpg); height: 
             156px;}
.sub_4 {background-image: url(images/sub_4.jpg); height: 
          156px;}
.sub_cont {background-image: url(images/sub_cont.jpg); 
               height: 156px;}
	
p.box_main_text {	
	font-size: 8pt; 
	padding: 4px; 
	margin-top: -10px;}

.box_top_black, .box_top_white {
	font-size: 8pt; 
	font-weight: bold; 
	text-align: left; 
	margin-left: 5px; 
	margin-top: 8px;}
.box_top_black { color: black;}
.box_top_white {color: white;}
#spacer {height: 140px;}

ul.box_list {margin-left:6px;	list-style-type: none;}

#content {float: right;
	margin-right: 20px;
	margin-top: -4px;
	width: 570px;
	font-size: 10pt; 
	text-align: left; 
	vertical-align: top;	}

#footer {
	margin-left: 210px;
	text-align: center;
	font-size: 8pt;
	color: Gray;
	height: 30px;}

p.agenda_top {
	font-size: 14pt;
	color: black;
	text-align: left;
	vertical-align: top;}
p.agenda {
	font-size: 7pt;
	text-align: left;
	color: navy;}
ul.agenda_list { 
	list-style-type: none;
	margin-left: 0px;}

td{
	width: 13%;
	height: 50px;
	vertical-align: top;
	background-color: white;
	padding: 5px;}

The html
Code:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="../simpel.css" type="text/css">

</HEAD>

<BODY>

<DIV align="center">
	<DIV id="bgimage">
		<DIV id="margin_top">
		
			<SPAN class="menu_item1" onmouseover="this.className='mouseover1'" onmouseout="this.className='menu_item1'"> <A href="../cfd/cfd.html" class="menu">CFD</A></SPAN> 
			<SPAN class="menu_item2" onmouseover="this.className='mouseover2'" onmouseout="this.className='menu_item2'"> <A href="../activiteiten/agenda.html" class="menu">Activiteiten</A></SPAN> 
			<SPAN class="menu_item3" onmouseover="this.className='mouseover3'" onmouseout="this.className='menu_item3'"> <A href="../artikelen/index.html" class="menu">Artikelen</A></SPAN> 
			<SPAN class="menu_item4" onmouseover="this.className='mouseover4'" onmouseout="this.className='menu_item4'"> <A href="" class="menu">nogiets</A></SPAN> 
			<SPAN class="menu_item5" onmouseover="this.className='mouseover5'" onmouseout="this.className='menu_item5'"> <A href="../contact/contact.html" class="menu">Contact</A></SPAN> 

		<DIV ID="breadcrums">><A href="../index.html">Home</A></DIV>

		</DIV>
	</DIV>
	

	<DIV id="midimage">

		<DIV id="boxes" > 
			<DIV align="center" class="sub_cfd">
				<DIV><P class="box_top_white">Activiteiten:</P></DIV>
				<DIV>
					<UL class="box_list">
						<LI>-CFD?!</LI>
						<LI>-Visie</LI>
						<LI>-Geloofsgetuigenis</LI>
						<LI>-3 Rotsen</LI>
					</UL>
				</DIV>
			</DIV>
			<DIV id="spacer"></DIV>

			
			<DIV align="center" class="box110">
				<DIV><P class="box_top_white">Meer CFD</P></DIV>
				<DIV>
					<UL class="box_list">
						<LI>-Webwinkel</LI>
						<LI>-HisBride Ministries</LI>
						<LI>-Forum</LI>
						<LI>-Creative Expressions</LI>
					</UL>
				</DIV>
			</DIV>

		</DIV>

		<DIV id="content">
		<H2>Content</H2>
		<P>Content (removed for now)</p>			</DIV>

	</DIV>


	<DIV id="underimage"></DIV>
	<DIV id="footer">&copy Christian Fellowship Drachten</DIV>
</DIV>



</BODY>
</HTML>

Hey all,

I have a small problem. In my webpage stylesheet I have set the <input> tag as having a solid border of 1 in black. Now when I do text boxes this is fine. But when i do checkboxes it looks stupid so how do it so that on some input tags it works and other input tags it doesn't.

Thanks in advance.

Well here is the layout.. http://monarkstudios.ca/peter/

body_txt should be at the same top position as body_menu_txt.

On IE7 the layout turns out perfect (besides the above problem), but on Firefox the body tag kinda cuts out.

And lastly on IE6, it just looks messed entirely...

http://monarkstudios.ca/peter/screeen.jpg - IE6
http://monarkstudios.ca/peter/screen.JPG - IE7
http://monarkstudios.ca/peter/screenff.JPG - Firefox

I've been trying to solve these problems for quite sometime now, and just gave up.

Any help is appreciated.

Thanks,
Peter

like mostpeople i mademy site using FF and it worked fine till i tried it on IE.

the URL is
http://wakefieldfhs.co.uk/stu/snap/index.php

the inital problem is in F the .main class shows at 100% but in IE it shows only to the scale of the text.

also the links are in the wrong position too!

any ideas?

-----CSS-------

Code:

a:link {
	color:#0099FF;
	text-decoration:underline;
	 font-weight:bold;
	font-family :Verdana, Tahoma, Arial ;
}

a:visited {
color:#0099FF;
  text-decoration:underline;
  font-weight:bold;
}

a:hover {
	color:#0099FF;
	text-decoration:underline;
}

a:active {
	color:#0099FF;
	text-decoration:underline;
}

body
{
background-color:#CCCCCC;
font-family: Arial, Helvetica, sans-serif;
}
.header
{
	background-color:#000000;
	color:#FFFFFF;
	width:100%;
	height:15%;

}
.links
{
top:10%;

float:left;


}


.status
{
width:30%;
	background-color:#FFFFFF;
}
.main
{
background-color:#FFFFFF;
height:100%;


}

.logo
{
float:left;
position:static;
}

.footer
{
	background-color:#000000;
	width:100%;
	height:20px;
	margin: 0 auto;
	color:#FFFFFF;
	bottom:0px;
	
	
}


label
{
float: left;
width: 120px;
font-weight: bold;
}

input
{
width: 180px;
margin-bottom: 5px;
font: 11px Verdana, Sans-Serif;
}

#wrapper
{
width: 75%;
height:70%;
margin: 0 auto;
background-color:#FFFFFF;
border-color:#000000;
top:0px;
position:absolute;
left:12.5%;

}

#login-box
{

float: right;

}

http://86.7.141.216/neoxios%202

Read that please. It's all explained there.

Man I love how my site works fine in just about every browser and even across platforms in macosx and windows and yet ie still manages to royally retard my site.

http://www.unlimitedgamer.net/

Basically in IE6 there is a huge space between the search (top navigation area) and the header: wew.

Second at the end ot the news the 2 last posts, the text in the news decides it wants to travel to the magically empty space to the left and not display correctly.

I for one am beyond frustrated with trying to fix these errors, up until now i was on IE7 and just found out all these holes existed, not to mention ie6 was also pushing my navigation to the end of the page because it refuses to adhere to all the other browser standards of width and margin...

Any help I am thankful for, cause right now I have an atomic headache

I've got two child divs nested in a parent div. They are shown below. The problem I am having is that in IE 5.x for Mac, the top margins do not work, while the left margins are applied properly. The following works just fine in: safari, mozilla, firefox, opera, netscape, etc. It is only in IE for mac that the top margin is not applied and the two children are positioned improperly. I had originally gone with the margin-top declaration, but it didn't work, so I did the whole margin declaration. Padding as a replacement for margin has also not worked. Not sure if this helps narrow the problem down at all. It seems that only the vertical margins are not applied and only in this set of divs... If anyone knows of any fixes, hacks, or just sees some junk in my code, please let me know. All help is greatly appreciated!


CSS

#parent
{
width: 700px;
height: 66px;
}

#child1
{
width: 288px;
height: 56px;
margin: 8px 0 0 10px;
background-image: url(whatever);
background-repeat: no-repeat;
float: left;
}

#child2
{
width: 115px;
height: 40px;
margin: 14px 0 0 165px;
background-image: url(whatever);
background-repeat: no-repeat;
float: left;
}

HTML

<div id="header">
<div id="logo"></div>
<a href="" title="View Your Shopping Cart">
<div id="shoppingCart"></div>
</a>
</div>

Okay, so I'm making a site and I want 3 divs on the same line.

This is what I have in the .CSS:
Code:

#tm{
background: #000000 url(tmcont.gif) repeat-x;
width: 700px;
height: 30px;
text-align:  center;
}

#tmleft{
background: url(tmleft.gif) no-repeat;
width: 4px;
height: 30px;
}

#tmright{
background: url(tmright.gif) no-repeat;
width: 4px;
height: 30px;
}

And in the HTML document:
Code:

<body>
<div id="tmleft"></div><div id="tm"></div><div id="tmright"></div>
</body>

Site is here

In IE, the hr that contains the red line (bottom element) is a couple pixels below the above div. In Mozilla, it isn't. I had thought that divs have a break before and after them and I guess that could be why IE is displaying it like this.

Does anyone know how I can get the browsers to match? Because if they are the same, I could do a negative top margin.

thanks

I have been working on a new website. All I care is that it works on the latest browsers. I have it looking perfect in Netscape and Safari, but IE has some problems which I can't resolve.

See page he Problem Page

The problems are the main text area and bottom strip refuse to go 100% across the page.

How do you get .PNG files to work?

My sub-menus have some weird spacing.

If anyone could give me some tips on getting these fixed I would appreciate it. I wish I could just not expect anyone to use IE, ha!

The site I'm designing so far renders perfectly in Firefox and Opera, but has a lot of trouble in IE.

the address is: http://www.solinari.net/c4e/

As you will see, the navigation box is a smaller width and misplaced in IE, and the links beneath it break the box.

The CSS file is at http://www.solinari.net/c4e/style.css

http://tinyurl.com/5wgx4s

The first problem is that in IE the header menu does not go straight across, instead it does down the page like stairs. How do I fix this?

Secondly, on the products page, why are the bullet points behind the text?

Thanks

Here is the site http://www dot asylumaccess dot org slash joom

I know! I know! I should have been developing my site in multiple browsers simultaneously! But I put together a beautiful site in FF3 and then took a gander in IE6 and HOLY ****! It is just complete crap! I want to wrap my hands around the neck of Internet Explorer and choke it to death. No doubt this is not an uncommon feeling. Please help me put my mind to rest about this mess.

My specific problem: Despite having set width and height values in both the CSS and tables, IE6 is increasing the height the two cells in the right column and completely screwing my layout. I have no idea what I can do to fix this besides setting the width and height values! I have to use tables for reasons that are too long to get into right now.

What can I do to get the heights of these cells to set properly?

CSS (html follows) : Code:

/* CSS Document */
.upper-nav li {
	display: inline; /* Shows each item side-by-side */
	list-style-type: none; /* Gets rid of the bullet points */
	}
.upper-nav li a {
	color:#fff;
	/*font-size:1em;*/
  display: block;
  float: left;
  padding: 0 .25em; /* Provides horizontal separation between menu items */
  font-weight:bolder;
  font-size:12px;
}
.upper-nav ul {
margin-left:-30px;
}
li {
list-style-type:none;
}
.donate {
	border: none;
	background-color:#fff;
	/*width:370px;
	height:102px;*/
	text-align:right;
}

.container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */	
	/*height:auto; !important;  real browsers */
	/*height:100%;  IE6: treaded as min-height*/
	/*min-height:100%;  real browsers 	*/
	background-color:#fff;
	width:780px;
}


.upper-nav {
	width:370px;
	height:40px;
	background-color:#B3BB1C;
}
.main-content {
	width:350px;
	background-color:#fff;
	padding: 10px;
	font-family:"Times New Roman", Times, serif;
	height:100%;
}
.mini-col {
	width:185px;
	height:235px;
	background-image:url(../images/mini-col-bg.gif);
	background-repeat:no-repeat;
	/*background-color:#ccc;
	padding-left:10px;*/
	padding:0 5px;
	font-family:"Times New Roman", Times, serif;
}
#mini-col table {
margin-top:-10px;
}
.mini-col p {
margin-top:-10px;
}
div#side-nav {
	position:absolute;
	left:0px;
	top:400px;
	width:195px;
	background-color:#FFF;
	padding-left:5px;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers 	overflow:auto;*/
}
#side-nav h3 {
color:#0270af;
font-size:1em;
padding-left:5px;
}
#side-nav fieldset {
border:none;
}

#donate input {
padding: 20px 10px;
}

#col1 {
float:left;
width:195px;
background:#fff;
padding: 10px;
clear:left;
}
#col2 {
float:left;
width:350px;
background:#fff;
padding: 10px;
}

.moduletable_menu, .moduletable
{
color: #000;
}
.moduletable_menu h3 {
border-bottom: 1px solid #FFFFFF;
margin-bottom: 0px;
color:#0270af;
font-size:1em;
padding:5px;
}
.moduletable_menu ul {
margin-left: 20px;
margin-top: 10px;
padding: 5px;
font-size: .9em;
line-height:1.5em;
}
.moduletable div {
padding-left:10px;
font-size:8px;
}
.contentheading {
color: #F47F20;
font-size:1em;
font-weight:bold;
}
.contentpaneopen h1 {
font-size:1.2em;
border-bottom: 1px solid #244223;
/*padding: 10px;*/
}
.contentpaneopen td {
padding:0;
}
.gutter {padding:8px;}
a:link {
	color: #0270af;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0270af;
}

a:hover {
	text-decoration: underline;
	color: #B3BB1C;
}
a:active {
	text-decoration: none;
	color: #0270af;
}
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	margin:0;
	padding:0;
	height:100%; 
	background: #000;
	background-image:url(../images/bkgd.jpg);
	line-height:1.1em;
}
.article_column {
color:#666;
}
.container-table {
	background-color:#FFF;
	margin:auto;
}
.logo{
background-image:url(../images/logo-face.jpg); /*needed for container min-height */
background-repeat:no-repeat;
border:none;
}
.mainlevel-nav {
margin-top:-10px;
}

HTML:
Code:

<table cellpadding="0" cellspacing="0" class="container-table">
  <tr>
    <td>
	<table cellpadding="0" cellspacing="0">
      <tr>
        <td height="400" width="400" colspan="2" rowspan="3" class="logo">&nbsp;</td>
        <td width="390" height="100" class="donate"><jdoc:include type="modules" name="advert1" /></td>
      </tr>
      <tr>
        <td height="40" class="upper-nav" valign="middle" width="370"><jdoc:include type="modules" name="user3" /></td>
      </tr>
      <tr>
        <td rowspan="2" class="main-content" valign="top"><jdoc:include type="component" /></td>
      </tr>
      <tr>
        <td valign="top"><jdoc:include type="modules" name="left" style="xhtml" /></td>
        <td class="mini-col" valign="top"><jdoc:include type="modules" name="newsflash" /> </td>
        </tr>
      
    </table>
	</td>
  </tr>
</table>

I am using dreamweaver to put a spry menu bar into a page.
Until recently, the page was fine on both firefox and IE, but now, when you access the sub menu, under shop, while firefox displays the second menu in the correct place, the menu in IE displays from the top of the page, not under the original menu.

The CSS code for the nav bar..

The website is http://www.skiweb.uk.com

Sorry if this is a messy post, its my first!! Many thanks.

Code:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 22.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}

I have designed a site recently and have two small problems left to sort out.

The first is that I have a div full of thumbnails, under some of these I have a small 'new' to show that this image is new. This works fine in Safari/Firefox/Mozilla, and also works in IE 5+ with help of the box model hack, however IE6 posistions the text in the middle of the thumbnails.

You can see this at www.marcelbaker.com/portfolio.php
A sample of the html for this is
Code:

<div id="container1">
<div id="float">
<div id="drinks"><a class="selected" href="/portfolio.php?page=1&old="><br /><p class="new">new</p></a>
</div>
</div>
</div>

The css for the thumbails is:
Code:

#float {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#float a {
width: 45px;
float: left;
padding: 0;
margin: 0;
height: 45px !important;
height /**/:45px; /* for IE5/Win only */
}

#float a:hover, #float a.selected {
width: 45px;
background-position: -45px 0;
}

#float a:active {
width: 45px;
background-position: 0 0px;
}

.new {
text-align: center;
font-size: 9px;
color: #BB0000;
text-align: center;
margin-top: 41px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family: inherit;
margin-top: 27px;
}

With each of the thumbnails having its own rule to show its image and create a rollover effect. ie

Code:

#drinks a {
margin: 0px 17px 0px 0;
background: url(path/to/image.jpg) top left no-repeat;
margin: 0px 17px 0px 0;
voice-family: "\"}\"";
voice-family: inherit;
margin: 0px 17px 10px 0;
}
html>body #drinks a{
margin: 0px 17px 10px 0;
}

Any ideas on this?

My other problem is that on the clients section www.marcelbaker.com/clients.php
All the thumbnails appear 4 across a row (if applicable) except for Group M, here it only displays 3 on a line although the html and css is the same for all the client pages.
I've check to make sure the images aren't wider or anything like that.

This is a real head scratcher, I've been trying to figure this out for days with no luck. I really appreciate your help on these problems.

Many Thanks

Kieran