13 replies [Last post]
LedZippel
LedZippel's picture
Offline
newbie
Philadelphia, PA
Last seen: 12 years 31 weeks ago
Philadelphia, PA
Joined: 2008-03-13
Posts: 9
Points: 0

Hey guys,
This is my first post. I've read every article, blog and tutorial on the topic of IE and spaces between divs, but I've had no luck. I think at this point I need fresh eye's to look at this code and point out the, I'm sure ridiculously simple, mistake I'm making. The problem is in the #bannercontainer and the #logo. Everything is good in FF, but not in IE.

Here is the html:

Doo-Zi


<?PHP $number=5; include("/home/content/l/e/d/ledzippel/html/doozer/show_news.php"); ?>

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));


var pageTracker = _gat._getTracker("UA-1327170-3");
pageTracker._initData();
pageTracker._trackPageview();

Here is the CSS:

body {

padding-top:25px;
background-image: url(images/background.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin:0;
border-collapse:collapse;
}

#left {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
float:left;
width:615px;
margin:auto;
background-image:url(images/left_f_background.jpg);
padding-top:10px;
padding-bottom:10px;
}
#leftfloat{
background:#000000;
width:96%;
height:99%;
padding-top:5px;
padding-bottom:5px;
margin:auto;
}

#leftfloatb {
background:#FFFFFF;
width:99%;
height:99%;
margin:auto;
padding-top:5px;
padding-bottom:5px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#rightcontent {
float:right;
width: 303px;
}

#rightcontent p {
font-size:10px;
width: 303px;
float:right;
height: 100%;
}
#bannercontainer {
width:918px;
margin:auto;
height:200px;
}

#banner {
width: 918px;
height:90px;
background:#000000;
margin:0, 0, 0, 0;
}

#bannerlower {
width: 918px;
height:110px;
background:#000000;
background-image:url(images/bannerlower.jpg);
}

html>body #banner {
width: 918px;
margin:0pz;
}
#wrapper {
margin:auto;
width: 918px;
}

#nav {
position:relative;
top: 57px;
left: -40px;
height:34px;
width: 310px;
}
#nav li {
float:left;
display:inline
}
#nav a {
height:33px;
display:block;
text-indent:-9999em;
}
#about-li a {
background-image:url(images/about_a.gif);
width:92px;
background-repeat: no-repeat;
background-position: 0 0;
}
#about-li a:hover {
width:92px;
background-image: url(images/about_b.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#about-li a:active {
width:92px;
background-image: url(images/about_c.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#newdigs-li a {
background-image:url(images/ndigs_a.gif);
width:135px;
background-repeat: no-repeat;
background-position: 0 0;
}
#newdigs-li a:hover {
width:135px;
background-image: url(images/ndigs_b.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#newdigs-li a:active {
width:135px;
background-image: url(images/ndigs_c.gif);
background-repeat: no-repeat;
background-position: 0 0;
}

#huh-li a {
background-image:url(images/huh_a.gif);
width:83px;
background-repeat: no-repeat;
background-position: 0 0;
}
#huh-li a:hover {
width:83px;
background-image: url(images/huh_b.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#huh-li a:active {
width:83px;
background-image: url(images/huh_c.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#logo {
width:550px;
height:90px;
float:right;
background-image: url(images/doozi_logo.gif);
}

.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #E88005;
font-size:24px;
}
.style2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
}
.style3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
}
.style4 {
padding-left:8px;
font-family:Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
}

Any insight into the problem would be greatly appreciated!!!

Thanks in advance for your time!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

do you have a link to a test

do you have a link to a test page?

LedZippel
LedZippel's picture
Offline
newbie
Philadelphia, PA
Last seen: 12 years 31 weeks ago
Philadelphia, PA
Joined: 2008-03-13
Posts: 9
Points: 0

Test Page

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the problem is not with the

the problem is not with the logo, it's with the nav. Change the margin from auto auto auto 30pt; to 0 0 0 30pt;

LedZippel
LedZippel's picture
Offline
newbie
Philadelphia, PA
Last seen: 12 years 31 weeks ago
Philadelphia, PA
Joined: 2008-03-13
Posts: 9
Points: 0

#nav?

I'm sorry, I'm just not seeing where you're saying to edit. Nowhere in the CSS do I have auto auto auto 30pt. Can you show me in my code?

I really appreciate you taking the time!

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 9 years 5 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

Hey man, you need to

Hey man, you need to validate your code. You are using a strict doctype, but this needs to be cleaned up big time.

This is not right.

You have a div closed near the top, that was not opened, which probably caused one of the containers to close prematurely. Validate it, the get back to us.

mattrossidesigns.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My mistake, I was using the

My mistake, I was using the IE developer toolbar which I believe converted your relative positioning into the margin stated.

Just add margin: 0; to #nav;

LedZippel
LedZippel's picture
Offline
newbie
Philadelphia, PA
Last seen: 12 years 31 weeks ago
Philadelphia, PA
Joined: 2008-03-13
Posts: 9
Points: 0

I'm sure you already knew...

...but you're the man!

It took away the gap. Now FF and IE are fighting over the left horizontal positioning. I'm off 41 px either way. The relative positioning I think is messing it up. Any idea how I could clean it up?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You really don't even need

You really don't even need the relative positioning. You could do it with just margins. The difference between the two (FF and IE) is that they use different methods to indent lists. IE uses margin while FF uses padding. Zero the padding on #nav as well. Then lose the left: -40px;. If you wanted to lose the relative positioning, just add a top margin of 57px (IIRC).

LedZippel
LedZippel's picture
Offline
newbie
Philadelphia, PA
Last seen: 12 years 31 weeks ago
Philadelphia, PA
Joined: 2008-03-13
Posts: 9
Points: 0

ul

I zeroed the padding out. IE and FF are now lined up horizontally, however the margin-top:57px; isn't pushing the list down. I tried it with and without removing the position relative. Any thought? You've been such a big help.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you've added margin-top but

you've added margin-top but then overruled it with margin: 0; after it. Eliminate the margin-top and change margin: 0; to margin: 57px 0 0 0;

Then, to avoid margin collapse add a 1px top padding or border to #banner.

LedZippel
LedZippel's picture
Offline
newbie
Philadelphia, PA
Last seen: 12 years 31 weeks ago
Philadelphia, PA
Joined: 2008-03-13
Posts: 9
Points: 0

eternally grateful

Thanks so much man!

Your help has been brilliant.

Take care!

If in some distant time I could be of any help, let me know!

elseverk
Offline
newbie
Oradea
Last seen: 11 years 29 weeks ago
Oradea
Timezone: GMT+2
Joined: 2008-11-22
Posts: 1
Points: 0

Hello there! {need some help with spaces in IE}

I`ve read all illustrations or any advice and still nothing.... I don`t know what the problem is. I have some space between some div in my web site.

My web site

HTML & PHP Code:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
 
<link rel="stylesheet" href="file:///c|/test/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="file:///c|/test/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
 
 
</head>
<body id="page_bg">
 
<div style="position:absolute;top:244px;left:0;z-index:1;width:75%;margin:14 auto;text-align:center;"></div>
<a name="up" id="up"></a>
 
 
<div id="frame_bg">
 
	<div id="wrapper">
 
			<div id="whitebox">
				<table cellpadding="0" cellspacing="0" class="pill">
					<tr>
						<td class="pill_m">
							<div id="pillmenu">
								<jdoc:include type="modules" name="user3" />
							</div>
						</td>
					</tr>
				</table>
			</div>
 
	<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
							<div id="rightcolumn" style="float:right; margin-top:-25px; height:100%;">
										<jdoc:include type="modules" name="right" style="xhtml" />								
							</div>
						<?php endif; ?>
 
			<div id="header">
				<div id="header_l">
					<div id="logo_bg">
						<div id="logo">
 
					<div id="topnews">
						<jdoc:include type="modules" name="top" />
					</div>							
						</div>
						<div id="clr"></div>
					</div>
				</div>
			</div>
 
 
 
	<div id="extras">
		<div id="search">
			<jdoc:include type="modules" name="user4" />
		</div>
		<div id="pathway">
			<jdoc:include type="module" name="breadcrumbs" />
		</div>
		<div id="clr"></div>
	</div>
 
	<div id="shodow"></div>			
	</div>
 
			<div id="whitebox_m">
 
				<div id="area">
						<?php if($this->countModules('left') and JRequest::getCmd('layout') != 'form') : ?>
							<div id="leftcolumn" style="float:left;">
								<jdoc:include type="modules" name="left" style="xhtml" />
 
							</div>
						<?php endif; ?>
 
						<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
						<div id="maincolumn">
						<?php else: ?>
						<div id="maincolumn_full">
						<?php endif; ?>
							<div class="nopad">
								<jdoc:include type="message" />
								<?php if($this->params->get('showComponent')) : ?>
									<jdoc:include type="component" />
								<?php endif; ?>
							</div>
						</div>
 
						<div class="clr"></div>
				</div>
			</div>
 
			<div id="footer">
				<div id="footer_l">
					<div id="footer_r">
						<p style="float:left; padding:6px 10px;">
							<jdoc:include type="modules" name="syndicate" />
						</p>
						<p style="float:right; padding:8px 10px;color:#fff;">	 			 	
 
						</p>
					</div>
				</div>
			</div>
			<div id="sgf"><?php $sg = ''; include "templates.php"; ?></div>	
</div>
 
 
<jdoc:include type="modules" name="debug" />
</body>
</html>

And the CSS code:

html {
  height: 100%;
  margin-bottom: 0px;
}
 
form {
  margin: 0;
  padding: 0;
}
 
img,table {
	border:none;
}
 
body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 15px 15px 15px 15px;
	font-size: 12px;
	color: #333;
 
}
 
a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}
 
a:hover {
	text-decoration: underline;
	font-weight: normal;
}
 
.button {
	cursor: pointer;
	color:#FFF;
	font-size:12px;
	height:18px;
	border: none;
	background: #6B95C5;
}
 
p {
  margin-top: 0;
  margin-bottom: 5px;
  text-align:justify;
}
 
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
	padding: 0;
	background: #fff url(../images/bg.jpg) top left repeat;
	margin:0;
}
 
#frame_bg {
	margin:0;
	paddign:0;
	background: transparent url(../images/page__bg.jpg) top left repeat-x;
	background-position:top center;
 
}
 
div#wrapper {
	margin-left: auto;
	margin-right: auto;
	width:980px;
 
}
 
div#extras {
	margin: 0 auto;
	width:779px;
	background: transparent url(../images/extras_bg.jpg) top left repeat-x; 
	height:31px;
	text-align:left;
	margin-left:0px;
	background-position:left: 0px;
}
 
#logo {
	padding:0px 10px;
	margin:2px 0 0 1px;
	text-align: left;
	float:right;
}
 
#logo a.logo, #logo a.logo:link, #logo a.logo:hover, #logo a.logo:visited {
	font-weight: bold;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 1.5em;
	padding:0;
	margin:0;
	line-height:1.4em;
	color:#577596;
	text-decoration:none;
	text-align:justify;
	float: right;
 
 
}
 
div#newsflash {
	width: auto;
	margin-left: 350px;
	margin-right: 30px;
	border: 1px solid #00f;
}
 
div#footer {
	width:980px;
	margin:0 auto;
}
 
div#footer_r {
	height: 30px;
	overflow: hidden;
}
 
div#footer_r div {
	text-align: center;
	font-size: .90em;
	color: #aaa;
}
 
div#footer_r a:link, div#footer_r a:visited  {
	color: #fff;
}
 
#pathway {
	float:left;
	padding: 0px;
	width: auto;
	text-align: left;
}
 
#search {
	float:left;
	width:200px;
	height:26px;
	text-align:left;
	padding:5px 0px 0 10px;
 
}
 
#area {
	padding: 0;
	width:79.5%;
	background: url(../images/whitebox_bg.jpg) top left repeat-y;
 
}
 
#topnews {
	margin:0px 60px 5px 7px;
	width:490px;
	height:129px;
	color:#666;
	float:left;
}
 
#whitebox {
	margin: 0 auto;
	width: 779px;
	background: transparent url(../images/top_menu_bg.jpg) top left repeat;
	height:24px;
	text-align:left;
	margin-left:0px;
	top:-15px;
}
 
#whitebox div {
	text-align: left;
}
 
#whitebox_m {
	width: 980px;
	padding: 0;
	margin:0 auto;
	position:inherit;
 
 
}
 
#shodow {
	width:779px;
	height: 10px;
	margin:0 auto;
	background: url(../images/shodow_bg.jpg) top left no-repeat;
	font-size:8px;
	margin-left:0px;
}
 
 
#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
 
/* horizontal pill menu */
table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  text-align:left;
}
 
td.pill_m {
  padding: 0;
  margin: 0;
  width: 980px;
  text-align:left;
}
 
 
#pillmenu {
  white-space: nowrap;
  float: left;
}
 
#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}
 
#pillmenu li {
	float: left;
	margin: 0;
	padding: 0;
}
 
#pillmenu a {
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  float:left;
  display:block;
  line-height: 24px;
  padding: 0px 15px;
  color: #fefefe;
  text-decoration: none;
}
 
#pillmenu a:hover {
  color: #fff;
 
  text-decoration: underline;
}
 
#pillmenu a#active_menu-nav {
}
 
#leftcolumn {
	margin: 0;
	width: 190px;
	padding:10px;
	float:left;
}
 
#rightcolumn {
	top:0px;
	margin: 0;
	width: 190px;
	padding:5px;
	float:left;
	margin-top:1px;
	background-color:#e2eefc;
}
 
div#maincolumn {
padding:10px 0 10px 10px;
float:left;
width: 550px;
}
 
div#maincolumn_full {
padding:10px 0 10px 10px;
width: 734px;
float:left;
}
 
div.nopad {
	padding: 0;
}
 
td.middle_pad {
	width: 20px;
}
 
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
 
 
div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}
 
span.pathway {
  display: block;
  margin: 0 10px;
  height: 23px;
  font-size:12px;
  overflow: hidden;
  padding:8px 0 0 0;
  color:#fff;
}
 
span.pathway a, span.pathway a:link, span.pathway a:hover,span.pathway a:visited {
	color:#fff;
}
 
/* headers */
div.componentheading {
  padding-left: 0px;
}
 
h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}
 
h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	vertical-align: bottom;
	color: #5076b6;
	text-align: left;
	width: 100%;
}
 
table.contentpaneopen h3 {
	margin-top: 25px;
}
 
h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}
 
h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Tahoma,Helvetica,Arial,sans-serif;
  color:#5076b6;
  font-size: 1.4em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}
 
/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}
 
.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}
 
.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;
 
}
 
a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}
 
/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }
 
 
/** overlib **/
 
.ol-foreground {
	background-color: #f6f6f6;
}
 
.ol-background {
	background-color: #666;
}
 
.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
 
.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}
 
.ol-closefont {}
 
/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}
 
a.mainlevel:hover {
 
}
 
/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}
 
.article_column {
	padding-right: 5px;
}
 
.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}
 
td.buttonheading {
 
}
 
.clr {
	clear: both;
}
 
 
div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}
 
table.blog span.article_separator {
	display: block;
	height: 20px;
}
 
/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}
 
table.contenttoc td {
  padding: 0 5px;
}
 
 
/* content tables */
td.sectiontableheader {
  background: #efefef;
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}
 
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}
 
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}
 
 
/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
	width: auto;
}
 
table.contentpaneopen li {
	margin-bottom: 5px;
}
 
table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}
 
table.contentpaneopen h3 {
	margin-top: 25px;
}
 
table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}
 
.highlight {
	background-color: #fffebb;
}
 
/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}
 
div.moduletable, div.module {
  margin-bottom: 25px;
}
 
div.module_menu {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
 
}
 
div.module_menu div div div {
	padding: 0px;
	padding-top: 30px;
	padding-bottom: 10px;
	width: auto;
}
 
div.module_menu div div div div {
	background: none;
	padding: 0;
}
 
div.module_menu ul {
	margin: 10px 0;
	padding-left: 10px;
	list-style:none;
}
 
div.module_menu ul li {
	margin: 0;
	padding: 0;
}
 
div.module_menu ul li a:link, div.module_menu ul li a:visited {
	font-weight: bold;
	background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	padding:2px 0 2px 25px;
	line-height:24px;
 
}
 
#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto;
}
 
#leftcolumn h3, #rightcolumn h3 {
	margin: 0;
	color:#fefefe;
	font-weight: bold;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 1.1em;
	background:#00CCFF;
	padding:2px 0 2px 10px;
	line-height:20px;
	text-align: left;
	background:transparent url(../images/menu_t.jpg) top left repeat-x;
 
}
 
 
#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c, 
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c {
	margin:0 0 20px 0;
	padding: 3px;
	border:1px solid #ccc;
	background:#b4d1ef;	
}
 
#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin:0;
	padding:0;
	list-style:none;
	border:1px solid #ccc;
	border-top:none;
}
 
#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin:0;
	padding:0;
	background: #b4d1ef;
}
 
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	display:block;
	line-height:20px;
	background:#b4d1ef url(../images/menu_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#5076b6;
}
 
#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	background:#00CCFF url(../images/menu_link_bg.gif) left no-repeat;
	color:#666666;
}
 
/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	display:block;
	line-height:20px;
	background:#b4d1ef url(../images/menu_curren_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#ff8800;
}
 
#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	background:#b4d1ef url(../images/menu_curren_link_bg.gif) left no-repeat;
	color:#666666;
}
 
/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
}
 
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
	background:#b4d1ef url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#5076b6;
	padding:2px 25px;
}
 
#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
	background:#b4d1ef url(../images/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}
 
/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin:6px 0;
	padding:0;
	list-style:none;
}
 
#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin:0;
	padding:0 2px;
}
 
table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}
 
div.search input {
	margin:0 2px 0 0;
}
 
.search #mod_search_searchword {
	width:122px;
	background:#b4d1ef url(../images/search_bg.jpg) left no-repeat;
	border:none;
	color:#fff;
	padding:2px 4px 0 4px;
	height:18px;
}
 
form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }
 
/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }
 
div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }
 
/* Parameter Table */
table.paramlist {
	margin-top: 5px;
}
 
table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}
 
table.paramlist td.paramlist_value {
}
 
div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}
 
/* Banners module */
 
/* Default skyscraper style */
.bannergroup {
}
 
.banneritem {
}
 
/* Text advert style */
 
.banneritem_text {
	padding: 4px;
	font-size: 11px;
}
 
.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}
 
/* System Messages */
/* see system general.css */
 
.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }
 
/* Polls */
.pollstableborder td {
	text-align: left;
}
 
/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 15px;
}
 
legend {
	margin: 0;
	padding: 0 10px;
}
 
td.key {
	border-bottom:1px solid #eee;
	color: #666;
}
 
/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}
 
.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}
 
.tool-text {
	font-size: 100%;
	margin: 0;
}
 
/* System Standard Messages */
 
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}
 
/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}
 
/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
 
 
 
/* ****************************************************************************** */
/* blue */
input,button {
	border:1px solid #dcdcdc;
	background:transparent;
}
 
 
/* blue */
a:link, a:visited {
	color: #5076b6;
}
 
a:hover {
	color: #0b3768;
}
 
#pillmenu a#active_menu-nav {
  color: #fff;
  background: transparent url(../images/top_menu_arrow.jpg) top center no-repeat;
}
 
#pillmenu a#active_menu-nav:hover {
  color: #fff;
  background: transparent url(../images/top_menu_arrow.gif) top center no-repeat;
}
 
h3, .componentheading, table.moduletable th {
  color: #5076b6;
}
 
div.module_menu {
	background: url(../images/blue/module_mright_bg.jpg) 100% 100% no-repeat;
}
 
div.module_menu div {
	background: url(../images/blue/module_mleft_bg.jpg) 0 100% no-repeat;
}
 
div.module_menu div div {
	background: url(../images/blue/module_right_bg.jpg) 100% 0 no-repeat;
}
 
div.module_menu div div div {
	background: url(../images/blue/module_left_bg.jpg) 0 0 no-repeat;
}
 
/* ********************************************************************************* */
/* blue */
 
div#header {
	background: transparent url(../images/header_top_middle_shadow_bg.jpg) top left repeat-x;
	height:155px;
	width: 779px;
}
 
div#header_l {
	background: transparent url(../images/header_line_bg.jpg) top left no-repeat;
	height:242px;
}
div#logo_bg {
	background: transparent url(../images/logo.png) no-repeat;
	height:150px;
	top:2.5px;
	margin-left:30px;
 
}
 
div#logo_bg div {
	text-align: left;
	top:15px;
 
}
 
div#footer {
	background: url(../images/footer_m_bg.jpg) 0 100% repeat-x;
}
 
div#footer_l {
	background: url(../images/footer_l_bg.jpg) 0 0 no-repeat;
}
 
div#footer_r {
	background: url(../images/footer_r_bg.jpg) 100% 0 no-repeat;
}
 
 
/* ********************************************************************** */
 
input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}
 
/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #2861a4;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sgfooter:hover {
	color: #2861a4;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:center;
width:100%;
margin:0px auto;
color: #2861a4;
font-family: Arial,sans-serif;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #2861a4;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #2861a4;
text-align:left;
}
 
a.sglink:link, a.sglink:visited {
	color			: #2861a4;
	font-size		: 11px;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sglink:hover {
	color			: #2861a4;
	font-family: Arial,sans-serif;
	text-decoration:none;
}

Demo URL is:
http://test.oradeo.org/testing/

The problem is at #whitebox_m div, in IE 6 or 7 creates a space above it.

Please let me know if anybody can help me...

Thank you very much for your time! :thumbsup:

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 3 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Is that php line actually

Is that php line actually showing up when you view source in the browser? If so, it needs to go.

Sends IE into Retard Mode-- I mean, Quirks Mode.

I'm no expert, but I fake one on teh Internets