Built my CSS site - Different browser problems - please help!

Hi Guys,

I’m new to CSS building sites and was very much a tables’ man so this is my first go at CSS and I think I’ve done well.

I’ve read through a lot of stuff on the forums and finall designed my site www.thisisslough.com using CSS and Xhtml.

What I have done in CSS can be found at www.thisisslough.com/css and I have validated my page with W3C so it is XHTML 1.0 Strict and W3C CSS Validated as you can see from the left hand side buttons if you click on them.

So here is my problem:

- In IE 6.0 on a PC the site shows lovely
- In Firefox on a PC the site is all-over the place
- In Safari on a Mac the site is all-over the place
- In IE 5.0 on a Mac the site is all-over the place

Now Firefox and Safari, although on different platforms look pretty much the same, so if I fix one I can fix the other. I’m not too worried about IE 5.0 on the Mac at this stage.

Now I am not sure what to do now. Here’s my html at www.thisisslough.com/css (view source):


…and here’s my CSS code for the page:

/*start sylesheet;*/
body {
  padding-top: 20px;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  }

span{
	font-family: Verdana, Arial, Sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	line-height: 130%;
	background: #FFFFFF;
}
.menu{
	font-family: Arial, Sans-serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 130%;
	text-decoration: none;;
}
a.menu:link {
	text-decoration: none;
	line-height: 130%;
}
a.menu:visited {
	text-decoration: none;
	line-height: 130%;
}
a.menu:hover {
	text-decoration: underline;
	line-height: 130%;
}


#container {
  margin: 0 auto;
  width: 743px;
  text-align: left
  } 
  
.contentright{
  display:inline;
  float:right;
  text-align: left;
  width:10px;
  font-family: verdana, arial, sans-serif;
  font-size: 10px;
  }

.banner{
  padding:5px;
  display:inline;
  float:left;
  text-align:left;
  width: 743px;
  }

/*makes top rollover menu appear in middle;*/
.topmenu{
  padding:5px;
  display:inline;
  float:left;
  text-align:center;
  width: 743px;
  }

/*start left hand side buttons;*/
#navigator {
  float:left;
  text-align: left;
  margin: 8px 8px 8px 0 ;
  width:120px;
  }

#header {
  float:left;
  width:100%;
  background:url("bg.gif") repeat-x bottom;
  font-size:93%;
  line-height:normal;
  }

#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }

#header li {
  float:left;
  background:url("left.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
  
#header a {
	float: left;
	display: block;
	background: url("right.gif") no-repeat right top;
	padding: 5px 15px 4px 6px;
	text-decoration: none;
	font-weight: bold;
	color: #333;
	background-color: #FFFFFF;
}
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
	background-image: url(right.gif);
}

#header #current {
  background-image:url("left_on.gif");
  }

#header #current a {
  background-image:url("right_on.gif");
  padding-bottom:5px;
  }

#button {
	width: 11em;
	border-right: 1px solid #000;
	padding: 0 0 1em 0;
	margin-bottom: 1em;
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	background-color: #90bade;
	color: #333;
  }
	
	#button ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
  }
		
	#button li {
	border-bottom: 1px solid #90bade;
	margin: 0;
  }
	
	#button li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%;
  }

   #button li a {
	width: auto;
  }

	#button li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}

/*end left hand side buttons;*/

/*for buttons;*/
.centeredImage
  {
	text-align: center;
}

.leftdots{
  float:left;
  width:1px;
  height: 833px;
  font-family: verdana, arial, sans-serif;
  font-size: 10px;
  background:url("updots.jpg") repeat;
  margin: 0px 4px 0px 0 ;
  }

.rightdots{
  float:right;
  width:1px;
  height: 833px;
  font-family: verdana, arial, sans-serif;
  font-size: 10px;
  background:url("updots.jpg") repeat;
  margin: 0px 4px 0px 0 ;
  }

/*puts space between banner advert and story;*/
.space {
  margin: 8px 0px 12px 0 ;
  }

.banneradvert {
  margin: 8px 0px 12px 0 ;
  }

/*For News, sport and business;*/
.wholestorybox{
  font-family: verdana, arial, sans-serif;
  display:inline;
  float:left;
  text-align: left;
  margin: 0px 8px 8px 0 ;
  width:338px;
  height: 123px;
  line-height: 130%; 
  list-style-position: outside; 
  list-style-type: none
  }

/*start of news, sport and business icons with headline width in blue;*/
.news {
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  width: 338px;
  height: 20px;
  line-height: 18px;
  border-bottom: 2px solid #ececec;
  padding: 0 0 0 23px;
  background: url(paper.jpg) no-repeat #3366CC ;
  font-weight: normal;
  margin: 0 auto 0px;
  }

.sport {
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  width: 338px;
  height: 20px;
  line-height: 18px;
  border-bottom: 2px solid #ececec;
  padding: 0 0 0 23px;
  background: url(ball.jpg) no-repeat #3366CC ;
  font-weight: normal;
  margin: 0 auto 0px;
  }

.business {
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  width: 338px;
  height: 20px;
  line-height: 18px;
  border-bottom: 2px solid #ececec;
  padding: 0 0 0 23px;
  background: url(business.jpg) no-repeat #3366CC ;
  font-weight: normal;
  margin: 0 auto 0px;
  }
/*end of news, sport and business icons with headline width in blue;*/

.picturefloat {
  float:right;
  border:1px solid black;
  }

.morelink {
  background: url(double.jpg) left no-repeat;
  font-size: x-small;
  padding: 0 0 0 18px;
  float: left;
  }

/*small divider that  keeps apart story and links;*/
.dotsdivider{
  width:1px;
  height: 132px;
  background:url("updots.jpg") repeat;
  margin: 0px 8px 0px 0 ;
  float:left;
  }

/*the whole box;*/
.linksbox{
  font-size: 10px;
  width:85px;
  height: 100px;
  font-weight: normal;
  }

/*the word 'link';*/
.linksheader{
  font-size: 10px;
  color: #fff;
  margin: 0;
  line-height: 18px;
  display:inline;
  float:left;
  text-align: center;
  background: #999999;
  border-bottom: 2px solid #ececec;
  font-weight: normal;
  width:85px;
  height: 20px;
  }

/*link icons start;*/
.index {
  background: url(calendar.jpg) left no-repeat;
  font-size: x-small;
  padding: 0 0 0 16px;
  float: left;
  }

.email {
	background: url(email.jpg) left no-repeat;
	font-size: x-small;
	padding: 0 0 0 16px;
	color: #3366cc;
	float: left;
	background-color: #FFFFFF;
}

.forum {
  background: url(speech.jpg) left no-repeat;
  font-size: x-small;
  padding: 0 0 0 16px;
  float: left;
  }

.photos {
  background: url(photos.jpg) left no-repeat;
  font-size: x-small;
  padding: 0 0 0 16px;
  float: left;
  }
/*link icons end;*/

.dots{
  display:inline;
  float:left;
  text-align: left;
  background:url("dots.jpg") no-repeat;
  width:468px;
  }

/*start other stories box & grey arrow;*/
.otherbox{ 
  font-size: 10px;
  color: #3366CC;
  margin: 0;
  line-height: 18px;
  display:inline;
  float:left;
  text-align: left;
  background: #EEEEEE;
  border: 1px solid #cccccc;
  font-weight: normal;
  width:464px;
  height: 20px;
  }

.greyarrow {
  background: url(grey_arrow.jpg) left no-repeat;
  font-size: x-small;
  padding: 0 0 0 18px;
  float: left;
  }
/*end other stories box & grey arrow;*/

/*copyright rounded bit;*/
.copyright{
  font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
  background:url("back.gif") no-repeat left top;
  padding:5px;
  text-align: center;
  width: 743px;
  margin: 8px 0px 8px 0 ;
  }

/*font colours;*/
.small_yellow_text{
	font-size: 10px;
	color: #FFFF00;
	line-height: 120%;
	font-weight: bold;
	background: #3366CC;
}
.small_white_text{
	font-size: 10px;
	line-height: 120%;
	font-weight: bold;
}

/*frame clear check;*/
.fcl{clear:both;}

/*end sylesheet;*/

Code (markup):

I’d REALLY appreciate it if someone ‘more clued up’could look through my page www.thisisslough.com/css and stylesheet and html page and advise as I’m confused as of what to do now.

Many, many thanks

Chris

 

While I'm no CSS expert, there's a quick fix for your troubles. Install the EditCSS extension for firefox

https://addons.mozilla.org/extensio...inux&category=Developer Tools&numpg=10&id=179

It lets you edit css on the fly and see your changes without saving so you can tinker with your css to get it right. Oh- and it works for all sites, not just your own. It makes fixing css problems a snap!