Issue with CSS Reset code causing disruption for one hyperlink

Question

Issue with CSS Reset code causing disruption for one hyperlink

Check out the menu at this link:

http://fiddle.jshell.net/V88c6/8/show/

To view the complete jsfiddle, click here:

Here is the HTML code:

<div id="head_1">
    <div class="inner">

        <div class="column_0">
            LOGO
        </div>

        <div class="column_1">
            <a href="#" class="menu_link">LINK 1</a>
            <a href="#" class="menu_link">LINK 2</a>
            <a href="#" class="menu_link">LINK 3</a>
            <a href="#" class="menu_link">LINK 4</a>
        </div>

        <div class="column_2">
            <span>USER NAME</span> <a href="#" class="menu_link">LOGOUT</a>
        </div>

        <div class="clearfix"></div>

    </div>
</div>

After applying a css reset script, I noticed that the top border of the LOGOUT link on hover is slightly higher than the other links. This issue can be seen in this version of the page:

http://fiddle.jshell.net/V88c6/9/show/

I prefer using the css reset script to ensure consistency across different browsers, but I'm puzzled as to why it's affecting only the LOGOUT link. Any insights into this issue?

Tested on IE7, IE8, Latest Google Chrome, latest Firefox, Latest Opera.

html css

Answer 1

Answer №1

When it comes to styling, it's important to do it the right way. Consider using this method with 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>

These are the recommended selectors for your styling:

.menu_link li{}
.menu_link li a{}

Answer 2

When it comes to styling, it's important to do it the right way. Consider using this method with 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>

These are the recommended selectors for your styling:

.menu_link li{}
.menu_link li a{}

Answer 3

Answer №2

Give this a shot too

#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 4

Give this a shot too

#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 5

Answer №3

The issue lies in the calculated value for the display attribute.

In your middle column displaying "LINK 1" and similar content, the use of .menu-link with float: left causes the <a> elements to behave as block elements instead of inline.

On the other hand, the "LOGOUT" link utilizes .menu-link without any float property, resulting in an inline display for the <a> element.

It's important to note that an inline element impacts the height of its inline box differently compared to a block element.

The discrepancy was initially hidden by a specific style property in your browser's default style sheet, but became evident when using a reset CSS style sheet.

To resolve this issue, consider arranging the two elements on the right (User Name and Logout) as floated elements or adjust the margin or line height by a small amount (may require some trial and error).

Solution:
Achieve a consistent layout by making the following adjustments to your CSS:

#head_1 .inner .column_2 {
    display:block;
    float:right;
}

#head_1 .inner .column_2 .menu_link{
    border-top:17px solid transparent;
    padding:17px 15px 10px 15px;    
    float: left;
}

/* Float the span like you did with 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/

Consistent coding practices are crucial for maintaining uniformity in your menu layouts.

Answer 6

The issue lies in the calculated value for the display attribute.

In your middle column displaying "LINK 1" and similar content, the use of .menu-link with float: left causes the <a> elements to behave as block elements instead of inline.

On the other hand, the "LOGOUT" link utilizes .menu-link without any float property, resulting in an inline display for the <a> element.

It's important to note that an inline element impacts the height of its inline box differently compared to a block element.

The discrepancy was initially hidden by a specific style property in your browser's default style sheet, but became evident when using a reset CSS style sheet.

To resolve this issue, consider arranging the two elements on the right (User Name and Logout) as floated elements or adjust the margin or line height by a small amount (may require some trial and error).

Solution:
Achieve a consistent layout by making the following adjustments to your CSS:

#head_1 .inner .column_2 {
    display:block;
    float:right;
}

#head_1 .inner .column_2 .menu_link{
    border-top:17px solid transparent;
    padding:17px 15px 10px 15px;    
    float: left;
}

/* Float the span like you did with 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/

Consistent coding practices are crucial for maintaining uniformity in your menu layouts.

Issue with CSS Reset code causing disruption for one hyperlink

Answer №1

Answer №2

Answer №3

Similar questions

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

Switching between fixed and unfixed divs causes two absolute divs to alternate

Guide to positioning a top navigation menu with dropdown items in the center using CSS: absolute positioning

The cancel button for the input type "search" does not appear on Firefox, Internet Explorer, and Edge browsers

Please view the file by accessing exclusively mydomain_name/filename.html

Is it possible to utilize the <hgroup> element with various <h> heading levels?

Navigating from an offspring link to a social media platform page

Sitelinks and a brief description appear beneath the website name when it is displayed in search

When I open Firefox, all I see is a blank page with only the h2 heading displayed

The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

Divs in jQuery smoothly slide down when a category is chosen

CSS - Creating a Gradient Effect on div Borders for a Transparent Fade Effect across a Specified Distance

Design of web pages, Cascading Style Sheets

Updating an HTML Table with AJAX Technology

What's the best method for efficiently hiding/showing a large number of DOM elements?

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

Ways to customize the appearance of CSS bootstrap 'col' elements?

What steps can I take to completely remove JavaScript from an HTML document?

Utilize the href attribute on an image, whether it be through a class

Issue occurred while trying to update the MySQL database with an HTML form and Ajax integration