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!
Related
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.
Within ie8, the document is rendered as intended.
Within ie7, the document is not
(built on top of bootstrap with additional css)
markup:
.modal.fade.in#unsupported-browser-modal
.modal-dialog
.modal-content
.modal-text
.modal-header
%h3.modal-title YOUR BROWSER IS OUT OF DATE
.modal-body
This website requires a minimum of Internet Explorer version 9 or the latest version of other popular web browsers.
additional css:
#unsupported-browser-modal {
.modal-dialog, .modal-content {
height: 100%;
}
.modal-dialog {
width: 100%;
margin: 0;
max-width: none;
min-width: none;
}
.modal-content {
border-bottom: 0;
}
.modal-header {
border-bottom: 0;
padding: 15px;
min-height: 16.42857143px;
}
.modal-title {
font-family : $var;
text-align : center;
font-weight : bold;
letter-spacing : 2px;
margin-top: 50px;
}
.modal-body {
font-family: $var1;
font-size: 14px;
text-align: center;
padding: 2px 35px 80px;
color: #646464;
line-height: 20px;
}
}
#unsupported-browser-modal.modal {
display: block;
}
.modal-text {
top: 37%;
position: relative;
}
Also, document.compatMode seems to be set to the same value in both ie7 as well as i8, in case that may be of interest.
Thoughts as to what I may not be accounting for?
Not sure if it's what your looking for. It's also, a bit of an hack so I wouldn't suggest it unless no one suggests a solution/you don't find one. But try:
_margin-top: 100px; /* ie7 only */
Can read more about safe CSS hacks if your interested here:https://mathiasbynens.be/notes/safe-css-hacks#css-hacks
.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.