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

Menu looks great in Firefox, not so much in IE

P: 1
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!
Sep 16 '08 #1
Share this Question
Share on Google+
1 Reply


Expert 100+
P: 397
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...
Sep 17 '08 #2

Post your reply

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