By cside on

Hi,

Am stuck with a piece of CSS based on browser choice and screen resolution.
I have a modified theme (Blix) to which i have added an extra right hand and left hand region outside of the container.
The theme does exactly what i want it to do in firefox regardless of whether the screen res is 1280x or 1024x. The theme also works in IE at 1280x but in 1024x , the regions are hidden behind the container.

I have used a max-width statement for the body to control the body and have used margin-left and margin-right statements to control the extra regions.

However, when i change the margin-left and margin-right to just 'right:' and 'left' in IE 1024x it works although it then pushes the regions to the far right and left in firefox!

I presume the issue is the difference between how IE and Firefox interpret the 'left' and 'margin-left' statements.

I also guess that i can fix this by calling a separate css file specifically for IE in 1024x resolution.

That, unfortunately, is where my luck runs out as i have no idea how to code that :(

Can anyone help me out with a bit of code to do this for the page.tpl.php and then confirm that all i do with the extra css file is copy and paste the existing css file but with the amended css rendering?

www.blackpool4hotels.com

Many thanks,

⋅ Categories: Drupal 6.x

Comments

cside’s picture

cside commented

Well after checking for hours in different screen res and browsers i figured it was best to set a max-width for the site of 1000px which covers most scenarios. www.blackpool4hotels.com

However, i just cannot get the right hand ads box to sit within the #wrapper div:

<body> 

<?php print theme("onload_attribute"); ?>
<div id="wrapper">
<div id="adsleft"><?php print $adsleft ?></div>

<div id="container">
<div id="toptop">
<div id="topleft"><?php print $topleft ?> </div><div id="top"><?php print $top ?></div>
</div>

  <div id="header">
      <h1><a href="<?php print url() ?>" title="<?php print($site_name) ?>"><?php print($site_name) ?></a></h1>
      <div class="slogan"><span style="color:#ffffff;"><b><?php print($site_slogan) ?></b></span></div>
  </div>
  <div id="navigation">
    <?php if ($search_box): ?>
		<?php print $search_box ?>
    <?php endif; ?>
    <?php if (isset($primary_links)) : ?>
      <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
    <?php endif; ?>
  </div>
<hr class="low" />
  <div id="content">
    <div class="navigation"> <?php print $breadcrumb ?> </div>
    <?php if ($messages != ""): ?>
    	<div id="message"><?php print $messages ?></div>
    <?php endif; ?>
    <?php if ($mission != ""): ?>
    	<div id="mission"><?php print $mission ?></div>
    <?php endif; ?>
    <?php if ($title != ""): ?>
    	<h2 class="page-title"><?php print $title ?></h2>
    <?php endif; ?>
    <?php if ($tabs != ""): ?>
    	<?php print $tabs ?>
    <?php endif; ?>
    <?php if ($help != ""): ?>
    	<p id="help"><?php print $help ?></p>
    <?php endif; ?>
    <!-- start main content -->
    <?php print($content) ?>
    <!-- end main content -->
  </div>
  <div id="subcontent">
    <?php print $left ?> <?php print $right ?>
  </div>
 <hr class="low" />
 
  <div id="footer"><?php print $footer ?>
      <?php if ($footer_message) : ?>
      	<p><?php print $footer_message;?><?php print $footer ?></p><br />
      <?php endif; ?>
       &copy;2009 blackpool4hotels.com is part of the <a href="http://www.csideholidays.com" target="_blank">Cside Holidays Limited</a><br />
       Reg. Address: 5 Alexandra Road, Blackpool FY1 6BU | Company Number: 6848414</a>
  </div>
  </div>
  <div id="adsright"><?php print $adsright ?></div>
   </div>
  <?php print $closure; ?>
</body>

Here are the relevant css snippets:

#adsleft {
width: 100px;
top: 0px;
float: left;
margin: 0 auto;
}

#adsright {
width: 100px;
float: right;
margin: 0 auto;
}

body {
  padding:15px 0;
  font-family: Verdana /*Arial, Helvetica, sans-serif*/;
  font-size:70%;
  line-height:1.6em;
  text-align:center;
  color: #414141;
  background: #96785B;
  margin: 0 auto;
  max-width: 1000px;
}

#wrapper {
max-width: 1000px;
}

#container {
  width: 690px;
  margin:0 auto;
  padding:20px 20px 0 20px;
  text-align:left;   
 }

Can someone please help!

Thanks