SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member greenfin's Avatar
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question php causing IE problem with sliding doors navigation

    Hello and thanks in advance for any direction! I am stumped!

    Firefox displays what I expected from the following code, but the first tab is only partially seen in IE7. The active state, and therefore tab color change, is applied dynamically via php based on the query string of the single index.php page. (Alphabetical query strings represent the different pages and numerical strings represent individual item numbers.)

    When I remove the first link in the "sliding doors" navigation (home tab) IE actually shows what is expected. This is rather confusing as the active state assignment seems ok as the left background image is applied correctly, but the right background image and the actual link are missing from IE7.

    Test link: http://sevenstarssoap.com/test/index.php

    abbreviated code:
    Code:
    <body id="active">
    <?$path = $_SERVER['PHP_SELF'];
    $page = basename($path);
    $page = basename($path, '.php');
     
    $query = $_SERVER['QUERY_STRING'];
    $query = explode('=', $query);
    $query = $query[1];?>
    
    <div id="wrapper">
    <div id="header">
    <h1>Seven Stars Soap</h1>
    <h2>Handmade Glycerin Soap Collections</h2>
    <h5>soothe and pamper dry skin</h5>
    <div id="hnav">
    <ul>
    <li <? if(($page == 'index') && ($query == '')) print ' class="active"'; ?><a href="index.php">Home</a></li>
    <li <? if(($page == 'index') && ($query == 'a' | ($query > '0' && $query < '30'))) print ' class="active"'; ?>><a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">Collections</a></li>
    <li <? if(($page == 'index') && ($query == 'b')) print ' class="active"'; ?>><a href="index.php?pg=b" title="About SevenStarsSoap.com">About</a></li>
    <li <? if(($page == 'index') && ($query == 'c')) print ' class="active"'; ?>><a href="index.php?pg=c" title="Contact SevenStarsSoap.com">Contact</a></li>
    </ul>
    </div></div>
    associated css:
    Code:
    * {margin:0;padding:0}
    body {
    	font-family: Georgia, "Times New Roman", Times, serif;
      background-color: #aaa;
    	color: #000;
    }
    ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
    	margin-top: 14px;
    	margin-bottom: 14px;
    	padding-top: 0;
    	padding-bottom: 0;
    }
    #wrapper {
    	width: 760px;
    	margin-right: auto;
    	margin-left: auto;
    	color: #000;
    	background-color: #eee;
    	background-position: left top;
    	border-left: 2px solid #636;
    	border-right: 2px solid #636;
    	border-bottom: 2px solid #636;
    }
    #header {
      padding-bottom:20px;
      color: #fff;
    	background-color: #636;
    	margin-bottom:0em;
    	text-align:center;
    }
    #header h1 {
      font: normal 200% Georgia, "Times New Roman", Times, serif;
    	padding-left:0px;
    	padding-top:0px;
    	margin-top: 0px;
    	color: #eee;
    	background-color: transparent;
    }
    #header h2 {
      font: italic 130% Georgia, "Times New Roman", Times, serif;
    	color: #eee;
    	background-color: transparent;
    }
    #hnav {
      float:left;
    	font-size:80%;
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	margin-top: -6px;
    }
    #hnav ul {
      list-style-type: none;
    	margin: 0 auto;
    }
    #hnav li {
      float:left;
    	background: url("img/left.png") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
    }
    #hnav li a {
    	float:left;
    	display:block;
      background: url("img/right.png") no-repeat right top;
      padding:5px 15px 4px 9px;
    	color:#eee;
    	border-right: 1px solid #636;
    	text-decoration:none;
    }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #hnav a {float:none;}
    /* End IE5-Mac hack */
    #hnav a:hover {
      color:#000;
    	background-color: #636;
    }
    body#active li.active  {
    	color:#636;
    	background-image:url("img/left-on.png");
    }
    body#active li.active a:link, body#active li.active a:visited {
      color:#636;
    	background-image:url("img/right-on.png");
      padding-bottom:5px;
    }
    I apologize if this inquiry is posted in the wrong forum. By now I am unsure whether the issue is that of php or css! Please indicate if I should have posted the complete css/xhtml/php. Thank you.

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,426
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Since PHP doesn't affect a browser going to move this to a more appropriate forum.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    What stymiee is saying is that PHP has absolutely nothing to do with page rendering in the browser. All that is ever sent to the browser is HTML / CSS and Javascript.

    Can you please post the HTML that is generated from that code?
    (Copy and paste the source code once you load the page)

  4. #4
    SitePoint Member greenfin's Avatar
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks stymiee and yellowshoe! here is the php-produced html for the page in question:

    Code:
    <!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" lang="en" xml:lang="en">
    <head>
    <title>Handmade Glycerin Soaps Best Dry Skin Soap</title>
    <meta http-equiv="content-language" content="en" />
    <meta name="description" content="Beautifully designed handmade glycerin soap collections to pamper your skin, soothe dry skin, and decorate your bathroom." />
    <meta name="keywords" content="soap,handmade,glycerin,dry,skin,pamper,decorate,collections " />
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta name="robots" content="index,follow" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <link href="style_soap2.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
    <meta http-equiv="content-style-type" content="text/css" />
    </head>
    <body id="active">
    
    <div id="wrapper">
    <div id="header">
    <h1>Seven Stars Soap</h1>
    <h2>Handmade Glycerin Soap Collections</h2>
    <h5>soothe and pamper dry skin</h5>
    <div id="hnav">
    <ul>
    <li class="active"<a href="index.php">Home</a></li>
    <li><a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">Collections</a></li>
    <li><a href="index.php?pg=b" title="About SevenStarsSoap.com">About</a></li>
    <li><a href="index.php?pg=c" title="Contact SevenStarsSoap.com">Contact</a></li>
    </ul>
    </div></div>
    
    <div class='content'><div class='inside'><h1>Got Dry Skin?</h1>
    <h3>Our glycerin soap moisturizes!</h3>
    <p></p>
    <p>Seven Stars Soap will moisturize your dry skin and stop the itching. We mold our soaps from the highest quality glycerin soap available &mdash; it even meets vegan guidelines!</p>
    <p>Crystal clear Seven Stars Soaps are handmade to your order. Choose the shapes, colors and fragrance that you like. For really sensitive skin your soap can be ordered without fragrance or color.</p>
    <p>Check out our <a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">Seven Stars Soap Catalog</a>.</p>
    <h2>Soap Collections</h2>
    <p>Our soap collections make a lovely gift that says, <em>You're special!</em></p>
    
    <p><img src="img/soap-collection.jpg" alt="Seven Stars Soap Collections include several handmade glycerin soaps, loofah and soapdish." /></p>
    <p>Our soap collections feature everything you see here &mdash; colorful scented soaps, a high quality loofah for exfoliating skin and a slotted soapdish to keep your soap fresh.</p>
    </div></div>
    <div class="content">
    <div class="inside">
    <h2>Seven Stars Soap Collection of the Day</h2>
    <div class='day'><div class='center'><a href='index.php?SID=7'><img src='img/7.jpg' alt='Flying Insects Soap Collection of the Day' width='200px' /></a><h5><a href='index.php?SID=7'>Flying Insects</a> is the Collection of the Day!</h5></div><p><strong>Seven Stars Soap Flying Insects Collection includes:</strong></p><ul><li>2&nbsp; bath-size Lady Bugs</li><li>4&nbsp; hand-size Bees and Dragonflies</li><li>4&nbsp; guest-size Butterflies</li><li>1 five-inch natural exfoliating loofah</li><li>1 slotted wooden soapdish</li><li>fragrance and color of your choosing</li><li>all glycerin soaps sealed in cellophane</li></ul><p>Flying Insects Soap Collection</p><p>$24.95</p><p><a href='img/buy.jpg'>Add to Cart</a></p></div><div class='clear'>&nbsp;</div><a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">See more soap collections!</a>
    <p><strong>Our soaps are made to order!</strong> Select your favorite fragrance and colors when you order a Seven Stars Soap Collection.</p>   
    <p>Cellophane wrappers seal in the fragrance and protect your glycerin soap from moisture. Keep them sealed until use and you'll delight at the fresh aroma!</p>
    </div>
    </div>
    <div class="wide-content">
    <div class="inside">
    <p>We ship to USA addresses via United States Postal Service. International orders are possible, but please contact us first as shipping expenses may be prohibitively expensive.</p>
    <p>Each Seven Stars Soap collection is a complete package to refresh your skin, invigorate your senses and pamper yourself. Have a look at our <a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">handmade glycerin soap selection</a>.</p>
    </div>
    </div>
    <div id="footer">
    <div class="footnav">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li class="contact"><a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">Collections</a></li>
    <li class="contact"><a href="index.php?pg=b" title="About SevenStarsSoap.com">About</a></li>
    <li class="contact"><a href="index.php?pg=c" title="Contact SevenStarsSoap.com">Contact</a></li>
    </ul></div>&copy; 2007 SevenStarsSoap.com
    <p class="small"><strong>Privacy Policy:</strong> Seven Stars Soap collects your personal information only to fulfill your orders and vows to keep it confidential.</p>
    <p class="small"><strong>Returns Policy:</strong> The nature of Seven Stars Soap makes it impossible to 
    accept returns. If you have any objection to the products that you receive, please contact me. I strive to make each customer happy, so let me know that, too!</p>
    </div></div>
    </body>
    </html>
    Thanks for looking!

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    You're missing a '>' at the end of the first list element.

    Remember to run it through the validator to pick these types of mistakes up.

  6. #6
    SitePoint Member greenfin's Avatar
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, what can I say except thank you for pointing out the obvious!

    I couldn't see that missing bracket in the xhtml amongst the php even though I did run it through the validator, but you taught me an important trick - to view source after the php serves up the page. That clarifies things a bit. The validator showed 7 more errors that were all corrected when I added the missing bracket.

    I can breathe again!
    Thanks again and have a wonderful day!
    Liz


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •