I've got a webpage with a div fully filling up another div.
<div id="outer">
<div id="inner"/>
</div>
The style is as follows:
#outer {
background: blue;
border: 1px solid red;
height: 44px;
width: 44px;
}
#inner {
background: yellow;
border: 1px solid green;
height: 42px;
width: 42px;
}
Feel free to check out the corresponding codepen.
In Firefox this renders fine. In Chrome the background of the outer div shows because it renders as too large. In addition, the border is too far away. Here are the renderings.
See the extra blue rim on the bottom and right for Chrome (left) that's not present for Firefox (right). Why is this? And how can I prevent it? (I'm guessing it has something to do with Chrome rounding off pixels when scaling? Is Codepen scaling its output or something?)
Related
How can you remove the weird white space between two nested divs on Chrome.
<div class="bar">
<div class="progress">
</div>
</div>
.bar {
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
}
.progress {
height: 100%;
width: 50%;
background: black;
}
Here is the link to the fiddle: http://jsfiddle.net/hfob7yz4/1/.
On Chrome it looks like
this for me with the weird margin.
On Firefox it looks pretty normal like expected:
firefox-img
It also depends on the screen width. The problem only shows up on my laptop.
Thanks
The reason is that there is a border around the main div, and gets visible on some screens
to avoid this add
.bar {
box-sizing: border-box;
}
read more here
You are hitting a sort of edge effect when on different zoom levels - there are bits of pixel 'left behind' in the system's calculations as it tries to map part CSS pixels to the several screen pixels that might make up a CSS pixel on modern screens.
Instead of needing a second, inner div, you could paint the progress with a background image using a linear-gradient - this can be altered by JS dynamically as required.
.bar {
--progress: 50%;
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
background-image: linear-gradient(to right, black 0 var(--progress), transparent var(--progress) 100%);
}
}
<div class="bar">
</div>
I'm trying to achieve an effect with HTML and CSS wherein I can define a region that becomes sort of like a window in an element. I can't just put a white div in front, because I would like the window to reveal what is behind the element, like in this example, where a hole is cut in the orange element to reveal what is behind. Is this at all possible using HTML and CSS?
You can use CSS border to do so:
body {
background-color: black;
}
.mask {
width: 150px;
height: 150px;
border: 50px solid orange;
border-radius: 20px;
margin: 200px auto;
border-left-width: 200px;
border-top-width: 200px;
color: white;
}
<div class="mask">
abc
</div>
It's like a mask, but the content is still visible as well as the background.
Let's say I have a dynamically created element and I don't know its size. I want to scale it to always fit certain other size as defined in pixels. Unfortunately scale only accepts a factor.
Is there a css way to achieve that?
transform: scale(0.1); // unfortunately 0.1 is factor
Without Javascript I believe that what you need is the CSS property display:contents. Keep in mind that not every browser accepts it. Here is an example on Codepen.
HTML:
<div class="content">
<div class="inner">
<p>This is the inner box. If display: contents works in your browser you will see a full width box with a red border.</p>
<p>If display: contents does not work or if you remove the display property from .content you will see a 400 pixel box with a grey border and background color, inside will be nested the box with the red border.</p>
</div>
</div>
CSS:
.content {
border: 2px solid #999;
background-color: #ccc;
border-radius: 5px;
padding: 10px;
width: 400px;
display: contents;
}
.inner {
border: 2px solid red;
border-radius: 5px;
padding: 10px;
}
I'm rendering a large document (500 pgs) as a web page. My users are used to Word. Can I use CSS to mimic the look from the image below, a uniform 'page' with a white background with a fixed width, and the rest of their browser showing a gray background? Like the image below, except without the ribbon and all that:
The only think I can think of is to put the entire document inside a massive div tag, but is there a better way? Thanks.
This can be done fairly easily with 2 divs and a bit of css.
I also gave the white a border as per the image.
.container {
background: #9099ae;
width: 100vw;
height: 100vh;
padding: 40px 200px;
}
.content {
background: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
border: 2px solid #000;
border-right: 4px solid #000;
}
<div class="container">
<div class="content">
</div>
</div>
I am making a divider line that runs across the bottom of my header. It needs to be two pixels tall and two-toned. The top pixel needs to be grey horizontally all the way across, the bottom needs to be white. I am tempted to just put two one pixel divs with 100% width on top of each other, but am hoping that someone knows of a better way to do this with css and maybe with an hr tag?
Thank you very much!
You should avoid the <hr /> tag because it's really inconsistent in different browsers. And honestly I haven't seen it being used for a while.
What you can do is to place a 100% wide <p> and give it a top and a bottom color - http://jsfiddle.net/zSXya/
p.separator {
height: 0;
width: 100%;
border: 0;
border-top: 1px solid red;
border-bottom: 1px solid green;
}
The typical approach would be to use a 1-by-2 pixel image as the background to a div that will stretch horizontally across the page:
.myCustomHRule
{
width: 100%;
background-image: url(path/to/my/image.png);
background-repeat: repeat-x;
}
typically it's just the top and bottom border attributes. You can change them and then set the style to solid:
http://jsbin.com/ixuyoz/
hr{
border-top-color: red;
border-bottom-color: lime;
border-style: solid;
}
Could you use border-bottom of your header and border-top of your first TR?
If you really want to use the HR, you can set it's background to be an image.
hr
{
height:2px;
background: url(image.jpg) no-repeat;
}
<hr />
I have to agree with Zoltan with this being the best way to do it. I also haven seen an HR tag in a long time. easier done this was and will have a more consistent look across browsers
p.separator {
height: 0;
width: 100%;
border: 0;
border-top: 1px solid red;
border-bottom: 1px solid green;
}