CSS style working in Chrome/FF but not applying in IE8 - css

I inherited a site that I'm working on finishing and there is this style applied to tags inside my footer (forgive me if I don't give enough info, just let me know and I'll put it up). The style puts a subtle background color around the header text and rounds the corners a bit:
h4 {
background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3);
border-radius: 8px 8px 8px 8px;
color: #5CB414;
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
padding: 12px 0 8px 10px;
position: relative;
}
This works great in Chrome and FF but in IE8 it doesn't work. And in IE8 it doesn't float the columns next to each other. Here is the site. Scroll down to the bottom to see the issues (should be 3 columns but in IE it is only 2 and there is no background style applied to the H4.
I know IE is finicky, but I don't know what to do about it. Any help will be greatly appreciated. Thanks!

as far as losing the 3 columns at the bottom simple replace the ".col" width:300px to width:292px; It's just barely too big.
Also with the rounded corners being crossbrowser compatible I like to get my styles from here: http://css3please.com/
I do not know that rounded corners will work in ie8 or less so you might try doing it with jquery instead of css3
http://jquery.malsup.com/corner/

Versions of IE prior to 9 don't support RGBA or border radius, so these are simply being ignored. You can try the cross-browser syntax at http://css3please.com, but this won't give you rounded corners in versions of IE prior to 9.
Your column float issue stems from the use of an nth-child selector on line 1454 of your style.css:
.col:nth-child(3) { margin-right: 0; }
Again, IE8 and lower don't support this so you'll have to find a work around. You can add a class of "last" to the third column, and place this in your stylesheet:
col.last { margin-right: 0 !important; }

Related

How do I make my inputs stay uniform on all browsers all devices - if possible?

I have some issue which only encounters my iPad Pro 12.9, but not on phones or desktops.
🐞 on : Safari + Chrome + Firefox
input[type=text], input[type=email], input[type=time] {
color: white;
background-color: black;
font-size: 1em;
width: 100%;
border: solid 1px white;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
How do I make my inputs padding look nice on all browsers all devices?
Firstly you need to make sure your inputs aren't being over-ridden from another declaration which often causes the problem you have here, particularly in relation to the line-height and font-size properties. Set your line-height value to line-height: normal on your input elements. Using the input[] selector has a low specificity in the CSS cascade, hence why it could be being over-ridden.
If the above values aren't being over-ridden from a different part of your stylesheet you can use box-sizing:border-box, line-height: normal on your input elements. You'll most likely need to increase the padding value slightly to get the aesthetic look you require.
How about to use all: unset;
To be honest I found out about it just yesterday and not used it yet, but it seems to be widely supported.
Here is a small demo. Though, I used sass.
Screenshot from iPad Pro:
Screenshot from Chrome (on Linux):
You don't really need padding top and bottom within an input, so you can remove it, just use padding: 0 10px
If some browser do not vertically centres the text, you can equal the line-height with the height and that should be fine.
also apply a box-sizing: border-box; rule will probably avoid differences between browsers on how do they render paddings.

Box shadow rendering issues

I am currently working on a site which has an design where the main 'welcoming text' contains more than one line (as it is a short introduction about a product). This has an background of a transparant (0.7) white (rgba(255,255,255,0.7) with multiline padding. Yes, multiline padding I am saying. What that means, is that every line of text has top, bottom, left and right padding, background color and also a small transparent space between the lines.
To accomplish this, I used a box-shadow with an horizontal offset to simulate the left and right padding on each line. This does work on all browsers except Internet Explorer. As we want to have site working on all browsers I tried fixing this problem for a while now and I almost have come to the conclusion that this is just an internet explorer issue.
I used Geoff Muskett his example (http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/) and it does work as excepted except IE.
The problem is that when I open the page in IE, the box-shadows seems to be rendered somewhat blurry even though I set the blur to 0 pixels. (or just not added it, both did not work).
Even the code from Geoff his example does not work:
HTML
<h2><span>Could you benefit from having Alfi in your home?</span></h2>
CSS
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
Is there anybody here that knows this issue and knows if there is a solution to this that is not very hacky (not preferred)?
IE 11.0.9600.17905
EDIT
3 August 2015 09:32
I have been investigating this issue this weekend and found some posts of people having exactly the same issue as I am currently having. This seems to be a rendering bug in IE. See: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow
Also in another StackOverflow post, someone by the name of #nickmorss says using the box-shadow to accomplish the multiline padded text is not working in IE11 and FF34+. It could be fixed in FF using box-decoration-break: clone; but this does not work at my side.
I think this is something not fixable in CSS by myself as this may be just a narly bug.
I found this worked in IE11
body{
background-color: blue;
}
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255, 255, 255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
<h2><span>Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow</span></h2>
So I'm thinking that maybe your site is perhaps in quirks mode, or using a different rendering mode other than IE11.
Confirm that you are running in IE11 mode by pressing F12 and going to the emulation tab. Are you in the right document mode. If not you will have to fix your site to ensure it's using the right document mode.
Please note, that in the comments of that blog post it does mention it doesn't work in Firefox, but someone has post code that does.
Not sure if it'll solve it but try declaring your rgba values as rgba(255,255,255,0.7) I've not seen hex values used within rgba before and this may be confusing IE

button layout issue in IE8

my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com

Image corners using border radius property in Safari / Chrome not formatted correctly

Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}

IE8 lumps CSS styles together

I am debugging my app in IE8's developer mode and I'm running into some very strange behavior. IE8's dev mode usually displays every CSS style on a new line, but not in these cases... take three examples:
#1
.messages .read
background-color: rgb(234,234,234); HEIGHT: 1.5em
padding-top: 0.3em
#2
a:link
color : rgb(80,80,82); TEXT-DECORATION: none
#3
#messaging .body
border-bottom: rgb(...) 1px solid
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#C2C2C2'); BORDER-LEFT: rgb(...) 1px solid; PADDING-BOTTOM: 1.5em; MARGIN: 15px 0 25px; etc.
As you can see, these are three cases where IE seems to behave strangely, and especially for #3, I get some really strange artefacts, such as an ugly dark grey border around my gradient box.
Is there a known way of getting around this behavior?
Update - gradient artefacts fixed
#3 was fixed surprisingly easily, by adding position:relative; to that style. Apparently IE needs this in order to render its gradients properly.
I'm still interested in knowing why IE lumps some styles together on one line, and whether this quirk has any actual effect.
In the samples you give there are at least some missing semi-colons. This may very well be the problem here.
As suggested in comments: try to validate your CSS. Here's the one from W3:
http://jigsaw.w3.org/css-validator/

Resources