|
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 code:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>:: The Slough Observer Website >> thisisslough.com ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="slough, slough news, slough sport, slough business, berkshire, slough, burnham, taplow, langley, farnham common, farnham royal, iver, colnbrook, slough what's on, berks & bucks observer, slough observer, news, sport, business, horoscopes, messageboards, things to see in slough, slough theatre, slough cinema, slough schools, slough estate agents, slough town fc, burnham fc, slough rugby club, slough weather, slough gig guide, slough clubbing, slough holidays, slough regular meetings, slough exhibitions, slough dating, slough leisure, slough resturaunts, slough pubs, slough clubs, slough community, slough gallery, slough memories, slough links" />
<meta name="description" content="thisisslough.com - All the latest news, sport, business and guides from Slough, Burnham, Taplow, Langley, Farnham Royal, Farnham Common, Iver and Colnbrook" />
<meta http-equiv="content-canguage" content="EN" />
<meta name="copyright" content="Clyde and Forth Press group" />
<meta name="revisit-after" content="14 days" />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="rating" content="safe for children" />
<meta name="website design" content="Chris Boxall" />
<meta name="email" content="cboxall@sloughobserver.co.uk" />
<meta name="telephone" content="01753 523355" />
<link rel="stylesheet" href="ssheet.css" />
<script type="text/javascript" src="external.js">
</script>
</head>
<body>
<div id="container">
<div class="banner">[img]trial_banner.jpg[/img]</div>
<div class="topmenu"><div id="header">
<ul>
<li id="current">Home[*]News[*]Sport[*]Business[*]Contact[*]Subscribe[/list]</div></div>
<div id="navigator">
<div id="button">
<ul>[*]Home[*]Latest News[*]Latest Sport[*]Latest Business[*]E-Commerce[*]Cinema[*]Theatre[*]Contact Us[*]Motors[*]Local Links[*]Advertising[*]Messageboard[*]Eating Out[*]Leisure[*]Visitor Guide[*]Fish4Jobs[*]Fish4Motors[/list]</div>
<span class="centeredImage">[img]http://www.thisisslough.com/banners/chevis2.gif[/img]</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/slough.jpg[/img]
[img]http://www.thisisslough.com/images/boat_club.jpg[/img]
[img]http://www.thisisslough.com/images/sycob.jpg[/img]
[img]http://www.thisisslough.com/banners/barney.gif[/img]
</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/gsa.gif[/img]</span></p>
</div>
<div class="contentright">
[img]http://www.w3.org/Icons/valid-xhtml10[/img]
</p>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.thisisslough.com/css/ssheet.css" class="centeredImage">
[img]http://jigsaw.w3.org/css-validator/images/vcss[/img] </a>
<span class="centeredImage">[img]http://www.thisisslough.com/banners/chevis2.gif[/img]</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/slough.jpg[/img]
[img]http://www.thisisslough.com/images/boat_club.jpg[/img]
[img]http://www.thisisslough.com/images/sycob.jpg[/img]
[img]http://www.thisisslough.com/banners/barney.gif[/img]
</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/gsa.gif[/img]</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/gsa.gif[/img]</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/gsa.gif[/img]</span></p>
<span class="centeredImage">[img]http://www.thisisslough.com/images/gsa.gif[/img]</span></p>
</div>
<div class="space"><div class="leftdots"></div>
<div class="rightdots"></div>
<div class="banneradvert">[img]podcast.gif[/img]</div>
<div class="wholestorybox">
<h2 class="news"><span class="small_yellow_text">NEWS:</span> Here is
the first headline of the storyxx</h2>
<span class="picturefloat">[img]pic.jpg[/img]</span>SLOUGH
Jets cup hopes are all but over after they were pipped at the post by high-flying
Bracknell Bees at The Hive on Sunday.
<span class="morelink">More information...</span>
</div>
<div class="dotsdivider"></div>
<div class="linksbox">
<div class="linksheader">LINKS</div>
<span class="index">Index</span>
<span class="email">Email</span>
<span class="forum">Forum</span>
<span class="photos">Photos</span>
</div>
<div class="dots"></div>
<span class="otherbox"><span class="greyarrow">The Link to the next story</span>
<span class="greyarrow">The Link to the next story</span>
<span class="greyarrow">The Link to the next story</span></span>
<div class="dots"></div>
</div>
<div class="wholestorybox">
<h2 class="sport"><span class="small_yellow_text">SPORT:</span> Here is
the first headline of the storyxx</h2>
<span class="picturefloat">[img]pic.jpg[/img]</span>SLOUGH
Jets cup hopes are all but over after they were pipped at the post by high-flying
Bracknell Bees at The Hive on Sunday.
<span class="morelink">More information...</span>
</div>
<div class="dotsdivider"></div>
<div class="linksbox">
<div class="linksheader">LINKS</div>
<span class="index">Index</span>
<span class="email">Email</span>
<span class="forum">Forum</span>
<span class="photos">Photos</span>
</div>
<div class="dots"></div>
<span class="otherbox"><span class="greyarrow">The Link to the next story</span>
<span class="greyarrow">The Link to the next story</span>
<span class="greyarrow">The Link to the next story</span></span>
<div class="dots"></div>
<div class="wholestorybox">
<h2 class="business"><span class="small_yellow_text">Business:</span> Here is the first
headline of the sto</h2>
<span class="picturefloat">[img]pic.jpg[/img]</span>SLOUGH
Jets cup hopes are all but over after they were pipped at the post by high-flying
Bracknell Bees at The Hive on Sunday.
<span class="morelink">More information...</span>
</div>
<div class="dotsdivider"></div>
<div class="linksbox">
<div class="linksheader">LINKS</div>
<span class="index">Index</span>
<span class="email">Email</span>
<span class="forum">Forum</span>
<span class="photos">Photos</span>
</div>
<div class="dots"></div>
<span class="otherbox">
<span class="greyarrow">The Link to the next story</span>
<span class="greyarrow">The Link to the next story</span>
<span class="greyarrow">The Link to the next story</span></span>
<div class="dots"></div>
</div>
<div class="copyright">Please note this website is best viewed in a 1024 * 768
resolution | © Slough & Windsor Observer</div>
<div class="fcl"></div>
</body>
</html>
…and here’s my CSS code for the page:
- Code: Select all
/*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;*/
I’d REALLY appreciate it if someone ‘more clued up’could look through my page www.thisisslough.com/css and stylesheet and html page (code above) and advise as I’m confused as of what to do now.
Many, many thanks
Chris
|
Built my CSS site - Different browser problems - please help
Sep 30th, 2005, 14:21
Similar Threads
