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

CSS hacks for IE and Firefox

victorduwon
P: 32
Hey guys,

I have built a suckerfish navigation menu using CSS and HTML with unordered lists. I was testing this menu in Safari, and it came out good. When I finished I tested it in firefox and then in IE ( I know I should have done this before hand) and noticed that both browsers displayed the menu differently than Safari. There is an problem with the dropdown hover state in Firefox, and the menu is just mangled in IE (I think it may be a table issue).

I do not know much about CSS hacks for IE of Firefox. I don't know If I should build a seperate style sheet for the different browsers or what. I would appreciate if someone would help me out on this, or just point me in the right direction. Below is the CSS I use for my unordered lists.
Thanks

Expand|Select|Wrap|Line Numbers
  1.  
  2. /* My CSS Document */
  3.  
  4. .my_nav {
  5.     width:100%;
  6.     text-align: center;
  7.     position:relative; 
  8.     font-family:arial, verdana, sans-serif; 
  9.     font-size:12px;
  10.     background: url(images/nav_headerbg.gif);
  11.     height:66px;
  12.     margin:10px 1px;
  13.  
  14. }
  15.  
  16. .my_nav .select {
  17.     margin:0; 
  18.     padding:0; 
  19.     list-style:none; 
  20.     white-space:nowrap;
  21. }
  22.  
  23. .my_nav .select li a{
  24.     float:left;
  25.     background: url(images/nav_tabPipe.gif) right no-repeat;
  26. }
  27.  
  28. .my_nav .select a {
  29.     display: block;
  30.     float: none;
  31.     padding-top: 10px;
  32.     padding-right: 9px;
  33.     padding-bottom: 18px;
  34.     padding-left: 0px;
  35.     text-decoration: none;
  36.     white-space: nowrap;
  37.     color: #003366;
  38. }
  39.  
  40. .my_nav .select a {
  41.     display: block;    
  42.     padding:10px 8px 18px 6px;
  43.  
  44. }
  45.  
  46. .my_nav .select li.active a,.my_nav .select li.active:hover a {
  47.     text-decoration: none;
  48.     text-align: center;
  49.     color:#fff;
  50.     background: url(images/nav_tabOn.gif) 0% 0px no-repeat;
  51.     z-index: 2;
  52. }
  53.  
  54. .my_nav .select li.active a{
  55.     text-decoration: none;
  56.     color: #fff;
  57. }
  58.  
  59. .my_nav .select li:hover a {
  60.     text-decoration: none;
  61.     text-align: center;
  62.     /*background-image: url(images/nav_tabHover.gif);*/
  63. }    
  64. .my_nav .select li:hover a {
  65.     text-decoration: none;
  66.     /*background: url(images/nav_tabHover.gif) 0% 0px no-repeat;*/
  67.     color: red;
  68. }
  69.  
  70. .my_nav .sub {
  71.     display: none;
  72.     margin: 0;
  73.     padding: 0;
  74.     list-style: none;
  75.  
  76. }
  77.  
  78. /* IE6 only */
  79. .my_nav table {
  80.     border-collapse:collapse; 
  81.     margin:-1px; 
  82.     font-size:1em; 
  83.     width:0; 
  84.     height:0;
  85. }
  86.  
  87. .my_nav .sub {
  88.     margin:0; 
  89.     padding:0;
  90.     list-style:none;
  91. }
  92.  
  93. .my_nav .select .active .sub {
  94.     display:block; 
  95.     position:absolute;
  96.     float:left;
  97.     width:100%;
  98.     top:35px; 
  99.     text-align:center;    
  100.  
  101. }
  102.  
  103. .my_nav .select .active .sub li a {
  104.     display:block; 
  105.     line-height:32px; 
  106.     float: left;
  107.     background:none;
  108.     padding:0 11px; 
  109.     margin:0; 
  110.     white-space:nowrap; 
  111.     color:#444;font-size:11px;
  112. }
  113.  
  114. .my_nav .select :hover .sub{
  115.     display: block;
  116.     background: url(images/nav_subNavBg.gif)  repeat-y ;
  117.     z-index: 1;
  118.     position: absolute;
  119.     float: left;
  120.     width: 100%;
  121.     top:40px;
  122.     text-align: center;
  123.     color: #003399;
  124. }
  125.  
  126. .my_nav .select :hover .sub li a {
  127.     display: block;
  128.     line-height: 23px;
  129.     background: none;
  130.     float: left;
  131.     padding:0 11px; 
  132.     margin:0; 
  133.     white-space:nowrap;
  134.     color:#444;font-size:11px;
  135. }
  136.  
  137. .my_nav .select :hover .sub li a:hover{
  138.     color:#444;
  139.     text-decoration:underline;
  140. }
  141.  
  142.  
Apr 1 '08 #1
Share this Question
Share on Google+
11 Replies


drhowarddrfine
Expert 5K+
P: 7,435
The only browser that usually needs hacking is IE. If you write your markup to standards, then modern browsers generally fall right into line. Only IE will cause you problems. But IEs bugs and quirks are known, as are the hacks, and we can use "conditional comments" to fix IE. Seperate stylesheets aren't necessary.

Please post the HTML or a link. CSS is one hand. HTML is the other.
Apr 1 '08 #2

victorduwon
P: 32
The only browser that usually needs hacking is IE. If you write your markup to standards, then modern browsers generally fall right into line. Only IE will cause you problems. But IEs bugs and quirks are known, as are the hacks, and we can use "conditional comments" to fix IE. Seperate stylesheets aren't necessary.

Please post the HTML or a link. CSS is one hand. HTML is the other.

Thanks for the reply. Here is the html. I have tried some conditional comments based on some things I have researched online today, but I've had no luck. Either i'm doing it wrong, or the examples I looked at don't really apply to my code.


[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Navigation | SNI</title>
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="760" border="0">
<tr>
<div id="sniNav">

<div class="my_nav">
<ul class="select">


<li id="home" class="active"><a href="home.html"><b>Home</b></a>
<ul class="sub">
<li><a href="#">The Front Page</a></li>
<li><a href="#">Police</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Biz Buzz</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Obituaries</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Special Reports</a></li>
<li><a href="#">Corrections</a></li>
<li><a href="#">Mobile News</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Calendar View</a></li>
</li>
</ul>
</li>
<li id="news" class="line"><a href="news.html"><b>News</b></a>
<ul class="sub">
<li><a href="#">The Front Page</a></li>
<li><a href="#">Police</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Biz Buzz</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Obituaries</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Special Reports</a></li>
<li><a href="#">Corrections</a></li>
<li><a href="#">Mobile News</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Calendar View</a></li>
</li>
</ul>
</li>

<li id="sports" class="line"><a href="sports.html"><b>Sports</b></a>
<ul class="sub">
<li><a href="#">Fishing: Reel Report</a></li>
<li><a href="#">High School Football Scoreboard</a></li>
<li><a href="#">From the Sidelines</a></li>
<li><a href="#">Ask Sports</a></li>
<li><a href="#">Sports Photographs</a></li>
</li>
</ul>
</li>

<li id="opinions" class="line"><a href="opinions.html"><b>Opinion</b></a>
<ul class="sub">
<li><a href="#">Letters to the Editor</a></li>
<li><a href="#">Columns</a></li>
<li><a href="#">Guest Columns</a></li>
<li><a href="#">Cartoons</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Write Us</a></li>
</li>
</ul>
</li>

<li id="blogs" class="line"><a href="blogs.html"><b>Blogs</b></a>
<ul class="sub">
<li><a href="#">Between The Lines</a></li>
<li><a href="#">Blogging on the Island</a></li>
<li><a href="#">Buzz Blog</a></li>
<li><a href="#">Editors' Notes</a></li>
<li><a href="#">From the Sidelines</a></li>
<li><a href="#">On the Island, Off the Path</a></li>
<li><a href="#">Weather Watch</a></li>
</li>
</ul>
</li>

<li id="lifestyle" class="line"><a href="lifestyle.html"><b>Lifestyle</b></a>
<ul class="sub">
<li><a href="#">Food</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">OurFaith</a></li>
<li><a href="#">Announcements</a></li>
<li><a href="#">Bulletin Board</a></li>
</li>
</ul>
</li>

<li id="community" class="line"><a href="community.html"><b>Community</b></a>
<ul class="sub">
<li><a href="#">Bacliff</a></li>
<li><a href="#">BayouVista</a></li>
<li><a href="#">Bolivar</a></li>
<li><a href="#">Clear Lake Shores</a></li>
<li><a href="#">Dickinson</a></li>
<li><a href="#">Friendswood</a></li>
<li><a href="#">Galveston</a></li>
<li><a href="#">High Island</a></li>
</li>
</ul>
</li>

<li id="apnews" class="line"><a href="apnews.html"><b>AP News</b></a>
<ul class="sub">
<li><a href="#">Texas</a></li>
<li><a href="#">Nation</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Podcasts</a></li>
<li><a href="#">Video</a></li>
</li>
</ul>
</li>

<li id="services" class="line"><a href="services.html"><b>Services</b></a>
<ul class="sub">
<li><a href="#">Newspaper Delivery</a></li>
<li><a href="#">Newspaper E-Edition</a></li>
<li><a href="#">Newsstand Locations</a></li>
<li><a href="#">Vacation Stops</a></li>
<li><a href="#">Order Back Issues</a></li>
<li><a href="#">Newspapers in Education</a></li>
<li><a href="#">Reprints</a></li>
<li><a href="#">Staff Directory</a></li>
</li>
</ul>
</li>

<li id="classifieds" class="line"><a href="classifieds.html"><b>Classifieds</b></a>
<ul class="sub">
<li><a href="#">Jobs</a></li>
<li><a href="#">Homes</a></li>
<li><a href="#">Autos</a></li>
<li><a href="#">All Listings</a></li>
<li><a href="#">Service Directory</a></li>
<li><a href="#">Place an Ad</a></li>
</li>
</ul>
</li>

<li id="shopping" class="line"><a href="#"><b>Shopping</b></a>

<ul class="sub">
<li><a href="#">Dining Guide</a></li>
<li><a href="#">Newspaper Ads/Inserts</a></li>
<li><a href="#">How to Advertise</a></li>
</li>
</ul>
</li>

<li id="help" class="line"><a href="#"><b>Help</b></a>

<ul class="sub">
<li><a href="#">Dining Guide</a></li>
<li><a href="#">Newspaper Ads/Inserts</a></li>
<li><a href="#">How to Advertise</a></li>
</li>
</ul>
</li>
</ul>

</div>
</div>
</tr>
</table>

</body>
</html>


[/html]
Apr 1 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
Validate your html for that list of 49 errors.
Apr 1 '08 #4

victorduwon
P: 32
Ok, Drhowardfine, Im sorry for not taking care of that before hand. I have now validated both the css and the html. They both validate. However, I still have the display errors in Firefox, and IE.
Here is my validated HTML. I hope you are still willing to help.

Thanks

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>CSS Navigation</title>
  7. <link href="navigation.css" rel="stylesheet" type="text/css" />
  8. </head>
  9.  
  10. <body>
  11.             <div class="my_nav">
  12.             <ul class="select">
  13.  
  14.  
  15.  
  16. <li class="active"><a href="home.lasso"><b>Home</b></a>
  17. <ul class="sub">
  18.                 <li><a href="#">The Front Page</a></li>
  19.                 <li><a href="#">Police</a></li>
  20.                 <li><a href="#">Business</a></li>
  21.                 <li><a href="#">Biz Buzz</a></li>
  22.                 <li><a href="#">Photographs</a></li>
  23.                 <li><a href="#">Obituaries</a></li>
  24.                 <li><a href="#">Weather</a></li>        
  25.                 <li><a href="#">Special Reports</a></li>
  26.                 <li><a href="#">Corrections</a></li>
  27.                 <li><a href="#">Mobile News</a></li>
  28.                 <li><a href="#">RSS</a></li>
  29.                 <li><a href="#">E-Edition</a></li> 
  30.   </ul>
  31. </li>
  32. <li class="line"><a href="news.lasso"><b>News</b></a>
  33. <ul class="sub">
  34.                 <li><a href="#">The Front Page</a></li>
  35.                 <li><a href="#">Police</a></li>
  36.                 <li><a href="#">Business</a></li>
  37.                 <li><a href="#">Biz Buzz</a></li>
  38.                 <li><a href="#">Photographs</a></li>
  39.                 <li><a href="#">Obituaries</a></li>
  40.                 <li><a href="#">Weather</a></li>                
  41.                 <li><a href="#">Special Reports</a></li>
  42.                 <li><a href="#">Corrections</a></li>
  43.             <li><a href="#">Mobile News</a></li>
  44.             <li><a href="#">RSS</a></li>
  45.             <li><a href="#">Search</a></li>
  46.             <li><a href="#">Calendar View</a></li>
  47.   </ul>
  48. </li>
  49. <li class="line"><a href="sports.lasso"><b>Sports</b></a>
  50.     <ul class="sub">
  51.                 <li><a href="#">Fishing: Reel Report</a></li>
  52.                 <li><a href="#">High School Football Scoreboard</a></li>
  53.                 <li><a href="#">From the Sidelines</a></li>
  54.                 <li><a href="#">Ask Sports</a></li>
  55.                 <li><a href="#">Sports Photographs</a></li>
  56.   </ul>
  57. </li>
  58. <li class="line"><a href="opinion.lasso"><b>Opinion</b></a>
  59.     <ul class="sub">
  60.                 <li><a href="#">Letters to the Editor</a></li>
  61.                 <li><a href="#">Columns</a></li>
  62.                 <li><a href="#">Guest Columns</a></li>
  63.                 <li><a href="#">Cartoons</a></li>
  64.                 <li><a href="#">Forums</a></li>
  65.                 <li><a href="#">Write Us</a></li>
  66.   </ul>
  67. </li>
  68. <li class="line"><a href="blogs.lasso"><b>Blogs</b></a>
  69. <ul class="sub">
  70.                 <li><a href="#">Between The lines</a></li>
  71.                 <li><a href="#">Blogging on the Island</a></li>
  72.                 <li><a href="#">Buzz Blog</a></li>
  73.                 <li><a href="#">Editors' Notes</a></li>
  74.                 <li><a href="#">From the Side liness</a></li>
  75.                 <li><a href="#">On the Island, Off the Path</a></li>
  76.   </ul>
  77. </li>
  78. <li class="line"><a href="lifestyle.lasso"><b>Lifestyle</b></a>
  79. <ul class="sub">
  80.                 <li><a href="#">Food</a></li>
  81.                 <li><a href="#">Entertainment</a></li>
  82.                 <li><a href="#">Health</a></li>
  83.                 <li><a href="#">Travel</a></li>
  84.                 <li><a href="#">OurFaith</a></li>
  85.                 <li><a href="#">Announcements</a></li>
  86.                 <li><a href="#">Bulletin Board</a></li>
  87.   </ul>
  88. </li>
  89. <li class="line"><a href="community.lasso"><b>Community</b></a>
  90. <ul class="sub">
  91.                 <li><a href="#">Bacliff</a></li>
  92.                 <li><a href="#">BayouVista</a></li>
  93.                 <li><a href="#">Bolivar</a></li>
  94.                 <li><a href="#">Clear Lake Shores</a></li>
  95.                 <li><a href="#">Dickinson</a></li>
  96.                 <li><a href="#">Friendswood</a></li>
  97.                 <li><a href="#">Galveston</a></li>
  98.                 <li><a href="#">High Island</a></li>
  99.                 <li><a href="#">Hitchcock</a></li>
  100.   </ul>
  101. </li>
  102. <li class="line"><a href="apnews.lasso"><b>AP News</b></a>
  103. <ul class="sub">
  104.                 <li><a href="#">Texas</a></li>
  105.                 <li><a href="#">Nation</a></li>
  106.                 <li><a href="#">Politics</a></li>
  107.                 <li><a href="#">Business</a></li>
  108.                 <li><a href="#">Technology</a></li>
  109.                 <li><a href="#">Sports</a></li>
  110.                 <li><a href="#">Health</a></li>
  111.                 <li><a href="#">Entertainment</a></li>
  112.                 <li><a href="#">Podcasts</a></li>
  113.                 <li><a href="#">Video</a></li>
  114.   </ul>
  115. </li>
  116. <li class="line"><a href="services.lasso"><b>Services</b></a>
  117. <ul class="sub">
  118.                 <li><a href="#">Newspaper Delivery</a></li>
  119.                 <li><a href="#">Newspaper E-Edition</a></li>
  120.                 <li><a href="#">Newsstand Locations</a></li>
  121.                 <li><a href="#">Vacation Stops</a></li>
  122.                 <li><a href="#">Order Back Issues</a></li>
  123.                 <li><a href="#">Newspapers in Education</a></li>
  124.                 <li><a href="#">Reprints</a></li>
  125.                 <li><a href="#">Staff Directory</a></li>
  126.   </ul>
  127. </li>
  128. <li class="line"><a href="classifieds.lasso"><b>Classifieds</b></a>
  129. <ul class="sub">
  130.                 <li><a href="#">Jobs</a></li>
  131.                 <li><a href="#">Homes</a></li>
  132.                 <li><a href="#">Autos</a></li>
  133.                 <li><a href="#">All Listings</a></li>
  134.                 <li><a href="#">Service Directory</a></li>
  135.                 <li><a href="#">Place an Ad</a></li>
  136.   </ul>
  137. </li>
  138. <li class="line"><a href="#"><b>Shopping</b></a>
  139. <ul class="sub">
  140.                 <li><a href="#">Dining Guide</a></li>
  141.                 <li><a href="#">Newspaper Ads/Inserts</a></li>
  142.                 <li><a href="#">How to Advertise</a></li>
  143.   </ul>
  144. </li>
  145. <li class="line"><a href="#"><b>Help</b></a>
  146. <ul class="sub">
  147.                 <li><a href="#">Dining Guide</a></li>
  148.                 <li><a href="#">Newspaper Ads/Inserts</a></li>
  149.                 <li><a href="#">How to Advertise</a></li>
  150. </ul>
  151. </li>
  152. </ul>
  153. </div>
  154.  
  155.  
  156. </body>
  157. </html>        
  158.  
  159.  
  160.  
  161.  
Apr 1 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Part of the problem is you have your "IE-only" CSS in there but all other browsers are going to read that too. Just editing out all that improves it quite a bit. You want to get your page working in the modern browsers first while glancing at IE to see what it does wrong.

It looks like your elements are overlapping because they are positioned as absolute and floated. I don't know if this is a copy of something else or you edited it but you have to keep in mind that such positioning removes an element from the normal flow and causes them to rise to the first positioned element above it.

Wrapping some of these in a relatively positioned element may solve some of the problem, or at least give you an idea of what's happening. There's too much here for me to look at right now.
Apr 1 '08 #6

victorduwon
P: 32
DrHowarddrfine,

I tried what you suggested. I removed the IE only block of code from the css. I also played around with the float and the positioning. I must be doing something wrong, since it only broke the navigation in Safari. When designing the menu I did do so for modern browsers. It works great in Safari, only a small error with the placement of the second tier on the hoverstate, and is totally broken in IE.

I will continue trying to adjust the float and positioning. Should I only be using one or the other?
Apr 2 '08 #7

victorduwon
P: 32
I did solve my problem. I had not added a rule for the li item. An oversight, stupid noob mistake, I know. But I solved it. Thanks for your help. Below is my rule that I added. Thanks for the help.

Expand|Select|Wrap|Line Numbers
  1. .my_nav li{
  2.     display: inline;
  3.     list-style: none;
  4. }
  5.  
Apr 2 '08 #8

drhowarddrfine
Expert 5K+
P: 7,435
Everybody overlooks something eventually. I've spent hours trying to fix my css when the problem was some inline stuff I forgot to delete.
Apr 2 '08 #9

victorduwon
P: 32
Thanks. Without your help I would not likely have seen the errors I did. Now I am still having some IE issues. My active tab, uses a background with a down-pointing arrow, similar to the tech republic web site. But It uses a suckerfish drop-down, and in their nonactive state the tabs that are hovered over should show their sub menu. I am getting nothing on hover in IE. Do you know of any known issues with hover states in IE? I am googling it but having no luck. And this time I did validate my code before asking for help!
Apr 2 '08 #10

drhowarddrfine
Expert 5K+
P: 7,435
hover only works on <a> in IE6, and IE7 struggles with it on other elements.
Apr 2 '08 #11

victorduwon
P: 32
Thanks, I'm looking over some Suckerfish documents on A List Apart, and have found some JavaScript to fix IE's hover problem. Hope it works.
Apr 2 '08 #12

Post your reply

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