Cross browser problems

mozart


newbie


Posts: 3
Joined: 2008-12-01
Posted: Mon, 2008-12-01 22:53

Hello, I'm new to css styling, I'm a designer not a programmer, but I'm now learning the programming side too. So I started with some easy sites creating them with css stylesheets. No problem there, I seem to be doing all right untill I start testing my sites in different browsers. it seem to be working in IE7 but not in IE6 or firefox (different issues. I hope my code isn't half that bad. The link to the site I'm working on is http://users.skynet.be/fb224438/ranch/index.html. Here is the code:

css:

@charset "utf-8";
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
}
body{
	text-align: -moz-center;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
.divMainContainer{
	width: 720px;
}
.wrapperHeader{
	width:720px;
	margin-left:auto;
	margin-right:auto;
}
.divHeaderNav{
	display:block;
	float: left;
	width: 520px;
	height: 146px;
}
.divHeader{
	width: 520px;
	height: 106px;
}
.divNav{
	width: 520px;
	height: 40px;
	background-image:url(images/im_nav.jpg);
	background-repeat: no-repeat;
	font-family:"Times New Roman", Times, serif;
	font-size: 29px;
	text-align: left;
	padding-left: 40px;
}
.divMenu{
	display: block;
	float: left;
	width: 200px;
}
.divTopMenu{
	width: 200px;
	height: 14px;
	background-image: url(images/im_menu_top.jpg);
	background-repeat: no-repeat;
}
.menu {
	display:block;
	float:left;
	width:200px;
	text-align: left;
	margin:0px;
	padding:0px;
}
.menu li{
	height: 22px;
	width:200px;
	padding:0px;
	text-decoration: none;
}
.menu li > a {
	display:block;
	height:100%;
	width:100%;
	text-align: left;
	background: url(images/im_btn.jpg);
	background-repeat: no-repeat;
	padding-top:0px;
	padding-left: 20px;
	font-size:18px;
	font-family: "Times New Roman", Times, serif;
	color:#FFFFFF;
	text-decoration:none;
}
.menu li > a:hover{
	background-position: 0 -22px;
}
.menu li > a.selected {
	background-position: 0 -22px;
}
.divText{
	margin-top: 30px;
	margin-left: 40px;
	margin-right: 75px;
	font-family:"Times New Roman", Times, serif;
	font-size: 12px;
	text-align: left;
	text-decoration: none;
}
.divContentGallery{
	width:720px;
	height:400px;
	background-image:url(images/im_content.jpg);
	background-repeat: no-repeat;
}
.divPictureGallery{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture.jpg);
	background-repeat:no-repeat;
}
.divContentInstruction{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content.jpg);
	background-repeat: no-repeat;
}
.divPictureInstruction{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture.jpg);
	background-repeat:no-repeat;
}
.divContentHome{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content_home.jpg);
	background-repeat: no-repeat;
}
.divPictureHome{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture_home.jpg);
	background-repeat:no-repeat;
}
.divContentContact{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content_contact.jpg);
	background-repeat: no-repeat;
}
.divPictureContact{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture_contact.jpg);
	background-repeat:no-repeat;
}
.divContentAbout{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content.jpg);
	background-repeat: no-repeat;
}
.divPictureAbout{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture_about.jpg);
	background-repeat:no-repeat;
}
.divgallery{
	width: 500px;
	height: 380px;
	padding-top: 30px;
}
.divgallery{
	text-align: -moz-center;
}
.divFooter{
	width: 720px;
	height: 40px;
	padding-top: 5px;
	font-family:"Times New Roman", Times, serif;
	font-size: 10px;
	color:#000000;
}
.wrapperMenu{
	width: 720px;
	margin-left:auto;
	margin-right: auto;
}
.divwsk{
	display: block;
	float:left;
	width: 320px;
	font-size:10px;
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	text-decoration:none;
	text-align: right;
}
.menu1 {
	display: block;
	float: left;
	width: 400px;
	margin:0px;
}
.menu1 li{
	display: block;
	float: left;
	padding-right:10px;
}
.menu1 li > a {
	text-align: left;
	font-size:10px;
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	text-decoration:none;
}
.menu1 li > a:hover{
	color: #0066FF;
}
.menu1 li > a.selected {
	color: #0066FF;
}
.style2{
	color:#FFFFFF;
}

Code (markup):

And html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Western Riding</title>
<link href="wrstyles.css" rel="stylesheet

Code (markup):

Thanks

 

What is the area you notice the difference? I suggest you to design for firefox then adjust your design to IE6. There are so many issues with IE6, so we have to manually adjust our styles to be compatible with IE6.

 

its a cross browser compatibility issue,it happens all the time.you can use google extensively to rectify this,orelse go for what sampathsl said,adjust it manually..its a trial and error method basically...also sometimes it wont work properly on other browsers such as safari,check that out too...

 

there are not treatment exceptions (errors).... or he not needed?

 

I was amazed to hear that a CSS code is not working in Firefox . Actually IE6 is the problem creator in many cases, mostly the alignment/JavaScript issues .First of all test your code with Firefox 3 ,then with IE6 .