My CSS style not working properly for IE 11 and Safari browsers. I searched every possible place to find an answer but failed. a lot of people talking about cross-browser CSS problem but no one did a working example and show how it's done properly. so if you guys know please help me to overcome this issue.
this is a part of my CSS I found not working for IE and safari
<style> .lap_drop_dwn:before {
content:"";
position: absolute;
right: 31px;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent rgb(0,0,0,0.5) transparent;
}
.drop_dwn_items {
display: block;
width: 100%;
height: 50px;
background-color: rgb(0,0,0,0.5);
text-decoration: none;
line-height: 50px;
font-size: 22px;
color: #fff;
padding: 0 20px;
text-align: center;
}
</style>
this is a part I found, but my CSS file is quite large so there could be many so hard to find manually. it would be better if there is some script which automatically fixes those errors according to particular browser needs.
Related
I've added a custom weather web part to my SharePoint page, but I want a hover message that displays additional info.
The pieces I've got worked out look great in Chrome, but not so great in IE 11. I need this to look the same in both - any tips?
.tooltip {
display:inline;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:9pt;
}
.tooltip:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 6px;
color: #fff;
content: attr(title);
left: 5px;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
/*width: auto;*/
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
top: 40px;
content: "";
left: 25px;
position: absolute;
z-index: 99;
}
Here's my JSFiddle: http://jsfiddle.net/hcoa82wb/
The problem was the .tooltip tag using the display: inline When this is changed to display: inline-block both IE and Chrome began to show the messed up version of the tool-tip. From there it was just a matter of changing the top properties to display how you would want it. Here is your JS Fiddle updated. I left comments in the CSS code.
On the same note I would recommend using a different Class name other than .tooltip I would hate for you to run into issues in the future if someone adds a WebPart or a 3rd party SharePoint plug-in that uses the same class name. I've had issues with that in the past.
I am a novice when it comes to CSS. Have a small problem - the following code looks great in Firefox and Chrome, but not so much in IE (big surprise!). The image is basically hidden behind the double-line hr. Is there something I should try differently?
hr.style-eight {
padding: 0;
width: 100%;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-eight:after {
content:url("/web_images/wheat_icon.png");
display: inline-block;
position: relative;
top: -1.25em;
padding: 0 0.25em;
background: white;
}
Thank you for your help!
.plus input[type="submit"]
{
background: url("../Image/button_one.png") no-repeat;
border: medium none;
float: right;
height: 32px;
margin-right: 14px;
margin-top: 53px;
width: 32px;
}
I m using following code to display the button on the image it works with all browsers but when it comes to internet explorer 7 the button get out from the image.
input[type="submit"] doesn't support by IE 7 and IE8 see here. IT would be good to make a class.
Also you are writing a css in wrong manner. It should be like this. A working Demo.
input.plus[type="submit"]
{
background: url("http://lorempixel.com/60/30/") 0 0 no-repeat;
height: 32px;
width: auto;
}
input[type="submit"]
{border:1px solid black;
width: 132px;}
I am trying to obtain a pure CSS select input with an arrow. All is well except Firefox is causing some weird issue and pushing the arrow past the width of the box.
You can see it here: http://cssdeck.com/labs/xvvfgv3k (Please view in a FF browser)
Is this some sort of bug? When viewing the css in Firebug to try and fix the problem, it fixes itself and displays how it should. Really weird. Any help is greatly appreciated. Thanks!
Try making your select element relative and adjusting the right property on your :before and :after pseudo elements.
Try this
.wrap {
width: 200px;
margin: 10% auto;
font-size: 14px;
}
select {
width: 100%;
padding:10px;
margin: 0;
border: 1px solid #bec1c3;
border-radius:0;
background: #fff;
color:#888;
line-height: 1;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
position: relative;
}
span.select {
position:relative;
padding: 9px 0;
}
span.select:after {
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: #bec1c3 transparent transparent transparent;
position: absolute;
right: 16px;
top: 14px;
pointer-events: none;
z-index: 100;
}
span.select:before {
content: '';
display: block;
right: 6px;
top: 0;
width: 34px;
height: 34px;
background: #F7F7F7;
position: absolute;
pointer-events: none;
z-index: 99;
}
Saucelabs shows the following browsers also show the bug you refer to :
1. Firefox 25 on windows7
2. Firefox 20 on windows7
3. Firefox 10 on windows7
4. Firefox 25 on Linux
Does this link help?
Firefox button and text input bug
This is what it looks like in chrome:
This is what it looks like in FF:
This is the css I have applied to this element:
.styled-select5 {
margin-left: 20px;
height: 12px;
border: 1px solid #cccccc;
overflow: hidden;
width: 104px;
z-index: 1;
background: url(/images/registration/triangle.png) no-repeat right white;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.styled-select5 select {
padding-right: 42px;
background: none repeat scroll 0 0 transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
border: none !important;
width: 110% !important;
overflow: hidden;
z-index: 5;
height: 14px;
display: block;
padding-left: 3px;}
.styled-select5 select::-ms-expand{
display: none;}
.styled-select5 select option {
height: 20px;
width: 400px; }
.styled-select5.hidden {
display: none; }
I have been trying to figure this out for a while. In order for them to look similar I have to change the padding in FF to get the text to show properly. I am not sure why this is happening. Is there some difference in the way chrome and FF do this?
Each browser (on every OS) displays the HTML elements differently. The amount of styling that can override the defaults is also decided by the browser.
You cannot edit beyond what's permitted. If you happen to use selects for Safari, it'll look far more different and you cannot customize much there as well.