[css-d] background-repeat and firefox

Jason Hart Thu, 22 Mar 2007 04:29:42 -0800

I'm hoping someone can provide a solution to this problem...
I have read dozens of forum entries and websites to no avail...
Basically I have a div 'border-wrap' that is 900 wide but with a variable
height depending on content...
There is a background PNG that should repeat-y...
It works fine in IE6 but not in Firefox 2...
As far as I understand it is because no height is set for the div...
However I cannot set a height as it changes depending on the content...


Below is my XHTML which validates and below that is my Layout CSS which also
validates...
You can view it at http://mawsoninstitute.com

Thanks in advance for any help

Jason (aka runey)


<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not
allowed.' ); ?>
<!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"; lang="<?php echo _LANGUAGE; ?>"
xml:lang="<?php echo _LANGUAGE; ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) {
initEditor();
}
?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script> <!--
http://www.bluerobot.com/web/css/fouc.asp-->
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css"
rel="stylesheet"
type="text/css" media="screen" />
<?php if (mosCountModules('left') && mosCountModules('right')) { ?>
 <style type="text/css" media="screen">
  * html #left { left: 209px; }
  #container { padding-left: 165px; /* left column width */ padding-right:
165px; /* right column width */ }
  #content { margin-left: 3px; margin-right: 3px; }
  #user-wrap { margin-left: 3px; margin-right: 3px; }
 </style>
<?php } else if (mosCountModules('left')) { ?>
 <style type="text/css" media="screen">
  * html #left { left: 44px; }
  #container { padding-left: 165px; /* left column width */ }
  #content { margin-left: 3px; }
  #user-wrap { margin-left: 3px; }
 </style>
<?php } else if (mosCountModules('right')) { ?>
 <style type="text/css" media="screen">
  #container { padding-right: 165px; /* right column width */ }
  #content { margin-right: 3px; }
  #user-wrap { margin-right: 3px; }
 </style>
<?php } else { ?>
 <style type="text/css" media="screen">
 </style>
<?php } ?>

<?php if (mosCountModules('user1') && mosCountModules('user2')) { ?>
 <style type="text/css" media="screen">
  #user1 { width: 50%; }
  #user2 { width: 50%; }
 </style>
<?php } else if (mosCountModules('user1')) { ?>
 <style type="text/css" media="screen">
  #user1 { width: 100%; }
 </style>
<?php } else if (mosCountModules('user2')) { ?>
 <style type="text/css" media="screen">
  #user2 { width: 100%; }
 </style>
<?php } else { ?>
 <style type="text/css" media="screen">
 </style>
<?php } ?>
</head>
<body>
<div id="outer-wrap">
 <div id="header"></div>
 <div id="border-wrap">
 <div id="container-wrap">
  <div id="container">
   <div id="center" class="column">
    <div id="user-wrap">
     <?php if (mosCountModules('user1')) { ?>
      <div id="user1"><?php mosLoadModules('user1');?></div>
     <?php } ?>
     <?php if (mosCountModules('user2')) { ?>
      <div id="user2"><?php mosLoadModules('user2');?></div>
     <?php } ?>
    </div>
    <div id="content"><?php mosMainBody(); ?></div>
   </div>
   <?php if (mosCountModules('left')) { ?>
    <div id="left" class="column"><?php mosLoadModules('left');?></div>
   <?php } ?>
   <?php if (mosCountModules('right')) { ?>
    <div id="right" class="column"><?php mosLoadModules('right');?></div>
   <?php } ?>
  </div>
 </div>
 </div>
 <div id="footer"></div>
</div>
</body>
</html>

CSS is below here

/* Mawson Instute - Command Template */
/* Design by Runey */
/* layout.css CSS file */
/* Controls the color of the template */

body {
 margin: 0px;
 padding: 0px;
}

#outer-wrap {
 width: 900px; /* width of website */
 margin: 0 auto; /* center hack */
}

#header {
 height: 187px;
 clear:both;
}

#border-wrap {
}

#container-wrap {
 width: 856px; /* website width - left border wide - right border width */
 margin: 0 auto; /* center hack */
}

.column {
 position: relative;
 float: left;
}

#center {
 width: 100%;
}

#user1 {
 margin-bottom: 3px;
 float: left;
 clear: left;
}

#user2 {
 margin-bottom: 3px;
 float: left;
 clear: right;
}

#content {
 clear: both;
}

#left {
 width: 165px; /* left column width */
 right: 165px; /* left column width */
 margin-left: -100%; /* container width */
}

#right {
 width: 165px; /* right column width */
 margin-right: -165px; /* right column width */
}

#footer {
 height: 87px;
 clear: both;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background-repeat and firefox

Reply via email to