I have two div-elements, the top one has the height of 40% and the other one 60%.
In my example I have positioned the first one to top: 0; and the second one to bottom: 0;. My issue is that I get a 1px distance between them in Webkit, sometimes!
I have created a jsFiddle that recreates the issue in Webkit (Safari and Chrome, but works fine in Firefox.)
http://jsfiddle.net/bVxDA/ (Resize the window to see the bug in action)
This is the code I'm using.
HTML
<div id="cover-top"></div>
<div id="cover-bottom"></div>
CSS
html, body {
background: red;
height: 100%;
}
#cover-top,
#cover-bottom {
background: #000;
position: absolute;
width: 100%;
}
#cover-top {
height: 40%;
top: 0;
}
#cover-bottom {
height: 60%;
bottom: 0;
}
I would be fine with a solution that uses JavaScript or jQuery.
If the height of html, body height is an odd number there is a 1px line "remainder".
Webkit can't divide 1px and doesn't try.
See: http://jsfiddle.net/iambriansreed/gPu3Y/
You could make the 1px line disappear if you set the following:
#cover-bottom {
height: auto;
top: 40%;
bottom: 0;
}
this happens every time 40% isn't a whole number. lets assume your page is 98px height, so we get:
40% = 39,2px
60% = 58,8px
since we can't draw "half" pixels, the first div gets a height of 39px and the second one gets 58px. also, the second one is drawn 40px from above because both divs can't "overlap" (remember: the first one is 39,2px heigh, so we can't start drawing at 39px - there would be 0.2px overlapping) - and so we end up with this very weird "gap" between them.
just change last rule in
#cover-bottom {
top: 40%;
bottom: 0;
}
so it doesn't matters if the height of the <html> element is odd
http://jsfiddle.net/bVxDA/4/ (I changed background colour just to check the fill behaviour)
Related
my border is moving when you have the download file ?tab? open on chrome (haven't tested it with any other browser). This completely destroys the look of my website, the text is still in the same position but the border and background moves up a bit.... I have tried every position but it didn't work... I'm really annoyed at this problem, any help would be appreciated.
here is the css code
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 11%;
top: 110px;
right: 5px;
left: 5px;
}
This is simply how Chrome works when you start a download. You can work around this with css, but please provide us with some code or a demo with what you've already tried.
A quick thought:
The first thing that comes to mind is to not use percentage for your height property, since it takes 11% of the current height, which depletes when you get the download bar in your screen, since the download bar takes up space of your screen.
If you give the class a fixed height, for example 100 pixels, you will see the class won't decrease in height.
So the code will be:
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 100px; /* just an example, does not need to be 100px */
top: 110px;
right: 5px;
left: 5px;
}
I am wondering why there is a significant difference in rendering CSS between Chrome and Firefox. In case of Chrome, the child element is not taking full width and height (black color of parent can be seen at top and left side of child). In case of Firefox, the edges are smooth and child's dimensions are the same as of parent. I have no idea why is this happening.
These are the screenshots on Chrome and Firefox to demonstrate:
Chrome:
Firefox:
Below is my code:
* {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 200px;
height: 200px;
border: 10px solid white;
background-color: black;
}
.child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: lightcoral;
}
<div class="parent">
<div class="child">Content</div>
</div>
I just want to know why this is happening and how it can be fixed so that it looks the same in all browsers.
PS: Use hardware acceleration when available is ON
Hey brother there are many transitions and stylings that works on only chrome and not on the Firefox ,
same is the case with firefox , (many transitions work on firefox but not on chrome) so the thing is , chrome and firefox has some different properties so you have to search on official docs or google to check which property will work on chrome and which will work on firefox
hope this makes sense
i will attach a code snippet that shows different transition properties for different browsers
text.identity{
transform: translate(74px,0px);
-ms-transform: translate(74px,0px); /* IE 9 */
-webkit-transform: translate(74px,0px); /* Safari and Chrome */
-moz-transform: translate(74px,0px); /* Firefox */
-o-transform: translate(74px,0px); /* Opera */
}
these are some transition properties for different browsers and this is for just an example
these lines works same but on their respective browser
Happy Coding!!
The black lines seem to occur because of the border being set on the parent.
While I don't entirely understand why this happens on some browsers and not others, and why it happens at some zoom levels and not others (at least on Chrome/Edge on Windows 10 on my laptop) I suspect it's because of the way the browser calculates the boundaries of a CSS border.
We aren't seeing a whole CSS pixel but what looks like a slimmer, perhaps one screen pixel width, line of black. And this can disappear, or one is shown on the right/bottom instead of left/top border, when zoom is increased or decreased. It's as if the algorithm for calculating where the border actually is in terms of screen pixels takes, for example, the n screen pixels used for one CSS pixel and takes the mid-point. I haven't found any explanation of what algorithms are used though.
Anyway, one observation which may or may not help in this practical situation is that if border is replaced with margin then there are no black lines.
* {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: black;
/*border: 10px solid white;*/
margin: 10px;
}
.child {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-color: lightcoral;
}
<div class="parent">
<div class="child">Content</div>
</div>
I have faced this issue before, In some cases when we use absolute position so it does not fit into the relative box in some browsers, so the solution for this is that you can add outline property in the element which has absolute position.
Pleas check below code:-
.child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: lightcoral;
outline: 1px solid #fff;
}
Just replace your child element css with above code and let me know if it works.
I have problem with margin: auto - vertical centering
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of centered element disappers in the top of viewport.
http://jsfiddle.net/LhHed/2/ Here is god example - when you resize result window, in firefox work it well, in others browsers not. Is posible tu fix it? Or its bad functionality of firefox?
EDIT: live example http://dev8.newlogic.cz
From what I gather, you're wanting the top of the divider to display at the top of the page. This currently isn't happening because you have the position set to top:0; bottom:0;, the top property is conflicted by the bottom property, ultimately positions the divider to the bottom of the page. Simply removing the bottom property prevents the top of the element appearing outside of the viewport:
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
margin: auto;
}
JSFiddle.
I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.
I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:
body {
height: 100%;
border-bottom-color: #ad3127;
border-bottom-style: solid;
border-bottom-width: 5px;
}
This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).
The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.
I've tried something like
html {
height: 100%;
}
Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.
There must be a way to solve this (with as little sorcery as possible, please :)).
Instead of height: 100%, use min-height: 100vh:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.
Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/
To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:
HTML:
<div id="bottom"></div>
CSS:
#bottom {
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:
body:after {
content: "";
position: fixed;
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}