ginaf Posted May 5, 2011 Share Posted May 5, 2011 Hello,To say I'm new to this is an understatement, so please be patient with me! I finally (I thought) got my store ready to go - then I previewed it in IE - and it's all screwed up. Not all of the pages - just the index page. It's confusing to me because all of the pages use the same style sheets. The site is perfect in FF.I did get and 'expanding box error' for my wrapper - but even when I made adjustments to clear that - it displayed the same. I'm thinking it's related to the index page banner - but I can't seem to find the problem.Here's my index page: www.cgsoap.com (I disabled the links so people can't get through til its done)and here's a product page: www.cgsoap.com/lip.phpSome of the less-obvious problems:- the top navigation should have hover images- the left navigation has weird double borders and hoverAs I said - it's just the index page. Weird.I've spent 3 days working on this and just can't seem to figure it.I would be SO grateful if anyone could lend some insight.Thanks,GinaHere's my source code:<?phpsession_cache_limiter('none');session_start();ob_start(); ?><html><!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CeeGee Soap Company</title><!-- // Start Stylesheets // --><link href="cg_ect_style.css" rel="stylesheet" type="text/css" /><link href="design_cg/css/cg_style.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="design_cg/css/banner.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="design_cg/css/jqueryslidemenu.css" /><link type='text/css' href='design_cg/css/basic.css' rel='stylesheet' media='screen' /><link href="design_cg/css/list.css" type="text/css" rel="stylesheet" /><link rel="stylesheet" type="text/css" href="design_cg/css/jquery.ad-gallery.css" /><!-- // Javascript Files // --><script type="text/javascript" src="design_cg/js/jquery.min.js"></script><script type="text/javascript" src="design_cg/js/ddaccordion.js"></script><script type="text/javascript" src="design_cg/js/acordin.js"></script><script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script><script type="text/javascript" src="design_cg/js/jquery.js"></script><script type="text/javascript" src="design_cg/js/scripts.js"></script><!--[if lte IE 7]><style type="text/css">html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/</style><![endif]--><script type="text/javascript" src="design_cg/js/jquery.min.js"></script><script type="text/javascript" src="design_cg/js/jqueryslidemenu.js"></script><script type="text/javascript" src="design_cg/js/simpleCart.js"></script><script type="text/javascript" src="design_cg/js/cart.js"></script><script type='text/javascript' src='design_cg/js/jquery1.4.js'></script><script type='text/javascript' src='design_cg/js/jquery.simplemodal.js'></script><script type='text/javascript' src='design_cg/js/basic.js'></script><script type="text/javascript" src="design_cg/js/jquery-latest.js"></script><script type="text/javascript" src="design_cg/js/switch.js"></script><script type="text/javascript" src="design_cg/js/jquery1.3.2.js"></script><script type="text/javascript" src="design_cg/js/switch_display.js"></script><script type="text/javascript" src="design_cg/js/jquery.min1.3.js"></script><script type="text/javascript" src="design_cg/js/jquery.ad-gallery.js?rand=995"></script><script type="text/javascript" src="design_cg/js/thumbgallery.js"></script><style type="text/css"><!--a:link { color: #738d3d;}a:hover { color: #A3C267;}body,td,th { font-family: Arial, Helvetica, sans-serif;}--></style></head><body><!-- Wrapper div --><div id="wrapper"> <!-- Top header including top navigation --> <div id="header_navi"> <div class="center_header"> <!-- Logo --> <!-- Top Navigation Left --><div class="logo"><a href="index.php"><img src="design_cg/images/logo_490.gif" alt="" /></a><br /></div> <div class="navi"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li class="bg"><a href="index.php" class="home">Home</a></li> <li class="bg"><a href="index.php" class="home">Info</a></li> <li class="bg"><a href="index.php" class="home">Ingredients</a></li> <li class="bg"><a href="index.php" class="home">Cart</a></li> <li class="bg"><a href="index.php" class="home">Track Order</a></li> </ul> </div> </div> <!-- Top Navigation Right --> </div> </div> <div class="clear"></div> <!-- Banner --> <div id="header"><div class="wrap"> <div id="slide-holder"><div id="slide-runner"> <img id="slide-img-1" src="design_cg/images/underconstruciton.jpg" class="slide" alt="" /> <img id="slide-img-1" src="design_cg/images/underconstruciton.jpg" class="slide" alt="" /> <img id="slide-img-1" src="design_cg/images/underconstruciton.jpg" class="slide" alt="" /></div> <!--content featured gallery here --> </div> <script type="text/javascript"> if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"","desc":""},{"id":"slide-img-2","client":"","desc":""},{"id":"slide-img-3","client":"","desc":""}]; </script> </div></div> <div id="slide-controls"> <p id="slide-client" class="text"><span></span></p> <p id="slide-desc" class="text"></p> <p id="slide-nav"></p> </div> <div class="clear"></div> <!-- Content Section --> <div id="contentsec"> <!-- Left Column --> <div class="left_sec"> <!-- Left Categories Navigation --> <div class="categories"> <h2 class="menuheader expandable">Product Categories</h2><ul class="categoryitems"> <li><a href="index.php">Handmade Soap</a></li> <li><a href="index.php">Body Butters</a></li> <li><a href="index.php">Body Scrubs</a></li> <li><a href="index.php">Body Oils</a></li> <li><a href="index.php">Lip Balm</a></li> </ul> </div> <div class="clear"></div> <div class="advertise"> <?php include "vsadmin/db_conn_open.php" ?><?php include "vsadmin/inc/languagefile.php" ?><?php include "vsadmin/includes.php" ?><?php include "vsadmin/inc/incfunctions.php" ?><?php include "vsadmin/inc/incminicart.php" ?> </div> </div> <!-- Right Column --> <div class="right_sec"> <h1>Welcome to <span class="bold">CeeGee Soap Company</span></h1> <!-- Cart --> <div class="clear"></div> <p class="about_txt">Here you will find some wonderful handmade body care products including soap, body butter, body scrubs and lip balm. CeeGee products are nutrient-rich and incredibly gentle because we use wholesome ingredients like olive oil, unrefined shea butter and natural essential oils. See for yourself what a difference quality ingredients and a handmade touch can make – your skin will love you for it!</p> <p><span class="highlight">clean is good!</span></p> <div class="wht_sec"> <ul class="grid"> <li> <img src="design_cg/images/cat_soap.gif" alt="" /> <p class="title">Handmade Soap</p> </li> <li> <img src="design_cg/images/cat_oil.gif" alt="" /> <p class="title">Body Oil</p> </li> <li class="last"> <img src="design_cg/images/cat_lip.gif" alt="" /> <p class="title">Lip Balm</p> </li> </ul> <ul class="sec_row grid"> <li> <img src="design_cg/images/cat_butter.gif" alt="" /> <p class="title">Body Butters</p> </li> <li> <img src="design_cg/images/cat_butter.gif" alt="" /> <p class="title">Body Scrubs</p> </li> </ul> </div> </div> </div> <div class="clear"></div> <!-- Footer --> <div id="footer"> <p class="left">Copyright 2010 CeeGee Soap Company, LLC Lenox, MI <a href="mailto:admin@cgsoap.com"> admin@cgsoap.com</a></p> </div></div></body></html>Here's cg_style.css:@charset "utf-8";/* CSS Document */body { padding:0px; font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px; background-color: #000; margin-left: 3px;}/*----------------------------------------------------------------------------- General Rules-----------------------------------------------------------------------------*/* { padding:0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: 0px;}.left { float:left;}.right { float:right;}.clear { clear:both;}a img { border:none;}.bold { font-weight:bold !important;}.smalltext { font-size:10px !important;}h1 { margin:0px; font-size:24px; font-weight:normal; color:#000; height: 33px; padding-top: 1px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}h2 { padding:0px; margin:0px; font-size:19px; font-weight:normal; color:#000;}h3 { padding:0px; margin:0px; font-size:14px; font-weight:bold; color:#000;}p { padding:0px; margin:0px; font-size:12px; color: #454545; line-height:22px;}span.dis_none { display:none;}.bordr { border:#CCC solid 1px;}p.about_txt { font-size: 14px; line-height: 130%; color: #000; margin-top: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; text-align: justify;}p.about_txt .rightimg{ float:right; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px;}/*----------------------------------------------------------------------------- Wrapper Div-----------------------------------------------------------------------------*/#wrapper { width:1001px; margin-top: 20px; padding: 0px; margin-bottom: 20px; margin-right: auto; margin-left: auto;}/*----------------------------------------------------------------------------- Top header-----------------------------------------------------------------------------*/#header_navi { padding:0px; margin:0px 0px 10px 0px; float:left; width:1001px; height:64px;}/*----------------------------------------------------------------------------- center_header-----------------------------------------------------------------------------*/.center_header { margin:0px; width:1001px; height:64px; float:left; background-color: #FBFAF0; padding: 0px; background-image: url(../images/bg_top_stripes1.jpg);}/*----------------------------------------------------------------------------- Logo-----------------------------------------------------------------------------*/.logo { float:left; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; width: 500px;}/*----------------------------------------------------------------------------- Banner-----------------------------------------------------------------------------*/#cu3er-container { padding:0px; margin:0px 0px 10px 0px; float:left; width:1001px; height:360px;}/*----------------------------------------------------------------------------- Content Section-----------------------------------------------------------------------------*/#contentsec { padding:10px 20px 10px 20px; margin:0px; float:left; width:1001px; background-image: url(../images/bg_stripes1.jpg); background-repeat: repeat-y;}/*----------------------------------------------------------------------------- Left Column-----------------------------------------------------------------------------*/.left_sec { padding:0px; margin:0px; width:226px; float:left;}/*----------------------------------------------------------------------------- Left Categories Navigation-----------------------------------------------------------------------------*/.categories { padding:0px; margin:0px 0px 10px 0px; float:left; width:226px;}h2.heading { padding:12px 15px 0px 15px; margin:0px; width:196px; height:29px; color:#FFFFFF; float:left; font-size:14px; font-weight:normal; background-color: #000;}/* Accordin Menu Start */.menuheader, .openheader{ /*CSS class for menu headers in general (expanding or not!)*/ font-size:18px; color: #FFF; margin-bottom:0px; height:30px; width:211px; /*header text is indented 10px*/ cursor: pointer; clear:both; background-color: #000; padding-top: 7.5px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; font-family: Arial, Helvetica, sans-serif;}.categories ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; float:left; font-family: Arial, Helvetica, sans-serif; font-size: 15px;}.categories ul li{ width:226px; height:33px; float:left; background-color: #617733; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFF;}.categories ul li a{ color: #FFF; font-size:15px; /*custom bullet list image*/ display: block; text-decoration: none; margin-left:0px; background-image: url(../images/arrowbullet_wht.png); background-repeat: no-repeat; background-position: 15px 8px; padding-top: 8px; padding-right: 0px; padding-bottom: 0px; padding-left: 30px; margin-top: 0px; margin-bottom: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFF; height: 33px;}.categories ul li a:visited{ color: #454545;}.categories ul li a:hover{ /*hover state CSS*/ background-color: #738d3d; background-image: url(../images/arrowbullet_wht.png); height: 28px;}/* Accordin Menu End *//*----------------------------------------------------------------------------- Advertise-----------------------------------------------------------------------------*/.advertise { padding:0px; width: 226px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-color: #49ABA1; border-top-width: 20px; border-top-style: solid; border-top-color: #000; height: 400px;}/*----------------------------------------------------------------------------- Right Column-----------------------------------------------------------------------------*/.right_sec { padding:0px; width:715px; float:left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px;}.right_sec h1{ float:left; color: #000;}/*----------------------------------------------------------------------------- Products thumb view-----------------------------------------------------------------------------*/.wht_sec { width:676px; background-color:#000; float:left; color: #FFF; margin-top: 2px; margin-bottom: 2px; margin-left: 0px; margin-right: 0px; padding: 20px;}/*----------------------------------------------------------------------------- Products grid view-----------------------------------------------------------------------------*/.wht_sec ul.grid{ list-style:none; float:left;}.wht_sec ul.sec_row{ margin-top:18px; float:left;}.wht_sec ul.grid li{ width:200px; text-align:center; float:left; margin-right:18px; padding-top:3px; height: 190px;}.wht_sec ul.grid li.last{ margin-right:0px;}.wht_sec ul.grid li a img{ width:192px; height:163px;}.wht_sec ul.grid li p.title{ float:left; color:#FFF; margin-left:0px; width:192px; text-align:center; margin-top: -10px;}.wht_sec ul.grid li p.price{ float:left; color:#5c5c5c; width:57px;}/*----------------------------------------------------------------------------- content top-----------------------------------------------------------------------------*/.cont_top { padding:0px; margin:0px; width:1001px; height:10px; background-color: #FBFAF0;}/*----------------------------------------------------------------------------- content bottom-----------------------------------------------------------------------------*/.cont_botm { padding:0px; margin:0px; width:1001px; height:6px; background-color: #FFF;}/*----------------------------------------------------------------------------- Footer-----------------------------------------------------------------------------*/#footer { padding:0px; margin:5px 0px 20px 20px; width:1001px; float:left;}#footer p{ color:#FFFFFF; font-size:10px; line-height:15px;}a.detail_button {background: transparent url(../images/detail_button.gif) no-repeat top left;}/*--------------------------------------------------------------------------- Additions-----------------------------------------------------------------------------*/.menu_hover { font-size:15px; color: #FFF; margin-bottom:1px; height:27px; width:209px; padding: 10px 0px 0px 15px; /*header text is indented 10px*/ cursor: pointer; clear:both; border:#e3e3e3 solid 1px; font-weight:normal; background-color: #78993d;}.wht_secAbout { width:680px; background-color:#FFF; float:left; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; padding-top: 10px; padding-bottom: 20px; padding-left: 10px; border: thin solid #000; padding-right: 10px; color: #000;}.highlight { font-size: 12px; color: #617733;}.advertiseCopy { padding:0px; height: 30px; width: 226px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: #000;}p.about_txt_info { font-size: 12px; line-height: 130%; color: #000; text-align: justify; margin-top: -8px; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px;}#wrapper #contentsec .right_sec .wht_secAbout .about_txt_info strong u { font-size: 12px; color: #000;}#wrapper #contentsec .right_sec .wht_secAbout p strong u { color: #000;}.ing_highlite { font-size: 12px; color: #617733; font-weight: bold;}.pride_highlite { font-size: 16px; color: #49aba1; font-weight: bold;} Link to comment Share on other sites More sharing options...
shadowayex Posted May 5, 2011 Share Posted May 5, 2011 Next time, wrap your code in [ code ][ /code ] (without the spaces).Anyway, you don't need the first <html> before the DOCtype, and i don't know what the purpose of the ob_start() is, but I'm unsure if it's necessary.You don't need to comment inside of style tags, that's only script tags (AFAIK).The IE conditional should of the style tag (again AFAIK).Finally, take your code to the W3C validator. It'll give you problem areas that you can either fix yourself, or come back to us with more specific places to look. Link to comment Share on other sites More sharing options...
ginaf Posted May 5, 2011 Author Share Posted May 5, 2011 That was it!!! The extra html tag before DOCtype was the source of all of my pain.Thank you so much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.