473,320 Members | 1,990 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

baffled with css?

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
2 1335
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
7,435 Expert 4TB
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

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

Similar topics

2
by: Lazareth S. Link | last post by:
Hiya to whoever might stumble across this. I've recently taken up learning how to script/program in python. I've made my first program, a simple fahrenheit-celsius converter, both ways. For...
4
by: Mark Thomas | last post by:
Hi I do not understand why the following does not compile under Visual C++ 7.1. It is just a simple "Hello, World" program. // Hello World Application. Why does this fail? #include <iostream>...
6
by: Doug Baroter | last post by:
Hi, Don't worry about the vars, they are defined, the following line give me an err of "Incorrect syntax near '.'." Goal: to rename nonstardard column name. EXEC sp_rename...
4
by: Steve K | last post by:
While I'm no css guru by any stretch, I thought I knew more than this, guess not. I'm trying to come up with a style for a few lines of text that are secondary to the text above them, so I want...
13
by: s_m_b | last post by:
I'm building a suite of online forms for insurance. These have been stripped down from messy MS Word templates, and two of the six, substantially identical, are misbehaving with the .js page that...
4
by: Tim Robinson | last post by:
Hi, I generally consider myself competent with the complexities of quoting but I can't figure out postgres at all. I've read the manual and it looks very straightforward but that doesn't accord...
17
by: sheldonlg | last post by:
I need to do some modifications on some code I just inherited and that code has me baffled. On one page, caller.php, with method get there is an anchor with href="foo.php?bar=123". On foo.php,...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.