I've noticed that Internet Explorer seems to ignore a table's padding. I've tested version 7, 8 and 9.
What is the best workaround? I prefer a workaround that's based purely on CSS than one that involves wrapping tables in <div>s or messing with tags in general.
Try this:
td
{
display: table-cell;
padding: 30px;
border: 1px solid #000000;
}
As seen on jsfiddle.
I have found that this actually works as a fallback for flex box in ie9. And while the original question has nothing to do with CSS flex,and this is probably a repeat, it solved an issue for us, so I will mention it here and hope it helps others.
flex: .selector { display: flex; } and no flex fallback:
.no-flexbox .selector { display: table-cell; padding : 25%; }
Related
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;
}
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...
I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE
I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.
#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.
I am having a difficult time with how ie and firefox are displaying inline-block. I should probably point out that Google chrome displays it as intended..
<div class="cell">
<div><img src="images/dftg.jpg" /></div>
<p>Sean val</p>
</div>
The problem occurs in firefox and ie when i write a longer name in the paragraph above, in the parapgrah above. in firefox and ie, the cell div moves up thereby making the layout look weird and inconsistent.
.cell {
display: inline-block;
display:-moz-inline-stack;
border: 3px solid #ff0000;
padding: 7px;
height: 170px;
zoom: 1;
*display: inline;
_height: 170px;
}
.cell p {
padding: 10px 25px;
width: 150px;
}
You're probably having this problem because you haven't specified any vertical-align.
Try using this:
.cell {
display: inline-block;
vertical-align: top;
border: 3px solid #ff0000;
padding: 7px;
height: 170px;
zoom: 1;
*display: inline;
_height: 170px;
}
You can forget about display: -moz-inline-stack - that's only for Firefox 2, which has very, very low usage.
The article you probably read while "doing research" was this:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
You should probably read it again, as it does mention using vertical-align.
You should check dates on articles you read. Inline-block has been supported since FF3.
Another obscure-but-useful new feature making its way into Firefox 3 after all the other major browsers support it (mostly) is the inline block. When assigned to an element, a display type of inline-block causes the element to be positioned inline (like a span), but the element's contents are laid out as if the element were a block.
http://ajaxian.com/archives/soft-hyphens-and-inline-block-subtleties-in-firefox-3-rc-1
Anyway, looks like you solved it.
My site is showing up fine in IE8/Firefox/Chrome but I can't figure out how to make it function with IE.
The relevant CSS:
#maincontent {
display: table;
}
#content {
display: table-cell;
width: 620px;
padding-left:4%;
padding-right: 22px;
padding-bottom:15px;
}
#sidebar {
display: table-cell;
width: 300px;
}
#content and #sidebar are in #maincontent. On IE6/7 #sidebar will be under #content. I've tried setting the sidebar to display:block with a float, and it will then render fine in IE6/7 but all the other browsers get screwed up. How can I get this setup?
From W3Schools:
No versions of Internet Explorer
(including IE8) support the property
values "inline-table", "run-in",
"table", "table-caption",
"table-cell", "table-column",
"table-column-group", "table-row", or
"table-row-group".
The best solution is probably to build a real table.
CSS tables aren't supported in IE, so you'll probably want to try working with just floats and margins. I'd recommend taking a look at the positioning on one of these templates and working from there.