I have one problem. I have this web:
www.keramikadomecek.cz/
And in all browser everything is ok. But in Opera the horizontal menu is shifted 20px to the right.
Do you know what's wrong?
Thank you very much and sorry for my English :-)
Use
margin-left: 0; padding-left: 0;
instead of
margin-left: -20px;
for menu in your CSS.
I'd also recommend you setting overflow: auto or overflow: hidden for menu, because your <menu> only contains floated elements and they need to be cleared.
Also consider updating jQuery to latest version (not related to this issue).
You're using HTML5, which the current HTML parser (Presto) for Opera doesn't fully understand. It's default behavior with unrecognized elements is to immediately close them, which throws your markup/styling off, as you see...
See this link: http://www.opera.com/docs/specs/presto25/html5/
EDIT: Sorry, forgot to mention that the link above is for a somewhat older version of Opera. There are links in the sidebar to updated documentation, so you'd have to find your way to the page matching the version of Opera you're targeting in your testing.
Related
I have very annoying bug on Chrome and IE (On Fire Fox it looks fine). I am not really sure what element or elements are doing this.
About the bug: If you scroll down, you can see where the Bootstrap cards end a big white gap between them and the footer.
URL where the bug is: I have to remove my URL (Stackoverflow rules...sorry guys)
I have been using Google Chrome Inspect to try to find where the problem is but I did not have luck. That is the reason why I am asking here because I can see where the problem is.
The only clues I have are:
- The bug is not in any JS file or in any extern css file, I think there is something in my CSS is doing this.
- It is not the position:relative or the overflow:hidden form the class dtl24, because I have tried to delete them and updated my CSS without them and the bug was still there.
Also, I would like to apologize to you. I have tried to create a snippet with the code but without the images, the bug not appreciable.
Do you know where is the bug and how I could fix it please?
Thanks
This is a known issue with CSS3 multi-columns that can cause a gap at the bottom. There are only workarounds for this issue, and depend on the specific layout.
You can try using...
.card-columns .card {
display: flex;
page-break-inside: avoid;
break-inside: avoid;
}
But, you may need to ultimately use a large negative margin at the bottom of the container for Chrome / Webkit browsers:
.card-columns {
-webkit-margin-after: -300px;
overflow: hidden;
}
It is happening because of this styling.
column-gap: 1.25rem;
I want to make scrollbar that overlaps the page. I wonder if there is a way to do it with pure CSS. I read an article about styling scrollbars with CSS (https://css-tricks.com/custom-scrollbars-in-webkit) but I didn't get a result I wanted. I think it would be possible to do it with some JavaScript and HTML element with fixed position, but I prefer to do it with CSS.
I have this same requirement in my project.
Here is the solution:
overflow: overlay
Hope it helps
As Anugraha Acharya said, the only CSS option is:
overflow: overlay;
But it is worth noting that this has been deprecated, so there is no telling how long it will work in Chromium / Webkit.
It is not supported in Firefox so, you will have to do the following to ensure Firefox can scroll too:
overflow: scroll;
overflow: overlay;
With this, Firefox will render like the "Normal" diagram in the original post and Chromium will render like "how I want scroll to look". Also, if Chromium ever drops it it will still be usable.
This currently works as of January 2022.
I believe, by deprecated, Mozilla means that it was never officially added rather than it was considered and has now been dropped. So, hopefully, it will be considered and made official. In the meantime, you take your own risk.
You can try changing the background of the Scrollbar to transparent-
::-webkit-scrollbar-track {background: transparent}
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
Just finishing up a site and having an issue with position: fixed on IE7. I've Googled it and tried different Doctypes but the fixed area is still moving out of position on IE7.
I've not got IE7 but a client staffer has it and I can see the issue using an online IE renderer/tester.
I've removed the .htaccess from the test site so you can see the site/code.
http://drinkzing.com/test
Any advise or help would be appreciated.
There is a <div> and an <ul> element which both have id="logo-nav". They've both set position:fixed and some other properties. I think this is the main problem. Remove the duplicate ID, set position:fixed only for the <div> element and then we can investigate the issue (or the problem should disappear at best).
If you have newer version of Internet Explorer, you may emulate IE7 by clicking the Compatibility View button or choosing IE7 document mode in Developer Tools.
edit: I noticed that you haven't set any left property for #logo-nav. I don't know why IE7 computes the default position other way than all other browsers, but simply adding #logo-nav { left: 225px } works for me.
Try this in your css:
* html idorclasshere {
position: absolute;
}
Note: replace "idorclasshere" with your, well, ID or Class of the non-responding div (don't worry, due to the asterisk, other browsers aside from IE won't see it, add it in conjunction to your "position:fixed" style).
For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).
I have the following classes defined:
.ImageHoverSpan .ImageOuterPanel {
display: none; }
.customer .ImageHoverSpan:hover .ImageOuterPanel {
display: block; }
This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.
I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.
Has anyone got any ideas about what could be causing this? Anyone had this problem before?
Thank you.
Regards,
Richard
Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.
Richard