How the padding around a linked image can alter the positioning of its parent element(s)

Currently experimenting with a new design for my website to test out the look and feel.

The top navigation bar is looking good, except for one issue I've encountered.

Hovering over text-only links works perfectly fine - with added top-padding creating a nice "moving/growing" effect on the navigation tabs.

However, hovering over links that contain images (such as Paypal, Twitter, YouTube) causes an unexpected problem where the top-padding affects the position of the main parent element. This issue has been identified in the latest versions of Chrome and Firefox for Windows 7.

It's worth noting that it's not the BODY that's affected, but rather #main (as specified in my CSS) also experiences the "moving/growing" effect.

You can view the URL here: and below is the corresponding code:

   #main{
        width:94%;
        max-width:880px;
        margin:12px auto;
        background:#fff;
        box-shadow:1px 1px 4px #000;
        border-radius:4px;
        padding:2px 2px 8px 2px;
        }

        #nav{
        position:relative;
        top:-0.8em;
        background:#fff;
        border-radius:4px;
        padding:2px;
        display:inline-block;
        }

        #nav a{
        color:#000;
        display:inline-block;
        padding:1px 1em 1px 1em;
        border-radius:0 0 4px 4px;
        box-shadow:0px 2px 2px -2px #fff inset, 0px -4px 16px -6px #aaa inset;
        -webkit-transition:background 0.5s, padding-top 0.25s;
        -moz-transition:background 0.5s, padding-top 0.25s;
        vertical-align:top;
        }

        #nav a:hover{
        padding-top:4px;
        background:#eee;
        }

        #nav a:hover img{
            -webkit-transition:-webkit-filter 1.5s;
        }

        #nav a:hover img{
            -webkit-filter:hue-rotate(360deg);
        }

I'm seeking advice on how to address this issue without sacrificing the "moving/growing" effect on both textual and image-based links. Appreciate any insights or solutions offered in advance.

htmlcssnavigationcss-transitions

Answer №1

To resolve the issue, simply adjust the height of the navigation bar

#nav {
position: relative;
top: -0.8em;
background: #fff;
border-radius: 4px;
padding: 2px;
display: inline-block;
height: 50px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to fetch select element within a table by using jQuery

I encountered a situation where I have a table element with a select element inside its td. The id of the table (in this example, it is "table1") could potentially change. So my query is, how can I retrieve the selected option using the table ID in JQuer ...

javascriptjqueryhtml

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

javascripthtmlajax

Switch the placement of two DIV elements by their corresponding IDs

I am attempting to adjust the position of two divs using jQuery, but I seem to be a bit confused as they are already swapping positions. However, when they do swap, it results in a duplication of the field. I have tried using both insertBefore and insertA ...

javascriptphpjqueryhtmlcodeigniter

JavaScript (Automatic) for a full-screen webpage display

I'm having trouble creating a webpage and setting it to fullscreen mode. Here's the JavaScript code I have: var elem = document.getElementById("fulscreen"); var fs = document.getElementById("body"); elem.onclick = function() { req = fs.webk ...

javascripthtmlfullscreen

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

"Angluar4 is throwing an error: it's unable to read the property 'iname' of

This is the code snippet from item.ts file:- export interface item{ $key?:string; available?:boolean; countable?:boolean; iname?:string; price?:string; desc?:string; image?:string; } The items component item.componenet.ts looks like this:- import { Com ...

htmlangulartypescript

Issue with Twitter Bootstrap 3 Sticky Footer functionality in IE11 and IE Edge

My website works perfectly on Chrome, but I'm having issues on Internet Explorer. I would really appreciate your help. The website I am working on is: I am trying to implement a sticky footer on IE, but for some reason, it's not working as expe ...

htmlcsstwitter-bootstraptwitter-bootstrap-3sticky-footer

Utilize JavaScript to transform today's date into a Martian date

I am trying to convert the current date on Earth to the current date on Mars using the Earth Date to Martian Solar Longitude Converter available here. The code appears to calculate the Mars date correctly, but I seem to be missing something. If anyone can ...

javascripthtmlconverters

Having difficulty locating the value in the input search field

I am attempting to customize my search bar so that it automatically includes wildcards on both ends when a user performs a search. Although the code below almost does what I want by adding the wildcards on both sides, it adds them to an empty search term ...

javascriptjqueryhtml

Executing PHP script out of echoing system

Can you help me figure out a solution for this issue I'm facing? I need to create an alert in PHP that calls JavaScript, but my PHP code is within a textarea. Is there a way to display the script outside of the textarea without having to move the PHP ...

phpjavascripthtmltagscall

Span is the alternative to using breaks in XHTML, but unlike breaks, it does not allow for adding padding or margin

When working with xhtml, I encountered an issue where my description and header elements were not position correctly next to my image. I initially used div elements instead of span, which violated xhtml rules. Then I tried using span elements, but I was un ...

jqueryhtmlcss

What technique does Wordpress use to achieve this understated 3D appearance?

This unique effect that I've come across on various websites is quite subtle. I'm curious about how it achieves this effect. It seems like more than just a border, but also involves the empty space. ...

htmlcssfrontend

Enhancing the appearance of a checkbox within a ReactJS setting

I'm having trouble customizing a checkbox in a ReactJS environment for IE11. I've tried various approaches, but nothing seems to work. Can anyone offer any advice? Here is the code snippet: CSS: .squared { input[type=checkbox] { bo ...

javascripthtmlcssreactjscheckbox

Attempting to initiate a CSS animation by clicking a button using JavaScript

I'm having trouble getting a CSS animation to trigger with a button press using Javascript. I've gone through various questions and answers, but nothing seems to work. My code looks like it should do the trick -- what am I missing? When I click t ...

javascripthtmlcssanimationbutton

Retrieving data from a database using twig

In my PHP code, I currently have the following: $vals['followers'][] = R::find('follow', 'following_id=?', array($_GET['id'])); This code returns all followers in the "follow" table with a following_id that matche ...

phphtmlarraystwig

Using CSS3 and Javascript to create engaging transition animations

I'm facing an issue with a DIV class that I've set up like this: div.map_view{ height: 420px; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* ...

javascriptcsscss-animations

Create a custom navigation bar using PlayFramework for a unique video streaming website

Attempting to create a dynamic navigation bar in Play using the code below in my main.scala.html file: @(title: String)(content: Html) <!DOCTYPE html> <html lang="en"> <head> <title>@title</title> <li ...

htmlcssscalaplayframework

Upon the page loading, only select a handful of checkboxes (JSF)

I am currently developing a web application using JSF 2.0 and I need to have checkboxes pre-selected when the page loads. <h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight"> <f:selectItem itemValue="add" itemLabel="A ...

htmljsfjsf-2checkbox

Arrange the text box, label, and buttons within a division to be aligned

I am attempting to achieve a layout similar to this: However, what I am getting looks like this:, I am struggling to figure out how to make changes to my HTML. I want to position the buttons in the correct places and align the dropdown with the other tex ...

c#htmlasp.netcss