1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by 7724, Sep 30, 2005.

  1. #1
    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
    SEMrush
    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
     
    7724, Sep 30, 2005 IP
    SEMrush
  2. JonahViaKeyboard

    JonahViaKeyboard Peon

    Messages:
    174
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    JonahViaKeyboard, Sep 30, 2005 IP