I have a problem is:
My website can displayed the top menu in safari or firefox but not in IE8. i do not know this is the CSS or Script or Php problem conflict with IE8.
Thanks for any help!


Moderator: General Moderators



Code: Select all
/*
* site.css
*/
html { }
body {
100%; margin: 0;
font-family: Arial, Verdana, sans-serif; font-size: 12px;
background: url(../images/main/store_header_bg.jpg) repeat-x top;
}
.popup_bg_div {
position: fixed;
left: 0;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
background: #000000;
padding: 10px;
display: none;
}
h1, h2 { font-family: Helvetica, serif; text-align: left; }
.black { color: #000000; }
.blue { color: #6666FF; }
.green { color: #66FF66; }
.red { color: #FF6666; }
.yellow { color: #FFFF00; }
.link { cursor: pointer; }
.white_bg {
background: #FFFFFF;
}
.blue_bg {
background: #0033FF;
}
.red_bg {
background: #FF7D81;
}
.popup {
width: 890px;
height: auto;
background:#FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 10px;
overflow: scroll;
}
.popup2 {
height: auto;
width: auto;
}
.popup_data {
margin-left: auto;
margin-right: auto;
width: 500px;
background: #FFFFFF;
}
span.white { color: #FFFFFF; }
#store_main_div {
width: 980px;
margin-left: auto;
margin-right: auto;
}
#left_column {
float: left;
}
#logo {
margin-left: 20px;
}
.column_data {
padding-top: 5px;
margin-left: 20px;
list-style-type: disc;
color: #FFFFFF;
}
#store_main_body{
width: 980px;
min-height: 450px;
float: left;
background: url(../images/main/store_center_div.jpg) no-repeat;
margin-top: -5px;
}
#store_header_holder {
height: 120px;
background: url(../images/main/store_header_bg.jpg) repeat-x;
}
#store_header {
width: 987px;
margin-left: auto;
margin-right: auto;
height: 120px;
}
#main_menu {
width: 987px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-left: 20px;
}
#main_menu2 {
margin-top: 15px;
width: 100%;
float: left;
height: 35px;
}
#category_listing {
width: auto;
float: left;
visibility: visible;
border: 1px solid #FDD5DF;
}
#store_top_listing_div1 {
width: 220px;
color: #FFFFFF;
background: none;
float: left;
margin-left: 40px;
position: absolute;
z-index: 5;
}
#top_listing1 {
float: left;
display: none;
background: none;
margin-left: 10px;
border: 1px solid #FDD5DF;
}
#store_top_listing_open1 {
background: url(../images/main/category_header_bg.jpg) repeat-x;
padding: 5px 0 5px 20px;
height: 20px;
font-size: 16px;
font-weight: bold;
border: 1px solid #999999;
}
#store_top_listing_div2 {
width: 230px;
color: #FFFFFF;
background: none;
float: left;
margin-left: 320px;
position: absolute;
z-index: 5
}
#top_listing2 {
float: left;
display: none;
background: none;
margin-left: 10px;
border: 1px solid #FDD5DF;
}
#store_top_listing_open2 {
background: url(../images/main/category_header_bg.jpg) repeat-x;
padding: 5px 0 5px 20px;
height: 20px;
font-size: 16px;
font-weight: bold;
border: 1px solid #999999;
}
#store_top_listing_div3 {
width: 230px;
color: #FFFFFF;
background: none;
float: left;
margin-left: 620px;
position: absolute;
z-index: 5
}
#top_listing3 {
float: left;
display: none;
background: none;
margin-left: 10px;
border: 1px solid #FDD5DF;
}
#store_top_listing_open3 {
background: url(../images/main/category_header_bg.jpg) repeat-x;
padding: 5px 0 5px 20px;
height: 20px;
font-size: 16px;
font-weight: bold;
border: 1px solid #999999;
}
.page_heading {
padding: 5px 0 5px 20px;
width: auto;
background: #FAFF97;
color: #666666;
border: #CCCCCC 1px solid;
text-transform: uppercase;
}
.filter_div {
padding: 10px;
}
#pagination_brand_filter_div {
float: left;
width: 100%;
background:#F9F9F9;
padding: 10px 0 10px;
height: 40px;
}
.pagination_div {
width: 500px;
float: left;
clear: both;
}
.pagination {
padding: 10px 0 0 20px;
margin: 0px;
}
#brand_name_div {
width: 200px;
float: left;
height: 30px;
font-size: 16px;
}
#search_div {
float: right;
padding-bottom: 5px;
}
#brands_div {
width: 350px;
color: #FFFFFF;
background: none;
text-align: right;
float: right;
height: 25px;
padding: 5px 10px;
}
.product_listing {
width: 138px;
min-height: 280px;
float: left;
padding: 10px 3px;
margin: 0;
border-bottom: #999999 1px dotted;
}
.product_name {
font-size: 12px;
font-weight: bold;
min-height: 50px;
}
.brand_name {
font-size: 10px;
}
#store_center_common_div {
width: 960px;
float: left;
margin-top: 5px;
margin-left: 10px;
}
#store_left_column_div {
float: left;
width: auto;
color: #000000;
}
#store_center_div {
float: left;
width: auto;
background: #FFFFFF;
min-height: 400px;
}
#store_center_no_category_div {
float: left;
width: 100%;
background: #FFFFFF;
min-height: 400px;
}
#store_page_content_div {
border: 1px solid #F5F5F5;
padding: 5px;
margin-top: 10px;
}
.product_listing_div {
float: left;
}
#right_column_div {
float: left;
width: 200px;
padding: 5px;
color: #FFFFFF;
}
#store_footer_div {
float: left;
vertical-align: top;
width: 100%;
text-align: center;
margin-top: 10px;
}
#notice_highlight {
text-transform: uppercase;
font-weight: bold;
}
.highlight_green {
background: #00FF00;
}
#store_footer_text {
text-align: center;
padding: 20px 10px 0 10px;
height: 55px;
}
/* -------------------------- */
/* Contact Us Form */
.contact_us_form {
margin: 5px 0 10px;
}
/* --Categories Dropdown------- */
* { margin: 0; padding: 0; }
#page-wrap { width: 800px; margin: 25px auto; }
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 0; text-align: justify; }
/*
LEVEL ONE
*/
ul.category_dropdown { position: relative; }
ul.category_dropdown li { width: 210px; clear:both; float: left; background: #FFFFFF; font-size: 11px; font-weight: bold; padding: 2px 0 2px 0;
border: 1px solid #FFFFFF;
}
ul.category_dropdown a:hover { color: #000000; }
ul.category_dropdown a:active { color: #000000; }
ul.category_dropdown li a { display: block; padding: 4px 8px; color: #000000; }
ul.category_dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.category_dropdown li:hover { background: #9DFF9B; color: #FFFFFF; position: relative; border: 1px dashed #FDD5DF; }
ul.category_dropdown li.hover a { color: #000000; }
/*
LEVEL TWO
*/
ul.category_dropdown ul { visibility: hidden; position: absolute; top: 0px; left: 100%; }
ul.category_dropdown ul li { width: 210px; font-weight: normal; background: #000000; color: #FFFFFF; opacity: 0.9;
border-bottom: 1px solid #ccc; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.category_dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.category_dropdown ul ul { left: 100%; top: 0; }
ul.category_dropdown li:hover > ul { visibility: visible; }
/* --Menu Dropdown------- */
/*
LEVEL ONE
*/
ul.menu_dropdown { position: relative; }
ul.menu_dropdown li { float: left; font-size: 16px; font-weight: bold; }
ul.menu_dropdown a:hover { color: #00FF00; }
ul.menu_dropdown a:active { color: #FFFFFF; }
ul.menu_dropdown li a { display: block; padding: 5px 10px 0 10px; color: #6666FF; border-right: 1px solid #e0d3af; height: 25px; background: #none;}
ul.menu_dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.menu_dropdown li.hover,
ul.menu_dropdown li:hover { color: black; position: relative; }
ul.menu_dropdown li.hover a { color: black; }
/*
LEVEL TWO
*/
ul.menu_dropdown ul { width: 230px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 10; }
ul.menu_dropdown ul li { font-weight: normal; background: #000000; color: #FFFFFF;
border-bottom: 1px solid #ccc; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.menu_dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.menu_dropdown ul ul { left: 100%; top: 0; }
ul.menu_dropdown li:hover > ul { visibility: visible; }
/* ----------------------------------------------- */
.listing_row_holder {
background: #FFFFFF;
float: left;
margin: 10px 20px 10px 20px;
/* border: 1px solid #000000; */
}
.listing_row_heading {
font-size: 12px;
font-weight: bold;
float: left;
margin: 10px 20px 10px 20px;
}
.listing_row_title {
font-size: 10px;
font-weight: bold;
float: left;
}
.clear {
clear: left;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.large_form {
font-size: 16px;
font-weight: bold;
float: left;
margin: 10px 20px 10px 20px;
}
.medium_form {
font-size: 12px;
font-weight: bold;
float: left;
margin: 10px 20px 10px 20px;
}
.large_form_text {
font-size: 16px;
font-weight: bold;
}
.customer_main_div {
float: left;
margin: 10px;
width: auto;
border: 1px solid #CCCCCC;
padding: 10px;
}
.customer_details_div {
float: left;
width: 300px;
}
.customer_selection_div {
padding-left: 20px;
float: left;
}
/* ------------------------------------------ */
/* ---- Ordering form ----------------------- */
.sale_form_product_image_div {
float: left;
margin-right: 5px;
}
.sale_form_product_image {
width: 600px;
height: 600px;
padding: 2px;
border: #999999 1px dashed;
}
.sale_form_details {
float: left;
border: 1px solid #999999;
width: 100%:
}
/* ------------------------------------------ */
/* ---- Ordering summary ----------------------- */
.customer_details_small {
font-size: 12px;
padding: 2px;
}
.customer_details_medium {
font-size: 16px;
padding: 2px;
}
.customer_details_large {
font-size: 20px;
padding: 2px;
}
.address_div {
float: left;
padding: 10px;
width: 230px;
}
.sale_product_div {
border: 1px solid #000000;
float: left;
width: 100%;
}
.sale_product_code {
clear: left;
float: left;
width: 100px;
margin: 5px 10px 5px 10px;
}
.sale_product_id {
float: left;
width: 50px;
margin: 5px 10px 5px 10px;
}
.sale_product_name {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_brand {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_quantity {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_allocated {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_shipped {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_unit_price {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_subtotal {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_action {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_product_price {
float: left;
margin: 5px 10px 5px 10px;
}
.sale_id_div {
font-size: 20px;
background: #0099FF;
padding: 10px;
color: #FFFFFF;
}
.sale_other_details_div {
margin-top: 20px;
float: right;
border: 1px solid #333333;
width: 400px;
padding: 10px;
min-height: 250px;
}
.sale_other_details_left_div {
float: left;
}
.status_div {
clear: both;
float: left;
}
.new_remarks_textarea {
float: left;
clear: both;
margin-top: 5px;
}
.old_remarks_textarea {
float: left;
clear: both;
margin-top: 5px;
color: #999999;
}
#add_new_remarks_button {
float: left;
clear: both;
margin-top: 5px;
margin-bottom: 10px;
}
.sale_other_details_right_div {
float: right;
}
.registration_div {
float: left;
clear: both;
margin-bottom: 15px;
}
.balance_div {
margin-top: 5px;
}
.full_border {
border: dotted 1px #666666;
}
/* ------------------------------------------ */
.padded10 {
padding: 10px;
}
.padded_button {
padding: 2px;
}
.border_bottom {
border-bottom: 1px solid #333333;
margin-bottom: 5px;
}
.button {
float: left;
}
.input_field {
float: left;
}
.margintop10 {
margin-top: 10px;
}
.table_container {
width: 100%;
}
.listing {
border: #333333 solid 1px;
width: 100%;
}
.listing_heading {
background: #CCCCCC;
padding: 5px;
}
.listing_heading_end {
width: 200px;
}
.listing_row_even {
background: #EEEEFF;
}
.listing_row_odd {
background: #CCCCFF;
}
.listing_row {
padding: 5px;
}
/* -------------------------------- */
/* --- Order Status Classes ------- */
.sale_status_na {
background: #8AFF8A;
color: #000000;
}
.sale_status_wp {
background: #CC9900;
color: #000000;
}
.sale_status_oi {
background: #FF8A8A;
color: #000000;
}
.sale_status_io {
background: #FF8A8A;
color: #000000;
}
.sale_status_tbca {
background: #333333;
color: #FFFFFF;
}
.sale_status_ca {
background: #333333;
color: #FFFFFF;
text-decoration: line-through;
}
/* -------------------------------------- */
table.sale_product_listing {
width: 100%;
}
tr.sale_product_listing {
}Code: Select all
<!--[if IE 6]><link rel="stylesheet" href="style/IE6.css" type="text/css" media="screen" /><![endif]-->