for some reason my site looks ok with IE but not with FF! usually the other way round! the site is here http://www.sjjit.co.uk/newsitetest/index.html.
it looks correct in IE but the main content and menu section moves in FF and overlays onto the top of the header! anyone got any idea's?
thanks,
Mark
here's my code:
Expand|Select|Wrap|Line Numbers
- <!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>
- <link rel="shortcut icon" href="images/favicon.ico">
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <link href="style/goosestyle.css" rel="stylesheet" type="text/css" media="screen" />
- <meta name="keywords" content="" />
- <meta name="description" content="SJJIT - A stepping stone between you and IT" />
- <title>SJJ IT Training Ltd. – A Stepping Stone Between You and IT</title>
- </head>
- <body>
- <div id="container">
- <div id="header">
- <div id="header-right">
- <h1>SJJ<span>IT</span></h1>
- <h2>Training Ltd</h2>
- <p>A Stepping Stone Between You and IT</p>
- </div><!--End of header-right-->
- <div id="header-left">
- <img src="images/steppingstone.jpg"/>
- <div id="float2">
- <p>Registered in England & Wales: 6454153<br />
- Email: <a href="info@sjjit.co.uk">info@sjjit.co.uk</a><br />
- Tel: 01493 780654</p>
- </div> <!--End of float-->
- </div><!--End of header-left-->
- </div>
- <div id="wrapper">
- <div id="main-content">
- <div id="testimony" >
- <h1>Testimony</h1>
- <p><a href="#">SJJIT</a> - <a href="#">Basic IT Training</a><br>Steve came in and was great help to me. <b>Dave in Ipswich</b></p>
- <p><a href="#">SJJIT</a> - <a href="#">Advanced IT Training</a><br>Steve was a real blssing to our company and taught us a great deal. <b>Pete in Norwich</b></p>
- <p><a href="#">SJJIT</a> - <a href="#">Network Training</a><br>SJJIT offered a professional and excellent service! <b>Julie in Lowestoft</b></p>
- </div> <!--End of testimony-->
- <h1>Hello</h1>
- <p><img src="images/head-in-box.jpg" width="88" height="119" align="right" class="padded" />Welcome to SJJIT - that's short for Stephen J Jones Information Technology.</p>
- <p>At SJJIT we seek to provide a service that will teach you how to get the most out of IT. There will be no more wandering around with your head in the prevervbial box.</p>
- <p> More text will go here. More text will go here. <a href="index.html">A link!</a> More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. <a href="index.html">A link!</a> More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. <a href="index.html">A link!</a> More text will go here. More text will go here. More text will go here. More text will go here. </p>
- <p><img src="images/suited-and-booted.jpg" width="100" height="150" align="right"/>We bring proffesional service snd more text will go here. More text will go here. <a href="index.html">A link!</a> More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. <a href="index.html">A link!</a> More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. <a href="index.html">A link!</a> More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. More text will go here. </p>
- <p>We will also have bullet points too :</p>
- <ul>
- <li>a bullet point...</li>
- <li>a bullet point...</li>
- <li>a bullet point...</li>
- <li>a bullet point...</li>
- <li>a bullet point...</li>
- <li>a bullet point...</li>
- </ul>
- <p>Email me for more info <a href="mailto:info@sjjit.co.uk">info@sjjit.co.uk</a></p>
- </div> <!--End of main content-->
- <div id="menu">
- <h1>Menu</h1>
- <ul>
- <li><a href="index.html">Home</a></li>
- <li><a href="#">What is IT?</a></li>
- <li><a href="#">Do I need training?</a></li>
- <li><a href="#">What SJJIT offer</a></li>
- <li><a href="#">Testimony</a></li>
- </ul>
- <ul>
- <li><a href="#">About</a></li>
- <li><a href="#">T & C</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div> <!--End of menu-->
- <div id="ad">
- <img src="images/basics-training.jpg" />
- <img src="images/group-training-ad.jpg" />
- <img src="images/network-training.jpg" />
- </div> <!--End of ad-->
- </div> <!--End of wrapper-->
- <div id="footer">
- <p align="right">© SJJIT, 2008. SJJIT is a limited company : 6454153. Contact SJJIT on <a herf="mailto:info@sjjit.co.uk">info@sjjit.co.uk</a> / 01493 780654</p>
- <div id="float">
- <p><a href="mailto:farki2k@hotmail.com">Web Design</a> by <a href="mailto:farki2k@hotmail.com">Shark Designs</a> </p>
- </div> <!--End of float-->
- </div> <!--End of footer-->
- </div> <!--End of container-->
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- *{
- border:0;
- margin:0;
- padding:0;
- text-align:center;
- }
- .paragraph, p, ul li{
- font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS", Arial;
- font-size:12px;
- font-weight:normal;
- text-align:left;
- }
- p, ul{
- padding:0 0 10px 5px;
- }
- ul{
- list-style:none;
- }
- ul li{
- background:url(../images/bullet.jpg) no-repeat 10px 7px;
- padding:0 10px 0 21px;
- }
- ul li ul li{
- padding-left:30px;}
- a{
- font-weight:bold;
- text-decoration:none;
- color:#0000FF;
- }
- a:visited{
- font-weight:bold;
- text-decoration:none;
- color:#0000FF;
- }
- a:hover{
- text-decoration:underline;
- }
- .quote {
- font-style:italic;
- text-align:left;
- }
- h1{
- font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS";
- font-size:24pt;
- text-align:left;
- padding:16px 5px 0 5px;
- color:#000000;
- }
- h2{
- font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS";
- font-size:20pt;
- text-align:left;
- padding:0 5px;
- color:#000000;
- }
- h3{
- padding:0 5px;
- font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS";
- font-size:16pt;
- text-align:left;
- color:#000000;
- }
- /* body */
- body{
- background:url(../images/backgound.jpg) repeat top left;
- padding-top:10px;
- text-align:center;
- }
- /* Container */
- #container{
- width:800px;
- position:relative;
- margin:0 auto 0 auto;
- background:none;
- }
- #float{
- position:absolute;
- top:0px;
- right:5px;
- }
- #float2{
- position:absolute;
- top:16px;
- right:4px;
- }
- #float2 p{
- text-align:right;
- }
- /* header */
- #header-left{
- position:relative;
- width:500px;
- float:left;
- padding-top:16px;
- background:url(../images/div-background.jpg) top left repeat-x;
- }
- #header-right{
- position:relative;
- width:292px;
- height:100%;
- float:right;
- background:url(../images/div-background.jpg) top left repeat-x;
- }
- #header-right h1, #header-right h2, #header-right p{
- text-align:right;
- }
- #header-right h1{
- font-size:90pt;
- padding-top:10px;
- }
- #header-right span{
- color:#0000FF;
- }
- #wrapper{
- text-align:left;
- margin:8px 0;
- width:800px;
- overflow:auto;
- position:relative;
- }
- /* testimony */
- #testimony{
- padding:0 10px;
- width:200px;
- float:right;
- }
- /* main-content */
- #main-content{
- background:url(../images/div-background.jpg) top left repeat-x;
- width:632px;
- float:right;
- }
- #title{
- padding-right:20px;
- }
- #menu{
- width:160px;
- float:left;
- background:url(../images/div-background.jpg) top left repeat-x;
- }
- #menu h1{
- padding-left:10px;}
- #menu a{
- text-decoration:none;
- color:#0000FF;
- }
- #menu a:visited{
- text-decoration:none;
- color:#0000FF;
- }
- #menu a:hover{
- color:#0000FF;
- text-decoration:underline;
- }
- #ad{
- width:160px;
- float:left;
- background:none;
- }
- #ad img{
- margin-top:10px;
- }
- #footer{
- position:relative;
- overflow:auto;
- width:800px;
- background:url(../images/div-background.jpg) top left repeat-x;
- float:left;
- }
- #footer p{
- padding:18px 0 5px 5px;
- }