Strange margin/padding effect when hovering over menu - html

My question is simple really;
http://minimalito.be/ltripple/
As you decrease screen size, the little menu at the top right disappears and a small icon appears. When you click it, another menu will unfold, but as it unfolds there is a small peace 'missing', just click it and you'll see what I mean.
And I have no idea why...I think it's a margin/padding issue, i've tried so many things, but can't seem to find it. It's one of the few problems before it's finished, so it's driving me crazy because I can't find it. I did notice that the 'gap' increases as the icon is further away from the right border.
Also, I didn't have this for a long time, i recently adjusted a bunch of things and then this suddenly happend.....:-(
Thnx in advance!

To fix it you will need to apply "clear:both" to "#proxyMenu".
#proxyMenu {
clear:both;
}

It appears to the the animation class firing on your #proxymenu when you open your menu.
See if you can remove the following style:
overflow: hidden

Related

Random Whitespace/overflow on right side of website only on mobile devices

I am not sure what is causing this.. I have been looking at different smart phone screen sizes in chrome dev tools mobile view, and that random white space on the right side of my page is always there. I can't see any element that has margin showing, or padding on that side.
I thought maybe it was the bootstrap row class causing it, and I made sure to add the row inside of a container-fluid div as the docs say to do.
The weird thing is, when I hover over every element on inspecting, they all show this white space on the right; even if I hover over the html tag... So I'm thinking the issue is bigger than bootstrap at this point.
I have tried adding the following with no changes.:
html{
box-sizing: border-box;
overflow-x: none;
}
When I'm in the mobile dev tools looking at the screen, I can drag and move the cursor left and right and the whole screen shakes to fill that right blank spot... So it is not behaving like it is using border-box..
When actually viewing the live site on my phone, this shaking back and forth doesn't happen, but I still see a slight white vertical space on the right side behind the cursor.. Idk if I'm being too picky and this is just space for the cursor in the phone settings? Although I see the same blank spot on every phone size in google chrome dev tools mobile view.. I know I'm not crazy! Well not completely yet!
Also, not that it helps in this situation(I think), my site is built using .NET Core 6 MVC. I am using Bootstrap 5. I am ready to start removing my media-query css line by line to see what could be causing it.. Its not an obvious issue, but I notice it of course.
If anyone has any idea what it could be, please let me know where to start.
You have to take into account that an element's width is not just the width itself, but a sum of its width, padding, border, and margin, and sometimes border-box doesn't fix the problem.
If you're using animations on scroll like a slide from left to right or vice versa can also screw your pages sometimes.
Well I can't believe it but I had overflow-x: none, instead of overflow-x: hidden; I also had it on the wrong media query in my CSS.
Just glad I'm not crazy! lol

css - fixed parent div showing 0.4px whitespace beneath content - cant fix it?

I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.

Drop-down menus are not presented in slider menu

I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.

Firefox not rendering HTML correctly

The picture shows the problem area I have with my website. That little black line protrudes out from behind my dropdown menu and in Firefox the word resources will appear underneath home, but it IE and Chrome the menu looks as it should, except for that little black line that sticks out. The template I'm using is a modified Dreamweaver template. It didn't used to do this, but I breaked it :/
edit: all fixed.
You need to clear your floats.
If you add overflow: hidden to your top menu UL and the sidebar div, you will notice the HR moves down.
Edit
Just an FYI, there is probably a better way to clear your floats then just adding overflow: hidden everywhere like I showed in this answer. It really depends on how you are laying out the page, and I don't know what your plans are. Therefore, here are some links below that explain what floats are, how they work, and how to clear them, which should give you a better understanding.
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/

Menu not functioning properly

Alright, I have some questions...
When you have a moment, can you take a look at http://www.crystalcoach.com/new
I'm having some trouble with the hover menu. Okay, I know it's probably a super out of date code... But it works, haha.
What I'm having difficulty with (and see image for examples) is when you hover over the menu, the positioning is wrong. If you go to the URL above and hover over a menu, you'll see what I mean.
In addition, where in the code can I change it so the menus are wider? If you hover over "Fleet", you'll see that the menu itself is not wide enough to encompass all of the vehicles in there. I had to abbreviate a few but the hover portion isn't fully working.
Thanks so much for your help.
Here's the image: http://i1166.photobucket.com/albums/q617/stevezee87/menusample.jpg
Well, its old alright, messy too, but here's what you need to change:
1)
There is a div being presented with the sub-menu options. That div contains a width of 150px, loose that declaration and the sub-menu will grow according to its contents!
The mentioned div is right after the <a></a> with the menu text:
2)
The span.qmritem needs to have a top value just about 10px by my tests, to keep in line regarding the non-hovered menu options.
3)
The div mentioned at point 1), must get those same 10px increase on the existent top value:
Link to both images in full size:
Screen-shot for Problem 01
Screen-shot for Problem 02/03