website displayed on Safari but not in IE8

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
henry14
Forum Newbie
Posts: 3
Joined: Mon Jul 25, 2011 9:22 am

website displayed on Safari but not in IE8

Post 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
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: website displayed on Safari but not in IE8

Post by social_experiment »

Most likely a CSS problem as the other two issues would also affect the display of the page in Safari too
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
henry14
Forum Newbie
Posts: 3
Joined: Mon Jul 25, 2011 9:22 am

Re: website displayed on Safari but not in IE8

Post 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 {

}
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: website displayed on Safari but not in IE8

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply