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.
Related
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)
Let's consider this fiddle (putting it on JSBin so it works in IE8):
http://jsbin.com/EpuboseG/1/edit
HTML:
<div id="outer">
<div id="inner">
<div id="notVisible">
I am not visible in all browsers (this is what I want)
</div>
1<br>2<br>3<br>4<br>5<br>
6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>
16<br>17<br>18<br>19<br>20<br>
</div>
</div>
CSS:
#outer {
overflow-y: scroll;
height: 150px; /*smaller than contents */
background-color: yellow;
width: 400px;
}
#inner {
position: relative;
top: -30px;
margin-bottom: -30px;
background-color:red;
}
#notVisible {
height: 30px; /* due to "top" in #inner I am invisible */
background-color: lime;
}
I have a negative margin-bottom in #inner which is compensated by the same negative top both of 30px. The result in all browsers is that the top 30px of #inner are invisible which is good.
Why I do have margin-bottom:-30px; top:-30px? In order to hide the top 30px of the inner div, and shift everything else up (as if the top 30px of the inner div never existed).
However the issue is that when I use the scrollbar, in IE9+ (IE9,IE10,IE11) I can scroll too far - at the bottom I can see a 30px empty yellow thing. This is not the case in IE8, Firefox, Chrome, Safari, Opera.
Basically any negative margin-bottom provokes this kind of behavior for me.
Is there any workaround for that?
Edit:
It seems that when I remove margin-bottom: -30px; but keep top: -30px, then the roles are switching, i.e. I see yellow background everywhere except IE9+.
You could have conditional statements for IE9, 10 and 11:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> // For IE10+
<style>
//rest of the styles
</style>
<!--[if IE]>
<style> //IE9+ specific styles here
</style>
<![endif]-->
<!--[if lte IE 8]>
<style> //IE8 and under specific styles here.
</style>
<![endif]-->
It'd add a few more lines of code, but it works. The meta forces IE10+ to adopt IE9 behaviour, since IE10+ doesn't support if statements anymore. The first if statement targets IE in general, and the second specifically targets IE8 and below. If the browser is IE9+, it'll ignore the second statement and use the styles from the first statement. If the browser is IE8-, it'll use the styles in the second statement. All other browsers ignore the if statements and use the original CSS.
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.
how can i use 2 image for the body the first background will be at the top with no repeat , the second image will be after the first one with repeat , in Firefox i can do that easily but my problem in IE
Attach one to html and another to body -
html{
background: url() repeat-y left top;
}
body{
background: url() no-repeat left top;
}
It's possible to add multiple backgrounds in IE using a proprietary filter
As taken from the linked site, the IE code is as follows:
<!--[if gt IE 7]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs, dont forget to insert your wrappers id */
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
zoom: 1;
}
/* Now lets make it IE8 Multi-background images */
#multipleBackgroundImages {
background-image: url(../images/lilys.jpg);
background-position: bottom right;
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')";
border: 1px solid black;
padding: 0 1em;
}
/* Fix for IE clearType */
#multipleBackgroundImages p {
position: relative; /* required to re-enable IE's clearType */
}
</style>
<![endif]-->
Use the below code. This supports all browsers including IE
body{
width:800px; height:750px;
background: url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg), url(http://www.google.com/logos/2012/india12-hp.jpg);
background-position:top, bottom;
background-repeat:no-repeat, no-repeat
}
You can get the detailed explanation here
use nested div's and apply one background for one and another for another
<div class="background-bottom"><div class="background-top"></div></div>
Its Simple you have to split the body into two seperate div's in that you can do that easily. top div and bottom div must have those two images as their background.
It may work in IE
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}