The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> help > code not compatible with older IE
archi
post May 8 2012, 04:40 PM
Post #1





Group: Members
Posts: 1
Joined: 8-May 12
Member No.: 17,079



<!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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 9 2012, 01:31 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,444
Joined: 23-August 06
From: Europe
Member No.: 9



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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th October 2014 - 10:20 AM