Jump to content

browser compatability with css help please


khalen

Recommended Posts

Hi All,its my first post so I am not too sure of the correct proceedure in these matters. Anyway, I have a small training package I am developing and I have been using the following css code to make the display look pretty. However, IE seems ok but Firefox display is really ugly.I cant see why cause it looks like there is code to include other browsers including firefox!Also different size monitors display differently making it look crap also. Can anyone please help. My coding knowledge is VERY limited so please keep it very basic. Thanks.

body{		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */		background-color:#c8d0e0;	}		a img  {	border : none;	}		#footer{		height:30px;		vertical-align:middle;		text-align:right;		clear:both;		padding-right:3px;		background-color:#cccccc;		margin-top:2px;		width:790px;	}	#footer form{		margin:0px;		margin-top:2px;	}	#dhtmlgoodies_dragDropContainer{	/* Main container for this script */		width="100%";		height="100%";		background-color:#c8d0e0;		-moz-user-select:none;	}	#dhtmlgoodies_dragDropContainer ul{	/* General rules for all <ul> */		margin-top:0px;		margin-left:0px;		margin-bottom:0px;		padding:2px;	}		#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */		list-style-type:none;		height:15px;		background-color:#cccccc;		border:1px solid #000;		padding:2px;		margin-bottom:2px;		cursor:pointer;		font-size:13px;		line-height:15px;	}		li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */		border:1px dotted #600;			background-color:#cccccc;	}		#dhtmlgoodies_dragDropContainer ul li.correctAnswer{	/* Correctly moved item */		background-color:lime;		color:#000;	}	#dhtmlgoodies_dragDropContainer ul li.wrongAnswer{	/* Item moved to wrong box */		background-color:red;		color:#FFF;	}			/* LEFT COLUMN CSS */	div#dhtmlgoodies_listOfItems{	/* Left column "Available students" */				float:left;		padding-left:50px;		padding-right:10px;				/* CSS HACK */		width: 180px;	/* IE 5.x */		width/* */:/**/160px;	/* Other browsers */		width: /**/160px;					}	#dhtmlgoodies_listOfItems ul{	/* Left(Sources) column <ul> */		height:160px;		width: 200px;	}			div#dhtmlgoodies_listOfItems div{		border:1px solid #999;			}	div#dhtmlgoodies_listOfItems div ul{	/* Left column <ul> */		margin-left:5px;	/* Space at the left of list - the arrow will be positioned there */		margin-right:5px;	/* Space at the right of list */	}	#dhtmlgoodies_listOfItems div p{	/* Heading above posible answers column */		width: 210px;		margin:0px;			font-weight:bold;		padding-left:12px;		background-color:#c8d0e0;			color:#000000;		margin-bottom:5px;	}	/* END LEFT COLUMN CSS */		#dhtmlgoodies_dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */		background-color:#E2EBED;		border:1px solid #317082;	}		/* Start main container CSS */		div#dhtmlgoodies_mainContainer{	/* Right column DIV */		width:590px;		float:right;		}	#dhtmlgoodies_mainContainer div{	/* Parent <div> of small boxes */		float:left;		margin-right:10px;		margin-bottom:10px;		margin-top:0px;		border:1px solid #c8d0e0;		/* CSS HACK */		width: 172px;	/* IE 5.x */		width/* */:/**/170px;	/* Other browsers */		width: /**/170px;					}	#dhtmlgoodies_mainContainer div ul{		margin-left:10px;	}		#dhtmlgoodies_mainContainer div p{	/* Heading above question boxes */		margin:0px;		padding:0px;		padding-left:12px;		font-weight:italic;		background-color:#c8d0e0;			color:#000000;			margin-bottom:5px;	}		#dhtmlgoodies_mainContainer ul{	/* Small box in right column ,i.e <ul> */		width:152px;		height:80px;			border:0px;			margin-bottom:0px;		overflow:hidden;			}		#dragContent{	/* Drag container */		position:absolute;		width:150px;		height:15px;		display:none;		margin:0px;		padding:0px;		z-index:2000;	}	</style>	<style type="text/css" media="print">	div#dhtmlgoodies_listOfItems{		display:none;	}	body{		background-color:#FFF;	}	img{		display:none;	}	#dhtmlgoodies_dragDropContainer{		border:0px;		width:100%;	}

Link to comment
Share on other sites

It's hard to say with just seeing the CSS only. Provide a url so we can look at the site.
hi newseed, its not on a site at the moment it is being run from localhost. I got to get it running properly then I will call it from a page in my website. I can prob zip the folder and send that to you if I am allowed to email. It is only a few kb in size because it is only the template page and page 2. Every other page will be from this template. Not sure of the rules and all on here!PLEASE, can anyone help! I can't forward until I get this sorted.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...