Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Menu looks great in Firefox, not so much in IE

Newbie
  
Join Date: Sep 2008
Posts: 1
#1: Sep 16 '08
When viewing my page (siuehockey.net) in Firefox, it's setup how I want it to look. When i viewed it using IE, the menu at the top runs into the "Cougar Hockey/cougarhockey.net" at the top left. It's leaving off two menu selections: Contact, and Cougar History, which when loading the page get covered up by the banner picture.

Here's the CSS for the site:
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     background: #000000 url(images/img01.jpg) repeat-x left top;
  5.     text-align: justify;
  6.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  7.     font-size: 12px;
  8.     color: #404040;
  9. }
  10.  
  11. form {
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15.  
  16. fieldset {
  17.     margin: 0;
  18.     padding: 0;
  19.     border: none;
  20. }
  21.  
  22. input, textarea, select {
  23.     font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
  24. }
  25.  
  26.  
  27. h1, h2, h3 {
  28.     font-weight: normal;
  29.     color: #212121;
  30. }
  31.  
  32. h1 {
  33.     letter-spacing: -1px;
  34.     font-size: 2.2em;
  35. }
  36.  
  37. h2 {
  38.     font-size: 1.4em;
  39. }
  40.  
  41. h3 {
  42.     font-size: 1.2em;
  43. }
  44.  
  45. p, ul, ol {
  46. }
  47.  
  48. p {
  49. }
  50.  
  51. .blockbg {
  52.     background: #D9D785;
  53. }
  54.  
  55. blockquote {
  56.     background: url(images/img08.jpg) no-repeat left top;
  57.     font-family: Georgia, "Times New Roman", Times, serif;
  58.     font-style: italic;
  59.     margin: 0 0 0 15px;
  60.     padding: 0px 20px 0px 30px;
  61.     font-size: 18px;
  62.     color: #3D3D3D;
  63. }
  64.  
  65. ul {
  66. }
  67.  
  68. ol {
  69. }
  70.  
  71. a {
  72.     color: #808080;
  73. }
  74.  
  75. a:hover {
  76.     text-decoration: none;
  77. }
  78.  
  79. small {
  80. }
  81.  
  82. hr {
  83.     display: none;
  84. }
  85.  
  86. img {
  87.     border: none;
  88. }
  89.  
  90. img.left {
  91.     float: left;
  92.     margin: 0 15px 0 0;
  93.     border: #D9D785 1px dashed;
  94. }
  95.  
  96. img.right {
  97.     float: right;
  98.     margin: 0 0 0 15px;
  99.     border: #D9D785 1px dashed;
  100. }
  101.  
  102. .text1 {
  103.     font-family: Georgia, "Times New Roman", Times, serif;
  104.     font-style: italic;
  105.     margin: 0 0 0 15px;
  106.     padding: 90px 20px 0px 30px;
  107.     font-size: 30px;
  108.     color: #FFFFFF;
  109. }
  110.  
  111. /* Header */
  112.  
  113. #header {
  114.     width: 900px;
  115.     margin: 0 auto;
  116.     height: 71px;
  117.     letter-spacing: -1px;
  118.     font-family: Georgia, "Times New Roman", Times, serif;
  119. }
  120.  
  121.  
  122. #headerbg {
  123.     clear: both;
  124.     margin: 0 auto;
  125.     width: 900px;
  126.     height: 208px;
  127.     background: url(images/era.jpg) no-repeat left top;
  128.     margin: 0 auto;
  129.     margin-top: 20px;
  130. }
  131.  
  132. /* Logo */
  133.  
  134. #logo {
  135.     float: left;
  136.     margin-top: 30px;
  137. }
  138.  
  139. #logo h1, #logo h2, #logo p {
  140.     float: left;
  141.     margin: 0;
  142.     text-transform: lowercase;
  143. }
  144.  
  145. #logo h1 {
  146.     background: url(images/img04.jpg) no-repeat left 50%;
  147.     padding-left: 60px;
  148.     text-align: center;
  149.     font-size: 3.2em;
  150.     color: #000000;
  151. }
  152.  
  153. #logo h1 a {
  154.     color: #000000;
  155. }
  156.  
  157. #logo p {
  158.     padding-top: 27px;
  159.     text-transform: uppercase;
  160.     font-family: Verdana, Arial, Helvetica, sans-serif;
  161.     font-size:10px;
  162.     color: #000000;
  163. }
  164.  
  165. #logo h2 a, #logo p a {
  166.     color: #000000;
  167. }
  168.  
  169. #logo a {
  170.     text-decoration: none;
  171. }
  172.  
  173. /* Menu */
  174.  
  175. #menu {
  176.     float: right;
  177.     margin-top: 21px;
  178. }
  179.  
  180. #menu ul {
  181.     margin: 0;
  182.     list-style: none;
  183. }
  184.  
  185. #menu li {
  186.     display: inline;
  187. }
  188.  
  189. #menu a {
  190.     display: block;
  191.     float: left;
  192.     padding: 30px 20px 0 20px;
  193.     text-align: center;
  194.     text-decoration: none;
  195.     text-transform: uppercase;
  196.     font-family: Arial, Helvetica, sans-serif;
  197.     font-weight: bold;
  198.     font-size: 14px;
  199.     color: #4E4E4E;
  200. }
  201.  
  202. #menu a:hover {
  203.     background: url(images/img03.jpg) no-repeat center top;
  204. }
  205.  
  206. #menu .current_page_item a {
  207.     background: url(images/img03.jpg) no-repeat center top;
  208. }
  209.  
  210. /* Page */
  211.  
  212. #page {
  213.     width: 900px;
  214.     margin: 0 auto;
  215.     padding-top: 20px;
  216.     background: #F4F4F4;
  217. }
  218.  
  219. #latest-post {
  220.     float: left;
  221.     width: 570px;
  222.     padding: 0px 20px 0px 20px;
  223.     line-height: 25px;
  224.     font-size: 12px;
  225. }
  226.  
  227. #recent-posts {
  228.     float: right;
  229.     width: 250px;
  230.     padding: 0px 20px 20px 20px;
  231.     line-height: 25px;
  232.     font-size: 12px;
  233. }
  234.  
  235. #recent-posts .entry {
  236. }
  237.  
  238. #recent-posts .entry a {
  239.     background: #333333;
  240.     padding: 5px 10px;
  241.     text-transform: uppercase;
  242.     text-decoration: none;
  243.     font-size: 10px;
  244.     color: #FFFFFF;
  245. }
  246.  
  247. #recent-posts .more {
  248.     background: url(images/img04.gif) no-repeat left 50%;
  249.     padding-left: 20px;
  250. }
  251.  
  252. .post {
  253. }
  254.  
  255. .post .title {
  256.     margin: 0;
  257. }
  258.  
  259. .post .meta {
  260.     margin: 0;
  261.     padding-bottom: 10px;
  262.     padding-top: 10px;
  263.     line-height: normal;
  264.     font-size: 13px;
  265.     color: #505050;
  266. }
  267.  
  268. .post .meta a {
  269.     color: #808080;
  270. }
  271.  
  272. .post .entry {
  273.     margin-bottom: 20px;
  274.     padding-bottom: 5px;
  275.     border-bottom: #9C9C9C 1px dashed;
  276.  
  277. }
  278.  
  279. table
  280. {
  281. margin-left: auto;
  282. margin-right: auto;
  283. }
  284.  
  285.  
  286. /* Sidebar */
  287.  
  288. #sidebar {
  289.     clear: both;
  290.     width: 900px;
  291.     background: #FF0000;
  292.     color: #CCCCCC;
  293.     padding: 10px 0 0 0;
  294. }
  295.  
  296. #sidebar ul {
  297.     margin: 0;
  298.     padding: 0;
  299.     list-style: none;
  300. }
  301.  
  302. #sidebar li {
  303.     display: block;
  304.     float: left;
  305.     width: 187px;
  306.     padding: 10px 10px 10px 25px;
  307. }
  308.  
  309. #sidebar li ul {
  310.     line-height: 1.8em;
  311. }
  312.  
  313. #sidebar li li {
  314.     display: list-item;
  315.     background: url(images/img07.gif) no-repeat left 50%;
  316.     float: none;
  317.     width: auto;
  318.     padding: 0 0 0 10px;
  319.     line-height: 25px;
  320. }
  321.  
  322. #sidebar h2 {
  323.     margin: 0 0 10px 0;
  324.     color: #000000;
  325. }
  326.  
  327. #sidebar a {
  328.     text-decoration: none;
  329.     color: #000000;
  330. }
  331.  
  332. #sidebar a:hover {
  333.     text-decoration: underline;
  334. }
  335.  
  336. /* Footer */
  337.  
  338. #footer {
  339.     width: 900px;
  340.     height: 50px;
  341.     margin: 0 auto;
  342.     margin-bottom: 20px;
  343.     background: url(images/img06.jpg) no-repeat left top;
  344.     font-size: 11px;
  345.     color: #CCCCCC;
  346. }
  347.  
  348. #footer p {
  349.     margin: 0;
  350.     padding: 13px 20px 15px 20px;
  351. }
  352.  
  353. #footer a {
  354.     color: #FFFFFF;
  355. }
  356.  
  357. #legal {
  358.     float: left;
  359. }
  360.  
  361. #links {
  362.     float: right;
  363. }
  364.  
  365.  
Thanks for the help!

Expert
  
Join Date: Aug 2008
Posts: 397
#2: Sep 17 '08

re: Menu looks great in Firefox, not so much in IE

It is a testament to software engineers and browser error recovery that the page proper even shows up on the screen at all in any browser. The document doctype XHTML Strict 1.0 yields no less than 427 markup validation errors (not to mention there are numerous CSS errors). The document is actually "HTML proprietary."

What to do? Nevertheless, let's try...
1/ Change the doctype to (this will reduce the markup errors from 427 to less than 10 errors):
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3.  
2/ In the head of the document, immediately above </head>, insert this "conditional comment" with styles within it to target IE/7.0 for corrections only to #header. (BTW, I was afraid to check your page in IE/6-- so I didn't even open it in that browser).
Expand|Select|Wrap|Line Numbers
  1. <!--[if IE 7 ]>
  2. <style>
  3. #h1 #logo, #logo p {zoom: 1;}
  4. #logo p {  margin-top: -10px;}
  5. #menu {float: none;margin-top: 98px;}
  6. #headerbg {margin-top: 78px;}
  7. </style>  
  8. <![endif]-->
  9.  
I'll leave resolution of all issues below the header in IE/7 and compliant browsers to you and/or another member of the forum.
Good Luck!
PS
When you supply the page URI, as you have done, anyone can open the CSS file...
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved