473,573 Members | 3,213 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Menu looks great in Firefox, not so much in IE

1 New Member
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.ne t" 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
1 1517
David Laakso
397 Recognized Expert Contributor
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 "conditiona l 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

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

Similar topics

26
2809
by: Thomas Mlynarczyk | last post by:
Hi, Could some kind person using Mac or Linux (or others) please take a look at http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html and tell me if the page renders as it should (screenshot provided on the page)? Never mind the colors, this is just to test the functionality. The page validates (HTML & CSS), and seems to "work" as...
6
5108
by: Deborah | last post by:
I'm a rookie, and I guess I know just enough to be dangerous. I found a great template website, openwebsign.org, and found an open source template I really liked that even came in 2 versions. Spent 2 weeks updating my website, put it up, **using the alternative** css sheet, and pfft, IE 6.0 can't see the side menu items as hyperlinks. ...
1
2202
by: krystian.kochanski | last post by:
I have created the CSS based navigation using lists, I followed all the conventions like to reset all the padding and margins first etc. The menu looks great in PC Internet Explorer, looks the same in Firefox, but different in Safari. The difference is in vertical spacing among the links, it looks like the Safari render my lists differently,...
1
2660
by: Edward | last post by:
I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three right-boxes in Internet Explorer? 2. How can I put a 4px margin BETWEEN the right-boxes, "border-top: 4px" didn't do it and if I put in a "margin-top:...
2
1499
by: Jobe | last post by:
I refer to following URL http://www.web-garden.be/index11.html CSS validated code In Firefox everything looks great In IE6, the 'text-boxes'start to move with hover. By moving your mouse over the menu, the boxes act like an accordeon
3
1849
by: töff | last post by:
On my site http://www.sjcga.com I have a javascript-generated navigation menu in the top right corner. The menu works great in IE and Opera ... but in FireFox, on the 1st click, the menu jumps to the right and doesn't follow the link. Then on the 2nd click, the link works. I've never seen anything like this, and I can't figure out what's...
5
6477
dotneto
by: dotneto | last post by:
Hi, i have a menu in aspnet that used to be fine, now, my user wants it to work in ie6 as well as in IE7, it used to be ok in ie7, in ie6 the menu looks just like links. It doesn't works well in firefox but now my big problem is to get it working on IE6. The menu is in a master page and I use a sitemap data source to feed the menu. the problem...
19
3659
by: Jim | last post by:
Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the code for this from a tutorial but that menu was flush-left justified. Not what I want. Subsequent searches on google on how to center yielded a
8
1764
by: Candoer | last post by:
I am new to both HTML and CSS. Several months ago my High School Alumni association web master died and they asked me to take over the web site. I had never worked with CSS but had some experience with HTML. The site was written strictly using HTML and had no CSS. So I decided to take on the task to convert it using CSS. For the past three...
0
7741
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7661
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7978
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8167
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
5550
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3688
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2164
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1263
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
987
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.