My new site is not been displayed how it should be in internet explorer, in some parts of the site internet explorer dose not seem to be reading the css at all!
here is the css that ie is not reading can someone tell me what is wrong with it? or what i need to change to make it work in ie.
#reg_area {
border: 2px solid #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 2px 3px 3px #cccccc;
-webkit-box-shadow: 2px 3px 3px #cccccc;
background-color:#79af11;
background-image: -moz-linear-gradient(#b2d545,#79af11);
background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(0, #b2d545),color-stop(1, #79af11));
text-align:center;
height:35px;
padding:10px;
font-family: Tw_Cen_MT_Condensed;
color: #DAF7A4;
font-size: 25px;
text-shadow: 2px 2px 2px #2c4006;
}
#reg_area a:link {
font-family: Tw_Cen_MT_Condensed;
font-size: 45px;
color:#ffffff;
text-decoration:none;
}
#reg_area a:visited {
color:#ffffff;
}
#reg_area a:hover {
color:#D8F170;
}
Tw_Cen_MT_Condensed is not a web-safe font, hence won't be read.
You have your gradient set up as background-image, not background
Shadows don't work in IE
Your Box Radius and Gradients point to Webkit browsers and Firefox, not IE.
Have you even looked into how to make stuff work in IE? Hint: Try to search for workarounds and what is missing for each issue you have on IE.
Every line with -moz-
like -moz-border-radius: 15px;
will work only for mozilla (firefox)
It's probably the same with webkit.
Related
I've achieved the desired design for the scrollbar using the following:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 8px;
background-color: #999;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #666;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
As it can be seen above the changes are of course not for Internet Explorer, where I could just do for the moment the following:
body {
-ms-scrollbar-base-color: #999;
-ms-scrollbar-track-color: #999;
-ms-scrollbar-face-color: #666;
-ms-scrollbar-arrow-color: #999;
}
I want to know if is possible to recreate the same design present on Chrome in IE. Below are printscreens with the scrollbar, first from Chrome, second from Internet Explorer.
Unfortunatelly there is no cross browser way to style scrollbar with CSS. But you can try next JavaScript custom scrollbar plugins (mostly jQuery): jQuery Scrollbar, jScrollPane, mCustomScrollbar, perfect-scrollbar, slimScroll, baron or NiceScroll. There are more custom scrollbars available, but they are less functional/well-known.
I have use this : http://jscrollpane.kelvinluck.com/ this work on IE and it is very easy to use :) Enjoy !
I am having a problem with getting multiple spans to lay on top of a few divs within a WordPress post of mine correctly.
I created my own dummy webpage within Notepad++ with all the styling and things to make sure it looked how I wanted, and it looks fine. However, when I then go and put all of the HTML structure and the CSS into my WordPress site, then it doesn't look quite right.
The HTML content is the following:
<div class="member-status">MEMBER
<span class="level-dot">•</span>
</div>
<br /><br />
<div class="silver-status">
<span class="big-checkmark">✔</span>SILVER<span class="level-dot">••</span>
</div>
<br /><br />
<div class="gold-status">GOLD
<span class="level-dot">•••</span>
</div>
And the CSS to back it is this:
.member-status {
position:relative;
width:200px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding:20px 30px;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.silver-status {
position:relative;
width:200px;
color:#555;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #bbb;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #bbb;
padding:20px 30px;
background:#c0c0c0;
background-image: -webkit-linear-gradient(#eaeaea, #c0c0c0);
background-image: -moz-linear-gradient(#eaeaea, #c0c0c0);
background-image: linear-gradient(#eaeaea, #c0c0c0);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.gold-status {
position:relative;
width:200px;
color:#e68a00;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #ffff80;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #ffff80;
padding:20px 30px;
background:#ffd700;
background-image: -webkit-linear-gradient(#fff2aa, #ffd700);
background-image: -moz-linear-gradient(#fff2aa, #ffd700);
background-image: linear-gradient(#fff2aa, #ffd700);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.big-checkmark {
position:absolute;
top:7px;
left:12px;
color:#3c3;
font-size:2.5em;
}
.level-dot {
position:absolute;
top:7px;
right:15px;
font-size:2.5em;
}
You can see the end result on JSFiddle here: http://jsfiddle.net/WcQbL/1/
Here's the thing... on Chrome this looks perfect to me. The big-checkmark and level-dot spans look perfectly placed where I want them.
In Firefox and IE11, the level-dots look like they are positioned well, but the big-checkmark is positioned way down from the center on Firefox, and slightly down from center on IE11. I am pushing both the spans down the exact same way using top:7px;
Now... I went and plugged in this same HTML structure into a test post of mine on WordPress, and I added all the appropriate CSS to my child theme's style.css file.
However, when I go to the post, both the level-dots and the big-checkmark are positioned way up high on all 3 of the divs and it looks really bad.
So, my question is... is there a better way I can go about positioning these spans on top of these divs so that it is consistent among all browsers? And is there maybe some CSS in my parent style.css that would be affecting the spans being way up high once I plug the SAME exact code into my WordPress post?
Any help would be greatly appreciated. This is my first time working with spans on top of divs, so I apologize if the CSS code is not-so-great.
One more note, I originally had posted this on the "WordPress Development" Stack Exchange, but they told me to come here. I feel like it may just be purely a markup issue that will get it to work on all browsers including my Wordpress site, but maybe it is WordPress specific.
Thanks!
I figured out the solution to my problem. In the old code, I was letting the padding on my divs more or less do the "sizing" of the div for me and give it the look that I wanted. In the old code, I had only specified a width on my divs, no height.
In the fix, I specified my own height and width (width:275px and height:70px). Then, in order to get text or other things to center correctly within a div you should specify the "line-height" property as well so I set line-height:70px to match my regular height. Then, took all of the padding out (padding:0).
As a specific example, the "member-status" class now looks like this:
.member-status {
position:relative;
height:70px;
line-height:70px;
width:275px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding: 0;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
Lastly, I was forcing the "big checkmark" and "level-dot" to be in a specific position. I took the "top:7px" property out because that was pushing it down too far now with my changes, but left the "left" and "right" properties on there to get them spaced away from the left and right borders where I wanted them.
You can see the new code at: New fixed way
And the old code at: Old wrong way
If you look at the new code in all the different browsers, it looks the exact same now and exactly how I want it -- no differences between each browser.
Hope this helps someone!
<div id="specials">
<h2>We have HOT DEALS with unbelievable prices! | We have Pre-Owned boats!</h2>
<style>
#specials {
width:695px;
float:left;
padding: 0 10px;
height:38px;
margin:7px auto 10px 13px;
background:#BAD6E3;
border:2px solid #005C8A;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#specials:hover {
width:695px;
float:left;
padding:0 10px;
height:40px;
margin:5px auto 10px 13px;
background:#005C8A;
border:2px solid #005C8A;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#specials h2 {float:left; margin-top:8px; color:#005C8A; padding-left: 10px;}
#specials h2 span {text-decoration:underline;}
#specials h2 a {color:#005C8A; text-decoration:none; font-size:20px;}
#specials h2 a span {color:#005C8A;}
#specials h2 a:hover {color:#fff;}
</style>
</div>
Well, the :hover is applied to the containing <div> element, not the individual <a> elements, which is what you'll need to do in order to show the hover effect on only that portion of the button.
I've created a fiddle to show how you might do it: http://jsfiddle.net/TJG8G/
EDIT
What I did...
Best bet would be to diff your original CSS and mine but the main points are:
No :hover styles on the container. Apply the :hover CSS from the container to the <a> elements instead.
Set the <a> elements to display: inline-block
Muck about with the padding and line-height <a> elements and remove the padding on the h2.
Adjust the border radius rules on the individual A elements (so that the left A only has a curve on the left and the right A has the curve on the right.) This also required adding a class to the second a.
If I understand your issue correctly, you want the blue background to only show up on the link you're hovering over.
In that case, a simple solution that may work for you is to move the background color from the container hover to the link hover.
Example Fiddle
CSS:
#specials:hover {
// existing styles
// background:#005C8A; <- remove this
}
#specials h2 a:hover {
color:#fff;
background:#005C8A; // <- add it back here.
}
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}
On my website, the titles above the thumbnails do not show in any version of IE.
As usual everything works fine in every other modern browser.
the html for a thumbnail is
<div id="s1" class="stumb">
<p>Emily Cotton</p>
<img alt="Emily Cotton" src="img/thumbs/ect.jpg">
</div>
the css is
p
{
margin:-20px 0px 0px 0px;
font: 11px OpenSansRegular, Arial ;
background: rgb(235,235,235);
text-align: left;
padding:0px 2px 0px 2px;
}
and
.stumb
{
margin:-20px 0px 0px 0px;
font: 11px OpenSansRegular, Arial ;
background: rgb(235,235,235);
text-align: left;
padding:0px 2px 0px 2px;
}
I tried alternative css, removing the negative margins but this did not work. Besides IE should be able to deal with these negative values anyway. I'm at a point where i am going mad with all the alternative versions floating around, all of them still not showing in IE. My conclusion is that the solution must be so simple that i am blind too it.