Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

CSS problem on IE8

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

CSS problem on IE8

Postby henry14 » Fri Sep 16, 2011 8:30 pm

Hi forum,
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.
Image

Image


When i check my CSS file with http://jigsaw.w3.org/css-validator (CSS 2.1 standard), my CSS has 3 errors (look at the picture). But when i choose to validate in CSS 3.0 standard, my CSS hasn't any problem.
I dont know how to make it work on IE8:(
thanks in my appreciate if anyone can help me !
Image
Here is my CSS code
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 {

}
henry14
New php-forum User
New php-forum User
 
Posts: 4
Joined: Thu Jul 28, 2011 3:42 am

Return to CSS

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.