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 & 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();?> items <?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> : : <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 & 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();?> items <?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> : : <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