Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Css Alignment Problem, firefox vs ie
paulmason411
post Dec 25 2006, 08:01 AM
Post #1


Member [Level 1]
****

Group: Members
Posts: 69
Joined: 18-November 06
Member No.: 33,593
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;

}


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


This post has been edited by electriic ink: Dec 25 2006, 10:21 AM

(list)

Go to the top of the page
 
+Quote Post
daler
post Dec 25 2006, 08:50 AM
Post #2


Newbie [Level 1]
*

Group: Members
Posts: 10
Joined: 13-December 06
Member No.: 35,211
*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.

This post has been edited by daler: Dec 25 2006, 08:54 AM

(list)

Go to the top of the page
 
+Quote Post
paulmason411
post Dec 25 2006, 09:00 AM
Post #3


Member [Level 1]
****

Group: Members
Posts: 69
Joined: 18-November 06
Member No.: 33,593
Thanks, your a legend, works perfectly now biggrin.gif

(list)

Go to the top of the page
 
+Quote Post
daler
post Dec 25 2006, 09:01 AM
Post #4


Newbie [Level 1]
*

Group: Members
Posts: 10
Joined: 13-December 06
Member No.: 35,211
Anytime, I had the same problem a while back.

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Dec 25 2006, 09:18 AM
Post #5


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,561
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Dec 25 2006, 03:48 PM
Post #6


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,083
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
paulmason411
post Dec 26 2006, 07:44 AM
Post #7


Member [Level 1]
****

Group: Members
Posts: 69
Joined: 18-November 06
Member No.: 33,593
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

#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;
}


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.