Chrome - issue with "width: 0px" - javascript

It seems I am having a strange issue in Chrome, with "width: 0px".
I am setting the width to 0, in order to partially hide a link. On mouseover I am displaying the link, with a simple animation.
While Firefox and Opera behave nicely, in Chrome I see the link's text displayed, even though the width is set to 0. (in IE and Safari I cannot test right now)
For your convenience, I added the code in a fiddle, here: http://jsfiddle.net/mihaidoru/yNzSH/
QUESTION: How can I make Chrome display the same thing as Firefox, CSS only, if possible.
NOTE: the menu should respect the CSS: "position: fixed; right: 0px".
Any help will be greatly appreciated.
Thank you.

Set the links to be overflow: hidden.

I have set the width to 1px instead of 0px. It makes it so that the green background appears and when you hover over it it expands as expected. I also changed it to 1px in your jQuery.
updated fiddle

You can use the css overflow property
overflow: hidden;

overflow: hidden does not work for me, try display:none; javascript reads ok.

Related

Chrome Android elem.scrollIntoView() and overflow hidden

I've been using scrollIntoView to replace old jQuery animate. It works perfectly everywhere I need but Chrome Android.
The target element is inside an element with an overflow: auto;
The behavior expected is to scroll inside the overflowed element, but on Android, it will also scroll the documentElement even if html and body have an overflow: hidden;
I've made a codepen to reproduce the problem.
Did someone know a workaround?

Why is my nav-pill on the top of my screen in IE & Edge but it looks fine in chrome?

I am making a simple web page, but on google chrome it looks perfectly fine, just how I want, but when I open the page in IE or Edge the nav-pill tabs are at the top of the screen instead of near the middle like they are in chrome.
Images:
I have the 'top' property of the div that they are in is set to 30%.
I have a lot more code, but I don't want to flood this with it, If you need more info let me know! Thanks in advance!
#bodyArea
{
width: 425px;
position: relative;
top: 30%;
left: 44.3%;
}
After testing the code you showed us i noticed as well that it didn't work in IE. From here i would conclude the percentage from top for position:relative is incompatible with IE (judging from this: https://msdn.microsoft.com/en-us/library/ms531177(v=vs.85).aspx IE takes a percentage of the parent container and it might not know the height of the container of your div). I am afraid i can't be of more help without knowing more of the code around your div.

Image appearing lower in IE

My button looks fine in all browsers(Firefox, Safari, Chrome) except IE 10 (I tested on two different computers with windows 8.1). The image appears to be a bit lower in IE while other browsers have it right in the middle.
IE:
Firefox:
CSS:
#checkout {
background-image: url(../img/checkout.jpg);
border: 1px solid #D6D6D6;
float: right;
width: 184px;
height: 29px;
}
HTML:
<input type='submit' id='checkout' class='jcart-button' value='' />
I have tried using:
line-height: 29px;
Also, I noticed it works fine when I use input type='image' but the problem with that is, I need the ability to have a different image on hover. onMouseClick does the trick but doesn't work without javascript. I need something that works without javascript as well.
Edit:
Removed all my css except the #checkout part but I am still encountering the problem. So I think it is a problem with the #checkout css or the HTML part.
demo: link
Found my answer after hours of debugging :)
All I had to do was remove the border from the image and use:
border: none;
I hope that helps others!
That's probably because all browsers have quite different user agent settings for input element.
Those differences are found in margins, padding, border and god knows what else.
Open DevTools (F12) and you can see all the rules involved with the input and input[type="submit"] element.
To be absolutely cross-browser-sure you have to set all those rules manually for #checkout in the CSS.
UPDATE:
Could also be that you didn't set the width and height of the button correct.
The way you have it now it's actually not perfectly in the middle. As you can also see in your screenshots, the left/top of the button has a white edge, the right/bottom doesn't.
If I change it to width:186px; and height:31px;, it is perfect.
(With any luck that also fixes your problem in Win8.1/IE10, or at least makes it less obvious)

CSS Conflict with jQuery scrollintoview() plugin in Chrome

I have a site that uses the scrollintoview plugin (https://github.com/litera/jquery-scrollintoview), but there is some sort of conflict going on with the CSS. I have a fiddle w/o CSS that works as expected and one with CSS that does not. Any ideas about what sort of properties I'm missing that are causing conflicts? There's more information in the info of the fiddles. Working (no CSS): http://jsfiddle.net/beej/vEGxg/1/ Non-working (w/ CSS): http://jsfiddle.net/beej/vEGxg/
NOTE: I only experience this in Chrome. All other browsers (IE8-9 and FF) seem to behave as expected, with the element scrolling into view.
In the non-working jsfiddle, remove the "position:absolute;" property near line #7 inside this CSS block:
.background {
position: absolute;
width: 100%;
background:#042F62 url(../images/bg.jpg) top center no-repeat
}

Div with z-index: 9999 being hidden by iframe with z-index: -1 IE8-

I've got a popup dialogue which is just a div that's got display:none when not in use.
It works in most cases except for one scenario when another site displayed in an iframe manages to be shown on top of the div.
As the title says I've tried using z-index with no luck. It works in IE9, FF, Chrome and Safari. IE8, IE7 and IE6 all fail.
Any ideas of what could cause this or how it could be fixed would be great. I've been unable to recreate the problem on a small scale which is the reason why I'm unfortunately unable to provide sample code.
The only hunch I have is that it's related to resizing of the content inside the iframe but it's a hunch not verified.
It's difficult to tell for sure without seeing the code, but I suspect you're seeing this IE z-index bug
In Internet Explorer positioned elements generate a new stacking
context, starting with a z-index value of 0. Therefore z-index doesn't
work correctly.
The solution is to position (relative) the parent element of the popup and give it a high z-index:
<div id="parent" style=" position: relative; z-index: 9999;">
<div id="popup" style="z-index: 999;"></div>
</div>
The tricvk turned out to be to place an iframe of the same size on the same coordinates under the div.

Categories