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;
}
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 used flexbox properties to make my section look like this:
It works fine on Chrome but I noticed a few differences when I checked firefox and safari.
This is how chrome looks like:
But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:
And on safari, the boxes are all one after the other:
It is a WordPress Site and not live yet. But here is my html structure:
<section id="services">
// here goes the title of the container
<div class="main-container col-lg">
// here go all the box
<div class="services-container">
// this one of the boxes
</div>
</div>
</section>
And the CSS:
#services {
background-image: url("img/Services-background.jpg");
background-color: red;
}
.col-lg {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: initial;
max-width: 100%;
}
.services-container {
color: #d6d6d6;
margin: 1%;
max-width: 100%;
width: 30%;
}
How Can I make this work on all browsers?
The best way to ensure that flex is working equally on all browsers is to use prefixes.
Here's the chart from MDN showing you the different browser prefixes available for flex box (and general browser support notices)
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
Then you can add the rest of the styling. It will work on all browsers.
Sometimes the HTML version may be the reason (it was in my case):
I looked for <!DOCTYPE html> at the top of the source code. My HTML turned out to 4.0 something and that was the reason (most probably) that flex did not work. Once that was changed, it worked well.
Good luck...
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.
I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.
HTML:
<button type="submit"><span>Search</span></button>
CSS:
button {
border: 0;
background: red;
padding: 0;
width: 200px;
height: 50px;
position: relative;
}
button span {
position: absolute;
top: 0;
left: 0;
}
In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.
What am I doing wrong?
Live demo: http://doctype.n-joy.sk/button/
Thanks
That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.
button {
background: red;
border: 0;
padding: 0;
margin: 0;
}
button span {
display: block;
background: blue;
width: 200px;
height: 50px;
}
// FF only:
#-moz-document url-prefix() {
button span {
margin: -1px -3px;
}
}
It looks like you did everything correctly, but there is some dark magic emerging from the default styles of Firefox, and from some undocumented, hidden (pseudo-)elements attached to buttons.
I haven't yet found the rule which would help you with this button issue, but you may try to scan the default styles yourself. If you type in Firefox's address bar: resource://gre-resources/forms.css, then you will see one of its default stylesheets.
Some of suspicious selectors (just wild guesses) are: *|*::-moz-button-content or input > .anonymous-div. The second one does not seem to be defined for button, but who knows where else the magic lies?
In any case, I suppose, you might report it as a bug.
Found this in Twitter Boostrap reset.less file.
It corrects this behavior.
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
Note that comments are in less... not CSS so you have to replace // by /* ... */
I'm building a navigation using the simple <ul><li></li><ul> system and floating them to the left side so they appear inline. The follow code works in all browsers except IE 6.
The HTML
<div id="sandbox_container">
<div id="sandbox_modalbox">
<div>
<ul id="sandbox_modalbox_nav">
<li id="Intro" class="modal_active">Item 1</li>
<li id="Queries">Item 2</li>
</ul>
</div>
<!-- more content here -->
</div>
</div>
The CSS
#sandbox_container {
min-height: 385px;
width: 940px;
padding-bottom: 20px
}
#sandbox_modalbox {
width: 940px;
padding-top: 5px;
margin-bottom: -10px;
}
ul#sandbox_modalbox_nav {
width: 936px;
height: 52px;
margin: 0px 2px 0px 2px;
padding-top: 0px;
display: block;
}
ul#sandbox_modalbox_nav li {
height:52px;
float: left;
list-style: none;
padding: 0px;
display: block;
}
ul#sandbox_modalbox_nav li a {
padding: 12px 30px 0px 30px;
height: 52px;
display: block;
}
I also put it up on JSBin.
I understand the problem is that I must define a width for the <li> for IE to float it properly, however I would prefer these remain variable width. Is there anyway to float them properly without restricting the width?
If I am understanding the problem correctly then in browsers other than IE6 the list items appear next to each other, but in IE6 they appear on top of each other.
If this is the case, it may be because the a elements are not floated even though their containing elements are. I would just use a conditional comment and add the following for IE6 only:
ul#sandbox_modalbox_nav li a { float:left; }
Also, Neall is right on track with the whitespace issue, even if it doesn't fix your current display problem it may cause some unwanted space to appear between items later.
Not that I can think of, I can't imagine how to declare a width that can change, except by defining it in ems. If you have a content that you know is likely to be less than ten characters, then width: 11em; padding: 0.5em 1em; is likely to offer enough space for the content while still defining a width.
IE 6 has some bugs with whitespace between <li> elements. Try putting all your list items on the same line with no space between them.
Edit: On further inspection, I don't think the whitespace is your problem. Your example has a lot of extraneous styles - it's hard to tell what the problem is.
I usually solve this by setting the floated list items to width: 0 for IE6. This for one reason or other causes them to have the correct dynamic width.
You can either do this in a conditional comment:
<!--[if lte IE 6]>
<style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style>
<![endif]-->
Or simply take advantage of IE's lack of support for CSS selectors, by setting the width to 0, and then back to the default "auto" for modern browsers:
ul#sandbox_modalbox_nav li { width: 0; }
ul#sandbox_modalbox_nav > li { width: auto; }