CSS Reset script interfering with 1 link - html

Question

I have a menu which can be seen in the link below:
http://fiddle.jshell.net/V88c6/8/show/
Here is the full jsfiddle
http://jsfiddle.net/V88c6/8/
Here is the HTML
<div id="head_1">
<div class="inner">
<div class="column_0">
LOGO
</div>
<div class="column_1">
LINK 1
LINK 2
LINK 3
LINK 4
</div>
<div class="column_2">
<span>USER NAME</span> LOGOUT
</div>
<div class="clearfix"></div>
</div>
</div>
For some reason the LOGOUT link's top border on hover seems to be a pixel higher then the rest of the links. This happened when I added some css reset script.
Here is a link of the same page without the css reset where the LOGOUT link works fine:
http://fiddle.jshell.net/V88c6/9/show/
I like to use the css reset script to help the page look similar on most popular browsers.
Anyone know why the css reset script would be interfering with the LOGOUT link only?
Tested on IE7, IE8, Latest Google Chrome, latest Firefox, Latest Opera.

Answer 1

You are trying to style it the bad way. Try styling it like this - whit li ul:
<div class="column_1">
<ul class="menu_link">
<li><a href="#" >LINK 1</a></li>
<li><a href="#" >LINK 2</a></li>
<li><a href="#" >LINK 3</a></li>
<li><a href="#" >LINK 4</a></li>
<ul>
</div>
<div class="column_2">
<ul class="menu_link">
<li>username</li>
<li><a href="#" >LINK 4</a></li>
<ul>
</div>
and these are the selectors:
.menu_link li{}
.menu_link li a{}

Answer 2

you can try this one also
#head_1 .inner .column_2 {
display: block;
float: right;
padding: 0 15px;
}
#head_1 .inner .column_2 .menu_link {
border-top: 17px solid transparent;
padding: 17px 15px 10px 15px;
display: inline-block;}

Answer 3

The problem has to do with the computed value for the display property.
Your middle column with "LINK 1" and so on shows .menu-link with float: left, which causes the <a> elements to be block instead of inline.
You "LOGOUT" link shows .menu-link with no float, so the <a> element is inline.
The inline element affects the height of its inline box differently from a block element.
There was some style property in your browser's default style sheet that was masking this effect, and when you used a reset CSS style sheet, it appears.
The fix would be to layout out the two elements on the right (User Name and Logout) as floated element or to tweak the margin or line height by 1-2 px (involves trial and error, groaning).
The Fix
I was able to get a consistent layout by doing the following by adjusting your CSS as follows:
#head_1 .inner .column_2 {
display:block;
float:right;
/* padding:34px 0px 10px 15px; Remove this... */
}
#head_1 .inner .column_2 .menu_link{
border-top:17px solid transparent;
padding:17px 15px 10px 15px;
float: left; /* add this.. */
}
/* Float your span like you floated the link... */
#head_1 .inner .column_2 span {
border-top:17px solid transparent;
padding:17px 15px 10px 15px;
float: left;
}
Fiddle: http://jsfiddle.net/audetwebdesign/Myhcy/
The key is to keep a consistent coding style in laying out your two menus.