Problem with ie6

Get Started
1

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

2

I see some inconsistencies.

You should always give floated elements a width.

Also why are you floating an element that is positioned absolute?

Look at this section of CSS.


[COLOR="Red"]
#AccountText{float:left;position:absolute; top:0px; left:55px;}[/COLOR]
#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;}

Lets assume you are on a one way street all the cars are driving in the same direction and are also parked in the same direction. Lets refer to this as the normal flow.

When you positioned an element absolute, you are driving the wrong way or lets say you are going against the normal flow.

I will avoid using absolute positioning and float on a div at the same time.

Also internet explorer 6 will create a 3px gap when elements are given margin in the direction of the float.

Example: if you position a element left, then avoid giving that element a left margin because IE 6 will add a 3px gap. Use padding instead or make the element display inline.

There are too many conflicting elements and styles. My advised is this and it’s a hard one.

Scrap the layout and start from scratch.

If you are going some where and lost your way, start from the beginning, other wise you’ll keep getting lost.

Send me a PM and I can help you.

IC

3

Hi Iconic Creator, 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&#37;; 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

4

Go back to your codes, comment out section after section in IE 6, testing each step, do this if you cannot spot the problem just from looking at your codes.

You can also try this when IE 6 is being a selfish @#$%, I usually go with IE 6 specific commenting.

I’m sure most of the issues has to do with your code but that’s the brilliance of IE browser specific commenting.

If your website works in all other browsers and is validating, then use commenting.

I’ll look at your codes.

IC

5

I look at your codes and there are too many things going on, this makes troubleshooting a nightmare.

You have a table wrapper, then bunch of inline styles.

I am not trying to sound arrogant but your coding is very sloppy, remove all inline style.

Go back to the drawing table section by section, remove the table.

Divide the page into meaning section - this is highly helpful when a problem occurs.

So build each section of the page separately, then add all the sections together, this way you’ll spot a problem. It’s like making a car, you build the header, sidebars, Nav and then add it all up.

There is a high possibility styles and markup are conflicting.

IC