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).
Related
I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML
<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>
and the below style
#personName {
display: block;
}
#moreInfo {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
font-weight: bold;
font-style: italic;
display: inline-block;
}
The problem is I also have this style
* {
box-sizing: border-box;
}
which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.
That's because box-sizing: border-box includes both the border and the padding in the height computations.
Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.
In your specific case, you can increase the height and width to the following to make it look like you want to:
width: 57px;
height: 57px;
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.
#moreInfo {
...
padding: 0;
font: 30px Arial, sans-serif;
...
}
I created and off canvas navigation which works great in desktop, but on mobile devices when the menu slides open there is white space added to the bottom of the page.
An example can be found here.
Thanks for your help! :)
you can eliminate that white space by simply adding margin: -40px; or something like that to the .fcFooter class.
.fcFooter {
font-family: 'ff-tisa-web-pro',serif;
font-style: italic;
letter-spacing: .1rem;
font-weight: bold;
color: #8a8b8c;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
/* margin-top: 40px; This line would be replaced by the following */
margin-top: -40px;
border: 1px #ededed;
border-style: solid none none none;
display: block;
}
You can add that css only to mobile devices by a media query like this:
#media only screen and (max-width: 600px) {
.fcFooter {
margin-top: -40px;
}
}
Please let me know if this was useful
The height and width of the canvas must be declared in the height and width attributes, if you want it work correctly
Wrong:
<canvas style="height: x; width: y;">
Correct:
<canvas height="x" width="y">
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
IE 7's rendering:
Everything else's rendering:
There are a few problems between those two images, but the one I'm concerned with is that there is way too much spacing between lines. I set the line-spacing to 0px, and then the "page name here" at the top looks right, but everything else is messed up. Set everything else to 1.2 and everything looks somewhat fine... but that messes every other browser up. What should I do? Is there another property I'm missing, or do I have to ind a work-around?
Code:
The div around the top "Page Name Here"
#TopBar {
padding: 0px;
height: 50px;
max-height: 50px;
overflow: hidden;
z-index: 250;
}
The actual h1 element of the "Page Name Here"
.TitleText {
font-size: 2em;
color: white;
text-align: center;
line-height: 1.2;
}
Everything:
* {
padding: 0px;
margin: auto;
font-family: Tahoma;
line-height: 1.2;
}
I tried messing with the values a bit but I can only get it to look good on either IE7 or everything else
Figured it out while posting my code...
In my code:
* {
padding: 0px;
margin: auto;
font-family: Tahoma;
line-height: 1.2;
}
I set the margin for everything to be auto by default, making IE7 render a different value other than 0px. By setting it to 0px for the margin-top property, it gets rid of the extra space at the top of the title bar and fixes the cutting off problem.
use this IE7 hack:
#TopBar { *height: 40px; }
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;
}