Help - Search - Members - Calendar
Full Version: help > code not compatible with older IE
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
archi
<!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>Untitled Document</title>
</head>
<style type="text/css">


#rightbox {
clear:both;
text-align: left;
width:803px;
float:right;
overflow:hidden !important;
border-left:1px solid #dddddd;
border-right:1px solid #dddddd;
border-bottom:1px solid #dddddd;
}
#rightbox table.featuredtable .featuredcol0 {
border-right:2px dotted #dddddd;
}
#rightbox table.featuredtable .featuredcol0, #rightbox table.featuredtable .featuredcol1{
border-bottom:2px dotted #dddddd;
}

#rightbox table.featuredtable table td {
padding:4px !important;
}

#scCompanyMenu {

margin-top: 5px;
}
#scCompanyMenu > li {
padding: 0 9px;
}
#scCompanyMenu.nav > li {
}
#scCompanyMenu a {
cursor: pointer;
line-height: 16px;
}
#scCompanyMenu a:hover {
text-decoration: none;
}
#scCompanyMenu .scCompanyMenu-standard a {
display: block;
padding: 0 10px 3px 5px;
}
#scCompanyMenu .scCompanyMenu-standard li, #scCompanyMenu .scCompanyMenu-standard a {
color: #0066CC;
text-decoration: none;
}
#scCompanyMenu .scCompanyMenu-standard li.hover a, #scCompanyMenu .scCompanyMenu-standard a:hover {
color: #FFFFFF;
}
#scCompanyMenu .vr {

background: none repeat scroll 0 0 #FFFFFF;
border-left: 1px solid #CCD6D1;
height: 35px;
margin: 0;
padding: 0;
position: relative;
top: -12px;
width: 1px;
}
#scCompanyMenu ul {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #E7EBE9;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-color: -moz-use-text-color #CCD6D1 #CCD6D1;
border-right: 1px solid #CCD6D1;
border-style: none solid solid;
border-width: medium 1px 1px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), -3px -3px 6px rgba(255, 255, 255, 0.6) inset;
font-size: 12px;
left: -2px;
padding: 8px;
position: absolute;
top: 100%;
width: 160px;
z-index: 99999;
}
#scCompanyMenu ul li {
padding: 0;
}
#scCompanyMenu ul.scCompanyMenu-standard a {
padding: 3px 10px 3px 5px;
}
#scCompanyBar #scCompanyMenu, #scCompanyBar #scCompanyMenu ul.scCompanyStandard a {
}
body #scCompanyMenu ul.scCompanyMenu-standard li a, body #scCompanyMenu ul.scCompanyMenu-standard li, body #scCompanyMenu ul.scCompanyMenu-standard a {
}
#scCompanyMenu ul.scCompanyMenu-standard li.hover a, #scCompanyMenu ul.scCompanyMenu-standard a:hover {
}
#scCompanyMenu ul.scCompanyMenu-standard .hr {
background: none repeat scroll 0 0 #CCD6D1;
border-bottom: 1px solid #FFFFFF;
height: 1px;
margin: 4px 1px;
}
#scCompanyMenu li .dir {
padding-right: 10px;
}
#scCompanyMenu li #scCompanyMenu_Cart {
}


.btn, button, input, .label, textarea, .ui-state-default {
font-family: Segoe,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6 {

}

body {

color: #21262B;
font-size: 12px;
margin: 0pt;
padding: 0pt;
}

p {
word-wrap: break-word;
}

a .txt {
color: #333333;
}

a:hover .txt {
text-decoration: none;
}

ul.clean {
margin: 1em 0pt;
padding: 0pt;
}

ul.clean li {
list-style: none outside none;
}





.grad-silver, #search {
background: -moz-linear-gradient(center top , #FBFFFD 0%, #E5E9E7 100%) repeat scroll 0% 0% transparent;
}

.grad-blue-radial {
background-color: #0073E5;
box-shadow: 0pt -6px 5px -6px rgba(0, 0, 0, 0.6) inset, 0pt 7px 5px -6px rgba(0, 0, 0, 0.5) inset;
color: #FFFFFF;
text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

.tags div, .tag {
float: left;
font-size: 14px;
margin: 0pt 5px 5px 0pt;
}

.shoparrow {
background: url("/product-info/images/shopnowarrows.gif") no-repeat scroll right center transparent;
padding-right: 10px;
}



.content {
clear: both;
margin: 0pt auto;
padding: 0pt;
width: 794px;
}

.content > .main, .content > .aside {
display: inline;
float: left;
}

.content > .main {
margin: 0pt auto;
width: 593px;
}

.content > .aside {
border-left: 1px solid #CCCCCC;
margin: 0pt 0pt 0pt 10px;
padding: 0pt 0pt 0pt 10px;
width: 180px;
}



.icon.dir, .icon-right {
padding-left: 0pt;
padding-right: 18px;
}

.icon.arrow {
background: url("/ui/bullet-arrow.png") no-repeat scroll left center transparent;
margin-left: 16px;
padding-left: 8px;
}

.icon.arrow-down.dir {
background: url("/ui/dropdown-arrow.png") no-repeat scroll right center transparent;
}

.icon.cart {
background: url("/icons/shoppingcart-icon-16.png") no-repeat scroll right center transparent;
}

.nav {
list-style: none outside none;
margin: 0pt;
overflow: visible;
padding: 0pt;
}

.nav > li {
display: inline-block;
float: left;
}

.nav > li.last {
float: right;
}

.nav > a {
display: inline-block;
}


#scCompanyBar {
background-image:url("/product-info/images/bluebgmenu.jpg");
border-bottom: 3px solid #CCD6D1;
box-shadow: 0pt 1px 3px 1px rgba(0, 0, 0, 0.2), 0pt -1px 0pt #FFFFFF inset;
height: 32px;
left: 0pt;
line-height: 1;
margin: 0pt;
position: fixed;
right: 0pt;
text-shadow: 1px 1px 0pt #FFFFFF;
top: 0pt;
z-index: 999;
}

#scCompanyBar-content {

margin: 0pt auto;
position: relative;
width: 960px;
}

#scCompanyBar-content > .nav {
position: relative;
top: 4px;
}

#scCompanyBar-content > .nav > li {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0pt;
position: relative;
}

#scCompanyBar-content > .nav > li > a {
height: 34px ! important;
line-height: 1 ! important;
}

#scCompanyBar-content > .nav > li.first {
left: 0pt;
padding-top: 6px;
width: 210px;
}

#scCompanyBar-content > .nav > li.middle {
bottom: -1px;
right: 0pt;
top: -1px;
width: 310px;
}

#scCompanyBar-content > .nav > li.middle a {
background: none repeat scroll 0% 0% #DDEEFF;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px 20px 0px rgba(255, 255, 255, 0.03) inset, 0px -20px 20px rgba(0, 0, 0, 0.075) inset, 0px 20px 20px rgba(255, 255, 255, 0.1) inset;
padding: 10px 9px 6px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
}

#scCompanyBar-content > .nav > li.middle a:hover {
background-color: #3399FF;
color: #FFFFFF;
}

#scCompanyBar-content > .nav > li.last {
right: 0pt;
}

#scCompanyBar, #scCompanyBar-content, #scCompanyBar-content > .nav, #scCompanyBar #scCompanyBar-content > .nav > li.last {
overflow: visible ! important;
white-space: nowrap;
}

#scCompanyBar-content a {
text-decoration: none;
}



ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none outside none;
margin: 0pt;
padding: 0pt;
}

ul.dropdown {
float: left;
position: relative;
z-index: 597;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
}

ul.dropdown li.hover, ul.dropdown li:hover {
cursor: default;
position: relative;
z-index: 599;
}

ul.dropdown ul {
left: 0pt;
position: absolute;
top: 100%;
visibility: hidden;
width: 100%;
z-index: 598;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
left: 99%;
top: 1px;
}

ul.dropdown li:hover > ul {
visibility: visible;
}



</style>


<html>




<div id="scCompanyBar" class="grad-silver">
<div id="scCompanyBar-content">

<ul class="nav">

<li class="first left">Hello.<a href="/login.html"> Sign In</a> View in cart for Extra Savings - The more you buy , The more you save <a href="/myaccount.html" style="color:blue">Start here.</a>

</li>



<li class="last align-right">

<ul id="scCompanyMenu" class="align-left nav dropdown dropdown-horizontal">

<li>
<a class="icon arrow-down dir">Customer&nbsp;Service</a>

<ul class="scCompanyMenu-standard">

<li><a href="/contactus.html">Contact Us</a></li>


<li class="hr"></li>


<li><a href="/whybuyfromus.html" rel="nofollow">Why Buy From Us</a></li>

<li><a href="/Customer-Testimonials.html" rel="nofollow">Testimonials</a></li>

<li><a href="/help.html" rel="nofollow">Help Center</a></li>


<li class="hr"></li>

<li><a href="/rebates-center.html" rel="nofollow">Rebate Center</a></li>


<li class="hr"></li>


<li><a href="/price-match-guarantee.html" rel="nofollow">Price Match</a></li>


</ul>

</li>

<li class="vr"></li>

<li>
<a class="icon arrow-down dir">My&nbsp;Account</a>
<ul class="scCompanyMenu-standard">
<li>
<a href="/login.html" rel="nofollow">Create Account</a>
</li>
<li>
<a href="/login.html" rel="nofollow">Log-In</a>
</li>
<li>
<a href="/ac_checkout_lookup.html" rel="nofollow">Order Status</a>
</li>
</ul>
</li>

<li class="vr"></li>

<li>
<a href="/cart.html" id="menu-cart" class="icon icon-right cart">1 items</a></li>
</li>
</ul>


</li>

</ul>
</ul>
</div>
</div>

</html>


Frederiek
Start by fixing the markup errors found by the validator (link on top/bottom of this page).
Check the CSS too at http://jigsaw.w3.org/css-validator/ .

Among others, there's no BODY tag and the entire <style> tag belongs inside the HEAD tag.
Better yet, create an external CSS file and link to that, also inside HEAD.

You use some CSS3, and then only generic or -moz, that older browsers don't understand.
Create CSS3 at http://css3generator.com/ and make sure the look is still acceptable for older browsers, without the linear-gradients, border-radius, shadows and such.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.