<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<fieldset class="fieldset_New_border">
<legend> Specimen Actions</legend>
My Table Goes Here ..............
</fieldset>
.fieldset_New_border{
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius:25px;
}
Is there any specific way to get IE9 to show border-radius?
Its working fine on mozila and on other browser.
I cannot seem to get it to work myself.
Please find below two files. Is there any wrong in that.
Same Code is working with curved border on other browsers but not working on ie 9.
first : add a background or border-color,
second: this should work without "x-ua-compatible", in IE press f12 and have a look at the documentmode and browsermode and have a look on the dozens of questions asking for the same
Rounded corners on fieldsets will not work in IE v9 and lower versions. Try changing that to div and see what happens.
Related
I tried adding a conditional css style for Internet Explorer but it isn't working.
I've tried
<!--[if IE]><style type="text/css">nav{letter-spacing:.5px}</style><![endif]-->
<!--[if IE]><!--><style type="text/css">nav{letter-spacing:.5px}</style><!--><![endif]-->
Neither work.
The blog is http://costumingdiary.blogspot.com
Notice the links at the top of the page. They fit okay in Chrome, but IE widens the letter spacing too much. In Chrome, the link text is centered with extra spacing on either end. In IE, the text stretches all the way across to fill the space. If I change "About" to "About Me", the text will overflow to a second line in IE but not in Chrome.
Any help to set the conditional please? Thanks.
UPDATE: The fact that IE10 doesn't support conditionals is the big reason why I've given up on this. There is no simple css way to fix this. Adding javascript has proven to much for me. Actually adding javascript defeats the purpose of me removing (by way of adding comment tags) as much "unremovable" Blogger imposed script from my blog as possible. I guess I'll have to live with the stretched-to-the-max IE text. :(
Why do you think that conditional comments syntax is wrong? See full description of comments syntax, in your example all is right.
I get html source code from your link - there is no conditional comments where, but has big html comment with script which contains encode conditional comments(!)
You can use the below conditional for anything below IE9:
<!--[if lt IE 9]>
<script src="path" type="text/javascript"></script>
<link href="path" rel="stylesheet" type="text/css" />
<![endif]-->
If you want to target other versions of IE you can look here.
--EDIT--
You will need to add a HTML5 polyfill to enable support for the <nav> element on IE8 and below.
You could use Html5shiv or Modernizr
Your Body CSS rule has a letter-spacing:1.2px; That determines the spacing between your characters. I am looking at the page in Internet Explorer and Chrome and the fonts seem to render pretty closely to me. Also do not assume font rendering between platforms is consistent. If you develop on a MAC for example, they use a completely different font rendering sub-system than Windows for example. So test Chrome on the same system as IE. Also do NOT assume IE 8 is the same as IE 9 is the same as IE 10 or 11.
body {
background-color: #294A63;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing: 1.2px;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: auto;
overflow-y: scroll;
}
Im using a rockettheme template and have edited some of the css code using a custom css file.
I have managed to get it how I want it to look on Firefox and Chrome however IE looks werid. the navigation is too low (the buttons) and the header is also too low.
The website link is found below.
http://www.colmanprint.co.nz/rfloorings/
as you can see on the link the menubar is down too low and the header.
at the moment im using a css code edit .rt-menubar {padding: 0px !important; margin-left:210px;} when i remove the margin-left:210px; it fixes my problem but then the menu goes behind the logo on chrome and firefox.
so i pretty much need to keep the margin-left:210px for chrome and firefox but have margin-left:0px for internet explorer
any ideas would be great!
For versions of Internet Explorer up to IE9, you could use conditional comments to differentiate between IE and other browsers.
Here's a quick example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie9-and-below.css" />
<![endif]-->
Then in ie9-and-below.css you could apply a style such as:
#ieParagraph.rt-menubar {
margin-left:0px;
}
Where your HTML could look like so:
<div class="rt-menubar" id="ieParagraph">
<ul>Other stuff here...</ul>
</div>
If no styling was applied in your other stylesheets to #ieParagraph where the class was also .rt-menubar , this would only change the left margin of the #ieParagraph div to 0px in IE9 and under only.
For IE10, conditional comments have been removed - look into using Modernizr for feature detection.
My page is at http://jerswebempire.com/ovrtur/index.php
The page displays nearly perfectly in all browsers except IE8. In IE8, floated divs have incorrect margins. For example, you'll see the search bar at the top is sitting underneath the nav. However, if you open the page in Chrome or Firefox or IE9, it's displaying in the correct spot.
What am I doing wrong?! I can't seem to find a fix.
Also, the box for Latest Video is in two columns in all browsers but IE8. It's similar to the above problem where there is a left margin added that shouldn't be there.
The page was built with Bootstrap.
Any help would be appreciated.
Use ie conditionals between your index
<html> </html>
add a class to for the 'ie 8 only' margins like the html boilerplate does.
Load a custom ie 8 only stylesheet and play with the margin problem there like this:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-only.css" /> <![endif]-->
Or load a class where you need it.
<!--[if IE 8]><html class="ie8 lt-ie9"> <![endif]-->
Apply the ie conditional class to whatever you need.
<div class="floatedDiv ie8"
CSS
.ie8 { margin:0px; }
I can't debug on ie8 but I searched and found that there is in fact a negative margin bug on ie7/8.
They recommend using
zoom:1, position: relative
as a workaround.
I have just created an HTML5 page with a background image in the top center.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Example</p>
</body>
</html>
With the following CSS:
body
{
background-image: url('images/bg.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 36px 0 0 0;
}
But I have spotted a problem in Firefox 12.
No matter how much I shrink the browser window, the HTML element never falls below 376px. This causes the background position to no longer appear in the center, but instead it looks like it is right-aligned (and then crops the right-hand portion of the image).
In Chrome, Opera and Internet Explorer it works as expected, but in Firefox I get this strange behaviour. I have added a screenshot of all four browsers showing this page.
UPDATE
This seems to be related to the size of the toolbar in the browser as the width it stops at is identical to the width of the browser toolbar. A colleague has just tried it and his toolbar is 427px and it stopped at this value. I presume this is a Firefox bug.
Your code shrinks properly in Firefox 12 for me.
I think it's one of your addons causing the problem. So you might want to disable a few and see if the problem goes away.
Also, try running Firefox in safe-mode and seeing if the problem exist.
"C:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode
I think I resloved problem with Firefox. Check my answer to the same topic here and give me feedback if it was helpful ;) I don't want to paste the same answer in two places ;)
It looks like this is a genuine bug in Firefox, so I have raised a bug.
I've been doing some cross browser testing for a webpage I'm working on for a client, and things are going pretty smoothly so far. However, I'm noticing a lot of white space showing up only in IE8 at the bottom of my #main div. I've tried removing the padding at the bottom of the div using an IE8-specific stylesheet, but it's not removing the gap. Developer toolbar shows that the style is being applied, and before trying the IE8-specific sheet, I removed the padding via the developer toolbar and it worked fine, but once applying the actual style it doesn't. I'm not seeing this bug in any other browser, and so far I've tested with: Firefox (OS X/Win XP), Safari (OS X/ Win XP), Chrome (OS X/Win XP), Internet Explorer 7, and Internet Explorer 8. I've also tried negative margins, and just moving the boxes down so there's less of a gap on both sides. Neither seem to move the boxes at all. So, its a bit confusing. Here's a pic of it in IE 8:
And here's how it shows up in any other browser (this screenshot is from IE 7):
The site can be browsed live here.
Any help is greatly appreciated!
#David Savage: Putting in
<!--[if IE 8]>
<style type="text/css">
#small_boxes {
overflow: hidden;
padding-bottom: -150px;
}
</style>
<![endif]-->
Just before your closing </head> fixes the issue for me.