Css Alignment Problem - firefox vs ie

paulmason411

Dec 25 2006, 08:01 AM

Hi guys,

I'm having problems connecting the header and the body on this page:

http://www.locborg.de/newfru/

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

The PHP:

CODE

<?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] .'"?' .'>';

?>

<!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">

  <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=\"www.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="http://www.locborg.de/newfru/index.php?option=com_frontpage&Itemid=1"></a></dd>
				<dd><a id="news" title="News" href="http://www.locborg.de/newfru/index.php?option=com_content&task=category&sectionid=1&id=1&Itemid=101"></a></dd>
				<dd><a id="articles" title="Articles" href="http://www.locborg.de/newfru/index.php?option=com_content&task=category&sectionid=28&id=100&Itemid=124"></a></dd>
				<dd><a id="arts" title="Arts" href="http://www.locborg.de/newfru/index.php?option=com_content&task=view&id=798&Itemid=146"></a></dd>
				<dd><a id="forum" title="Forum" href="http://www.locborg.de/smf/index.php"></a></dd>
				<dd><a id="discography" title="Discography" href="http://www.locborg.de/newfru/index.php?option=com_content&task=view&id=13&Itemid=52"></a></dd>
				<dd><a id="equipment" title="Equipment" href="http://www.locborg.de/newfru/index.php?option=com_content&task=view&id=748&Itemid=138"></a></dd>
				<dd><a id="concerts" title="Concerts" href="http://www.locborg.de/newfru/index.php?option=com_content&task=view&id=211&Itemid=125"></a></dd>
				<dd><a id="sideprojects" title="Side Projects" href="http://www.locborg.de/newfru/index.php?option=com_content&task=view&id=785&Itemid=142"></a></dd>
				<dd><a id="contactus" title="Contact Us" href="http://www.locborg.de/newfru/index.php?option=com_contact&Itemid=3"></a></dd>
				<dd><a id="links" title="Links" href="http://www.locborg.de/newfru/index.php?option=com_content&task=blogcategory&id=99&Itemid=121"></a></dd>
			</dl>
			<div id="main">
			   <div id="content">
				 <?php mosMainBody(); ?>
				   </div>
			   <div id="menuarea">
				  <?php mosLoadModules ( 'right' ); ?>
			   </div>
			</div>
		</div></center>
	</body>
</html>

The CSS:

CODE

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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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(http://www.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;

}

Please use the CODEBOX bbcode tag for long pieces of code. CODEBOX tags added.

daler

Dec 25 2006, 08:50 AM

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

CODE

#header {
    display:block;
    position: relative;
    width: 924px;
    height: 290px;
    background: url(http://www.locborg.de/newfru/templates/newfru/images/header.jpg) no-repeat;
}

to:

CODE

#header {
    margin: 0px;
    display:block;
    position: relative;
    width: 924px;
    height: 290px;
    background: url(http://www.locborg.de/newfru/templates/newfru/images/header.jpg) no-repeat;
}

The problem was that firefox gives <div> tags a default margin of 0, and IE does not.

paulmason411

Dec 25 2006, 09:00 AM

Thanks, your a legend, works perfectly now

daler

Dec 25 2006, 09:01 AM

Anytime, I had the same problem a while back.

Saint_Michael

Dec 25 2006, 09:18 AM

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.

CODE

#header {
    display:block;
    position: relative;
    width: 924px;
    height: 290px;
    margin-bottom:14px;
    background: url(http://www.locborg.de/newfru/templates/newfru/images/header.jpg) no-repeat;
}

CODE

#main {
    position: relative;
    margin-top:-15px;
    width: 924px;
    height: 643px;
    float: left;
    background: url(http://www.locborg.de/newfru/templates/newfru/images/main.jpg) no-repeat;
}

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

jlhaslip

Dec 25 2006, 03:48 PM

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.

CODE

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.

paulmason411

Dec 26 2006, 07:44 AM

Hey Saint Michael I get what your saying.

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

CODE

#main {
    position: relative;
    top: 0px;
    width: 924px;
    height: 643px;
    float: left;
    background: url(http://www.locborg.de/newfru/templates/newfru/images/main.jpg) no-repeat;
}

This seems to work.

Saint_Michael

Dec 26 2006, 08:36 AM

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

Similar Topics

Keywords : css alignment firefox

Style Not Displayed Correctly On Firefox [resolved] - (16)
Css Scrollbars In Firefox? - (10)
Ok, I wasn't too sure weither this topic would be better under Internet or Software, so if it is
in the wrong place please forgive me. I have a question about web browsers. I currently use
Firefox and I was wondering if there is a way to get FireFox to display CSS Scrollbars, like Opera
and Internet Explore do. I've currently looked at the FireFox Add-On site and did a few
searches on Google and I have come up with nothing and I'm getting a strange suspision that
there is no way to do such a thing. If anyone can help I will be forever grateful. /biggri...

Link Image Css Bug In Firefox - Can anyone help me? (7)

I have a problem in a site I am creating. I have styled my post content links in the following
way. CODE #post-content a {     background-color: #bf6f3c;     color: #fff;
    padding: 2px 2px 1px 2px;     border-bottom: 1px solid #7f4926; } #post-content
a:hover {     color: #f5fac7; } And when I insert an link image like so: There
seems to be an extra border inherited from my #post-content a style. I have attached the screenshot
to show the problem. This was how my link image should look like: CODE #post-content a img { ...

Align Text Column Without Tables Using Css - Is it possible to get a 3 column alignment without using tables with C (13)

I know I can use tables to get this effect but I am not sure if CSS can do it. I have not found any
examples so far, the only alignments with CSS I have come across are whole div elements and nothing
for inside formatting like tables offer. Heres my current stage of my layout so far. select a
character to see output. http://sonesay.trap17.com/chars.php
http://sonesay.trap17.com/profile.css The attached file is of my original plan but at this stage
I cannot do a php+ajax pagination for characters because of lack of knowledge so I went with the
simple drop down lis...

How To Make Design Css With Firefox/iexplorer? - (7)

Am using css for designing my sites in that i had a problem while design css for iexplore it show
good in iexplorer and the same design view differently in firefox what should i do to avoid such
difference....

Css Alignment Bug - Moves my page when I click on a link (10)

This is a bug I am really confused by and I hope I can get some help over here. I am in the midst
of creating my very own WordPress Theme for my site which involves full styling using CSS. I am
moving away from tables. I have a layout which is 770px in width (fixed), and I want to align it
to the center. Ideally, this is what I put in my CSS. CODE #wrapper { margin: 0 auto 0
auto; } This visually looks fine on my browser at first. But when I click on say, a post
permalink which will bring me to the view the entire post. The entire layout shifts to t...

Css Positioning Trouble - in FIREFOX! yet IE displays it as i want (6)

Wait wait! im not complaining about firefox! i couldnt ever do it, but the fact is that for
the very darn first time IE is actually showing the thing as i want it... I have a table inside a
div, and i want the table to be right aligned, and IE6 does so (not the same for ie for mac though)
but firefox keeps it to the left, the best thing i've achieved with this is a fixed position
which does not look good while resizing...... ive also tried floating and even adding a wrapper...
so i dont know what to do... this is the site: http://www.cucea.udg.mx/cucea/gr...

Problem With Mozzilla Firefox And Css - (3)

If someone got Mozilla Firefox then: Here there is site: http://luckyclover.trap17.com/ In (IE,
Opera) other browsers this page is showing propetly but Mozzilla don't show BG image in tables
always when i use style class from CSS just eat whole row. The last menu on right don't use
style class from css and mozzila show all BG images. Someone know what CSS function mozzila not
support or meybe this is a bug ? If you guys see source code in mozilla you see there is code for
this stuff but mozilla ignore them. HELP /cool.gif' border='0' style='vertical-align...

Looking for Css, Alignment, Problem

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE