Making Peace between IE and Mozilla in CSS code

**Availor** · 23 February 2007, 10:51 PM

If any of you have ever tried to work with CSS code to build a website, I'm sure you've came up to a certein point when you just wanted to press a little red button and blow up the whole damn computer. No matter what you did, as pretty it looked in your HTML authoring tool, the moment you opened your web page in a different browser you were nearly stroke by a heart attack: All those long hours of work were for nothing, since it looks like cr@p. The moment you fix it, the other browser still won't work!

I came across this life saving link. Read, memorize, and keep under your pillow to remember.

http://www.javascriptkit.com/dhtmltutors/csshacks.shtml

Happy Scripting http://www.moblex.ru/images/smilies/victory.gif

**RedWombat** · 26 February 2007, 02:57 PM

Thanks Availor!

I've had my share of hair pulling and browser compatibility issues with CSS!

It's a pain in the ars how they don't see the code the same way sometimes!

One of my particular issues was how IE and Firefox didn't see padding in a block the same way. Jeesh, it really ticked me off!

Of course I'm better now . . . breathing exercises and a garbage can to kick really helped!

**remi** · 26 February 2007, 03:15 PM

I would recommend to invest some bucks into this good written book with solutions to common web design issues - especially CSS:

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

Regards,
Remi

**RedWombat** · 26 February 2007, 03:19 PM

That's an excellent idea Remi!

I currently use Core CSS for my reference source, but a solutions book would be a good addition to anyone using CSS regularly.

**Availor** · 26 February 2007, 05:04 PM

You just have no idea how much headache all those different browsers has cost me. Only recently I've had a rought time to find out that my code works fine for firefox and for IE7 but not for IE6. I've made flyout menues using CSS and php and they just won't open in IE6. Since IE6 cannot be installed along with IE7 sometimes I just feel like killing someone... Those morons Microstinks! Can't they do something that will go well for their own browsers?!?!

www.2b.sce.ac.il

**RedWombat** · 27 February 2007, 03:12 AM

I know what you mean. I have CSS code that uses an unordered list for flyout menus that work both in IE 7, IE 6 and FF. I put it together with input from websites and forums around the web. Happy to share if you want?

I use Coldfusion, but the CSS code is basic enough that you can adapt it for PHP.

An example of my menus are on http://www.sebpconnections.com

**Availor** · 27 February 2007, 01:08 PM

The menues look very clean, I have the code from cssplay.co.uk but I would like to know if you use any other technique for these menues.

I use unordered list as well. The problem it seems, that it will only work if you have something like:

<div class="menues">
<ul>
<li> submenu</li>
<li>submenu 2</li>
</ul>
</div>

Where "menues" should be set positioned relative otherwise they will not work.

That's what I know.

Something like:

.menues { position:relative; overflow:hidden; }
.menues ul { visibility: none; display: none; }
a.menues { display:block; }
.menues a:hover { visibility: visible; }

I'm not sure if you must set both "visibility:hidden" AND "display: none;" or it's enough to set only one paramenter - I always get confused and they seem to work differently in different browser.

Another problem is that I now use php code which can be only see on the testing server, so I can't see the result on my computer prior to uploading it to the server.

**RedWombat** · 06 March 2007, 07:43 PM

Hi Availor.

Sorry for the delay on responding. I've been swamped.

I'll show you examples of my code and you can see if it will work for you. Keep in mind that I use Coldfusion for development. The premise is the same and the code is basic CSS and HTML. I did glean some of this from other websites, but it's been quite awhile and I don't have a url for you to check out on its implementation.

Here's my styles sheet:

Code:

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 200px;
  list-style: none;
}

/*From IE 7 lack of compliance*/
ul#navmenu:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu li {
  float: left; /*For IE 7 lack of compliance*/
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #003698;
  /*border-right-color: #003698;*/
  /*border-bottom-color: #003698;*/
  background: #294CB8;
  /*background: #2E56CD;*/
  padding : 0px 5px 0px 5px;
  display: block;
  color: #FFFFFF;
  font: 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  font-weight : bold;
  font-style : italic;
}

/* Root Menu Hover */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #486CD7 /*url(arrow-listx.gif) no-repeat center right*/;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  border: 1px solid #294CB8;
  /*border-right-color: #003698;*/
  /*border-bottom-color: #003698;*/
  background: #486CD7;
  color: #DCE3F8;
  font-weight : bold;
}

/* 2nd Menu Hover */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #6F8BDF /*url(arrow-listx.gif) no-repeat center right*/;
  color: #003698;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  border: 1px solid #294CB8;
  /*border-right-color: #003698;*/
  /*border-bottom-color: #003698;*/
  background: #6F8BDF;
  color: #DCE3F8;
  font-weight : bold;
}

/* 3rd Menu Hover */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #92A7E7;
  color: #003698;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  border: 1px solid #294CB8;
  /*border-right-color: #003698;*/
  /*border-bottom-color: #003698;*/
  background: #486CD7;
  color: #FFFFFF;
  font-weight : bold;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #6F8BDF;
  color: #003698;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 200px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

And then here's my navigation menu using the style sheet above:

Code:

<ul id="navmenu">
    <li><a href="index.cfm?id=1000">Home</a></li>

    <li><a href="#">Media Center</a>
        <ul>
            <li><a href="index.cfm?id=4100">Press Releases</a></li>
            <li><a href="index.cfm?id=4200">Newsletters</a></li>
        </ul>
    </li>
    
    <li><a href="index.cfm?id=2000">Events</a></li>
    
    <li><a href="index.cfm?id=3000">Contact Us</a></li>

    <br />
    <span class="Title">Inside SEBP</span>
    
    <li><a href="index.cfm?id=5100">About SEBP</a>
        <ul>
            <li><a href="index.cfm?id=5101">Overview &amp; Mission</a></li>
            <li><a href="index.cfm?id=5103">Founders</a></li>
            <li><a href="index.cfm?id=5104">Board of Trustees</a></li>
            <li><a href="index.cfm?id=5105">Board of Governors</a></li>
            <li><a href="index.cfm?id=5106">Staff</a></li>
        </ul>
    </li>
    
    <li><a href="#">Member Exclusives</a>
        <ul>
            <li><a href="index.cfm?id=5201">Featured Member</a></li>
            <li><a href="index.cfm?id=5203">Services & Resources</a></li>
            <li><a href="index.cfm?id=5204">Testimonials</a></li>
        </ul>
    </li>
    
    <li><a href="#">Join SEBP</a>
        <ul>
            <li><a href="index.cfm?id=5302">Member Benefits</a></li>
            <li><a href="index.cfm?id=5303">Top 10 Reasons to Join SEBP</a></li>
            <li><a href="index.cfm?id=3000">Contact Us</a></li>
        </ul>
    </li>
    
    <li><a href="index.cfm?id=5400">Members/Partners</a>
        <ul>
            <li><a href="index.cfm?id=5401">Founders</a></li>
            <li><a href="index.cfm?id=5402">Board of Trustees</a></li>
            <li><a href="index.cfm?id=5403">Board of Governors</a></li>
        </ul>
    </li>
    
</ul>

Then for reference, here's the site using the CSS based navigation above:
www.sebp.org

It's pretty straight forward. I've commented the CSS to show the details and highlight the fixes for IE.

Hope this is helpful.