CSS problem in IE7

**Designer156** · Apr 6, 2010 09:44

Hi,

I'm working on a couple of sites currently and have just noticed that there's a bug in my code with IE7 browsers. Basically, I'm trying to display a horizontal menu and the search module in the same horizontal space. The way I've done it works fine in the latest browsers, but not in IE7. Can someone point me in the right direction please...

Thanks for any help.

URL: http://www.hheadtc.myzen.co.uk/

CSS:

Code:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size:12px;
   background-color:#ffffff;
   background-image:url(../images/background-gradient.png);
   background-repeat:repeat-x;
}


h2 {
}
h3 {
font-size:1.1em;
}


#wrapper{
   width:990px;
   margin:auto;
}

#header{
   background-image:url(../images/shadow-width.png);
   background-repeat: repeat-y;
}

#header-top{
   text-align:right;
   height:43px;
   background-image:url(../images/shadow-top.png);
   background-repeat:no-repeat;
   padding-right:32px;
   padding-top:15px;
   color:#FFFFFF;
}

#logo{
   float:left;
   height:281px;
   width:307px;
   background-image:url(../images/towncouncil-logo.gif);
   background-repeat:no-repeat;
   background-color:#FFFFFF;
   margin-left:32px;
}

#header_graphic{
   float:right;
   height:281px;
   width:619px;
   /*background-image:url(../images/head-anchor.jpg);
   background-repeat:no-repeat;
   background-color:#FFFFFF;*/
   margin-right:32px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#search {
   float:right;
   padding-top:8px;
   padding-right:40px;

}

#topmenu {
   /*border:solid 1px;*/
   clear:both;
   padding-top:5px;
   background-image:url(../images/shadow-width.png);
   background-repeat: repeat-y;
   font-size:17px;
   font-weight:normal;

}


#topmenu ul {
   padding:0px;
   padding-top:11px;
   margin:auto;
   height:42px;
   /*border:solid 1px;*/
   width:926px;
   list-style:none;
   background-image:url(../images/top-menu-grey.png);
   background-repeat: repeat-x;
   }

#topmenu li {
   display:inline;
}

#topmenu li:hover {
}

#topmenu a {
   /*border:solid 1px #000000;*/
   text-decoration:none;
   color:#FFFFFF;
   padding:11px 13px 12px 13px;
   background-image:url(../images/top-separater.gif);
   background-repeat:no-repeat;
   background-position:right;
}

#topmenu a:hover {
   background-color: #D9B11E;
   
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#searchbox{
   float:right;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CONTENT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#content {
   /*border:solid 1px #000000;*/
   background-image:url(../images/shadow-width.png);
   background-repeat:repeat-y;
}

#clearall {
   clear:both;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx LEFT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#left {
   float:left;
   width:215px;
   margin-left:15px;
   margin-right:15px;
   margin-top:10px;
   margin-bottom:50px;
   padding:0px;
   padding-left:18px;
   /*border:1px solid #000000;*/

}

#left h3{
   color:#ffffff;
   background-color:#7B199B;
   padding:5px 5px 5px 11px;
   margin:0;
   margin-bottom:0px;
   font-size:15px;
   font-weight:normal;
   font-style:normal;
   vertical-align: middle;
}

#left .moduletable_events h3{
   background-color:#FF7F00;
}

#left .moduletable_latest h3{
   background-color:#BF0000;
}

#left ul{
   padding:0;
   margin:0;
   margin-bottom:15px;
   list-style-type:none;
   background-color:#E5E5E5;
}


#left li{
   display:block;
   border-top: solid 1px #ffffff;
}

#left li:hover{
   background-color:#D3D3D3;
}

#left .contentpaneopen {
   padding-left:15px;
   padding-right:15px;

}

#left a {
   display:block;
   text-decoration:none;
   padding:7px 5px 7px 25px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight:normal;
   font-size:13px;
   background-image:url(../images/bullet.png);
   background-repeat:no-repeat;
   background-position:0;
   color:#3F3F3F;
   
}

#left a:link {

}

#left a:visited {
}

#left a:hover {

}
#left a:active {
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Right xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#right {
   float:right;
   width:215px;
   margin-left:15px;
   margin-right:15px;
   margin-top:0px;
   margin-bottom:50px;
   padding:0px;
   padding-right:18px;
   /*border:1px solid #000000;*/

}



#right h3{
   color:#ffffff;
   background-color:#FF7F00;
   padding:5px 5px 5px 11px;
   margin:0;
   margin-bottom:0px;
   font-size:15px;
   font-weight:normal;
   font-style:normal;
   vertical-align: middle;
}

#right .moduletable_poll h3{
   background-color:#00A33D;
}




#right .moduletable_poll{
   background-color:#E5E5E5;
   font-size:13px;
}

#right .poll_poll{
   padding-top:7px;
}

#right ul{
   padding:0;
   margin:0;
   margin-bottom:15px;
   list-style-type:none;
   background-color:#E5E5E5;
}


#right li{
   display:block;
   border-top: solid 1px #ffffff;
}

#right li:hover{
   background-color:#D3D3D3;
}

#right .contentpaneopen {
   padding-left:15px;
   padding-right:15px;

}

#right a {
   display:block;
   text-decoration:none;
   padding:7px 5px 7px 25px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight:normal;
   font-size:13px;
   background-image:url(../images/bullet.png);
   background-repeat:no-repeat;
   background-position:0;
   color:#3F3F3F;
   
}

#right a:link {

}

#right a:visited {
}

#right a:hover {

}
#right a:active {
}

#right .search {
   margin-top:10px;
   background-color: #999999;
   padding:5px;
}

#right a.rightimage {
   text-decoration:none;
   padding:0px;
   background-image:none;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Centre xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#mainbody {
   font-size:15px;
   margin:0;
   padding:0;
   padding-top:8px;
   color:#3F3F3F;
   line-height:18px;
   /*width:485px;*/
   margin-left:251px;
   /*border:1px solid #000000;*/
   }

.contentheading {
   color:#393491;
   font-size:26px;
   font-weight:normal;
   padding-left:0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   padding-bottom:15px;
}

h1 {
   font-weight: normal;
   font-size:18px;
   color:#393491;
   /*background-color: #EAEAEA;*/
   padding:4px 4px 4px 0px ;
   border-bottom:1px solid #393491;
}
.home_title{
   margin-top:0px;
   background-color: #393491;
   padding:5px 10px 5px 10px;
   font-size:18px;
   color:#FFFFFF;
   margin-bottom:5px;
}
.home_text{
   background-color:#E2E2F2;
   padding:5px 10px 5px 10px;
}

.small {
   font-size:11px;
   color:#999999;
   line-height:12px;
}

.createdate {
   line-height:12px;
   font-size:11px;
   color:#999999;
}

#mainbody img{
   padding:5px;
   margin:5px 15px 5px 5px ;
   border:1px solid #999999;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Polls xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#mainbody .pollstableborder{
   
      /*width:450px;
   border:1px solid #000000;*/
}
#mainbody .pollstableborder img{
   border:none;
   }

#mainbody .smalldark{
   width:100px;
   padding-left:15px;
   font-size:12px;
/*   border:1px solid #000000;*/
}

#mainbody .sectiontableentry1{
   text-align:center;
   background-color: #E4E4E4;
}

#mainbody .sectiontableentry0{
   text-align:center;
   background-color: #EFEFEF;
}

#mainbody .componentheading{
   color:#393491;
   font-size:26px;
   font-weight:normal;
   padding-left:0px;
   line-height:28px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   padding-bottom:15px;
}

/* xxxxxxxxxxxxxxx Poll Module xxxxxxxxxxxxxxxxxxxxx */
#right .pollstableborder_poll {
   width:100%;

}
#right .sectiontableentry1_poll {
   padding:3px;
}
#right .sectiontableentry2_poll {
   padding:3px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#footer .moduletable_footer_info{
   color:#8C8C8C;
}

#footer{
   text-align:center;
   clear:both;
   background-image:url(../images/shadow-width-grey.png);
   background-repeat: repeat-y;
   margin:0px;
}


#footer ul {
   padding:0px;
   padding-top:11px;
   margin:auto;
   height:42px;
   /*border:solid 1px;*/
   width:926px;
   list-style:none;
   }

#footer li {
   display:inline;
}

#footer li:hover {
}


#footer a {
   text-decoration:none;
   color:#666666;
   border-right:1px solid #666666;
   padding:0px 10px 0px 10px;
   
}

#footer a:link {
   
}

#footer a:visited {
   
}

#footer a:hover {
      color: #333333;

}
#footer a:active {
   
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Info xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#footer .moduletable_footer_info{
   color:#8C8C8C;
}

#footer .moduletable_footer_info a {
   text-decoration:none;
   color:#8C8C8C;
   border:none;
   padding:0px;
   
}

#footer .moduletable_footer_info a:hover {
   color:#333333;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Credits xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#credits{
   background-image:url(../images/shadow-bottom-grey.png);
   background-repeat: no-repeat;
   margin:0px;
   height:50px;
   padding-top:30px;
   color:#999999;
   font-size:10px;
}








a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

a:link img {
   border:none;
}

**RyanReese** · Apr 6, 2010 10:03

Hi, you have an XML declaration above hte doctype

Code:

<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>

That's triggering quirks mdoe for all of IE. Remove that

. See if it helps.

**Designer156** · Apr 6, 2010 10:14

Removed that (i think) but no joy yet.??

**RyanReese** · Apr 6, 2010 10:25

Make sure your HTML is valid before we start

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<head>

Two <<head> tags and not one HTML tag.

No point trying to debug if the error is caused by validation

. It's the first step in debugging

**Designer156** · Apr 6, 2010 10:37

Apart from 4 errors on line 41 (<input type="hidden" name="Itemid" value=1 />) it all validates now, however, it wanted to me ato put back in the XML declaration and told me to remove the HTML tags I put in.

For a bit of background info, this site is built in the Joomla CMS and I'm editing the index.php file in my template

**RyanReese** · Apr 6, 2010 10:44

Hi, could you stop updating the CSS with new stuff? Every refresh brings a new look upon the page

.

**Designer156** · Apr 6, 2010 10:47

oops, sorry

**RyanReese** · Apr 6, 2010 10:52

It's a bit awkward because of your setup. You'd need to rework the grayish background image to a differnet parent, b ut this CSS will patch the page up

Code:

#topmenu{overflow:hidden;/*contain the floats*/}
#topmenu ul{width:auto;/*just remove the width here*/}

**Designer156** · Apr 6, 2010 10:58

Brill, yeah that's sorted it, thanks - was the width the main problem then?

Any ideas what I could hang the background image on?

**RyanReese** · Apr 6, 2010 11:00

Basically there wasn't enough room

I see you got the background image problem sorted though

**Designer156** · Apr 6, 2010 11:05

Thanks again for your help.

The bacground image doesn't extend across the top fully in IE7, but I'll have a crack at solving that now.

**RyanReese** · Apr 6, 2010 11:16

Try specifing the width of the search/menu so that the total equates to the parents. Right now it's probably just luck it's appearing correct in FF (untested)

**Paul O'B** · Apr 6, 2010 12:05

The problem is that when the ul gets haslayout it will steer clear of the floated search and not extend fully.

You could remove haslayout by removing the width and height from the ul.

e.g.

Code:

#topmenu {
    /*border:solid 1px;*/
    clear:both;
    padding-top:5px;
    background-image:url(http://www.hheadtc.myzen.co.uk/templates/holyhead_TC/images/shadow-width.png);
    background-repeat: repeat-y;
    font-size:17px;
    font-weight:normal;
    overflow:hidden;
    width:926px;
    margin:auto;
}
#topmenu ul {
    margin:0;
    padding:11px 0;
    /*border:solid 1px;*/
    list-style:none;
    background-image:url(http://www.hheadtc.myzen.co.uk/templates/holyhead_TC/images/top-menu-grey.png);
    background-repeat: repeat-x;
    }

That will allow the menu to be full width but it's a rather fragile construction.

Instead you should move the search form into the first list element and make the whole thing more robust.

Code:

    <div id="topmenu">
            <div class="moduletable_menu">
                <ul class="menu">
                    <li id="search">
                        <form action="index.php" method="post">
                            <div class="search">
                                <input name="searchword" id="mod_search_searchword" maxlength="20" alt="Search" class="inputbox" type="text" size="16" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
                                <input type="submit" value="Search" class="button" onclick="this.form.searchword.focus();"/>
                            </div>
                            <input type="hidden" name="task"   value="search" />
                            <input type="hidden" name="option" value="com_search" />
                            <input type="hidden" name="Itemid" value=1 />
                        </form>
                    </li>
                    <li id="current" class="active item1"><a href="http://www.hheadtc.myzen.co.uk/"><span>Home</span></a></li>
                    <li class="item3"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=3"><span>About us</span></a></li>

Code:

#search {
    float:right;
    padding-top:0px;
    padding-right:40px;
}

**Designer156** · Apr 6, 2010 12:26

Right, I think we're sorted now chaps - thanks again for that.

One very small annoying this that's bugging me now - in the latest browsers (fine in IE7), the forum image (top of the right column) is 10-12px further down the page that the centre content or the left column. I can't for the life of me figure out why. It may even be something I've added into the code a few days ago and forgot.

Any ideas?

Latest css:

Code:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#ffffff;
	background-image:url(../images/background-gradient.png);
	background-repeat:repeat-x;
}


h2 {
}
h3 {
font-size:1.1em;
}


#wrapper{
	width:990px;
	margin:auto;
}

#header{
	background-image:url(../images/shadow-width.png);
	background-repeat: repeat-y;
}

#header-top{
	text-align:right;
	height:43px;
	background-image:url(../images/shadow-top.png);
	background-repeat:no-repeat;
	padding-right:32px;
	padding-top:15px;
	color:#FFFFFF;
}

#logo{
	float:left;
	height:281px;
	width:307px;
	background-image:url(../images/towncouncil-logo.gif);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	margin-left:32px;
}

#header_graphic{
	float:right;
	height:281px;
	width:619px;
	margin-right:32px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#search {
	float:right;
	padding-right:7px;
	padding-top:7px;

}

#topmenu {
	/*border:solid 1px;*/
	clear:both;
	margin:0px 32px 0px 32px;
	background-image:url(../images/top-menu-grey.png);
	background-repeat: repeat-x;
	height:42px;
	font-size:17px;
	font-weight:normal;
	overflow:hidden;
	border-top:5px solid #FFFFFF;

}


#topmenu ul {
	padding:11px 0px 13px 0px;
	margin:auto;
	list-style:none;
	
	}

#topmenu li {
	display:inline;
}

#topmenu li:hover {
}

#topmenu a {
	/*border:solid 1px #000000;*/
	text-decoration:none;
	color:#FFFFFF;
	background-image:url(../images/top-separater.gif);
	background-repeat:no-repeat;
	background-position:right;
	font-size:16px;
	padding:13px 13px 13px 13px;
}

#topmenu a:hover {
	background-color: #D9B11E;
	
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#searchbox{
	float:right;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CONTENT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#content {
	/*border:solid 1px #000000;*/
	background-image:url(../images/shadow-width.png);
	background-repeat:repeat-y;
}

#clearall {
	clear:both;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx LEFT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#left {
	float:left;
	width:215px;
	margin-left:15px;
	margin-right:15px;
	margin-top:10px;
	margin-bottom:50px;
	padding:0px;
	padding-left:18px;
	/*border:1px solid #000000;*/

}

#left h3{
	color:#ffffff;
	background-color:#7B199B;
	padding:5px 5px 5px 11px;
	margin:0;
	margin-bottom:0px;
	font-size:15px;
	font-weight:normal;
	font-style:normal;
	vertical-align: middle;
}

#left .moduletable_orange h3{
	background-color:#FF7F00;
}

#left .moduletable_red h3{
	background-color:#BF0000;
}

#left ul{
	padding:0;
	margin:0;
	margin-bottom:15px;
	list-style-type:none;
	background-color:#E5E5E5;
}


#left li{
	display:block;
	border-top: solid 1px #ffffff;
}

#left li:hover{
	background-color:#D3D3D3;
}

#left .contentpaneopen {
	padding-left:15px;
	padding-right:15px;

}

#left a {
	display:block;
	text-decoration:none;
	padding:7px 5px 7px 25px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:13px;
	background-image:url(../images/bullet.png);
	background-repeat:no-repeat;
	background-position:0;
	color:#3F3F3F;
	
}

#left a:link {

}

#left a:visited {
}

#left a:hover {

}
#left a:active {
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Right xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#right {
	float:right;
	width:215px;
	margin-left:15px;
	margin-right:15px;
	margin-top:10px;
	margin-bottom:50px;
	padding:0px;
	padding-right:18px;
	/*border:1px solid #000000;*/

}



#right h3{
	color:#ffffff;
	background-color:#FF7F00;
	padding:5px 5px 5px 11px;
	margin:0;
	margin-bottom:0px;
	font-size:15px;
	font-weight:normal;
	font-style:normal;
	vertical-align: middle;
}

#right .moduletable_poll h3{
	background-color:#00A33D;
}




#right .moduletable_poll{
	background-color:#E5E5E5;
	font-size:13px;
}

#right .poll_poll{
	padding-top:7px;
}

.moduletable {
	padding:0px;
	margin:0px;
}

#right ul{
	padding:0;
	margin:0;
	margin-bottom:15px;
	list-style-type:none;
	background-color:#E5E5E5;
}


#right li{
	display:block;
	border-top: solid 1px #ffffff;
}

#right li:hover{
	background-color:#D3D3D3;
}

#right .contentpaneopen {
	padding-left:15px;
	padding-right:15px;

}

#right a {
	display:block;
	text-decoration:none;
	padding:7px 5px 7px 25px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:13px;
	background-image:url(../images/bullet.png);
	background-repeat:no-repeat;
	background-position:0;
	color:#3F3F3F;	
}

#right a:link {

}

#right a:visited {
}

#right a:hover {

}
#right a:active {
}

/*#right .search {
	margin-top:10px;
	background-color: #999999;
	padding:5px;
}*/

#right a.rightimage {
	text-decoration:none;
	padding:0px;
	margin:0px;
	background-image:none;
	/*border:1px solid #000000;*/
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Centre xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#mainbody {
	font-size:15px;
	margin:0;
	padding:0;
	padding-top:8px;
	color:#3F3F3F;
	line-height:18px;
	/*width:485px;*/
	margin-left:263px;
	margin-right:263px;
	/*border:1px solid #000000;*/
	}

.contentheading {
	color:#393491;
	font-size:24px;
	font-weight:normal;
	padding-left:0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:15px;
	line-height:24px;
}

#mainbody .componentheading{
	color:#393491;
	font-size:26px;
	font-weight:normal;
	padding-left:0px;
	line-height:28px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:5px;
	border-bottom:1px solid #393491;
	margin-bottom:15px;
}

#mainbody .contentpaneopen {
	width:100%;
}


h1 {
	font-weight: normal;
	font-size:18px;
	color:#393491;
	/*background-color: #EAEAEA;*/
	padding:4px 4px 4px 0px ;
	border-bottom:1px solid #393491;
}
.home_title{
	margin-top:0px;
	background-color: #393491;
	padding:5px 10px 5px 10px;
	font-size:18px;
	color:#FFFFFF;
	margin-bottom:5px;
}
.home_text{
	background-color:#E2E2F2;
	padding:5px 10px 5px 10px;
}

.small {
	font-size:11px;
	color:#999999;
	line-height:12px;
}

.createdate {
	line-height:12px;
	font-size:11px;
	color:#999999;
}

#mainbody img{
	padding:5px;
	margin:5px 15px 5px 5px ;
	border:1px solid #999999;
}

#mainbody  img.noborder{
	border:none;
	padding:0px;
	margin:0px; 

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Polls xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#mainbody .pollstableborder{
	
		/*width:450px;
	border:1px solid #000000;*/
}

#mainbody .pollstableborder img{
	border:none;
	}

#mainbody .smalldark{
	width:100px;
	padding-left:15px;
	font-size:12px;
/*	border:1px solid #000000;*/
}

#mainbody .sectiontableentry1{
	text-align:center;
	background-color: #E4E4E4;
}

#mainbody .sectiontableentry0{
	text-align:center;
	background-color: #EFEFEF;
}


/* xxxxxxxxxxxxxxx Poll Module xxxxxxxxxxxxxxxxxxxxx */
#right .pollstableborder_poll {
	width:100%;

}
#right .sectiontableentry1_poll {
	padding:3px;
}
#right .sectiontableentry2_poll {
	padding:3px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#footer .moduletable_footer_info{
	color:#8C8C8C;
}

#footer{
	text-align:center;
	clear:both;
	background-image:url(../images/shadow-width-grey.png);
	background-repeat: repeat-y;
	margin:0px;
}


#footer ul {
	padding:0px;
	padding-top:11px;
	margin:auto;
	height:42px;
	/*border:solid 1px;*/
	width:926px;
	list-style:none;
	}

#footer li {
	display:inline;
}

#footer li:hover {
}


#footer a {
	text-decoration:none;
	color:#666666;
	border-right:1px solid #666666;
	padding:0px 10px 0px 10px;
	
}

#footer a:link {
	
}

#footer a:visited {
	
}

#footer a:hover {
		color: #333333;

}
#footer a:active {
	
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Info xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#footer .moduletable_footer_info{
	color:#8C8C8C;
}

#footer .moduletable_footer_info a {
	text-decoration:none;
	color:#8C8C8C;
	border:none;
	padding:0px;
	
}

#footer .moduletable_footer_info a:hover {
	color:#333333;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Credits xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#credits{
	background-image:url(../images/shadow-bottom-grey.png);
	background-repeat: no-repeat;
	margin:0px;
	height:50px;
	padding-top:30px;
	color:#999999;
	font-size:10px;
}








a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

a:link img {
	border:none;
	padding:0px;
	margin:0px;
}

**RyanReese** · Apr 6, 2010 12:36

Hi, IE7 is displaying correctly because margin collapse doesn't happen on haslayout elements, aka "#right".

The <p>'s margin inside #right is causing it to display the image down. Set the <p>'s margins to 0

Code: