In my web app I use the following CSS to provide notices/error messages:
#notice {
border: 1px solid green;
padding: 1em;
margin: 1em;
margin-bottom: 2em;
background-color: lightgreen;
font: bold sans-serif;
color: darkgreen
}
But when a notice isn't required, I want to have white space equal to the amount of space that this notice would've taken up. I want to do this so that my web pages look consistent, and items on the page aren't shifted up/down according to whether there is a notice or not.
I have done this by setting a fixed height.
I've also heard the argument that its okay to have the page bump down, (that's how stackoverflow works) because it draws attention to the message and that is a good thing.
The solution can depend on how you want to / have to implement this notice block. If you update the page with Ajax (without graceful degradation, a JS off fallback to normal state) I strongly recommend to do this with modal windows like Facebook - its nice and handy. If you did not have the chance to use modal windows it could be something like:
#notice{ height: 100px; margin: 1em 1em 2em } /* #notice can be a wrapper with basic dimensions */
.error{ border: 1px solid red; } /* reuse the same block */
.info{ border: 1px solid green; } /* reuse the same block */
And the HTML respectively:
<div id="notice"></div>
Error state:
<div id="notice" class="error"> Your error message </div>
Info state:
<div id="notice" class="info"> Your info message </div>
Of course you can run into problems with the #notice div height when the message is too long but that is an other problem :)
You can set a fixed height and width for the div.
#notice {
....
height: 200px;
width: 100%;
}
Alternatively, you may use min-height and min-width.
I'm assuming the div with #notice won't be there if you don't need it. Why not use the adjacent selector like this. It won't work in some browsers like IE6. Give the element following it the class of "following" or something similiar. There will still be a bit of a difference because you have the 2px from the border in there.
#notice {
border: 1px solid green;
padding: 1em;
margin: 1em;
margin-bottom: 2em;
background-color: lightgreen;
font: bold sans-serif;
color: darkgreen
}
.following {
margin-top:4em
}
#notice + .following {
margin-top:2em;
}
Related
I have a strange issue which occurs on specific browsers and is probably something to do with the viewport (I'm a new developer so do not fully understand the correct terms).
Browsers which have the issue:
Brave Browser
DuckDuckGo
Browsers which don't have the issue:
Safari
Google Chrome
When I scroll right down to the bottom of the page, there is a small amount of whitespace which does not go away regardless of what I do.
I have:
Added width and height of 100% to footer
Added a min-height of 100vh
Checked for phantom characters
Changed the position of scripts in HTML
Where the white begins is where the screen starts to curve (on an iPhone 11).
These are snippets of my CSS code which may be useful (the footer section is the second grey line to the bottom of the black section):
* {
margin: 0;
padding: 0;
outline: none;
font-family: "Raleway", serif;
font-weight: 400;
box-sizing: border-box;
}
/* Footer */
.footer {
background-color: #0e1111;
}
.footer_wrapper {
color: grey;
max-width: 2000px;
margin: 0 auto;
padding: 0 10%;
}
.copyright {
font-size: 15px;
letter-spacing: 1px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: #232323;
}
/* End of code */
The bottom of my screen:
Does anybody know why this may be happening and if any more code needs providing, I will update the post.
To solve the issue, I had to fill in the body colour.
body {
background-color: black;
}
It seems to be something specific to individual browsers as many popular websites such as bbc.co.uk and news.sky.com to name a few, have the same issue (where the footer does not extend right to the bottom of the screen).
When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500% to 250%, a piece of background appears (green color). Watch the video on which I show it. Below is the source code from the video. Is this a browser rendering bug or my code is bugged?
Windows 10, 10.0.18362, 64-bits
Google Chrome, 75.0.3770.100, 64-bits
video: https://youtu.be/uwAEixLBUeU
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; border: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1em; line-height: 1.2; color: #222; }
html { background: #bbb; }
body { width: 1000px; margin: 0 auto; background: #fff; }
a { text-decoration: none; }
.modelerInputReport {
overflow: hidden;
padding: 5px;
}
.modelerInputReportDiv {
float: right;
}
.modelerInputReportDiv span {
display: inline-block;
}
.modelerInputReportDiv button {
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
.modelerInputReportDiv button:hover {
border: 1px solid #1B273F;
}
.modelerInputReportDiv button:active {
background: #cc7600;
border: 1px solid #402400;
box-shadow: inset 0 0 10px 2px #402400;
}
</style>
</head>
<body>
<div class="modelerInputReport">
<div class="modelerInputReportDiv">
<span id="modelerInputReportMsg">(generate to unlock) -</span>
<span>Report:</span>
<button id="modelerInputReportPrint" class="modelerInputReportPrint">PRINT</button>
<button id="modelerInputReportDownload" class="modelerInputReportDownload">DOWNLOAD</button>
</div>
</div>
</body>
</html>
In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.
If it is a problem in your case, you can try doing things to minimise the effect, for example:
Use non-pixel measurements border: 0.1rem solid #CCC
Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.
These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.
TL:DR - It's the browser, and don't worry about it unless you really need to!
this is display:inline-block; issue because of inline-block use some spacing
Use float: left instead of display: inline-block,
Use this css
.modelerInputReportDiv span {
float:left;
}
.modelerInputReportDiv button {
float:left;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
This is best explained through my JSFiddle. I'm using Chrome.
I have an inline-block container element. Inside of it are inline elements (spans).
<div id="container">
<span class="star">★</span><span class="star">★</span>
</div>
When I give the star class padding of 5px, the border of the container renders as expected, at the edge of the last element.
When I change the padding to 5.5, or one of many other decimal values, the container appears to have additional width on one side (the more inner elements, the more profound this effect is).
Actually, I suspect that the container doesn't have extra width, but that the inner elements have too little width. Notice how the blue box displayed by Chrome's element inspector is narrower that in should be in the first example.
When the element is inline:
when the element is inline-block:
What's going on here?
Ok, let's try to get to a reasonable conclusion.
Using fractional pixels is not wrong, but it doesn't work quite exactly as we would expect, since most browsers will round up the fractional number to an integer one.
I wish I could give you an official reference regarding this matter, but I can't. It is not a standard, it's just the way some browsers decided to render it. (if someone can find a reference, please feel free to update the answer)
Now, with that information in mind:
It's just a matter of math:
(This measures are calculated in Google Chrome)
Without padding, your star character has a width of 13.33px. And you are adding a surrounding padding of 5.5px. So:
FIRST STAR SECOND STAR
-------------------- -------------------
5.5 | 13.33 | 5.5 5.5 | 13.33 | 5.5
-------------------- -------------------
Summing up: 5.5 + 13.33 + 5.5 + 5.5 + 13.33 + 5.5 = 48.66
So the parent element is told by the browser that it's inner contents sum up to 48.66px, but based on what we have considered, it will render as 49px.
If that's true, then a 49px element should be exactly the same size of your example, as it is:
#container {
display: inline-block;
border: dashed 1px red;
}
#compare {
border: dashed 1px blue;
width: 49px;
text-align: center;
margin-bottom: 10px;
}
.star {
padding: 5.5px;
background-color: lightgray;
}
<div id="compare">49px</div>
<div id="container">
<span class="star">★</span><span class="star">★</span>
</div>
Conclusion:
You may ask, why isn't the inner content also rounded up to a total of 49px?
Apparently, the browser will round up or down depending of the fractional, so 13.33px will round to 13px on the inner elements, causing it to render smaller than its parent.
Fractional pixels are allowed, you can refer to this answer: Can a CSS pixel be a fraction?
However, it depends on the browser how it interprets it. If you open your fiddle in IE11 the width is correct (funny IE11 being 'better' at something).
A quick test on safari show us that they are fit. Look:
The best way to fight with this is adding the border to the star. Take a look here:
#container {
display: inline-block;
border: dashed 1px red;
}
#container2 {
display: inline-block;
}
.star {
/* This creates extra width. */
padding: 5.5px;
background-color: lightgray;
}
.star2 {
/* This is fine. */
padding: 5px;
background-color: lightgray;
}
.star3 {
/* This is fine. */
padding: 5.5px;
border-top: dashed 1px red;
border-bottom: dashed 1px red;
background-color: lightgray;
}
.star3:first-child {
border-left: dashed 1px red;
}
.star3:last-child {
border-right: dashed 1px red;
}
<div id="container">
<span class="star">★</span><span class="star">★</span>
</div>
<div id="container">
<span class="star2">★</span><span class="star2">★</span>
</div>
<div id="container2">
<span class="star3">★</span><span class="star3">★</span><span class="star3">★</span>
</div>
#container {
display: inline-block;
border: dashed 1px red;
}
.star {
/* This creates extra width. */
/* padding: 4.48px 6.72px; */
/* This is fine. */
/* padding: 5px; */
/* This creates extra width. */
padding: 5.5px;
display: inline-block;
background-color: lightgray;
}
<div id="container">
<span class="star">★</span><span class="star">★</span>
</div>
#container {
display: inline-block;
border: dashed 1px red;
}
.star {
/* This creates extra width. */
/* padding: 4.48px 6.72px; */
/* This is fine. */
/* padding: 5px; */
/* This creates extra width. */
padding: 5.5px;
display: inline-block;
background-color: lightgray;
}
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.