I am working on the following page: www.darksnippets.com
It looks good on FF and chrome but on IE6 the width looks terrible for the home page and other pages. for example: http://www.darksnippets.com/?page_id=62 on IE6 is extra wide.
I cant seem to fix this issue. I know the site is using tables rather than div's but I've grandfathered this in. Would just like some ninja style IE6 fix.
use this :
<body>
<!--[if IE 6]>
<div id="ie6">
<![endif]-->
yourcode
<!--[if IE 6]>
</div>
<![endif]-->
</body>
in your css file do this
for example you have this :
<div class="header">content</div>
the normal css would be :
.header{width:100px;}
and if you want to ajust it for ie6 you should do :
#ie6 .header{width:120px;}
so this code :
.header{width:100px;}
#ie6 .header{width:120px;}
would make your header 100px wide in most of the browsers and in ie6 it would make it 120px.
Don`t forget. Use Css
The first table in your code has a 100% width. Shouldn't be too tough to set it's width to 800px (or whatever your page width is) and center it so stuff doesn't break out of that.
Related
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 :)
I'm trying to thoroughly understand browser behavior and at the moment specifically floats.
With the following simple code I would expect the div to float to the left of the text:
<span>Some span (inline) text</span>
<div class='a'>Floated div</div>
with the following css:
div.a {
background-color: red;
width:100px;
float:left;
}
On most browsers it does what I expect, but on IE7, the span text appears on one line, the floated div on the next - see the following jsfiddle: http://jsfiddle.net/FtYYZ/
Can someone please explain what is going on in terms of browser layout? My understanding was that "Floated elements are taken out of the normal flow and placed to the left or right". I would have thought nothing would have taken the normal flow from the end of the first line, so the float should stay on that line, as most browsers do. What is the logic behind the IE behavior?
Thanks for your help!
To be honest, IE 7 is only 1% of the browser share.
To handle this I would put the follwing in your body element.
<!--[if lt IE 8]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser.
Please upgrade your browser or activate Google Chrome Frame
to improve your experience.</p>
<![endif]-->
No need to be encouraging IE 7 use.
As usual, we have an issue in IE.
For whatever reason, the header is not appearing at ALL in IE7.
http://stevens.usc.edu/innovationatUSC/
Any help at all would be appreciated!
Insert this code in the head element:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also, you should add as part of your css reset a 'display:block' for all html5 elements so that IE knows they are block elements:
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
IE7 doesn't understand HTML5 elements, you need a "shiv", here's where you can find it: http://code.google.com/p/html5shiv/
As described in the Dive Into Html 5 the tag is not supported by default in IE7.
http://fortuito.us/diveintohtml5/semantics.html#unknown-elements
Try setting a width on the header element.
You have a ".header {width:960px)" in your stylesheet but this isn't affecting the header element as it's not a class so it should just be "header {width:960px)".
It should probably inherit the width from it's parent element #page, but with IE you just never know.
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 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 ;