I have my site working perfectly in IE 6+ but it looks weird in IE 6 or IE 5.5, as I can't ignore the users with IE6 because still around 6% of traffic occur from this version. I am looking forward to have the alternate.
With my some research I came to know that by setting haslayout property, I can solve out formatting issue, but I consider myself extremely poor in CSS and hence I need a help of yours to rectify this issue.
You can find the URL below& you can see it's behavior in IE6, just in case if you are unable to test you can check it by viewing the source, please share your suggestions.
URL: http://anujtripathi.net/BlogListing.aspx?Id=2
Your code (default.css):
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
Try shrinking down 95% to like around 92%.
You can use a IE6 hack like so:
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
* html .bg1 {
width: 92%; /* Star Html Hack IE6 only */
}
*+html .bg1 {
width: 93%; /* Star Html Hack IE7 only */
}
But I highly recommend learning the right way and looking at the link below for organizing CSS for cross browser compatibility:
What is the best way to deal with IE compatibility issue?
I would look at your border widths, margins and paddings. It looks like your content is being pushed down because there isn't enough horizontal space. For a quick check, make your main container a little longer and see if the content shifts up.
Related
my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com
Being a web designer I hope to make websites that at least work in as many browsers as possible. I still try to design for IE 7 for those visitors only using IE and who don't know anything else. However I'm not too familiar id IE and it's spacing and it's hacks.
My website looks good, you can view it here, in every browser except IE. :s Thankfully it's only the footer now.
I'm hoping someone can give me advice and help me fix this hiccup and then maybe give me some references or articles about IE & it's spacing issues & hacks.
My footer doesn't work in either IE 7 or 8.
IE 7:
IE 8:
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; margin-top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89 !important; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
I've tried a bunch of different ways but I'm not sure whats happening in IE with this footer. If anyone can shed some light on what might be happening, it would be greatly appreciated!
you have an unclosed aside element for starters. if you view it in ie8 and use f12 developer tools you can see how the footer is now a child of the element. close that guy out....should help out.
I'm not sure of the root of the problem but instead of using "float: right;", using "position: absolute; right: -2px;" seems to solve the issue (also ensure #searchform has a relative position).
I have the following CSS class defined:
.box .login {
border: 0;
float: right;
clear: both;
height: 48px;
background: url(../images/submitr.gif) no-repeat right;
line-height: 20px;
padding: 12px 42px 16px 23px;
margin: 8px 22px;
color: #FFF;
font-weight: bold;
}
The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?
(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)
Thanks for the help! I really appreciate it :)
Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)
Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.
I'm attempting to do the following...
Here's what I've got right now.. but it's not rendering correctly. Does anyone have any idea as to how I'd fix this?
CSS
/* Curved Corners */
.bl {
background: url(bl.gif) 0 100% no-repeat;
/*background-color:#EFFBEF;*/
width: 700px;
margin-left: auto ;
margin-right: auto ;}
.br {
background: url(br.gif) 100% 100% no-repeat;
}
.tl {
background: url(tl.gif) 0 0 no-repeat;
}
.tr {
background: url(tr.gif) 100% 0 no-repeat;
}
.clear {font-size: 1px; height: 1px}
HTML
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<div id="header">
</div>
<div id="footer">
</div>
</div></div></div></div>
Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com
In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.
To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.
Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.
There's always curvycorners as well, it uses native css for speed if the browser supports it or falls back to javascript if the browser doesn't.
Can be done easily with jQuery rounded corners rounded_corner
$(document).ready(function(){
$("#b1").corner();
});
You don't need to worry about cross browser issues with jQuery approach.
A fantastic summary for all major browsers, telling you how to round each corner or all corners:
http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/
Instead just put this code in the class where you want to have rounded corners .it will definitely work.
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
IE6,7 are givimg me grieves on browser display. I didnt have prblems with Safari nor FF.
I'm not a CSS expert and in need of advice for this column alignment issues on IE.
And I don't know where to begin because I've tried messing around with the css files and the css browser selector javascript and still I can't get it to work on IE.
The problems I believe center around id doc, bd, yui-main, yui-b, box and box-titles.
For unclear reasons, the sizes show differently in IE from other better browsers.
The sizes width and height values are different.
<body>
<div id="doc" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id="header" class="yui-g">
<a href="index.php">
:
:
unfortunately, the 2 css files are a little overwhelming over me to understand.
I tried pasting it here but the format got out of whacked.
Could someone lend a helping hand ?
Any help is appreciated.
app.css
body {
font-size: 85%;
font-family: "georgia";
}
.yui-t2, #bd, #yui-main {
z-index: -5;
}
.yui-b, .yui-g {
z-index: auto;
}
div.yui-b div.box {
color: #333333;
border: 1px solid #c6e1ec; /* this controls the left boxes on front page */
margin-top: 15px;
}
div.yui-b div p.box-title {
/* background: #0590C7;
border-bottom: 2px solid #c6e1ec; */
background: #6f6f6f;
border-bottom: 2px solid #c6e1ec;
color: #FFFFFF;
display: block;
font-size: 93%;
font-weight: bold;
margin: 1px;
padding: 2px 10px;
}
div.yui-b div ul {
margin: 0;
}
div.yui-b div ul li {
border-bottom: 0px solid #fff;
list-style-type: none;
}
div.yui-b div ul li a {
color: #333333;
display: block;
text-decoration: none;
padding: 3px 10px;
}
div.yui-b div ul li a:hover {
background: #c6e1ec;
color: #333333;
}
grids-min.css
body
{text-align:center;}
#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}
.yui-b{position:relative;}
.yui-b{_position:static;}
#yui-main .yui-b{position:static;}
#yui-main
{width:100%;}
.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
{float:right;margin-left:-25em;}
.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
{float:left;margin-right:-25em;}
:
:
more but format is bad over here at stackoverflow to make it readable.
I apologise for I don't wish to come across in this post as unhelpful or rude.
Sincerely
This is a useful resource for dealing with ie6 generally
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
There are many many possible IE6/7 issues. Particularly IE6.
First thing to check is does your HTML code include a valid <!DOCTYPE> declaration? If not, your page will go into quirks mode, which will make all versions of IE (but IE6 in particular) go nuts. Quirks mode is effectively an IE5 compatibility mode. It is badly broken, so make sure you have a doctype.
Second thing to do is read up on some of the IE issues that may be giving you problems, and on browser support for some of the features you may be using. There's a very good website called (appropriately enough) Quirksmode.org which has a comprehensive set of compatibility tables for a wide range of browser features.
The following sites may also help:
http://haslayout.net/css/index
http://css-class.com/test/bugs/ie/ie-bugs.htm
http://positioniseverything.net/explorer.html
Google is your friend here too. ;-)
Next tip, try to narrow down your problem. Strip out the bits that are working until you end up with a page that demonstrates the problem with the minimum of other stuff getting in the way. Save that example to a site like JSFiddle. It'll be easier to work out the issue if you know exactly what the issue is.
Finally, if the remaining issues are minor display glitches that don't prevent the page being used, you should give yourself permission to simply ignore them. The market share for both IE6 and 7 has been dropping rapidly over the last year, and will continue falling. There's very little to be gained by spending too much time sweating over minor issues in these browsers.
See here for up-to-date browser usage stats: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011
(obviously if your site has significantly different demographics, you may need to pay more attention to IE6 and 7, but if that's the case you'll know already)