Page 1 of 1

website displayed on Safari but not in IE8

Posted: Tue Aug 30, 2011 9:47 am
by henry14
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.
Thanks for any help!

Image
Image

Re: website displayed on Safari but not in IE8

Posted: Tue Aug 30, 2011 11:26 am
by social_experiment
Most likely a CSS problem as the other two issues would also affect the display of the page in Safari too

Re: website displayed on Safari but not in IE8

Posted: Fri Sep 16, 2011 10:42 pm
by henry14
Hi guys,
When i check my CSS file with http://jigsaw.w3.org/css-validator (CSS 2.1 standard), my CSS has 3 error (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 {

}

Re: website displayed on Safari but not in IE8

Posted: Sat Sep 17, 2011 8:10 am
by social_experiment
Even if your CSS syntax is correct, browsers apply these rules differently. To have a seperate style sheet for Internet Explorer, add the following into the head of your pages.

Code: Select all

<!--[if IE 6]><link rel="stylesheet" href="style/IE6.css" type="text/css" media="screen" /><![endif]-->
You can substitute IE 6 for the version of internet explorer you are using / creating for.