I am currently building a website for an entrepreneur friend of mine who is venturing out on his own. Looking at this website some of you may think I am joking. The state of this site is constantly changing based on half-baked aspirations and utter indecision around design. Henceforth, I have decided that I will focus on ease of implementation and functionality and just say to hell with design.
My friend’s website on the other hand is very well-designed and, for my sake, I hope well-implemented. In developing this site I ran into a few challenges. To help others in the battle against IE styles, horizontal navigations, and related issues I thought I would document my process.
Step 1. Research: In beginning to build the horizontal navigation I figured I would search for some examples in Google. I searched for “horizontal navigation” and one of the top five results was this:
http://phoenity.com/newtedge/horizontal_nav/
Step 2. More Research: I searched other sites and reviewed at least 10 examples. Some decent and quick implementations are seen at the following sites:
http://www.alistapart.com/
http://css.maxdesign.com.au/listamatic/
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/
Step 3. Decision based on inuition of what would be easiest: Ultimately, I decided I didn’t want to involve much javascript and I wanted to try to get the navigation using only CSS. I have never gotten very familiar with javascript and I was more confident in my abilities to tailor code examples of purely mark-up.
Step 4. Tailor the example:
I ended up with this CSS:
/*** Nav bar styles ***/
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
width: 100%;
table-layout: fixed;
text-align: center;
}
ul.nav>li{
display: table-cell;
position: relative;
margin: 0px 2px 2px 0px;
text-align: center;
}
.nav ul li a{
/* Make the hyperlinks as a block element, sort of a hover effect */
display: block;
padding: 2px 10px;
}
/*** Menu colors (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #EDEDED;
color: #959595;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #000;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #000;
color: #fff;
}
ul.nav,
.nav ul{
/*** border: 1px solid #369; ***/
}
.nav a{
text-decoration: none;
}
/*** END NAV STYLES ***/
and this HTML:
<div id="nav" class="nav">
<ul class="nav">
<li><a href="<?php echo $pageurl; ?>home/">Home</a></li>
<li><a href="<?php echo $pageurl; ?>what-we-do/">What We Do</a></li>
<li><a href="<?php echo $pageurl; ?>blog/">Blog</a></li>
<li><a href="<?php echo $pageurl; ?>about/">About Us</a></li>
<li><a href="<?php echo $pageurl; ?>contact-us/">Contact Us</a></li>
</ul>
</div>
The markup above worked like a charm in Chrome and FF3.
Step 5. Circumstantial Challenge: I chose to ignore IE browers while I crafted the pages. Generally, I wouldn’t do that. My Windows machine that I use for development had recently died and was awaiting replacement parts. I had just converted my old tablet laptop into an Ubuntu machine without the likes of IE (Side Note: I was looking for a way to get use out of an old machine and ended up reviving it in very similar fashion as this cool blogger). I had tried a few user agent simulators but didn’t immediately have much luck so I just decided that checking across browsers would have to wait.
Step 6. Finally Facing IE: Last night I knew it was time to face the IE style challenge. Most of the tweaks required were relatively easy fixes but I was stuck on the horizontal menu. None of the <li>s were displaying inline as they did in other browsers. I spent probably an hour making changes to the above code with no good results. Most of my attempts negatively affected the display in FF and Chrome.
Step 7. Investigation and display:table-cell; Back to Google with queries like “Horizontal Menus in IE”, “Inline Navigation broken IE”, “IE is annoying”. Searching led me to this thread in which I realized the display:table-cell style of the <li>s wasn’t recognized in IE. The thread offered a work-around that I wasn’t stoked about mainly because I didn’t fully understand it.
Step 8. Newb and IE Specific Style Sheet: Being impatient and a newb, I went with the first plan that popped in my head: Use php to determine the browser. If the browser is IE, load an alternate stylesheet. In that alternate stylesheet, replace display:table-cell with a float approach. I started with the stylesheet first assuming the first two steps would be a piece of cake. My navigation style for IE ended up looking like this (changes in red):
ul.nav>li{
/* display: table-cell; */
position: relative;
margin: 0px 2px 2px 0px;
text-align: center;
float: left;
width: 182px;
}
The above worked to get the menu to display very well in IE7
Step 9. Determine the User Agent using get_browser(): I had trouble with this step. First I thought it would be really easy to use get_browser() . However, for that to work you need to modify the php.ini file to point to a new browscap.ini file that you have to add. That really isn’t bad at all but I couldn’t figure out how to get to the php.ini file on my GoDaddy hosting account. Perhaps there is a way using the terminal but FTP and the hosted controls wouldn’t grant me access to anything in the root directory.
Step 10. Preg_Match and HTTP_USER_AGENT: I decided that I could use some regular expressions or pattern matching and pull out the browser type from this:
<?php
echo $_SERVER['HTTP_USER_AGENT'];
?>
This went surprisingly quickly and I ended up with the following php at the top of my page template:
<?php /* Sense browser in order to make navigation work in IE */
$u_agent = $_SERVER['HTTP_USER_AGENT'];
$ub = '';
if(preg_match('/MSIE/i',$u_agent))
{
$ub = "ie";
}
else
{ $ub = "decentbrowser";
}
?>
Within the head, I placed this code/html:
<?php
if ($ub=='ie') {
echo '<link rel="stylesheet" type="text/css" href="/stylesIE.css" />';
} else {
echo '<link rel="stylesheet" type="text/css" href="/styles.css" />';
}
?>
I’m fairly confident there are much better and more elegant ways to do this and I welcome anyone’s comments on this. Otherwise, it is working today. I’ll link to the site when it is “Officially Launched”.
