I'm creating an application, more specifically the mobile version, and when I start to enter styles I see this blank space that I can't find where it comes from. Can anyone help me?
The app is being made with NextJS, the global styles I have are:
* {
border: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
display: block;
}
main {
padding: 0;
margin: 0;
font-family: $primary_font;
display: flex;
flex-direction: column;
align-items: center;
}
Setting a html style overflow-x: hidden is a band-aid way to remove that space.
To find the element that is causing the overflow, expand the DOM trees and hover over the elements until you find the one(s) that are sticking out. I'd start by looking at the "Asmae..." text, the header, and the footer if there is one.
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
I am trying to change the colors of three blocks on the main page of my SquareSpace site: the very top black block and the two orange blocks farther down the page. Developer mode is enabled. (ignite.lifepacific.edu)
I inherited this site from someone who is much better at CSS and web dev stuff. I can't even seem to FIND the code that I need to edit to change these properties, I have tried inspecting the site and going through the template files with no luck yet.
I have tried editing the custom CSS for the site. I was successful in changing the background color of the very top black block by editing the site-wide css, but not the font color.
Here is the site wide CSS, but I am not even sure that this is where the problem is: (I apologize for the amount of code, but I can't tell what code would be helpful to post!)
// Full-width content
.index-section.page .index-section-wrapper .content.page-content {
padding-top: 0 !important;
}
.index-section.page:first-child .content.page-content {
padding: 0 0 50px !important;
}
.index-section.page:nth-child(4) .content.page-content {
padding: 0 !important;
}
.index-section.page:nth-child(2) .col .row.sqs-row {
padding-left: 17px;
padding-right: 17px;
}
//very top black block
#ign-quickNavWrapper > span{
display: none;
}
//pictures at the bottom of main page
#media only screen and (max-width:640px) {
#block-yui_3_17_2_3_1480364802859_23283 {
display: none;
}
#page-583c7ead9f7456d4fb558775 .row.sqs-row .col.sqs-col-12.span-12 .row.sqs-row {
margin-bottom: 3.2em !important;
}
}
//block with colored text
#block-d65e6f0e47ed22f827df {
background-color: #6d6d6d;
padding: 20px;
}
#block-d65e6f0e47ed22f827df p{
color: #ffffff;
}
// 6.22 update centering logo and navbar
.header-inner{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#header #logoWrapper, #header #logoImage{
width: initial;
margin-left: auto;
margin-right: auto;
}
I have tried inserting the below, which successfully changes the top block color, but does not change the font.
#ign-quickNav {
background-color: white;
color: black;
font-color: black;
}
The following CSS, inserted via the CSS Editor or as part of the stylesheets in your developer-mode template will accomplish what you're after:
#ign-quickNav {
background-color: white;
}
#ign-quickNav a, #ign-quickNav a:hover {
color: black;
}
#block-yui_3_17_2_1_1557948879558_24889 {
background-color: #001a47;
}
#block-yui_3_17_2_2_1480363068238_30015 {
background-color: #001a47;
}
It may be that, by reviewing the above CSS, you can instead find the rules in the existing CSS and edit them, rather than adding additional rules. However, depending on the intended goals (and expected life of the website in question), adding more rules may be fine.
Because developer mode is enabled, it could be that you will not find the CSS within the CSS editor, but within the template files, within the styles folder. To access these files, you need to use SFTP or Git.
However, to simply achieve the styles you're looking for, you should be able to add them via the CSS Editor.
Note that, when targeting blocks via ID as I have in the code above, it is important NOT to target blocks starting with "yui". Such IDs are dynamically generated, so your CSS will not work as desired.
In writing the CSS above, I used the default web inspector, located block IDs, and looked for where existing CSS rules were that were defining the colors in the "quickNav". I hope that gives you a bit of insight on the process.
I Know that internet explorer doesn't play nice with SVGs. I notice that when changing display: block to display: flex does decreases the size of the gap. however it doesn't remove it.
I am declaring height and width in the styles but the issue seems to persist in IE 11
// Declarations
.o-navigation {
align-items: center;
display: flex;
#include font-smooth;
padding: (.5 * $spacing-base) $spacing-base;
.logo-access {
.icon-logo-full {
width: 135px;
height: 23px;
display: block;
#media screen and (min-width: $screen-desktop) {
.home & {
width: 270px;
height: 45px;
}
}
}
}
}
https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/objects/navigation/_navigation.scss
Where might the issue come from?
After using F12 developer tools to check the CSS style, I think the problem is caused by the different rendering way in IE11 that leads to the "o-navigation color-dark-background" having different heights in IE11 and other browsers. You can give the "o-navigation color-dark-background" a specific height value familiar with the value in other browsers. Here I try to set the height value to 52px and then the gap disappears. Like this:
IE doesn't play well with SVGs. The other answer to this post regarding adding the height style to the page does seem to work, and many other post regarding this issue direct to that solution. What did it for me was adding overflow: hidden to the links in the nav.
.nav-inline {
#include typography-nav();
list-style: none;
text-align: $text-direction-end;
flex: 1 1 auto;
margin: 0;
padding: 0;
a {
display: inline-block;
margin-#{$text-direction-start}: 1em;
overflow: hidden;
}
Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
It seems there is some magic around the <button>element that I don't understand.
Consider this markup:
<button class="button">Some Text</button>
<div class="button">Some Text</div>
And this CSS:
.button{
background: darkgrey;
height: 40px;
border: 2px solid grey;
width: 100%;
box-sizing: border-box;
font-size: 14px;
font-family: helvetica;
text-align: center;
margin-bottom: 20px;
/*I'm aware I could use this to center it*/
/*line-height: 40px;*/
}
What makes the text in the button element vertically centered? Webkit seems to predefine a -webkit-box-align with a value of center for the <button> element. If I set that to initial the text is no longer aligned to the center. But that doesn't seem to be the full magic, since on the other hand I had no luck centering the text on the div using the -webkit-box-align property.
Here is a fiddle: http://jsfiddle.net/cburgdorf/G5Dgz/
I know this is a couple of years old, but I'll add my thoughts after some investigation in to issue while writing a reset stylesheet for a project.
NOTE** This is based on looking through the Firefox source because it was the easiest to obtain and read through. However, based on similar behaviour in other browsers the implementation is probably similar.
Firstly, the main issue here is that <button> elements - atleast in Firefox - are built with an internal element between the <button> tag and it's children. In Firefox it's called moz-button-content and isn't something that can be reached with CSS and has been set to display block without inheriting the height of the button, you can see this style declaration in the useragent stylesheet:
From "source/layout/style/res/forms.css"
*|*::-moz-button-content {
display: block;
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
/* Multicol container */
-moz-column-count: inherit;
-moz-column-width: inherit;
-moz-column-gap: inherit;
-moz-column-rule: inherit;
-moz-column-fill: inherit;
/* Flex container */
flex-direction: inherit;
flex-wrap: inherit;
/* -webkit-box container (aliased from -webkit versions to -moz versions) */
-moz-box-orient: inherit;
-moz-box-direction: inherit;
-moz-box-pack: inherit;
-moz-box-align: inherit;
/* Grid container */
grid-auto-columns: inherit;
grid-auto-rows: inherit;
grid-auto-flow: inherit;
grid-column-gap: inherit;
grid-row-gap: inherit;
grid-template-areas: inherit;
grid-template-columns: inherit;
grid-template-rows: inherit;
/* CSS Align */
align-content: inherit;
align-items: inherit;
justify-content: inherit;
justify-items: inherit;
}
Because you can't affect any of the styles on this element, you are forced to add you styling on the <button> tags. This leads into the second issue - The browser is hard coded to vertically position the content of the button.
From "source/layout/forms/nsHTMLButtonControlFrame.cpp"
// Center child in the block-direction in the button
// (technically, inside of the button's focus-padding area)
nscoord extraSpace =
buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);
childPos.B(wm) = std::max(0, extraSpace / 2);
// Adjust childPos.B() to be in terms of the button's frame-rect:
childPos.B(wm) += clbp.BStart(wm);
nsSize containerSize = (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);
// Place the child
FinishReflowChild(aFirstKid, aPresContext, contentsDesiredSize,
&contentsReflowInput, wm, childPos, containerSize,
ReflowChildFlags::Default);
Given these two issues you can start to see how the button force the content to be centered, consider:
<button> tag
+------------------------+ ^
| button extra space | |
| | |
+------------------------+ |
|| ::moz-button-content || | button height
|| display: block; || |
+------------------------+ |
| | |
| button extra space | |
+------------------------+ v
If you give the button a height - like the 48px from your fiddle, the text will be centered because the moz-button-content element is display block and will only have the height of the content (most likely the line-height of the content by default) and when put next to another element you get this behaviour:
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
a {
display:inline-block;
background: green;
}
<button>Button content</button>
<a>Link Content</a>
This bug and this bug in the Firefox issue tracker was about a close as I could find to any actually documented bug. But the threads give the impression that despite this not appearing in any actual spec, the browsers have just implemented it this way "because the other browsers are doing it that way"
There is a work-around to the issue if you actually want to change the default behaviour, but it doesn't completely solve the problem and YMMV depending on your implementation.
If you insert a wrapper <span> with display: block as the only child of the button and put all your content inside it you can use it to skip over the moz-button-content element.
You will need to make this <span> element have height: inherit so it correctly fills the height of the button and then add your normal button styling to the <span> instead, you will get basically behaviour you want.
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
outline: 0;
}
button > span {
display: block;
height: inherit;
}
a {
display:inline-block;
background: green;
}
button.styled > span , a.styled{
padding: 10px;
background: yellow;
}
<button><span>Button content</span></button>
<a><span>Link Content<span></a><br/>
<button class="styled"><span>Button content</span></button>
<a class="styled"><span>Link Content<span></a>
It's also worth mentioning the appearance CSS4 rule (Not yet available):
While this is not a viable option (as of the 5th January) yet. There is a proposal to redefine the appearance rule in the CSS4 draft that might actually do the right thing an remove all assumptions made by the browser. I only mention it for completeness because it may become useful in the future.
UPDATE - 30/08/2016
You should actually use a <span> instead of a <div>, as div's aren't valid children for <button> elements. I have updated the answer to reflect this.
You could use padding.
For example
padding: 20px 10px;
I think that the only reason for this behaviour is that Google Chrome or browsers in general will take the default styles from your operating system.
For example, if you compare the button or scrollbar on Google Chrome run in windows 7 and windows 8:
In windows 7, the button will have a horizontal gradient line in the center of your button
In windows 8, the scrollbar are able to fade in and fadeout on click
This is just my opinion but hope that it can give you some ideas :)
You can use display:table-cell;
vertical-align: middle; as an alternate method.
On Mozilla Firefox I got the -moz-appearance property :
-moz-appareance: button;
In the HTML5 draft, there is a Rendering section, but doesn't details the placement :S
Button elements by default centers child elements vertically. It isn't done in a conventional CSS way, and therefor isn't trivial to override.
The best solution I have found is setting the button to flex column.
button {
height: 100px;
display: flex;
flex-direction: column;
}
span {
height: 20px;
width: 100px;
background-color: blue;
display: block;
}
<button>
<span></span>
</button>
Some answers suggested adding an inner wrapper, and setting it's height to inherit. This might not work for elements that have their height calculated dynamically.
In case you need to get rid of this behavior you can just add span as a child of button. Works better than trying to trick all the browsers.