problem with ie6

[barricades]

Hey there, after a bit of a struggle i've managed to get my website looking right in everything apart from ie6.

I know most people use a different browser but according to my google analytics more people using my site view it through ie6 than ie7! So I'd really like to get it sorted

anyway, the site is bigmenslargeclothes.co.uk and the problem in ie6 is the borders are missing and the width is too big - as you can clearly see if you look at it through ie6

If anyone can help me with this i'd be eternally grateful, I've been struggling with this for a week now

thanks in advance

[birdbrain]

Hi there barricades,

you page shows 35 coding errors - [validator.w3.org ].

Try correcting them and see if that helps. ;)

birdbrain

[barricades]

Hi BirdBrain, thanks for the input.

I'm a bit new to all this stuff and kind of learning as I go. I've done the validation thing and I see all the I've made too much use of id's and all the other issues. I've also spent the last hours since I posted reading more tutorials and w3c standards etc so I've got a better understanding of what I'm at.

but I'd like your opinions if poss.

I had initially coded the page myself, I was delighted to have found out about relative and absolute positioning and thought I'd finally managed to understand how to position divs. Everything worked fine in FF & ie8 but there were a couple of problems in ie6 & ie7.

I approached a design and coding company to try and get it sorted out quickly and the fella there told me that those issues were because whoever designed my site hadn't complied with standards and that using absolute positioning was the easy, sloppy, way out for people who didn't know what they were doing. He told me it'd take him 2-5 hours to rewrite everything and sort it all out for me.

A couple of days later he told me that he'd spent 3 hours re-coding the header and the main content column, but while it worked in ff and ie8 there were still problems with ie6 and ie7. He reckons he's spent another 4 hours getting it to the state it's in now where it works in ie7 but not ie6.

This all took a week and a half to get to this stage so I've decided to try to fix it all myself, hence posting on here and reading up lots more. But from what I've read the absolute positioning I used in the first place wasn't so bad after all.

For example, the header.
here's what I had:

<div id="logoWrapper">


 <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
 <div id="telephone"></div>
 <div id="pcsrsg"><a href="shippinginfo" rel="nofollow" >Shipping &amp; Returns</a> : : <a href="privacy" rel="nofollow" >Privacy</a> : : <a href="contact_us" rel="nofollow" >Contact</a> : : <a href="index.php?main_page=sizeGuide" rel="nofollow" >Size Guide</a></div>
 <div id="AccountWrapper">
 <div id="Account"></div>
 <div id="AccountText"><span id="TopLine">My Account</span><br/>
<span id="bottomLine"><?php if ($_SESSION['customer_id']) { ?>
 <a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_LOGOFF; ?></a> : : 
 <a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
<?php
 } else {
  if (STORE_STATUS == '0') {
?>
 <a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_LOGIN; ?></a>
<?php } } ?></span>
  </div>
 </div>
 
 
 <div id="ShoppingWrapper">
 <div id="ShoppingTrolley"></div>
 <div id="TrolleyContents"><span id="TopLine"><?php sizeof($_SESSION['cart']->get_products()); echo $_SESSION['cart']->count_contents();?> &nbsp;items&nbsp;<?php $header_cart = $currencies->format($_SESSION['cart']->show_total()); echo $header_cart;?></span><br/><span id="bottomLine"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> &nbsp;:&nbsp;:&nbsp;&nbsp;<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_CHECKOUT; ?></a></span>
 </div>
 </div>
 

<!--eof-branding display-->

</div>
<div id="metalicbar"></div>
<!--eof-header logo and navigation display-->

And the CSS:

#logoWrapper{
position:relative;
background-image: url(../images/header_bg.jpg);
background-repeat:no-repeat;
width:850px;
height:170px;
}
#navMainSearch {position:relative;left:575px;top:15px;width:275px;}
#telephone{position:absolute;left:310px;top:5px;height:20px; width:152px; background-image:url(../images/phonenumber.gif);}
#pcsrsg{position:absolute;left:265px;top:30px; font-size:11px;}
#ShoppingWrapper{position:relative;left:575px;top:102px; }
#ShoppingTrolley{ background-image:url(../images/ShoppingTrolley.gif); background-repeat:no-repeat;position:absolute; top:0px; left:0px;height:40px;width:50px;}
#TrolleyContents{float:left;position:absolute; top:0px; left:55px;}

#AccountWrapper{position:relative;left:575px;top:44px; }
#Account{background-image:url(../images/MyAccount.gif); background-repeat:no-repeat;position:absolute; top:0px; left:0px;height:40px;width:50px;}
#AccountText{float:left;position:absolute; top:0px; left:55px;}

/*Spans*/
#TopLine{ font-size:18px;}
#bottomLine{font-size:10px;}

#metalicbar{width:850px; height:10px; background-image:url(../images/metalbar.gif); background-repeat:repeat-x;}

Obviously you can see what he's done in your browser but here it is just in case:

<!--bof-branding display-->
<div id="logoWrapper">
<?php 
// BEGIN IE6 TRANSPARENT PNG FIX BY: ZCCAD DJV
$browser = explode(";", $_SERVER['HTTP_USER_AGENT']);
$browser_refined = str_replace(' ', '', $browser[1]);
// END IE6 TRANSPARENT PNG FIX BY: ZCCAD DJV
?>
 <?php if($browser_refined == 'MSIE6.0'){ // BEGIN IE6 TRANSPARENT PNG FIX BY: ZCCAD DJV?>
 
 <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '"></a>'; ?></div>
 <?php }else{ // BELOW IS THE ORIGINAL CODE FOR THIS TEMPLATE BY: ZCCAD DJV?>
 <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
 <?php } // END IE6 TRANSPARENT PNG FIX BY: ZCCAD DJV ?>
<div id="pcsrsg">
 <div id="telephone"><img src="includes/templates/IrishGifts/images/phonenumber.gif" /></div><a href="shippinginfo" rel="nofollow" >Shipping &amp; Returns</a> : : <a href="privacy" rel="nofollow" >Privacy</a> : : <a href="contact_us" rel="nofollow" >Contact</a> : : <a href="index.php?main_page=sizeGuide" rel="nofollow" >Size Guide</a></div>
 <div id="headerright"><div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
 <div id="AccountWrapper">
 <div id="Account"></div>
 <div id="AccountText"><span id="TopLine">My Account</span><br/>
<span id="bottomLine"><?php if ($_SESSION['customer_id']) { ?>
 <a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_LOGOFF; ?></a> : : 
 <a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
<?php
 } else {
  if (STORE_STATUS == '0') {
?>
 <a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_LOGIN; ?></a>
<?php } } ?></span>
  </div>
 </div>
 
 
 <div id="ShoppingWrapper">
 <div id="ShoppingTrolley"><img src="includes/templates/IrishGifts/images/ShoppingTrolley.gif" /></div>
 <div id="TrolleyContents"><span id="TopLine"><?php sizeof($_SESSION['cart']->get_products()); echo $_SESSION['cart']->count_contents();?> &nbsp;items&nbsp;<?php $header_cart = $currencies->format($_SESSION['cart']->show_total()); echo $header_cart;?></span><br/><span id="bottomLine"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> &nbsp;:&nbsp;:&nbsp;&nbsp;<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" rel="nofollow"><?php echo HEADER_TITLE_CHECKOUT; ?></a></span>
 </div>
 </div>
 </div>

<!--eof-branding display-->

</div>
<div id="metalicbar"></div>
<!--eof-header logo and navigation display-->

and CSS:

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat:no-repeat;
width:850px;
height:170px;
}
/*custom header stuff*/
#navMainSearch {width:100%; float:right; margin:.5em 0em 0em 0em}
#pcsrsg{font-size:11px; float:left; margin-left:2em}
#ShoppingWrapper{ float:right; margin:2.3em .5em 0em 0em}
#ShoppingTrolley{width:50px; float:right}
#TrolleyContents{ float:right}

#AccountWrapper{ float:right; margin:2.3em .5em 0em 0em}
#Account{background-image:url(../images/MyAccount.gif); background-repeat:no-repeat;height:40px;width:50px; float:right}
#AccountText{ float:right}
/*Spans*/
#TopLine{ font-size:18px;}
#bottomLine{font-size:10px;}

#metalicbar{width:850px; height:10px; background-image:url(../images/metalbar.gif); background-repeat:repeat-x;z-index:100;}

Was there anything wrong - positioning wise - with what I had done in the first place? (I know about using id's too much - oops) Would I have been able to fix things for ie6&7 with it like the way it was?

thanks for reading this if you got this far, much appreciated passing your knowledge on.

David

[barricades]

hi there, ok I've done the validation thing and cleaned up all but one of the errors (which I'll sort out later but it's not to do with layout I don't think)

Everything looks good in all browsers apart from in ie6 the category pics which are meant to be three to a line horizontally, for some reason the bottom line has been pushed over and there's only two on it and the last one starts a new line underneath.

I've tried sticking in display:inline's but that didn't seem to work - has anyone any other ideas?

Also in both ie6&7 my bullet points on the left sidebar navigation are right up against the text, I can't figure out how to position them like they appear in FF

If anyone feels like helping me out I'd be really really grateful!
David