| | | |  |  | |  |
07.04.2005, 11:06
|
#1 (permalink)
| | Mamber
Join Date: Mar 2005
Posts: 69
| Layout problems with Firefox Hi,
I am setting up my site using Mambo 4.5.1 and created my own template by modding Solarflare. Everything looked fine in Internet Explorer (6) but I got a surprise when I opened my site in Firefox. The left menu was a mess and a bar (called foot) I added before the end of page was misplaced. How can this be?
Regards, Thoeri
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
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 mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$sandbox_area = 0;
// banner combos
//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
}
//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$sandbox_area = 2;
} else {
$sandbox_area = 1;
$user1 = $user1 == 1 ? 3 : 4;
$user2 = $user2 == 1 ? 3 : 4;
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/barntotal/css/template_css.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico"/>
</head>
<body>
<div align="center">
<div id="main_outline">
<div id="header_area">
<div id="header">
</div>
<div id="search">
<?php mosLoadModules ( 'user4', -1 ); ?>
</div>
<div class="clr"></div>
<div id="pathway_outline">
<div id="pathway">
<?php mosPathWay(); ?>
</div>
<div id="buttons">
<?php mosLoadModules ( 'user3', -1); ?>
</div>
</div>
</div>
<div id="left_outline">
<div id="left">
<?php mosLoadModules ( 'left' ); ?>
</div>
</div>
<div id="content_area">
<div id="content">
<?php
if ( mosCountModules ('banner') ) {
?>
<div id="banner_area">
<div id="banner">
<img src="<?php echo $mosConfig_live_site;?>/templates/barntotal/images/annons.gif" alt="annons.gif, 0 kB" title="annons" border="0" height="8" width="424"/><br />
<?php mosLoadModules( 'banner', -1 ); ?>
</div>
<?php
}
if ( mosCountModules( 'right' ) and ( empty ($_REQUEST['task'] ) || $_REQUEST['task']!='edit' ) ) {
?>
<div id="right_outline">
<div id="right">
<?php mosLoadModules ( 'right' ); ?>
</div>
</div>
<?php
}
?>
<div id="sandbox_area_<?php echo $sandbox_area ?>">
<div class="sandbox_area">
<?php
if ( mosCountModules( 'user1' ) ) {
?>
<div id="user1_<?php echo $user1; ?>">
<div class="user1_outline">
<?php mosLoadModules ( 'user1' ); ?>
</div>
</div>
<?php
}
if (mosCountModules( 'user2' )) {
?>
<div id="user2_<?php echo $user2; ?>">
<div class="user2_outline">
<?php mosLoadModules ( 'user2' ); ?>
</div>
</div>
<?php
}
?>
<div class="clr"></div>
<div class="content_outline">
<?php mosMainBody(); ?>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
<div class="foot">
<div id="foot"> <?php echo (strftime ("%A %d %B, %Y")); ?> </div>
</div>
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
</div>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html> |
| |
07.04.2005, 18:37
|
#2 (permalink)
| | Junior Mamber
Join Date: Aug 2004 Location: Denver, CO
Posts: 28
| Re: Layout problems with Firefox This doesn't mean much without a css file or a demo site to visit ... It's probably because you coded to IE "standards" instead of W3C standards, which are better supported by Firefox.
Christiaan |
| |
07.04.2005, 21:47
|
#3 (permalink)
| | Mamber
Join Date: Mar 2005
Posts: 69
| Re: Layout problems with Firefox Hi and thanks for answering!
I can't fit the text since it more just more than 10 kb so I tried to attach a txt copy of the file. Just hope it works
Thanks,
thoeri |
| |
07.04.2005, 21:50
|
#4 (permalink)
| | Mamber
Join Date: Mar 2005
Posts: 69
| Re: Layout problems with Firefox No it did not seem to work at all. So here, I post it in two parts. Hope thats ok!
/* CSS Document */
.clr {
clear: both;
}
#main_outline {
width: 744px !important;
width: 750px;
border: 1px solid #0066CC;
padding: 2px;
background: #ffffff;
}
#foot {
width: 738px !important;
width: 744px;
height: 20px;
float: left;
border: 1px solid #ffffff;
background: url(../images/boxheading.gif) repeat-x;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
text-align: left;
color: #ffffff;
margin-bottom: 2px !important;
margin-bottom: -2px;
}
#pathway_outline {
width: 738px !important;
width: 744px;
height: 20px;
float: left;
border: 1px solid #ffffff;
background: url(../images/boxheading.gif) repeat-x;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #ffffff;
margin-bottom: 2px !important;
margin-bottom: -2px;
}
#pathway {
float: left;
padding: 4px 3px 3px 5px;
}
#buttons {
float: right;
margin: 0px;
padding: 0px;
width: 50%;
}
ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}
ul#mainlevel-nav li
{
display: block;
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: right;
margin: 0;
width: auto !important;
width: 15%;
font-size: 11px;
line-height: 20px;
white-space: nowrap;
border-left: 1px solid #0066CC;
}
ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #ffffff;
background: transparent;
}
#buttons>ul#mainlevel-nav li a { width: auto; }
ul#mainlevel-nav li a:hover
{
color: #00ff00;
text-decoration: underline;
background: url(../images/boxheading.gif) repeat-x;
}
#search {
float: right;
border: 1px solid #0066CC;
padding: 0px;
width: 163px !important;
width: 165px;
height: 21px !important;
height: 23px;
overflow: hidden;
}
#search .inputbox {
border: 0px;
padding: 4px 3px 3px 5px !important;
padding: 3px 3px 3px 5px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
height: 17px !important;
height: 19px;
width: 153px !important;
width: 159px;
color: #0066CC;
}
#header_area {
width: 744px !important;
text-align: left;
border: 0px;
margin: 0px;
}
#header {
float: left;
padding: 0px;
margin: 0px;
width: 577px;
height: 70px;
background: url(../images/barntotal.gif) no-repeat;
}
#top_outline {
float: left;
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
float: left;
overflow: hidden;
height: 40px !important;
height: 46px;
width: 159px !important;
width: 165px;
}
#left_outline {
margin-top: 2px;
border: 1px solid #0066CC;
padding: 2px;
float: left;
width: 145px !important;
width: 151px;
}
#content_area {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 591px;;
}
#banner_area {
width: 591px;
margin-top: 2px;
margin-bottom: 0px !important;
margin-bottom: -3px;
}
#banner {
float: left;
padding: 0px;
width: 424px;
}
#poweredby {
float: left;
margin-left: 2px;
}
#sandbox_area_2 .sandbox_area {
float: left;
margin-top: 2px;
width: 424px;
}
#sandbox_area_1 .sandbox_area {
float: left;
margin-top: 2px;
width: 591px;
}
#right_outline {
border: 1px solid #0066CC;
margin-top: 2px;
float: right;
padding: 2px;
width: 159px !important;
width: 165px;
}
/** with both user1 and user2 visible **/
#user1_2 .user1_outline {
width: 205px !important;
width: 211px;
border: 1px solid #0066CC;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}
#user2_2 .user2_outline {
width: 205px !important;
width: 211px;
border: 1px solid #0066CC;
float: right;
margin-left: 2px;
margin-bottom: 2px;
padding: 2px;
}
/** with either user1 or user2 visible **/
#user1_1 .user1_outline {
width: 418px !important;
width: 424px;
border: 1px solid #0066CC;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}
#user2_1 .user2_outline {
width: 418px !important;
width: 424px;
border: 1px solid #0066CC;
float: right;
margin-bottom: 2px;
padding: 2px;
}
/** based on 100% content width **/
#user1_4 .user1_outline {
width: 270px !important;
width: 276px;
border: 1px solid #0066CC;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}
#user2_4 .user2_outline {
width: 271px !important;
width: 275px;
border: 1px solid #0066CC;
float: right;
margin-left: 2px;
margin-bottom: 2px;
padding: 2px;
}
/** with either user1 or user2 visible **/
#user1_3 .user1_outline {
width: 585px !important;
width: 591px;
border: 1px solid #0066CC;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}
#user2_3 .user2_outline {
width: 585px !important;
width: 591px;
border: 1px solid #0066CC;
float: right;
margin-bottom: 2px;
padding: 2px;
}
/** adjust content area based on right nav **/
#sandbox_area_2 .content_outline {
width: 418px !important;
width: 424px;
border: 1px solid #0066CC;
padding: 2px;
}
#sandbox_area_1 .content_outline {
width: 585px !important;
width: 591px;
border: 1px solid #0066CC;
padding: 2px;
}
#active_menu {
color:#FFCC00;
font-weight: bold;
}
a#active_menu:hover {
color: #ff6600;
}
.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}
.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}
/** old stuff **/
.back_button {
float: left;
font-size: 11px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
border: 1px solid #0066CC;
width: 80px;
padding: 4px;
}
.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 1px solid #0066CC;
width: auto;
padding: 4px;
margin: 1px;
}
.pagenavbar {
padding-right: 5px;
float: right;
}
#footer {
text-align: center;
padding: 3px;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png) ;
background-repeat: no-repeat;
background-position: 0px 3px;
}
td {
text-align: left;
font-size: 11px;
}
body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #0066CC;
background: #ffffff;
}
/* mambo core stuff */
a:link, a:visited {
color: #ff6600; text-decoration: none;
font-weight: bold;
}
a:hover {
color: #00ff00; text-decoration: underline;
font-weight: bold;
}
table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
table.contentpane td {
margin: 0px;
padding: 0px;
}
table.contentpane td.componentheading {
padding-left: 4px;
}
table.contentpane td.contentheading {
padding-left: 15px;
padding-top: 9px;
}
.button {
padding: 2px 3px 2px 3px;
height: 22px;
border:solid 1px #0066CC;
background-color: #ffffff;
color: #ff6600;
font-family: verdana, arial, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
}
.inputbox {
padding: 2px;
border:solid 1px #0066CC;
background-color: #ffffff;
}
#sandbox_area_2 .componentheading {
background: url(../images/boxheading.gif) repeat-x;
color: #ffffff;
text-align: center;
padding-top: 4px;
padding-left: 4px;
height: 20px;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
width: 414px !important;
width: 418px;
}
#sandbox_area_1 .componentheading {
background: url(../images/boxheading.gif) repeat-x;
color: #ffffff;
text-align: center;
padding-top: 4px;
padding-left: 4px;
height: 20px;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
width: 414px !important;
width: 418px;
}
.contentcolumn {
padding-right: 5px;
}
.contentheading {
height: 30px;
background: url(../images/contenthead.png) repeat-x;
color: #0066cc;
text-align: left;
padding-top: 9px;
padding-left: 15px;
font-weight: bold;
font-size: 16px;
white-space: nowrap;
}
.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #0066CC;
text-align:left;
}
table.searchinto {
width: 100%;
}
table.searchintro td {
font-weight: bold;
}
table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
table.moduletable th {
background: url(../images/boxheading.gif) repeat-x;
color: #ffffff;
text-align: center;
padding-top: 4px;
padding-left: 4px;
height: 20px;
font-weight: normal;
font-size: 10px;
height: 20px;
width: 100%;
text-transform: uppercase;
}
table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}
table.pollstableborder td {
padding: 2px;
}
.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
} |
| |
07.04.2005, 21:51
|
#5 (permalink)
| | Mamber
Join Date: Mar 2005
Posts: 69
| Re: Layout problems with Firefox And here the rest of it, part 2.
.sectiontablefooter {
}
.sectiontableentry1 {
background-color : #ffffff;
}
.sectiontableentry2 {
background-color : #f9f9f9;
}
.small {
color: #0066CC;
font-size: 11px;
font-weight: bold;
}
.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
font-weight: bold;
}
.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
font-weight: bold;
}
table.contenttoc {
border: 1px solid #0066CC;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc th {
background: url(../images/boxheading.gif) repeat-x;
color: #ffffff;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 20px;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
}
a.mainlevel:link, a.mainlevel:visited {
background-color: #ff6600;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
height: 18px !important;
height: 14px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: underline;
color: #00ff00;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ff6600;
text-align: left;
}
a.sublevel:hover {
color: #ffcc00;
text-decoration: none;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0px 2px 0px 2px;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
} |
| |
08.04.2005, 20:07
|
#6 (permalink)
| | Mamber
Join Date: Mar 2005
Posts: 69
| Re: Layout problems with Firefox Thank you all guys,
I solved the problem. There was one error i my css and another one in the template.
/thoeri |
| | | Thread Tools | | | | Display Modes | Linear Mode |
Posting Rules
| You may not post new threads You may not post replies You may not post attachments You may not edit your posts HTML code is Off | | | All times are GMT +2. The time now is 13:33. | | | |