CSS hacks for IE and Firefox

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • victorduwon
    New Member
    • Nov 2007
    • 32
    #1

    CSS hacks for IE and Firefox

    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

    [CODE=css]

    /* My CSS Document */

    .my_nav {
    width:100%;
    text-align: center;
    position:relati ve;
    font-family:arial, verdana, sans-serif;
    font-size:12px;
    background: url(images/nav_headerbg.gi f);
    height:66px;
    margin:10px 1px;

    }

    .my_nav .select {
    margin:0;
    padding:0;
    list-style:none;
    white-space:nowrap;
    }

    .my_nav .select li a{
    float:left;
    background: url(images/nav_tabPipe.gif ) right no-repeat;
    }

    .my_nav .select a {
    display: block;
    float: none;
    padding-top: 10px;
    padding-right: 9px;
    padding-bottom: 18px;
    padding-left: 0px;
    text-decoration: none;
    white-space: nowrap;
    color: #003366;
    }

    .my_nav .select a {
    display: block;
    padding:10px 8px 18px 6px;

    }

    .my_nav .select li.active a,.my_nav .select li.active:hover a {
    text-decoration: none;
    text-align: center;
    color:#fff;
    background: url(images/nav_tabOn.gif) 0% 0px no-repeat;
    z-index: 2;
    }

    .my_nav .select li.active a{
    text-decoration: none;
    color: #fff;
    }

    .my_nav .select li:hover a {
    text-decoration: none;
    text-align: center;
    /*background-image: url(images/nav_tabHover.gi f);*/
    }
    .my_nav .select li:hover a {
    text-decoration: none;
    /*background: url(images/nav_tabHover.gi f) 0% 0px no-repeat;*/
    color: red;
    }

    .my_nav .sub {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;

    }

    /* IE6 only */
    .my_nav table {
    border-collapse:collap se;
    margin:-1px;
    font-size:1em;
    width:0;
    height:0;
    }

    .my_nav .sub {
    margin:0;
    padding:0;
    list-style:none;
    }

    .my_nav .select .active .sub {
    display:block;
    position:absolu te;
    float:left;
    width:100%;
    top:35px;
    text-align:center;

    }

    .my_nav .select .active .sub li a {
    display:block;
    line-height:32px;
    float: left;
    background:none ;
    padding:0 11px;
    margin:0;
    white-space:nowrap;
    color:#444;font-size:11px;
    }

    .my_nav .select :hover .sub{
    display: block;
    background: url(images/nav_subNavBg.gi f) repeat-y ;
    z-index: 1;
    position: absolute;
    float: left;
    width: 100%;
    top:40px;
    text-align: center;
    color: #003399;
    }

    .my_nav .select :hover .sub li a {
    display: block;
    line-height: 23px;
    background: none;
    float: left;
    padding:0 11px;
    margin:0;
    white-space:nowrap;
    color:#444;font-size:11px;
    }

    .my_nav .select :hover .sub li a:hover{
    color:#444;
    text-decoration:unde rline;
    }

    [/CODE]
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      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 "conditiona l comments" to fix IE. Seperate stylesheets aren't necessary.

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

        Comment

        • victorduwon
          New Member
          • Nov 2007
          • 32
          #3
          Originally posted by drhowarddrfine
          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 "conditiona l 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.dt d">
          <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="navigatio n.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="#">Busine ss</a></li>
          <li><a href="#">Biz Buzz</a></li>
          <li><a href="#">Photog raphs</a></li>
          <li><a href="#">Obitua ries</a></li>
          <li><a href="#">Weathe r</a></li>
          <li><a href="#">Specia l Reports</a></li>
          <li><a href="#">Correc tions</a></li>
          <li><a href="#">Mobile News</a></li>
          <li><a href="#">RSS</a></li>
          <li><a href="#">Search </a></li>
          <li><a href="#">Calend ar 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="#">Busine ss</a></li>
          <li><a href="#">Biz Buzz</a></li>
          <li><a href="#">Photog raphs</a></li>
          <li><a href="#">Obitua ries</a></li>
          <li><a href="#">Weathe r</a></li>
          <li><a href="#">Specia l Reports</a></li>
          <li><a href="#">Correc tions</a></li>
          <li><a href="#">Mobile News</a></li>
          <li><a href="#">RSS</a></li>
          <li><a href="#">Search </a></li>
          <li><a href="#">Calend ar View</a></li>
          </li>
          </ul>
          </li>

          <li id="sports" class="line"><a href="sports.ht ml"><b>Sports </b></a>
          <ul class="sub">
          <li><a href="#">Fishin g: 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>Opinio n</b></a>
          <ul class="sub">
          <li><a href="#">Letter s to the Editor</a></li>
          <li><a href="#">Column s</a></li>
          <li><a href="#">Guest Columns</a></li>
          <li><a href="#">Cartoo ns</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.htm l"><b>Blogs</b></a>
          <ul class="sub">
          <li><a href="#">Betwee n The Lines</a></li>
          <li><a href="#">Bloggi ng on the Island</a></li>
          <li><a href="#">Buzz Blog</a></li>
          <li><a href="#">Editor s' 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="#">Weathe r Watch</a></li>
          </li>
          </ul>
          </li>

          <li id="lifestyle" class="line"><a href="lifestyle .html"><b>Lifes tyle</b></a>
          <ul class="sub">
          <li><a href="#">Food</a></li>
          <li><a href="#">Entert ainment</a></li>
          <li><a href="#">Health </a></li>
          <li><a href="#">Travel </a></li>
          <li><a href="#">OurFai th</a></li>
          <li><a href="#">Announ cements</a></li>
          <li><a href="#">Bullet in Board</a></li>
          </li>
          </ul>
          </li>

          <li id="community" class="line"><a href="community .html"><b>Commu nity</b></a>
          <ul class="sub">
          <li><a href="#">Baclif f</a></li>
          <li><a href="#">BayouV ista</a></li>
          <li><a href="#">Boliva r</a></li>
          <li><a href="#">Clear Lake Shores</a></li>
          <li><a href="#">Dickin son</a></li>
          <li><a href="#">Friend swood</a></li>
          <li><a href="#">Galves ton</a></li>
          <li><a href="#">High Island</a></li>
          </li>
          </ul>
          </li>

          <li id="apnews" class="line"><a href="apnews.ht ml"><b>AP News</b></a>
          <ul class="sub">
          <li><a href="#">Texas</a></li>
          <li><a href="#">Nation </a></li>
          <li><a href="#">Politi cs</a></li>
          <li><a href="#">Busine ss</a></li>
          <li><a href="#">Techno logy</a></li>
          <li><a href="#">Sports </a></li>
          <li><a href="#">Health </a></li>
          <li><a href="#">Entert ainment</a></li>
          <li><a href="#">Podcas ts</a></li>
          <li><a href="#">Video</a></li>
          </li>
          </ul>
          </li>

          <li id="services" class="line"><a href="services. html"><b>Servic es</b></a>
          <ul class="sub">
          <li><a href="#">Newspa per Delivery</a></li>
          <li><a href="#">Newspa per E-Edition</a></li>
          <li><a href="#">Newsst and Locations</a></li>
          <li><a href="#">Vacati on Stops</a></li>
          <li><a href="#">Order Back Issues</a></li>
          <li><a href="#">Newspa pers in Education</a></li>
          <li><a href="#">Reprin ts</a></li>
          <li><a href="#">Staff Directory</a></li>
          </li>
          </ul>
          </li>

          <li id="classifieds " class="line"><a href="classifie ds.html"><b>Cla ssifieds</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="#">Servic e Directory</a></li>
          <li><a href="#">Place an Ad</a></li>
          </li>
          </ul>
          </li>

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

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

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

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

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

          </body>
          </html>


          [/html]
          Last edited by victorduwon; Apr 1 '08, 05:28 PM. Reason: typo

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Validate your html for that list of 49 errors.

                Comment

                • victorduwon
                  New Member
                  • Nov 2007
                  • 32
                  #5
                  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

                  Code:
                  <!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</title>
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>

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

<li class="active"><a href="home.lasso"><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="#">E-Edition</a></li> 
  </ul>
</li>
<li class="line"><a href="news.lasso"><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>
  </ul>
</li>
<li class="line"><a href="sports.lasso"><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>
  </ul>
</li>
<li class="line"><a href="opinion.lasso"><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>
  </ul>
</li>
<li class="line"><a href="blogs.lasso"><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 Side liness</a></li>
				<li><a href="#">On the Island, Off the Path</a></li>
  </ul>
</li>
<li class="line"><a href="lifestyle.lasso"><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>
  </ul>
</li>
<li class="line"><a href="community.lasso"><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><a href="#">Hitchcock</a></li>
  </ul>
</li>
<li class="line"><a href="apnews.lasso"><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>
  </ul>
</li>
<li class="line"><a href="services.lasso"><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>
  </ul>
</li>
<li class="line"><a href="classifieds.lasso"><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>
  </ul>
</li>
<li 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>
  </ul>
</li>
<li 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>
</ul>
</li>
</ul>
</div>

			
</body>
</html>

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      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.

                        Comment

                        • victorduwon
                          New Member
                          • Nov 2007
                          • 32
                          #7
                          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?

                            Comment

                            • victorduwon
                              New Member
                              • Nov 2007
                              • 32
                              #8
                              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.

                              Code:
                              .my_nav li{
	display: inline;
	list-style: none;
}

                                Comment

                                • drhowarddrfine
                                  Recognized Expert Expert
                                  • Sep 2006
                                  • 7434
                                  #9
                                  Everybody overlooks something eventually. I've spent hours trying to fix my css when the problem was some inline stuff I forgot to delete.

                                    Comment

                                    • victorduwon
                                      New Member
                                      • Nov 2007
                                      • 32
                                      #10
                                      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!

                                        Comment

                                        • drhowarddrfine
                                          Recognized Expert Expert
                                          • Sep 2006
                                          • 7434
                                          #11
                                          hover only works on <a> in IE6, and IE7 struggles with it on other elements.

                                            Comment

                                            • victorduwon
                                              New Member
                                              • Nov 2007
                                              • 32
                                              #12
                                              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.

                                                Comment

                                                Previous template Next
                                                Working...