I created a demo tour for my product, so I used an image as a background and on top of it lightbox.
So when I used Chrome, it looks great but on other browsers, the pointer does not point on the right object, the location is not the same.
Please open this URL on chrome, click "start tour" and then do the same on Edge
https://www.analytics-model.com/tutorial
How to deal with this issue?
Your approach to this is bad.
The problem is also browser independent as the window size of the browser is what misaligns the overlay-elements of your tour.
It's simply bad responsive design to other window sizes.
First, don't use an backdrop-image, also not for a demo.
Reason is, the overlay element needs to be relative to the actual HTML element it's revering to and this can't (easily) be done with an image.
To anchor an element to another one, in this case, a toolbar symbol to the overlay explainer element, you can use the css position property in conjunction with top, bottom, left and right properties.
The anchor element should have the css property "position: relative" and this anchor element has the explainer overlay in it's inner HTML.
The overlay has "position: absolute;" as it's css property and with top, bottom, left and right you then can position it however you please, relative to the anchor element.
In simplified code this looks like this:
html:
<div class="anchor" >
Account
<div class="explainer">
This explains everything about your account.
</div>
</div>
css:
.anchor {
position: relative
}
.explainer {
z-index: 99;
position: absolute;
top: 100%;
left: 0;
}
Working example demo:
https://jsfiddle.net/Krischna_Gabriel/uwzxqfer/191/
Related
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
I have a div class set up with the following CSS style:
div.multiple_choice{
border: 1px solid black;
max-width: 300px;
max-height: 200px;
overflow: auto;
}
The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.
This is occuring in Google Chrome (version 18.0) and Iceweasel 11.
As it turns out, another CSS style was causing the issue:
body{
line-height: 1;
}
Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here
I was having an issue with this, and I found that having position: relative on the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absolute is being used, but for me it worked.
Just to put in evidence the #Kuba Orlik's solution (he posted as comment on the accepted answer) that's the only one that worked for me.
Add this on inside elements:
line-height: normal;
Note: Explicitly normal not 1 because it's different
I have encounter this problem.But I solved this use the following css style:
div.yourcontainer{overflow-y:auto;}
If the container was higher than max-height,the vertical scrollbar will show.
I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.
The approach to troubleshoot this for me was to inspect the list items (perhaps each <li> in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.
Here is an example of inspecting a rogue margin on an icon within a list item in my project:
Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.
I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:
.nav-tabs > li:last-child {
margin-bottom:0;
}
Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:
<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
<li></li>
...
</ul>
I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.
In my case, the problem was with the font. We use font-family: Galano Grotesque. Apparently, this font is rendered higher than the computed height.
<div>
<p>some text</p>
</div>
So even without max-height, when the inner p and the outer div were both computed as 20px height, there was still a scroll bar (with overflow: auto) because the font was about 1px higher than expected.
So the solution can be any one of:
Use a different font.
Add padding to the outer div. This way it will be large enough to cover the extra pixel that comes from the font. In my case, adding one pixel of padding to the bottom and one to the top solved the problem.
Set line-height to a bit larger value (in my case, from 1.25 to 1.4), so it won't interfere with the font.
Set line-height to normal because then the actual value will be influenced by the font. However, according to Mozilla, this is not the preferred way.
The reason for the vertical scroll is obvious: the scrolled content is higher than scrolling area. But when you observe their heights, they are equal!
The causes are multiple but all come down to a common one: an element inside the scrolled content overflows it and makes the result taller.
How to fix this?
find the guilty element by looking near the bottom edge of the scrolled element (or to the right if you're scrolling horizontally), because they are the most likely to overflow. You should observe a height larger that their parent's.
see what makes them overflow, be larger than their container. As other answers suggest, it can be line-height, some margin, etc. Change those properties to make them fit, or as an alternative, set overflow-y: hidden to their immediate parent.
Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser.
At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here http://css-tricks.com/full-browser-width-bars/ to achieve the effect as semantically as possible. Then Ive had to place overflow-x:hidden on the html and body tags to prevent the user from being able to scroll off the right side of the screen.
This works great in every browser I've tested it in from Safari on Mac/PC, Opera, Chrome and heaven forbid, but even IE7, 8 & 9 wanted to play nice. But oh no Firefox just doesn't want to go along with it.
Although Ive no horizontal scroll bars which is the desired effect, Firefox has decided to double up on the amount of vertical scrollbars. I can't scroll horizontally if using a mouse, but when I use the trackpad on the Mac, the vertical movement is restricted, meaning I cant scroll down the page and if I do a two finger swipe the page scrolls off horizontally into oblivion.
The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox?
Any help with this annoyance is greatly appreciated, Many Thanks.
Update: Added Code
Basically the code is this as theres too much show it all. I would point you to the site but the client doesn't want it live yet. Here we go:
<nav id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</nav>
Then the css is this for a fullwidth browser bar as the link above:
html,body{
overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}
#menu{
position: relative;
background: blue;
}
#menu:before, #menu:after{
content:'';
position: absolute;
background: inherit;
top: 0;
bottom: 0;
width: 9999px; /*huge width to ensure bar fills browser*/
}
#menu:before{
right: 100%;
}
#menu:after{
left: 100%;
}
Just had a similar issue come up; my solution was to simply add:
html, body {height:100%;}
And that solved it. Just wanted to post it here 'cause this kept popping up in the search results.
OK, I sorted it out. Against my better judgement, I just copied and pasted a clearfix hack from any old site on the net. After many hours troubleshooting, Ive found that it was all down to clearfix that the fullwidth bars weren't working as expected. I narrowed it down to the css content tag of the clearfix hack. For some reason it had had a '.' inserted as the content. I removed this and then added
* html .clearfix { height: 1%; }
onto the end of the clearfix css block and it worked. No more horizontal scrolling, no more x2 vertical scrollbars in Firefox.
What fixed it for me was moving over the scrollbar code to html only instead of "body, html". I figured maybe it's making two scrollbars because its put in both html and body. Though this introduced some other problems. Think I'll go with an additional div instead.
html {
overflow-y: scroll;
scrollbar-color: #2A9FD6 rgba(0,0,0,1);
scrollbar-width: thin;
}
body, html {
}
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.