I have div with these properties div { height:50px; overflow:scroll; direction:rtl; }
Problem is that on chrome scrollbar is showing where it is supposed to be (on left side), but there is also something like padding added to right side of that div and text is going under scrollbar.
I read that this is chrome bug, but couldn't find solutions. Is there a way to fix this?
This problem only occurs on chrome, both on mac and windows.
This is example http://jsfiddle.net/3FUUG/1/
What about adding padding-left to the div? Like this:
div { height:50px; overflow:scroll; direction:rtl; padding-left: 10px;}
Here is its jsfiddle
Related
Here is the code
<style>
.test{
position:absolute;
width:100px;
height:100%;
top:50%;
transform:translateY(-50%);
background:blue;
}
</style>
<div class="test"></div>
Here is a picture of what it looks like. I tested this in Chrome and IE and the gap doesn't appear.
The gap remains if I set the height to 100% 100vh or the absolute height in pixels. I am using Firefox 40 so the browser is up to date.
Also, for anyone wondering why you would center a div that has a height of 100% it is so that it will center no matter the orientation of the screen.
EDIT
For all those suggesting setting margin:0 it unfortunately doesn't fix the problem
Clarification of the problem.
Apparently this is rounding error in the rendering engine. Because if you change the height of the window the gap appears and disappears. Chrome seems to show a slight gap but it is almost indistinguishable. To see the problem try changing the frame height in this fiddle http://jsfiddle.net/m4yqoq4w/. I assume this also means there is no easy way to fix the problem.
Add margin:0; to the body
Before: http://jsfiddle.net/m4yqoq4w/
After: http://jsfiddle.net/2umLokj4/
This will fix it:
body{
margin: 0;
}
If you reduce the "top" property value as below, you will never get the gap
top:49%;
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
In my site, I have two divs - right and left. Both are contained within a wrapper div. Here is my code:
#wrapper{
width:1000px;
height:750px;
margin:auto;
}
#left{
width:500px;
height:750px;
float:left;
position:relative;
}
#right{
width:500px;
height:750px;
float:right;
position:relative;
}
In Chrome, no problem.
In Firefox, no problem.
In Safari, no problem.
In Opera, no problem
In IE, the #right div is in the same location horizontally, but vertically it's below the #left div.
I've tried a few different techniques to remedy this. Setting the wrapper line height to 0, setting the right display to inline, reducing the size of the right and left divs (I thought maybe there was a margin/padding issue). I've run out of ideas now, can anybody offer any help of the issue?
In All Browsers (except IE):
In IE:
There's nothing wrong with the CSS you've posted. It will work in all browsers as expected (I've decreased the widths in my example).
What's happening is that you've got an element in one of your columns that's forcing the width of either #left or #right to be greater than 500px. The easiest way to fix this is to start removing elements until the float drop disappears. Then you can figure out if there's a solution for the offending element (i.e. set its width or set overflow: hidden or scroll).
Try using float:left for both the #right and #left divs. You could also probably take out the position: relative as well.
put both left and right divs as float:left
Well I have, I think, kind of unusual question. Well I have a web page with starting div with absolute position.
.head_warp
{
width:100%;
display:block;
height:238px;
margin:0 auto;
padding:0;
position:absolute;
text-align:center;
background-image:url(images/demo6_fon.png);
background-position:center;
background-position:top;
background-repeat:repeat-x;
z-index:-9999;
}
and after that I have a container
#container_out
{
width:1024px;
margin:0 auto;
}
The HTML is that way:
<div class="head_warp"></div>
<div id="container_out"></div>
The idea is the content in the "container" to be shown over the "head_warp" and it's ok in any browser I tested with. Chrome, FF, Safari even with IE8 and IE7. But my co worker is with IE8 with windows VISTA and look what is the result
alt text http://www.pechat.mdkbg.com/problem.jpg
What is the problem?
#Puaka I think all browsers are relative to the parent container when specifying a percentage width. In this case it should be relative to the body.
Is your DOCTYPE correct?
If you are absolutely positioning an element, you should be specifying the top/left position which you don't appear to be doing. Also, you specify margin:0 auto; implying there could be a left/right margin. I would have thought this should be simply margin:0;?
Looks like you're missing some information for your absolutely-positioned div:
top: 0;
left: 0;
in IE, 100% width will use its parent width, so you need to put it inside container_out, change your container_out css, maybe add padding-top/margin-top = header_warp height
I just tested it in IE8 on Vista and it displayed fine.
It looks like all that div is doing is displaying a background image for the page. Why not just add the background image to body and get rid of that div?
I have a page like http://ratingscorner.com/mobiles
if u see the left hand side there is a + image displayed. it does not appear in IE 7. i tried all possible things ..but could not solve it. so seeking help here.. any help on this.
You need to explicitly state the width and height in your css declaration for .plus
span.plus {
width:12px;
height:12px;
}
It is a span, inline element.
Add display: block; and specify the height and width.
Also it behaves the same in IE8.
Your image has a height and width of 0, so it won't show up in IE7 at all. I did some quick debugging and found that if you set the height to 15px and display to block, then it shows up just fine. Adding a left float helped move it to the left of the button name.
So to your .Syb .plus CSS definition, add:
height:15px;
display:block;
float:left;
Then you should be fine.