ie9 vs chrome ie causing problems changing header - html

but having problems viewing it on ie.
how can i make my code good for ie
what is the best way
this is an example
http://jsfiddle.net/Jntuw/
might be
h1 {
color: #A9218E;
font-family: 'LeagueGothic';
font-size: 2.9em;
}
the header changes in ie9
sometimes the border shows lines.

You could try something like this:
Just put this in your header!
<!--[if IE 9]> IE 9 style content goes here <![endif]-->
Target IE9 Only via CSS

Take out the inline styles and add to your stylesheet.
Style the table in the CSS.
table {border:0;}
th {}
td {}
http://www.w3schools.com/css/css_table.asp - this should help

Related

IE9 conditional statement not working?

I have created a very simple Wordpress theme for my university for Blackboard news/updates/mtc.
The theme looks great in the latest versions of Chrome, FF, and IE10. However there is a weird glitch in IE9. The reason I must support IE9 is because that is the browser that Blackboard recommends using for functionality purposes (when someone insists on using IE). My supervisor wants the blog to look the same in IE9.
So, my main menu looks fine, padding is fine, and no collapse when resizing the window; here is the class that is causing me problems in IE9 ("Home" menu padding is cut off; the menu collapses):
ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
So I try to add a conditional statement of:
<!--[if IE lte 9]>
<style type="text/css">
ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
</style>
<![endif]-->
However the conditional statement, even though nothing has changed, messes everything up in both FF and IE9.
Even if I mess with some of the elements in the conditional statement ideally to trial/error a fix/hack, it still looks like nonsense and is messed up.
What am I doing wrong? And can anyone suggest a possible fix?
The link to the live blog, (I am working on fixing this on my local machine):
http://blogger1.uhcl.edu/UCT/blackboard/
TIA
The two most obvious problems are:
a) You need a space between IE and the version number, e.g.
<!--[if IE 9]>
While you're at it you may as well make it less than or equal to IE9, i.e. <!--[if IE lte 9]> as it happens in (at least) IE8 too.
b) You need to close the style tag within the conditional.
That said, the -15px left margin seems to be the cause of the issue; not quite sure why that's required.

Different line heights using inline-block on IE7

I am creating a webpage to work in IE7. I want to vertically center a span (which may be several lines long) in a speech bubble. I have achieved this in modern browsers by setting the line-height property of the span's parent to the height of the span's parent itself. The span is then given the display property inline-block, its line-height property is set to something which corresponds to its font size and its vertical-align property is set to middle. However, when I try to view it in IE7, the line height of the span's text seems not to be that of the span and instead is that of the span's parent. It is as if the span did not have the inline-block display property as this is what you would expect if it was inline. As the span element is inline by default, you would expect the inline-block property to work in IE7 but it does not. I have tried applying things like zoom: 1; and the 'cross-browser inline block' suggested by css-tricks but none of this works. I am seriously considering using a table but that is really not something I want to resort to.
You can take a look at the issue at http://jsfiddle.net/sAuhsoj/bWdwE/ (you may want to view the fullscreen version http://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/ using browserlab.adobe.com to see how it looks in IE7)
To target IE7 with a CSS hack, you can add this display rule:
*display : block;
a so written *property is processed by IE7 and lower only.
May i suggest you to use conditional comments on <html> tag?
Personally, i use:
<!--[if lt IE 8]> <html class="ie ielt8 ielt9"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 ielt9"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie10"> <![endif]-->
<!--[if !IE]>--> <html> <![endif]-->
Then i can target any IE browser this way:
.ielt8 .anyClass {
/* any rule here will effect ie7-6 only */
}
.ie8 .anyClass {
/* any rule here will effect ie8 only */
}
.ielt9 .anyClass {
/* any rule here will effect ie6-7-8 only */
}
.ie9 .anyClass {
/* any rule here will effect ie9 only */
}
.ie10 .anyClass {
/* ie10, for future reference */
}
.ie .anyClass {
/* any ie but 10 */
}
That's really easier and you don't have to use hacks, which is better for validation and will exclude any future possible interference.
In your case, you could set up a completely new style for IE7, like
.userQuote .quoteText {
display: block;
line-height: a pixel value;
}
The issue in this particular case is the use of the rem unit on the line-height attributes.
By simply changing rem to em, it solves the issue in IE.
http://jsfiddle.net/bWdwE/2/

IE8 not outlining textbox

In IE8 when I set the border of my input fields like that:
input {
border: 0;
}
There is no border around the input fields like desired, but I would like an standard outline like in Chrome or Safari whenever the focus is on an input. Now, I could add a border via pseudo class :focus, but I do not want that pseudo class apply to browsers that already have a standard outline.
How can I accomplish that?
EDIT: I just found out that :focus is not working in IE8. I have to add a DOCTYPE to get it working.
To target ie8 specifically you can use this method
Add an ie8 class to your html tag and inherit from that.
On your html tag
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
Your css
.ie8 input:focus {
//your styles
}
You can include the style in a conditional CSS stylesheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Then in that external stylesheet, include your CSS like:
input:focus { border: 1px solid golden; }
focus should work in IE8. Add the doctype and see.

how come my IE conditional statements do not work inside style tags?

I'm trying to use the IE specific conditional statements to alter class settings based on browser type. I was under the impression they could do this but I can't seem to get it working.
Below is a simple example, if the browser is IE the text should be blue, otherwise text should remain red.
"The browser is IE" statement in the body works fine, if I open firefox it's not there, internet explorer.. it is.
What am I doing wrong?
<html>
<head>
<style type="text/css">
.class{color:red;}
<!--[if IE]>
.class{color:blue;}
<![endif]-->
</head>
</style>
<body>
<!--[if IE]>
This browser is IE
<![endif]-->
<p class="class">Color changing text based on browser</p>
</body>
</html>
Firstly your code doesn't work - you should have the css read .color not .class
Second the conditional statements just don't work inside css. So instead write your code such that the conditional is around the IE specific styling.
<html>
<head>
<style type="text/css">
.color{ color:red; }
</style>
<!--[if IE]>
<style type="text/css">
.color{ color:blue; }
</style>
<![endif]-->
</head>
<body>
<!--[if IE]>
This browser is IE
<![endif]-->
<p class="color">Color changing text based on browser</p>
</body>
</html>
Apparently they don't work within the style tag. (see here: http://reference.sitepoint.com/css/conditionalcomments)
It appears you can use them within the head tag, though, and include an external CSS file if it is IE, and hide that css file if it is another browser.
If the 'hack' is targeted on IE6 or older you can however also do as follows:
.color {
color: red;
}
* html .color {
color: blue;
}
Note the "* html" prefix. This is only parsed by IE6 and older. You can also use the "!important" declaration. The particular line would then be ignored by IE6 and older.
.color {
color: red !important;
color: blue;
}
If you have relatively a lot of them, a better practice would be to load an additional CSS stylesheet file using the conditional statement.
you can also do color: red;_color:blue;

Internet Explorer: Broken Underlines

I'm having some trouble getting this layout to work correctly in IE. The problem is that when I have a bit of small-caps, underlined text, an image with vertical-align set to middle breaks up the underline. Lower case letters have their underline shifted down. See the picture.
This looks fine in Firefox, Chrome and Opera, but it's broken in every version of IE that I tried, including 8. This happens for underlined links as well. Here's the code:
<html>
<head>
<title>Test</title>
<style type="text/css">
img { vertical-align: middle; }
span { text-decoration: underline; font-variant: small-caps; }
</style>
</head>
<body>
<img src="pic.png">
<span>Abc QWerty AbCdEfGhIjKlMnOpQrStUvWxYz1234567890</span>
</body>
</html>
Thanks for any suggestions.
If you don't care about CSS validation adding a zoom:1 declaration (or any other hasLayout invoking declaration) to your span style will solve the problem (in IE6/7 at least).
I also haven't managed to get this to work (zoom:1 does nothing for me). I now resorted to using border-bottom instead of underline...