i have a weird bug on this page when browsing with IE
http://www.emfx.fr/?page_id=38
this image explain clearly the problem :
http://appartager.free.fr/site/bugIE.jpg
when i look at this page localy(easyPHP) with IE everything is OK
when i look at this page online with IE i have 2 problem
1) my hr tag don't align to center
2) the button send message is crop
BUT the code is exactly the same and the Browser is the same (IE)
the hr behavior is control in a css file
hr.center {
border: none;
color: #353a40;
background-color: #353a40;
height: 1px;
width: 371px;
text-align: center;
}
the button is also control by 2 css file (All Browser/IE exception)
here is the general code :
#contact_form input[type=submit] {
padding: 7px 15px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-family: "Droid Sans", Arial;
cursor: pointer;
border: 1px solid #666;
color: #ccc;
margin-bottom: 10px;
margin-left: 420px;
}
here is the ie exception
#contact_form input[type=submit] {
padding: 8px 0px;
background: rgba(255,255,255,0.1);
margin-bottom: 300px;
margin-left: 418px;
text-align: center;
}
if you guys have any idea on how to solve this it would be great !
cheers !
sk
You've removed the horizontal padding from the button in IE
#contact_form input[type=submit] {
padding: 8px 0px; /* 15px?*/
and I'd personally center a hr using margin:auto instead of using text-align - but hr is aligned to the center by default; so you shouldn't need to adjust this.
(Taking those declarations out in IE web developer tools appears to resolve the problem).
Related
Please bear with me as I'm new to IE11 debugging.
For the info, this bug is only happening in IE11, browsers like Chrome or FireFox do not have this issue
Currently part of my webpage is displaying that
This is ok.
However, when choosing through a different property, and clicking on one of the property this is what I have
From what I can see, the CSS is not used/read correctly by IE11.
This is my CSS
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
I've tried to add an !important on the width in the css but IE11 refuses to take into account and still gives me the wrong width.
.floor-details-item {
min-height: 160px;
width: 100% !important;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
When going through IE11 console when inspecting the element, this is what I have
Funny part is when I change it manually and typing 100% as you can see below, then the width issue is fixed.
Thank you for any insight you may provide.
update :
I have tried the following on the CSS. As this link is saying that IE 11 is not fond of width with !important, I added in the css the following
.floor-details-item {
min-height: 160px;
/*width: 100% !important;*/
/*adding auto and initial*/
width: auto;
width: initial;
But nothing so far.
Try to add min-width: 1px;. It saved my ass many times;-)
After many wrangles plus the help of my colleague, I found where the issue was located.
It was due to the css.
.floor-details {
width: 44%;
margin-left: 5px;
height: 555px;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
border: 1px solid #eeeeee;
border-left: 20px solid #C2EFDF;
overflow-y: auto;
padding: 5px;
//display: flex;
align-items: center;
flex-direction: column;
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
//display: flex;
min-width: 1px;
IE11 does not like the display: flex; as a child. Removing it from the child also mean removing it from the parent as you can see from the code. Once done, the issue is fixed.
I am designing my login page. I have added button background color, which is showing on chrome and firefox perfectly, but it does not showing on microsoft edge. Below are my HTML and CSS,
note - I have tried with many color, all are working on chrome and firefox but not in edge
HTML
.index-un-right-nav-buttom{
float: left;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}
.index-un-right-nav-submit-button{
float: left;
padding-top: 5px;
padding-bottom: 5px;
height: 50px;
width: 100px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10%;
border: none;
outline: none;
color: #ffffff;
background-color: #007182fb;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
border-radius: 50px;
}
<span class="index-un-right-nav-button">
<button class="index-un-right-nav-submit-button">Login</button>
</span>
In firefox,
In Edge
In chrome,
Edge doesn't support the 8-digit color notation. See CanIUse.
Use
background-color: rgba(0, 113, 130, 0.984);
instead.
Try changing
background-color: #007182fb;
to
background-color: #007182;
hope that fixes the problem.
Also clearing the browser cashe might help.
Edge (and IE11) doesn't support opacity values inside the background-color value
use
background-color: rgba(0, 113, 130, 0.95);
#map-search-button {
display: inline;
float: right;
border-style: solid;
border-image: url(https://i.imgur.com/r35pKjB.png) 8 8 8 8;
border-width: 5px 5px 5px 5px;
height: 50px;
width: 125px;
background-color: #00ACC8;
background-clip: padding-box !important;
font-size: 1.5em;
text-align: center;
line-height: 40px;
color: white;
}
<div id="map-search-button">Find us!</div>
On Chrome on Windows, the button looks the way I expected:
But on Chrome on a Mac, the button looks like this:
Why is this? Is there anything in the CSS I can change that would keep the border image solid?
I’d highly recommend creating a rounded button with border-radius rather than trying to implement a border-image. See inline example below.
As for a technical explanation of why yours doesn’t look right, you may want to look into best practices for producing a border-image if you want to further pursue that route. Your Mac may have a Retina display and be improperly scaling your image.
Using border-radius:
body {
font-family: impact, sans-serif;
letter-spacing: .02em;
}
#map-search-button {
width: 125px;
height: 50px;
line-height: 50px;
background-color: #00ACC8;
border: 5px solid #00ACC8;
border-radius: 8px;
font-size: 1.5em;
text-align: center;
color: white;
}
<div id="map-search-button">FIND US!</div>
This web page div displays correctly in Firefox and Chrome
But looks ugly in Internet Explorer and Opera
My HTML Code is:
<div class="newAd">
<span id="newAdButton">
Create a new advert for FREE!
</span>
</div>
And the CSS is:
.newAd {
margin: 0 auto;
margin-bottom: 25px;
margin-top: 20px;
width: 500px;
}
#newAdButton {
margin: 10px 30px 10px 30px;
padding: 10px 40px 10px 40px;
background-color: #88FF88;
color: #000000;
font-size: 27px;
border-radius: 20px;
border: 5px solid #00FF00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
cursor: pointer;
word-spacing: 0px;
}
Please how can I make it work for IE and Opera? Thanks.
You can use button tag instead of span and apply id to button tag.
Hopefully it'll display properly.
The problem is the border you are using for that container. Firefox and chrome have it outer while apparently IE and safari have it inner (as a test you can remove the border and see what happens). Try using box-sizing:border-box; for your #newAdButton.
I am trying to create a <kbd> tag for myself. I was trying with this image like below,
CSS:
kbd {
font-family: Courier;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:10px;
background: url('kbd.png');
background-repeat:no-repeat;
}
HTML:
<p>Open Terminal <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>
But images are not showing completely unless the text is large enough to cover the image. see the screen shot below.
Also I could not able to bring the text at center, I tried align but could not succeeded.
Any help including any better way to have <kbd> tag will be appreciated.
It's very worth noting that this could be done pretty much entirely without the need of an image. It would be more flexible without it; a long <kbd> text would break if it were an image, but wouldn't if it was done entirely in CSS.
So I propose:
http://jsfiddle.net/TLV4a/1/
kbd {
display: inline-block;
min-width: 45px;
text-align: center;
font-family: Courier;
margin: 0 5px;
padding: 0 5px;
background-color: #f7f7f7;
border-width: 1px 1px 3px;
border-style: solid;
border-color: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px 1px #fff;
box-shadow: inset 0 0 4px 1px #fff;
line-height: 1.75;
}
If you have even padding, instead of different left vs. right padding, as well as utilise a min-width along with text-align: center;, you can get it to display nicely.
http://jsfiddle.net/TLV4a/
kbd {
display: inline-block;
min-width: 50px;
text-align: center;
font-family: Courier;
padding: 6px 5px 8px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}
Have a look at this jsFiddle
kbd {
font-family: Courier;
padding-top:6px;
padding-bottom:6px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
display: inline-block;
width: 54px;
text-align: center;
background-repeat:no-repeat;
}
You can use this code to get your desire resutl:
kbd {
background: url("kbd.png") no-repeat;
display: inline-block;
font-family: Courier;
min-height: 31px;
min-width: 54px;
font-size: 0.75em;
padding: 6px 0 0;
text-align: center;
}
/*use font size to adjust with the key image and use padding 0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/
Adding background-size may be your best solution.
background-size:100% 100%;
You can use text-align:center for align your text and on the background image you can use a z-index Property.
have a look here for z-index examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp