I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:
html { overflow: hidden; } - afterwards -
html { overflow: auto; } - and - html { overflow: scroll; }
None of them got rid of the double bar, even worse some blocked me from scrolling at all.
I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?
The website is https://www.lekkerlimburgs.be
I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me :
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:
<style>
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
Hope this helped :)
You have overflow:auto on your HTML element, which will add a scrollbar if the element exceeds the screen size on some browsers.
MDN:
auto
Depends on the user agent. If the content fits inside, looks identical to overflow: visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.
Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is
Inspect the malformed page elements using your browser developer tools
Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto
This approach may be better if you have tons of stylesheets and dont know how to go about it
*Adapted from Chris Coyier Fixing Unintended Body Overflow
Related
I've noticed there is a small amount of padding on one of my containers that i would like to remove entirely however the code i am implementing doesn't seem to be working.
CSS:
.elementor-container elementor-coloumn-gap-default {
padding-top: 0;
}
I think i may have the name of the element wrong. My website is www.monoalarms.co.uk/wp and i am trying to remove the padding from the container that contains that 5 buttons. it is directly under the header image.
You are looking padding in wrong container,
please try next css -
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-bottom: 0; }
Seems your padding goes from banner
their could be many other css styles overriding yours. Remember CSS tries to take the last styling, so make sure yours is loaded last. You might need a more specific tag i.e 'body .elementor-container elementor-coloumn-gap-default', right click element and inspect in chrome, at the bottom of the browser you'll see the exact CSS tag it uses.
I am working on asp.net webforms. I am displaying a asp:RegularExpressionValidator in a <td> element which validates entry in a textbox. When the page loads, it is displayed as a <span> element with visibility:hidden. The problem is that in Firefox, it still occupies space, which doesn't happen in IE and Chrome. Because of this the html is not displayed properly in Firefox. Is there any solution for this?
"Visibility: hidden;" renders the element but keeps it invisible.
If you intend not to load the element, you should use
.someElement { display: none; }
This would not even reserve the space for the specified element.
Hope this helps..
You should try display:none instead of visibility:hidden.
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
I'd recommend a different approach... I know that code depends on asp.net... I presume the thing you don't want is to have a bigger spacing because of those validators, or you don't want the layout to be expanding on error highlight, considering that, I'd suggest:
Make all validator messages having position absolute (I hope you have a container for each field, that one needs to have position: relative)
As each validator have absolute position, won't take more vertical space (it's better to add the code via a css class, which should have something like:
.validatorMessage {
position: absolute;
left:0;
top: 2rem /* should be the height of the field */
}
The only issue is, when those messages fires up, will shorten the available space, but I think is a reasonable tradeoff.
Hope this can help
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
I'm trying to get a website to display properly in IE6 and IE7. Here is a screenshot of how it looks in IE6.
alt text http://img225.imageshack.us/img225/4779/screenshot20091006at239.png
IE8, Safari, Firefox, etc. all display this site correctly. Could someone give me a hint as to what is causing the distortion in IE6?
If you want to take a look at the page source, the site is: www.devaswami.com
Get the CSS from here.
You're using an auto-layout table for the navbar, and it has colspans. This confuses IE, which is not very good at working out how big tables need to be when there are colspans. It makes the table wider than you need, which makes your cells wider than expected, which makes the ugly yellow background show through and it doesn't line up.
To fix it, set the style table-layout: fixed; width: 970px; on the table element, and add one <col> element for each column, each with a width: ...px style that tells IE exactly how big to make each column. Then it can't make any mistakes (and also larger fixed table layouts render faster).
To fix it better, drop the layout table and use positioned divs for the nav links. You could then also lose the silly image slicing and have a single GIF for the whole header background with the photo and links positioned over the top of that.
(Also it is worth fixing the validation errors both in the HTML and in the CSS. You are using // as a single-line comment in your stylesheet, but there is no such thing in CSS; you will only confuse the parser into dropping rules.)
Ummm at a glance, you have something that is float left and you have a margin left on it?
#foo {
float: left;
margin-left: 20px; //20px in all browsers except IE6 where it will be 40px;
display: inline; //this will fix this issue
}
There's a lot of possibilities and it's hard to just guess based on the screensnap. However, one big step towards making IE 6 and 7 behave better is to declare the doctype at the top of the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
That's for HTML 4.01, you'd have to update it to match what you're specifically using if it's not HTML (i.e. XHTML). That alone helps with some of the basic problems, but not all of them. If that doesn't do it, Google "IE6 css hacks" and you'll find lots of potential information that may apply to your context.
Edit: I suggest you fix the errors related to missing/improper end tags:
Error Line 199, Column 194: end tag
for element "a" which is not open
Error Line 200, Column 49: end tag
for element "p" which is not open
Source: http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
After that's done we can deduce that it's not a markup related issue.
Original answer:
Try applying haslayout to every element and using display:inline on any floated element:
#nav li { display:inline; } /* the selector *must* be floated and have horizontal margins in the direction of the float. */
* { zoom:1; }
For anything that was fixed by the zoom:1, apply a width/height and that will trigger hasLayout.
Though it might be useful if you actually posted some source code.
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.