Posted over 10 years ago by Philip Ingram
I admit that i was having problems aligning the menu for this very site. What appeared to work in Safari wasn’t working in Firefox, and vice versa. I’m sure every web developer has experienced this phenomenon at one point in their career.
I’m about to show you the CSS from the before and after. Please note that both versions work, but i am in favour of the after, obviously.
Note: i had the image tag within the html code because i thought i’d use it as a clickable home button. For accessibility, i guess i could have added the ALT tag, but i think the cleaner look is to have a HOME link in your menu, as it ticks all the right boxes, imo.
Also, i received some weird behaviour from safari using the bottom tag for some reason. In Firefox it would appear normally but in Safari, the menu would diappear above the top of the browser, and the code would still be in view source, so i knew it was there. Really weird.
HTML:
<div id=“header”>
<div id=“menu_container”>‘menus/menu’ %>
</div >
</div >
CSS:
/* header styling */
#header {
height: 110px;
}/* menu container */
#menu_container {
float: right;
bottom: 10px;
right: 20px;
position: relative;
}
Some minor tweaks made this menu manageable. I moved the image to the CSS background element and I used TOP instead of BOTTOM.
HTML:
<div id=“header”>
<div id=“menu_container”>
‘menus/menu’ %>
</div>
</div>
CSS:
/* header styling */
#header {
background: #fff url(/images/IIE_Logo_sm.jpg) no-repeat;
height: 110px;
}/* menu container */
#menu_container {
float: right;
top: 45px;
right: 20px;
position: relative;
}
While i didn’t move mountains here, i did clean up some code that was bugging me, the code doesn’t feel hackish anymore and it should work in the browsers i care about.
Keeping Subscription dates tidy during February and Leap years
Testing ActiveResource - Basic Tutorial
Active Resource to Sinatra DataMapper backend
ArmRest and the tale of the No Schema Scheme
Textmate Ruby 1.9.1 and rvm - the facts
Easiest Postgres Install Ever - Mac Edition
Two Questions to Help Decide Between RDBMS, MongoDB or CouchDB
Testing Rails 3 - Just the Facts
Acts_as_snook - Creating an admin panel
Top 10 Movies of this Decade... Rebuttal
Thinking_Sphinx - Easy Setup Tutorial