I'm having some problems with my page, I'm using less css and one of atributes css is the line-height is not working so very well. On all browser appears the same mode but on the IE it appears different.
This is the problem:
If you take a look. will see that the IE shows the text more higher than the checkbox on IE
I'm using a variable to define the line-height, so I'm wish know if exists some hack or trick to use two values to the same variable (i.e line-height = 20 - if any browser, line-height = 25 - if IE browser, or some way to resolve this issue.
I just want align the checkbox and the text.
You could try
<!--[if IE]>
<style>
</style>
<![endif]-->
Related
I'm looking for a way to append styles to my stylesheet dynamically with Javascript.
In today's browsers, I can use this for example:
<style>
#id{background-color:#F00;color:#000;}
</style>
<div ID="id">Test1</div>
<div ID="id2">Test</div>
<script>
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
</script>
The above would change the color of Test from black to blue because of the javascript, but this code does NOT work with older browsers such as Internet Explorer 7.
In Internet Explorer 7, I narrowed the problem down to the fact that it produces a javascript warning symbol at the bottom left corner when it is expected to set the innerHTML value of the style element.
I tried replacing:
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
with:
document.getElementById('ID').appendChild(document.createTextNode("#id2{color:#00F}"));
and I'm still unsuccessful.
I need javascript for this because I want to set the background image for multiple elements at once, and by ramming in CSS code, I can call the image only once. If I used native javascript properties for each element, then I'm going through numerous elements as well as requesting the load of the same element numerous of times, and if IE is bad with caching, then burden will be placed on the server.
What can I do in Javascript to append CSS data to the style element that works with IE 7? I'm looking for something simple.
Well, I went back to the olden days, and managed to pull this off in IE 7:
document.write('<style>'+d+'</style>');
the variable d is the actual rules to insert.
I understand this is a slower method as it creates numerous <style> tags which is bad HTML practice, but the idea works in IE7.
Since IE8 doesn't handle PNG 24 transparencies very well, I decided to nix the background image of my PNG's container div so that the background matches the background of my PNG.
Basically, I want to get rid of the background image for #myDiv in IE8 or earlier browsers.
In the header of my page I use:
<!--[if lte IE 8 ]> <style>
#myDiv{margin-top:20px;}
#myDiv{background-image: none;}
</style> <![endif]-->
Changing the margin-top works fine (along with all other adjustments that I made for IE8). Yet the background image still appears, no matter what I try! Short of getting rid of it in my external style sheet, I can't seem to make it not appear.
In fact, when the page loads, it looks like the code initially gets rid of it, but it comes back. I thought that inline styles always trump the external style sheet. Am I wrong?
I checked my css #media stuff, and there's nothing in there that might bring it back. I cleared my browser cache and refreshed. Still there.
Anyone have any clue why #myDiv's background image keeps coming back?
EDIT: I'm working in the header.php template of a wordpress site. (That's where I inserted the code above.) So maybe the external style sheet does indeed trump inline styles in this case?? I don't see why it should, but could that be the answer?
I know it's not a perfect solution, but would adding the background image as a media query work (as IE8 does not support media queries)?
#media (min-width: 1px) {#myDiv{background-image:url(/etc/etc/etc.png);}}
Try using this code:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also make sure your background image is at least 4px x 4px
Here is a related post:
PNG background image not showing in IE 8< using html5?
I am working on www.doublegbobcat.com/preview and I have used a header element. Things are displaying as intended, except in IE8, where the header seems to be getting hidden on the z-index behind other content. How can I get the header element to display in IE8 the way it is in Chrome?
thx
The header element isn't showing up in IE8 developer tools, even though you've declared the new HTML 5 elements for IE lt 9
Instead, try including the HTML 5 "Shiv" script in your <head>
Link to script
More info
IE8 will not accept the HTML5 tag. You'll need to use conditional statements to replace it.
http://fortuito.us/diveintohtml5/semantics.html#unknown-elements
I have run into a problem with absolute positioning on elements in IE8 when printing.
I have my print stylesheet, and in this I'm trying to position an element in the top right corner of the first printed page.
The problem is that when the element is placed on page two, IE8 thinks that the top of the page in on page two, instead of page one.
This is in my print.css:
.myElem{
position:absolute;
top:0;
right:0;
width:230px;
}
In all other browsers (Opera 11, Firefox 3.6, Safari 5, Chrome 11, IE9, IE9 compatibility mode, IE8 compatibility mode) the .myElem-div will be printed on the first page in the top right corner. But in IE8 the div is printed in the top right corner of the second page. As said before the div is located "on the second print page" in the DOM. I can't move the element up earlier in my DOM, so this is not a solution.
Actually it's the same problem as descibed in the comments by other users here: http://msdn.microsoft.com/en-us/library/ms533005%28v=vs.85%29.aspx#CommunityContent
Anyone have a solution to this?
Thank you very muvh in advance!
Regards,
Kim
Two possible workarounds... not really fixes.
Create printer-friendly versions of the pages that do not require a doctype, which is probably causing IE8 to choke. Of course, this is a lot of work... unless you do not have too many pages or you can generate those pages dynamically using server side tech.
Create an IE8-only stylesheet using conditional comments, example <!-- [if IE 8]> <link rel="stylesheet" type="text/css" href="ie-8.0.css" /> <![endif]--> and use this sheet to remove that div altogether with a display:none;, assuming that you could do without it.
I am having issues with Firefox rendering text differently to every other browser when negative letter spacing is applied:
h2{font-size:1.6em;font-weight:bold;color:#999;letter-spacing:-0.10em;}
<h2>Time</h2>(approx)
Here is the text rendered in most browsers: http://img707.imageshack.us/i/font2x.png/
Here is the text rendered in Firefox: http://img444.imageshack.us/i/font1.png/
Edit: They are direct screenshots, the images are the same resolution.
Any ideas on how to fix this issue?
I don't know why, but if you use pt instead em in your font-size declaration (but keep em for letter-spacing, Firefox should render your text as the other browsers do.
h2{font-size:18pt;font-weight:bold;color:#999;letter-spacing:-0.10em;}
Add the declaration width: 100%; to the h2 rule to trigger layout in the "other" browsers.
I got it fixed by resetting the css. Just add the below link to your html head.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
More information can be found here. http://developer.yahoo.com/yui/reset/