Jump to content
xisto Community
Sign in to follow this  
Followers 0
paulmason411

Css Alignment Problem firefox vs ie

By paulmason411, in Programming

Recommended Posts

paulmason411    0

paulmason411
Posted (edited)

Hi guys, I'm having problems connecting the header and the body on this page: http://forums.xisto.com/no_longer_exists/

 

It works in firefox, but in IE there is a gap after the header. The PHP:


<?php

/*** template_name - Mambo 4.5.1 template* @version 4.5.1* 
@copyright ďż˝ 2006 by paul mason* @license licensce info here*/

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

?> 

<head>	<?php if ( $my->id ) initEditor(); ?>	

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />	

<?php mosShowHead(); ?><?php echo "<meta name=\"author\" content=\"mambosolutions.com; />" ?>   

<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>"; ?>   <?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />"; ?>  </head>	<body>		<center><div id="wrapper">			<dl id="header">				<dd><a id="home" title="Home" href="locborg.de/newfru/index.php?option=com_frontpage&Itemid=1;				<dd><a id="news" title="News" href="locborg.de/newfru/index.php?option=com_content&task=category§ionid=1&id=1&Itemid=101;				<dd><a id="articles" title="Articles" href="locborg.de/newfru/index.php?option=com_content&task=category§ionid=28&id=100&Itemid=124;				<dd><a id="arts" title="Arts" href="locborg.de/newfru/index.php?option=com_content&task=view&id=798&Itemid=146;				<dd><a id="forum" title="Forum" href="locborg.de/smf/index.php;				<dd><a id="discography" title="Discography" href="locborg.de/newfru/index.php?option=com_content&task=view&id=13&Itemid=52;				<dd><a id="equipment" title="Equipment" href="locborg.de/newfru/index.php?option=com_content&task=view&id=748&Itemid=138;				<dd><a id="concerts" title="Concerts" href="locborg.de/newfru/index.php?option=com_content&task=view&id=211&Itemid=125;				<dd><a id="sideprojects" title="Side Projects" href="locborg.de/newfru/index.php?option=com_content&task=view&id=785&Itemid=142;				<dd><a id="contactus" title="Contact Us" href="locborg.de/newfru/index.php?option=com_contact&Itemid=3;				<dd><a id="links" title="Links" href="locborg.de/newfru/index.php?option=com_content&task=blogcategory&id=99&Itemid=121;			</dl>			<div id="main">			   <div id="content">				 <?php mosMainBody(); ?>				   </div>			   <div id="menuarea">				  <?php mosLoadModules ( 'right' ); ?>			   </div>			</div>		</div></center>	</body></html>

The CSS:


BODY {  margin		   : 0px 0px 0px 0px;  background-color : #FFFFFF;  color			: #000000;  background-color: #FFFFFF;}/* custom code */#wrapper {  width:980px;  text-align:left;  margin: 0 auto;  border:solid 0px;}#header {	display:block;	position: relative;	width: 924px;	height: 290px;	background: url(locborg.de/newfru/templates/newfru/images/header.jpg) no-repeat;}#header a {	color:#000; 	font-family:arial, sans-serif; 	font-size:1.2em; 	font-weight:bold; 	text-transform:uppercase;}a#home {	display:block; 	width:81px; 	height:0; 	padding-top:87px;	overflow:hidden; 	position:absolute; left:59px; top:115px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/home.gif) no-repeat 400px 400px;}* html a#home {height:87px; he\ight:0;}a#home:hover {	background-position: 0 0; 	overflow:visible;}a#news { display:block; width:81px; height:0; padding-top:80px;overflow:hidden; position:absolute; left:125px; top:189px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/news.gif) no-repeat 400px 400px;}* html a#news {height:80px; he\ight:0;}a#news:hover { background-position: 0 0; overflow:visible;}a#articles { display:block; width:98px; height:0; padding-top:90px;overflow:hidden; position:absolute; left:186px; top:106px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/articles.gif) no-repeat 400px 400px;}* html a#articles {height:90px; he\ight:0;}a#articles:hover { background-position: 0 0; overflow:visible;}a#arts { display:block; width:84px; height:0; padding-top:96px;overflow:hidden; position:absolute; left:243px; top:179px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/arts.gif) no-repeat 400px 400px;}* html a#arts {height:96px; he\ight:0;}a#arts:hover { background-position: 0 0; overflow:visible;}a#forum { display:block; width:99px; height:0; padding-top:74px;overflow:hidden; position:absolute; left:309px; top:126px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/forum.gif) no-repeat 400px 400px;}* html a#forum {height:74px; he\ight:0;}a#forum:hover { background-position: 0 0; overflow:visible;}a#discography { display:block; width:131px; height:0; padding-top:84px;overflow:hidden; position:absolute; left:365px; top:194px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/discography.gif) no-repeat 400px 400px;}* html a#discography {height:84px; he\ight:0;}a#discography:hover { background-position: 0 0; overflow:visible;}a#equipment { display:block; width:133px; height:0; padding-top:75px;overflow:hidden; position:absolute; left:439px; top:114px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/equipment.gif) no-repeat 400px 400px;}* html a#equipment {height:75px; he\ight:0;}a#equipment:hover { background-position: 0 0; overflow:visible;}a#concerts { display:block; width:107px; height:0px; padding-top:87px;overflow:hidden; position:absolute; left:524px; top:197px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/concerts.gif) no-repeat 400px 400px;}* html a#concerts {height:87px; he\ight:0;}a#concerts:hover { background-position: 0 0; overflow:visible;}a#sideprojects { display:block; width:166px; height:0; padding-top:77px;overflow:hidden; position:absolute; left:582px; top:105px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/sideprojects.gif) no-repeat 400px 400px;}* html a#sideprojects {height:77px; he\ight:0;}a#sideprojects:hover { background-position: 0 0; overflow:visible;}a#contactus { display:block; width:126px; height:0; padding-top:91px;overflow:hidden; position:absolute; left:688px; top:183px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/contactus.gif) no-repeat 400px 400px;}* html a#contactus {height:91px; he\ight:0;}a#contactus:hover { background-position: 0 0; overflow:visible;}a#links { display:block; width:92px; height:0; padding-top:72px;overflow:hidden; position:absolute; left:767px; top:99px; 	background:transparent url(locborg.de/newfru/templates/newfru/images/links.gif) no-repeat 400px 400px;}* html a#links {height:72px; he\ight:0;}a#links:hover { background-position: 0 0; overflow:visible;}#main {	position: relative;	top: -11px;	width: 924px;	height: 643px;	float: left;	background: url(locborg.de/newfru/templates/newfru/images/main.jpg) no-repeat;}#content {	display:block;	border-width: 0px;	border-style: solid;	padding:5px;	margin-top:5px;	width:550px;	height:475px;	position:absolute; left:65px; top:5px;	overflow-y: auto;	overflow-x: hidden;	}	#menuarea {	display:block;	border-width: 0px;	border-style: solid;	padding:5px;	margin-top:5px;	width:200px;	height:475px;	position:absolute; left:635px; top:-5px;	overflow:hidden;	}/* end of custom code */td, tr, p, div {  font-family	  : Verdana, Arial, Helvetica, sans-serif;  font-size		: 11px;  color			: #333333;}ul {  margin		   : 0px 0px 0px 0px;}hr {  background	   : #CCCCCC;  height		   : 1px;  width			: 100%;}.title {font-family: sans-serif;font-size: 24px;font-weight: bold;color			: #7B8DA1;}.pathway {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 11px;  color: #000000;}a.pathway:link, a.pathway:visited {  color			: #000000;  font-weight	  : normal;}a.pathway:hover {  color			: #000000;  font-weight	  : normal;  text-decoration   : underline;}/* --Default Class Settings-- */a.mainlevel:link, a.mainlevel:visited {		color: #333333;		background-position: left;		text-align: left;		font-weight: bold; }a.mainlevel:hover {		color: #000000;		background-position: left;		text-align: left;		}		a.mainmenu:link, a.mainmenu:visited {		color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;		font-weight: bold;		}a.mainmenu:hover {		color: #000000; 		text-decoration: underline;		}a.sublevel:hover {		color: #000000; text-decoration: underline;		}a.sublevel:link, a.sublevel:visited {		color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;		font-weight: normal;}table.moduletable {		margin: 0px 0px 0px 0px;		width: 95%;		border-left: solid 0px #000000;		border-right: solid 0px #000000;		border-top: solid 0px #000000;		border-bottom: solid 0px #000000;		margin-left: 5px;		}table.moduletable th {  font-size		: 11px;  font-weight	  : bold;  color			: #000000;  text-align	   : left;  width			: 100%;  padding: 10px 10px 10px 10px;  margin: 20px 5px 20px 5px;}table.moduletable td {		font-size: 10px;		font-weight: normal;		border: 1px solid #333;		padding: 10px 10px 10px 10px;		margin: 20px 5px 20px 5px;		background-color: #F8F8FF;}.poll {  font-family	  : Arial, Helvetica, sans-serif;  font-size		: 10px;  color			: #666666;  line-height	  : 14px;}.sectiontableheader {  background-color : #CCCCCC;  color			: #7B8DA1;  font-weight	  : bold;}.sectiontableentry1 {  background-color : #F0F0F0;}.sectiontableentry2 {  background-color : #E0E0E0;}.small {  font-family	  : Verdana, Arial, Helvetica, sans-serif;  font-size		: 10px;  color			: #3366C0;  text-decoration  : none;}.smalldark {  font-family	  : Verdana, Arial, Helvetica, sans-serif;  font-size		: 10px;  color			: #000000;  text-decoration  : none;  font-weight	  : normal;}.contentpane {  background	   : #FFFFFF;}.contentpaneopen {  background	   : transparent;}.contentheading, .componentheading {  font-family	  : Verdana, Arial, Helvetica, sans-serif;  font-size		: 11px;  font-weight	  : bold;  color			: #7B8DA1;  text-align	   : left;}.createdate {  font-family	  : Arial, Helvetica, sans-serif;  font-size		: 10px;  color			: #999999;  text-align	   : left;}.button {  font-family	  : Verdana, Arial, Helvetica, sans-serif;  font-style	   : normal;  font-size		: 10px;  font-weight	  : bold;  background-color : #F0F0F0;  color			: #000000;  border		   : 1px solid #CCCCCC;}.inputbox {  font-family	  : Verdana, Arial, Helvetica, sans-serif;  font-size		: 10px;  color			: #000000;  background-color : #F0F0F0;  border		   : 1px solid #CCCCCC;}a:link, a:visited {  font-size		: 11px;  color			: #000000;  text-decoration  : none;  font-family	  : Verdana, Arial, Helvetica, sans-serif;}a:hover {  color			: #000000;  text-decoration  : underline;}/* For content item titles that are hyperlink instead of Read On */a.contentpagetitle:link, a.contentpagetitle:visited {		font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;		font-size: 13px;		font-weight: bold;		 color: #000000;		text-align:left;		}a.contentpagetitle:hover {		font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;		font-size: 13px;		font-weight: bold;		text-align:left;		color: #7B8DA1;		text-decoration: underline;		font-weight: bold;		}a.category:link, a.category:visited {  color			: #333333;  font-weight	  : bold;}a.category:hover {  color			: #7B8DA1;}/* Styles for dhtml tabbed-pages */.ontab {		background-color: #ffae00;		border-left: outset 2px #ff9900;		border-right: outset 2px #808080;		border-top: outset 2px #ff9900;		border-bottom: solid 1px #d5d5d5;		text-align: center;		font-weight: bold;		color: #FFFFFF;}.offtab {		background-color : #e5e5e5;		border-left: outset 2px #E0E0E0;		border-right: outset 2px #E0E0E0;		border-top: outset 2px #E0E0E0;		border-bottom: solid 1px #d5d5d5;		text-align: center;		font-weight: normal;}.tabpadding {}.tabheading {		background-color: #ffae00;		text-align: left;}.pagetext {		visibility: hidden;		display: none;		position: relative;		top: 0;}/* for modifying {moscode} output.  Dont set the colour! */.moscode {		background-color: #f0f0f0;}/* Text passed with mosmsg url parameter */.message {		font-family : Verdana, Arial, Helvetica, sans-serif;		font-weight: bold;		font-size : 10pt;		color : #ff6600;		text-align: center;}/* custom stuff */.container{		border: solid;		border-width: 1px;		border-color: #efefef;		background-color: White;}.boxes {		border: solid;		border-color: #efefef;		border-width: 1px;}

Notice from electriic ink:
Please use the CODEBOX bbcode tag for long pieces of code. CODEBOX tags added.

Edited by OpaQue (see edit history)

Share this post

Link to post
Share on other sites

daler    0

daler
Posted (edited)

*Edit: Never mind, you fixed that part in an edit.
Change this bit of code in your css file from:

#header {	display:block;	position: relative;	width: 924px;	height: 290px;	background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;}

to:

#header {	margin: 0px;	display:block;	position: relative;	width: 924px;	height: 290px;	background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;}

The problem was that firefox gives <div> tags a default margin of 0, and IE does not.
Edited by daler (see edit history)

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

Well here is a more effective way to do this, I had to add a positive and negative margins in order to fix your problem. In fact your problem had to do with a 34px margin in your wrapper/header area. It's not in the CSS but with what I used counter act with it. Change the Following in your CSS and your set.

#header {	display:block;	position: relative;	width: 924px;	height: 290px;	margin-bottom:14px;	background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;}

#main {	position: relative;	margin-top:-15px;	width: 924px;	height: 643px;	float: left;	background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;}

Problem with daler code is that your main content background gets cut off the margins I provided corrects that

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

As a form of protection against the different methods used by Browsers for defining default margins and paddings, I often set the html (or body) element's margins and paddings to zero and then let it cascade down to the child elements below it, changing those which I think are in need of padding and or margins.

html { margin:0; padding: 0;}

When the value is equal to zero, you need not declare a unit of size, otherwise, pixels or em's are needed to define which unit you want used for the margins or padding.
Hope this helps.

Share this post

Link to post
Share on other sites

paulmason411    0

paulmason411
Posted

Hey Saint Michael I get what your saying.

I did it this way however so that i don't have to use minus alignment.

#header {	margin: 0px;	display:block;	position: relative;	width: 924px;	height: 290px;	background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;}

#main {	position: relative;	top: 0px;	width: 924px;	height: 643px;	float: left;	background: url(http://forums.xisto.com/no_longer_exists/; no-repeat;}

This seems to work.

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

It works, it takes care of the cut off problem and all you did was add in the margin and put the top to 0 px. Thus another mystery is solved gang.Either method works but in this crazy world of web design simple is better :lol:.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept