I have issue with IE when I use input group with bootstrap v4, works well in chrome. I a m using IE 11
This is my plunkr
input group bootstrap v4
chrome look:
IE look:
what I found is form-control has padding: .375rem .75rem;
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: .25rem;}
If I increase bottom padding it adjusts well in IE but it mess up in chrome.
So I am looking for solution which should work everywhere.
Thanks
We may use the Internet Explorer media queries. Because according to the browser some values have changed.
/***for IE browser***/
#media screen and (min-width:0\0) {
.form-control {
padding: 9px 10px;
}
}
FYR:
http://jsfiddle.net/iyyappan13391/26ZM4/257/
Related
I'm using the flex box technique to layout my webpage, but I have come across with some confusion about the syntax. What I'm confused about is do you have to use -webkit- anymore or has all browsers implemented HTML5 yet. I have been looking for answers on the various websites and one person says you need to use the -webkit- syntax and another person says you don't have to use it anymore. I understand what flex boxes do I'm just confused on whether you need to use -webkit- or not. If I don't can someone show me the correct syntax and if I do need to use the -webkit- syntax can someone show me how to implement my layout into Firefox, Opera, and IE. I know Chrome and Safari use the -webkit- syntax.
header, section, footer, article , aside, hgroup, nav {
display: block;
}
* {
margin: 0px;
padding: 0px;
}
body {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
h1 {
font: bold 20px tahoma;
}
h2 {
font: bold 14px tahoma;
}
#page_wrap {
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
background: red;
border: 4px solid black;
padding: 20px;
border-radius: 5px;
}
#top_menu {
border: 2px solid red;
background: black;
color: white;
padding: 10px;
}
#top_menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px tahoma;
}
#section {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#main_section {
border: 1px solid black;
-webkit-box-flex: 1;
margin: 20px;
padding: 20px;
}
#side_news {
border: 2px solid red;
margin: 20px 0px;
width: 220px;
padding: 30px;
background: #a4a4a4;
border-radius: 10px;
-webkit-box-shadow: rgb(110,110,110) 10px 10px 10px;
}
#the_footer {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
article {
background: black;
color: white;
border: 3px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
I have been developing a CSS framework, and fromt hat I learned: To make things work for real, you have to also type it all out. That means in short: You should use the -webkit- prefix, and the same settings without. Besides, there is also -o- (Opera), -moz- (Firefox), -ms- and sometimes -Ms (IE, and yes, case sensitive). Very rarely there might be also -khtml-...but the chance you run into that is equal to zero. I have not seen any modern browser that uses that one any longer.
It might be painful to duplicate your statements, but that is how you make your CSS cross-browser compatible. And that is why I started to use PHP to do it instead...
You can also look up the statements - i.e. box-pack - and see their browser compatibility and syntaxes.
For example: Google Chrome seems to preffer -webkit- over the "non-branded" (no -webkit-) version. Safari tends to ignore the branded version and uses the non-branded version.
You can't ever drop the -webkit prefix from display: -webkit-box, because the standardized version is not called box.
Instead, it's called display:flex. The associated flexbox properties (including -webkit-box-pack) all have different names in the "new" standardized flexbox model, too.
Having said that -- you should prefer the new display:flex model to the old -webkit-box/-moz-box model, because the new version has better interoperability and cross-browser support, because it's actually standardized.
The -webkit- prefix is needed for Safari and Chrome when using transitions, transforms, animation, gradients, calc, flexbox, and columns. For border-radius, box-shadow, border-image, and text-shadow it's not really necessary unless you want to cover older browsers like Safari 5.0.
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
I'm trying to use Bootstrap glyph icons as buttons with circle background. I'd like to reach this with css only.
I found two possibilities (below), but it's do not work in IE9 compatibility mode. What is tricky in it and causes IE problems?
li:nth-child(even) .button-16 {
background-color: #369;
border: 2px solid #369;
border-radius: 16px;
}
li:nth-child(odd) .button-16:after {
content: " ";
display: block;
height: 16px;
z-index: -1;
position: relative;
background-color: #369;
border-radius: 16px;
box-shadow: 0px 0px 1px 0px #369;
width: 16px;
left: -1px;
top: -1px;
}
Here is working example
Greets!
IE9 compatibility mode means that site is compatible with older IE wersions whitch unfortunatelly doesn't support border-radius.
There are some hacks to walkaround that like Css3pie.
Update:
Pseudo class :nth-child is also not supported in IE < 9.
Here you have example site where you can check how css is supported in major browsers http://reference.sitepoint.com/css/selectorref
As you can see in the above screenshot, Safari Version 6.0.2 (8536.26.17) on a Macbook Air displays the border-radius on the right side with a straight line. The "button" is a link tag with a class applied to it. This same button displays properly in Chrome but not Safari. It's driving me crazy as to why this is happening.
JSFiddle link: http://jsfiddle.net/unnmv/
Here's the CSS I'm using:
background: $color;
border: 1px solid darken($color, 15%);
color: $text-color;
cursor: pointer;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
outline: none;
padding: 0.5em 2em;
text-align: center;
text-decoration: none;
width: auto;
height: auto;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Here is what worked for me: Add the following to your css:
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
I noticed it is mentioned for spacing consistency issues between browser, so I tried it out with this issue since i was having the same. It worked for me.
Good luck!
I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.
The CSS in question is like this:
div.showme {
border: 1px dotted blue;
position: absolute;
top :10px;
bottom :10px;
left: 1%;
right: 33%;
overflow: auto;
padding: 0.8em 1em 0.8em 1em;
line-height:1.75em;
}
div.showme a {
padding: 0em 5px 0em 5px;
margin: 0;
white-space: nowrap;
color: #FF00FF;
background-color:#E6E6FA;
border: 1px solid grey;
padding: 0em 4px 0em 4px; }
div.showme a:link { color: blue; }
div.showme a:visited { color: #1E90FF; }
div.showme a:active { color: red; }
The relevant HTML looks like this:
<div class='showme'>
<a href='one'>one</a>
<a href='two'>two</a>
...
</div>
The problem is, the padding is not consistently displayed, in IE8.
In Firefox, it works as I would expect.
working example:
http://jsbin.com/ogosa4
Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.
How can I fix this?
If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's
I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...
You can safely use inline-block in IE7 with inline tags.