This is my site
www.landshoppe.com
My links and searchbox in the over laying divs of the header portion with background image is not clickable in IE 8. Is this an inherent IE Z-index problem ? (Though I have given a Z-index 5 for the searchbox div). Or is this a position issue ? (I have assigned position relative to the div).
The page validates in W3C validator. So no html errors.
Where is the glitch ?
You should create a specific stylesheet for IE. Reference it using conditional comments like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/styles/ie.css" />
<![endif]-->
And add in the CSS - for the clickable area - these attributes:
A background color (any color, it does not matter). E.G.: background-color: #000000;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
This solved it for me!
#Consta Gorgan I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
Related
I'm trying to place two divs over the top of an existing website, as in this image:
I can do this fine in firefox/google chrome etc, but it doesn't seem to work in IE.
Could someone point me to a simple example of how to do this?
put the following code in your head and change position:absolute back to position:fixed in your css
<!--[if IE]>
<style type="text/css">
.black_overlay {
position:absolute;
top: expression(document.compatMode=="CSS1Compat" ? document.documentElement.scrollTop+"px" : body.scrollTop+"px");
}
</style>
<![endif]-->
Your only option is to really emphasize using z-index.
Z-Index is like applying layers to your HTML, in which case you may have a layer on top, in the middle, and on the bottom. Hence 3 divs positioned like layers.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here I updated the css. Instead of position:absolute; I used fixed so that is doesn't move with scrolling.
http://jsfiddle.net/5V288/9/
I'm using this sticky footer in my website:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
It is fully working in Firefox, Chrome, IE7, but not IE8. In IE8 the scrollbar appears but doesn't work, and I don't have any other way to move down. I'm using the conditional statement that appears in the web:
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
Sorry, but I can't post an address, I don't have a server online right now with the web.
Thanks to Alec,
I decided to retry to move the code back to the basics. But this time, I consider that maybe it was related to other CSS I had in my website, bingo!
Finally found the CSS rule that was making the scrollbar unusable. I was using a gradient color for the background of the body:
body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52a0d6', endColorstr='#024f7c');
}
Now I'm using an image for the background and the scrollbar is working and the sticky footer is right where it should be.
I'm building a page which works fine in all browsers except IE6, where a small space appears below the cart. The background also has a gap in IE6, so I'm wondering what might be causing that, as it's probably related to the main issue.
If anyone could help I would really appreciate it! Many thanks.
Hi add this in your style file
#navigation {
width:736px;
height:auto;
background:url(../images/nav.gif) no-repeat;
float:left;
}
Have you tried adding a ie6 only stylesheet? Add this to the head tag and then add the appropriate styles to the css document and they should only apply to ie6.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6_xxx.css"><![endif]-->
I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
You can see the webpage here. {website link not available}
Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.
aside, article, section { display: block; }
Adding this rule to your CSS will solve the problem.
To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.
I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.
I had a problem with "figure" element, not showing background image. so i overcome the problem with this...
background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;
This didn't work...
background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;
I want to have a textarea that's 500px, this is the CSS I use for the textarea:
width: 498px;
padding: 0px;
margin: 0px;
I noticed IE and Chrome have a 1px border by default, on the other hand FF have a 2px border which results the textarea to be 502px instead of 500px, any workarounds?
Just a note, I could explicitly specify the texarea border width, ie. border-width: 1px, but the problem here is that it doesn't work nicely with IE (the default textarea border in IE doesn't visually look ok when the border is set to 1px), I could change the border color but I don't want to do this, I prefer to keep the default browsers styles, I just want the width to be the same in all browsers without changing the default styles or setting a color to the border, is this possible?
You can set all of your browsers' default styles to be the same by using a Reset CSS sheet at the top of your document. I like the YUI reset CSS myself. That should set the base styles for all of the controls to be the same across all browsers to begin with, and that should allow for a more predictable layout.
IMO if you let each browser have its own style (which can even be customized by the user!) , you're on the road to having an unpredictable style for your application, with problems popping up in places you never thought they would. Better to use a reset CSS and then style your applications accordingly. If you checkout yahoo's site (referenced), they'll also have their own "base" CSS that you can start from, which is pretty cool.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
We tend to create separate style sheets for IE and FF to get around their 'quirks'. A simple bit of code can then be used to ensure the correct style sheet is used.
<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->
There is also
works for IE 6
etc...
we use jQuery to decorate our html elements and let it deal with cross browser issues.
In essence you are deploring that the browser defaults are not the same with every browser but don't want to change those properties yourself directly.
This does not make sense.
Like others I'd recommend using a reset stylesheet (I'm a big fan of Eric Meyer's) and then style the borders exactly the way you want them. Easy. Clear. No downsides.