By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,945 Members | 1,540 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,945 IT Pros & Developers. It's quick & easy.

baffled with css?

P: 11
hey,

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link rel="shortcut icon" href="images/favicon.ico">
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link href="style/goosestyle.css" rel="stylesheet" type="text/css" media="screen" />
  7. <meta name="keywords" content="" />
  8. <meta name="description" content="SJJIT - A stepping stone between you and IT" />
  9. <title>SJJ IT Training Ltd.  A Stepping Stone Between You and IT</title>
  10. </head>
  11.  
  12. <body>
  13. <div id="container">
  14.  
  15. <div id="header">
  16.  
  17. <div id="header-right">
  18.  
  19. <h1>SJJ<span>IT</span></h1>
  20. <h2>Training Ltd</h2>
  21. <p>A Stepping Stone Between You and IT</p>
  22.  
  23. </div><!--End of header-right-->
  24.  
  25. <div id="header-left">
  26.  
  27. <img src="images/steppingstone.jpg"/>
  28.  
  29. <div id="float2">
  30. <p>Registered in England &amp; Wales: 6454153<br />
  31.    Email: <a href="info@sjjit.co.uk">info@sjjit.co.uk</a><br />
  32.    Tel: 01493 780654</p>
  33. </div> <!--End of float-->
  34.  
  35. </div><!--End of header-left-->
  36.  
  37. </div>
  38.  
  39. <div id="wrapper">
  40. <div id="main-content">
  41. <div id="testimony" >
  42.  
  43. <h1>Testimony</h1>
  44.  
  45. <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>
  46. <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>
  47. <p><a href="#">SJJIT</a> - <a href="#">Network Training</a><br>SJJIT offered a professional and excellent service! <b>Julie in Lowestoft</b></p>
  48.  
  49. </div> <!--End of testimony-->
  50.  
  51. <h1>Hello</h1>
  52. <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>
  53. <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>
  54. <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>
  55. <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>
  56. <p>We will also have bullet points too :</p>
  57. <ul>
  58.   <li>a bullet point...</li>
  59.   <li>a bullet point...</li>
  60.   <li>a bullet point...</li>
  61.   <li>a bullet point...</li>
  62.   <li>a bullet point...</li>
  63.   <li>a bullet point...</li>
  64. </ul>
  65.  
  66. <p>Email me for more info <a href="mailto:info@sjjit.co.uk">info@sjjit.co.uk</a></p>
  67.  
  68. </div> <!--End of main content-->
  69.  
  70. <div id="menu"> 
  71.  
  72. <h1>Menu</h1>
  73.  
  74. <ul>
  75.     <li><a href="index.html">Home</a></li>
  76.     <li><a href="#">What is IT?</a></li>
  77.     <li><a href="#">Do I need training?</a></li>
  78.     <li><a href="#">What SJJIT offer</a></li>
  79.     <li><a href="#">Testimony</a></li>
  80. </ul>
  81.  
  82. <ul>
  83.     <li><a href="#">About</a></li>
  84.     <li><a href="#">T &amp; C</a></li>
  85.     <li><a href="#">Contact</a></li>
  86. </ul>
  87.  
  88. </div> <!--End of menu-->
  89.  
  90. <div id="ad"> 
  91. <img src="images/basics-training.jpg" />
  92. <img src="images/group-training-ad.jpg" />
  93. <img src="images/network-training.jpg" />
  94. </div> <!--End of ad-->
  95.  
  96. </div> <!--End of wrapper-->
  97.  
  98. <div id="footer">
  99.  
  100. <p align="right">&copy; 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>
  101.  
  102. <div id="float">
  103.  
  104. <p><a href="mailto:farki2k@hotmail.com">Web Design</a> by <a href="mailto:farki2k@hotmail.com">Shark Designs</a> </p>
  105.  
  106. </div> <!--End of float-->
  107. </div> <!--End of footer-->
  108. </div> <!--End of container-->
  109. </body>
  110. </html>


Expand|Select|Wrap|Line Numbers
  1. *{
  2. border:0;
  3. margin:0;
  4. padding:0;
  5. text-align:center;
  6. }
  7.  
  8. .paragraph, p, ul li{
  9. font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS", Arial;
  10. font-size:12px;
  11. font-weight:normal;
  12. text-align:left;
  13. }
  14.  
  15. p, ul{
  16. padding:0 0 10px 5px;
  17. }
  18.  
  19.  
  20.  
  21. ul{
  22. list-style:none;
  23. }
  24.  
  25. ul li{
  26. background:url(../images/bullet.jpg) no-repeat 10px 7px;
  27. padding:0 10px 0 21px;
  28. }
  29.  
  30. ul li ul li{
  31. padding-left:30px;}
  32.  
  33. a{
  34. font-weight:bold;
  35. text-decoration:none;
  36. color:#0000FF;
  37. }
  38.  
  39. a:visited{
  40. font-weight:bold;
  41. text-decoration:none;
  42. color:#0000FF;
  43. }
  44.  
  45. a:hover{
  46. text-decoration:underline;
  47. }
  48.  
  49. .quote {
  50. font-style:italic;
  51. text-align:left;
  52. }
  53.  
  54. h1{
  55. font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS";
  56. font-size:24pt;
  57. text-align:left;
  58. padding:16px 5px 0 5px;
  59. color:#000000;
  60. }
  61.  
  62. h2{
  63. font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS";
  64. font-size:20pt;
  65. text-align:left;
  66. padding:0 5px;
  67. color:#000000;
  68. }
  69.  
  70.  
  71. h3{
  72. padding:0 5px;
  73. font-family:"Gill Sans MT", Verdana, Tahoma, "Trebuchet MS";
  74. font-size:16pt;
  75. text-align:left;
  76. color:#000000;
  77. }
  78.  
  79. /* body */
  80. body{
  81. background:url(../images/backgound.jpg) repeat top left;
  82. padding-top:10px;
  83. text-align:center;
  84. }
  85.  
  86. /* Container */
  87. #container{
  88. width:800px;
  89. position:relative;
  90. margin:0 auto 0 auto;
  91. background:none;
  92. }
  93.  
  94. #float{
  95. position:absolute;
  96. top:0px;
  97. right:5px;
  98. }
  99.  
  100. #float2{
  101. position:absolute;
  102. top:16px;
  103. right:4px;
  104. }
  105.  
  106. #float2 p{
  107. text-align:right;
  108. }
  109.  
  110. /* header */
  111. #header-left{
  112. position:relative;
  113. width:500px;
  114. float:left;
  115. padding-top:16px;
  116. background:url(../images/div-background.jpg) top left repeat-x;
  117. }
  118.  
  119. #header-right{
  120. position:relative;
  121. width:292px;
  122. height:100%;
  123. float:right;
  124. background:url(../images/div-background.jpg) top left repeat-x;
  125. }
  126.  
  127. #header-right h1, #header-right h2, #header-right p{
  128. text-align:right;
  129. }
  130.  
  131. #header-right h1{
  132. font-size:90pt;
  133. padding-top:10px;
  134. }
  135.  
  136. #header-right span{
  137. color:#0000FF;
  138. }
  139.  
  140. #wrapper{
  141. text-align:left;
  142. margin:8px 0;
  143. width:800px;
  144. overflow:auto;
  145. position:relative;
  146. }
  147.  
  148. /* testimony */
  149. #testimony{
  150. padding:0 10px;
  151. width:200px;
  152. float:right;
  153. }
  154.  
  155. /* main-content */
  156. #main-content{
  157. background:url(../images/div-background.jpg) top left repeat-x;
  158. width:632px;
  159. float:right;
  160. }
  161.  
  162. #title{
  163. padding-right:20px;
  164. }
  165.  
  166. #menu{
  167. width:160px;
  168. float:left;
  169. background:url(../images/div-background.jpg) top left repeat-x;
  170. }
  171.  
  172. #menu h1{
  173. padding-left:10px;}
  174.  
  175. #menu a{
  176. text-decoration:none;
  177. color:#0000FF;
  178. }
  179.  
  180. #menu a:visited{
  181. text-decoration:none;
  182. color:#0000FF;
  183. }
  184.  
  185. #menu a:hover{
  186. color:#0000FF;
  187. text-decoration:underline;
  188. }
  189.  
  190. #ad{
  191. width:160px;
  192. float:left;
  193. background:none;
  194. }
  195.  
  196. #ad img{
  197. margin-top:10px;
  198. }
  199.  
  200. #footer{
  201. position:relative;
  202. overflow:auto;
  203. width:800px;
  204. background:url(../images/div-background.jpg) top left repeat-x;
  205. float:left;
  206. }
  207.  
  208. #footer p{
  209. padding:18px 0 5px 5px;
  210. }
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: 2
i'm using Firefox 3 and the good news is your site looks ok in that! Do you have any idea how to sort out a problem with IE6 - look at my post - "IE6 not displaying text correctly - IE 7 & Firefox 3 are fine!"
Jun 27 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
The solution, as always, is to ignore what IE is doing and find out why your markup is wrong, because your guide to what works should always be FF and not IE.

You have a comment in front of the doctype. Modern browsers have no problem with that but IE chokes and goes into quirks mode. Remove the first line.
Jun 27 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.