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.
Related
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
I've used something which isn't working at IE7. That's why, I wanted to write some specific css for ie7 and lower only. That's why, I wrote IE comments tag inside html tag. But, it's not working. I wrote at first:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="sites/css/ie7-and-down.css" />
<![endif]-->
But, it's not working! I haven't ie7. I had to check via developers tool of IE. I thought, at developers tool, comment tag doesn't work. That's why, for checking I wrote comment tag for all IE such as:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="sites/css/all-ie-only.css" />
<![endif]-->
But, still it's not working!! I don't understand why it's happened. This is the website. I need to replace navigation for IE 7. the navigation is defined at my main stylesheet such as:
.modern-menu {
display: block;
}
I need to remove this at ie so that I wrote at my ie specific styleshhet such as:
.modern-menu {
display: none;
}
some HTML CODE of the websites:
<ul class="modern-menu>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
style.css:
.modern-menu {
width: 920px;
height: 40px;
width:99%;
font-family: 'SourceSansProRegular',Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 13px;
float:left;
font-weight: normal;
position: relative;
clear: both;
margin-top:0px;
display: block;
}
all-ie-only.css:
#charset "utf-8";
/* CSS Document */
body {
background-color: #0099FF;
}
.modern-menu {
display: none;
}
.nav {
display: block;
}
Can you please tell me Why this comments tag not working?
In the MS IE developer tools, you can set the browser and document version. Maybe you have just set the browser version.
In Internet Explorer 10 HTML conditional comments are not supported when the page is in standards mode.
http://en.wikipedia.org/wiki/Conditional_comment
Make sure that both buttons above the developer tools window display IE 10 to get a similar result as in the original MS IE 7. The only way to really test what happens in IE 7 is to use an IE 7 (for example in a second Windows test installation inside a virtual machine)
I've been scratching my head looking for a solution to this "common gap problem".
Here's what the page's like in Chrome & how the page is like in IE9 https://dl.dropbox.com/u/3788693/Work/example.jpg
Here's my HTML file: https://dl.dropbox.com/u/3788693/Work/01index.html
I've read lots about using and applying
Setting position:relative on the header block.
Setting position:absolute; top:0; right:0
#header img { display: block }
But it just doesn't seem to show any change in IE. Perhaps i'm applying the wrong things in the wrong place? Anyhow, why is it different in IE in the first place?
In your conditional comment for IE you're using
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
Removing padding-top: 30px from .twoColElsLtHdr #sidebar1 and padding-top: 15px from .twoColElsLtHdr #sidebar1 will take care of the gap you're seeing.
I have a form select element with the following CSS:
border:solid 0 #000;
background: transparent url("../images/input_fld.png") no-repeat;
height:42px;
width:275px;
padding-left:10px;
padding-right:0px;
font-family: monospace;
This generates the select box like this:
Webkit
Moz
IE
How can I fix this?
I tried adding this for IE:
<!--[if IE]>
<style>
form select {padding-bottom:10px;}
</style>
<![endif]-->
And while this does fix the issue of the text being bottom aligned, it introduces the issue of also pushing the down arrow up by 10px.
If you're not averse to using a JQuery plugin, you can trying using http://www.verot.net/jquery_select_skin.htm. You'll have to style it a little bit but that's fairly simple.
The plugin doesn't have support for IE6, but I believe that's always for the best :) Also, try adding a line-height to your CSS, equal to the height of the select box, in this case, 42px.
Hope this helps.
Below is the CSS style this div is using. The div itself
is nested within a table. Basically IE displays this differently
from FireFox and Chrome. I like the IE rendering better
and it seems more inline with what I am seeing in dreamweaver,
where as firefox and chrome will display the div wider then
it's in IE and dreamweaver for some reason.
I haven't designed anything in a while but it's sad to see
that we still have these rendering differences between browsers,
is this still the case with HTML5/CSS3 ?
.Class420 {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#000;
line-height:30px;
background-color:#F5F5F5;
width:400px;
text-align:justify;
padding:15px;
float: left;
margin-left: 15px;
height: 300px;
}
is this still the case with HTML5/CSS3 ?
Yes. And it's still Internet Explorer which is holding everyone back.