Nov
7
2009
Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum, that doesn’t seem to have a fix . Just such a one is this issue in IE7.
Problem Statement:
I and so might many of the other serious web developers have noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right. I have tried to google solutions for this issue , but have hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening) , hence I have never found a clear solution to the problem either…
Possible Solution :
Out of experience , I have notice 90% percent of the times i.e. , that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …
#somediv {
zoom: 1 ;
}
again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…
The zoom property is also seems to supported by Chrome , but its use dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t, bookmark this page under “CSS craps”
1 comment | tags: IE Fixes, IE Issues, IE7 | posted in CSS
Oct
10
2008
CSS for Non-IE Browsers : Its no news to CSS developers that , CSS Child Selectors like the example below, doesnt seem to work in IE.
e.g. div > span { some css } , that means “when a span element is a child ( and NOT a grandchild or great grand child etc.) of a division element” .
But we used this CON to our advantage. Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body in front of any CSS command IE will ignore it:
html>body .foo {CSS commands go here;}
This works because <body> is always a child of <html> – it can of course never be a grandchild or great-grandchild of <html>.
Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:
html>/**/body .foo {CSS commands go here;}
If haven’t already seen these before, have a read through the following as well
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues | posted in Browser Quirks, CSS
Oct
4
2008
As usual, one of the many some strange problems with IE and this one must ranks in TOP 10 of IE Quirks.
PROBLEM STATEMENT (This was my problem, maybe you have similar misbehaviors):
I have many DIV’s in the page with class “sectionhead” , which is nothing but title of a section on the page. So I have some style looking like this
.sectionhead{font-size:18px; background:#cfcfcf; padding:5px;}
The div is a light grey bar with some black text. What happens in IE is some of these section headers are displayed ok, but some are invisible, UNTIL, you scroll the page or click something on the page etc. Sometime they tend to disappear when you click the ‘alt’ key when you page down or scroll with the scroll bar. They sometimes seem to reappear when you reload (f5) the page. I short a perfectly simple DIV with some simple style behaves BAD.
What could cause such an erratic behavior? Well! Frankly, NO IDEA!!!
POSSIBLE SOLUTION:
Again don’t ask me why, but in many instances this problem tends to vanish when you add position:relative to the mis behaving elements style, like this
.sectionhead{font-size:18px; background:#cfcfcf; padding:5px; position:relative }
Weird but what to say? God Bless me from IE!
AND DO SHARE WITH US, IF YOU HAD SIMILAR PROBLEMS.
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues | posted in Browser Quirks, CSS, HTML
Jul
15
2008
Oh Well! In the earlier post a few days back regarding Opacity in IE8 ,I forgot to mention an important point that “IE 8 strict mode doesn’t allow for CSS opacity“.
For those who donot understand what I mean by strict mode , here is quick tutorial.
A work around to this (Before IE dev team realise that they have paved way for re-work routines all over the world, for web-sites using Pop-up lightboxes with some opacity, and put back support for OPACITY) is to use a semi transparent image …preferably in PNG format (I have had bad experience getting transparent GIF images to work as they were supposed to). Create a PNG image of the color and percentage of transparency you like , in you favourite image editor and use it as a background image for your lightbox overlay.
i.e.
Instead of something like this
.lighbox_overlay{
background-color: #ffffff;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
}
Do this….
.lighbox_overlay{
background:url(bkg.png) repeat;
}
TO TRY IT, CLICK HERE! | TO DOWNLOAD, CLICK HERE!
no comments | tags: IE Bugs, IE Fixes, IE Issues, IE8 | posted in Browser Quirks, CSS
Jun
20
2008
If you have ever made ( or making one) a Vertical Menu using list items( li) tags and CSS, you might encounter, this yet another bug in Internet Explorer, where IE 6 inserts these gaps between list items that contain block level elements, i.e. if there is any whitespace between the list items in the markup. Thanks, but no thanks , the IE version 7 seems free from this bug.
If like me , and many more, you belong to this band of frustrated developers , who still have to get their new layouts , working in IE6 too, then this might prove useful . Have a look…
Sample markup:
<ul id=”menu”>
<li ><a href=”#”>Home</a></li>
<li ><a href=”#”>About</a></li>
<li ><a href=”#”>Services</a></li>
<li ><a href=”#”>Portfolio</a></li>
<li ><a href=”#”>FAQ</a></li>
<li ><a href=”#”>Contact Us</a></li>
</ul>
You might create some CSS , similar to one below, to transfrom the above markup into a vertical menu ….
Sample CSS…
#menu {
margin: 0;padding: 0;background: #FF9900;
list-style-type: none;width: 150px;
}
#menu li {margin: 0;padding: 0;}
#menu a {display: block;
color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
The results you will see…
Solution for this bug…(modified/added CSS in bold italics)
#menu {
margin: 0;padding: 0;background: #FF9900;list-style-type: none;width: 150px;
float: left; /* this contains floated list items */
}
#menu li {
margin: 0;padding: 0;
float: left; /* This fixes the */
width: 100%; /* whitespace bug in IE6 */
}
#menu a {
display: block; color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
If the above solution doesnot seem to work (for reasons known to IE6 only)… try this method instead
Just add this additional IE6 only styles to your markup …
<!–[if lt IE 7>
<style type="text/css">
#menu li a {display:inline-block;}
#menu li a {display:block;}
</style>
<![endif]–>
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues, IE6, Tutorials | posted in Browser Quirks, CSS
Apr
12
2008
Post IE 6 , MSIE has been kind enough to us UI developers by adding a few more CSS properties standard to most other standard browsers. One such usefull property in “min-height”. Pretty straight forward property that needs no long winded explanation. When a min-height for a division is set, it always retains that set height when the content it houses occupies less than it can hold and importantly ( unlike the plain vanilla “height” property ) scales or in CSS words, it behaves like a division whose “height” is set to “auto”…
For some of us poor developers, who still are required to code CSS that must also work in IE6, un-availability of the “min-height” , could prove a show stopper sometime… Donot despair.
Fortunately, we have enough quirks in IE , that we would use to out advantage and hack our way through to reach our goal…i.e. make a DIVISION division as though its min-height in IE6
Solution 1 : Using the Underscore Hack [ ...Read more]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}
HTML : -
<div class="box1">Some dynamic content with variable height ...</div>
Solution 2: Using the CSS Attribute Selector Hack
.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}
HTML:-
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>
The CSS Attribute Selector Hack takes advantage of the fact the browsers earlier tha IE6 ignored an atribute-selector. Note the requirement of another container division with class=”someclass” . Just the presense of the class attribute for this division, overrides the height back to auto for Opera, Mozilla and MSIE7 and later. IE6, which doesn’t support atribute selectors, ignores it.
View Demo of the min-height hack for IE6
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues, IE6, Tutorials | posted in CSS
Mar
15
2008
At several occasions, while doing page layouts with popup divisions/ lightboxes/ Tips etc we come across situations where some Form SELECT objects happens to be under these POPUP Divisions , by design and it shows through…. YUK!!!
Well! you could easily FIX this by adjusting your Z-INDEX values appropriately for FF and IE7 . But Good Old ( pun intended) IE6 doesn’t behave as intended…. The SELECT BOX show through , even after you apply some drastically high Z-INDEX values to your PopUp Division… Bummer!!!!
There are NO FIXES for this problem , but there are , I believe, more than a few way to work-around this problem , But Im here to tell you the simplest solution that I use, which works fine for me, in most of the cases ….
“HIDE THE ROUGE SELECT BOX WHEN YOU SHOW THE POPUP”
Simply in your script snippet where you show your popup, add a piece of script to set the visibility of the SELECT Box to “Hidden”
document.getElementById(‘my_select’).style.visibilty = “hidden”;
And remember to set it back on CLOSE of your PopUp Division
document.getElementById(‘my_select’).style.visibilty = “visible”;
where “my_select” is the ID of the irritation SELECT Box
Hope this helps…
PS. There are ofcourse other options like dynamically positionining an IFRAME ( same size as you PopUp) under the Popup DIV … This works well too , but with an addition of loads of DOM Elements, SCRIPTS and Headache . I have used this solution too, and If you do need any help with this option, do let me know. Will be glad to help!
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues, IE6 | posted in Browser Quirks, CSS, HTML, JavasScript
Jan
8
2008
A few months earlier we saw , how we could include a piece of CSS that would be visible to IE6 only(For your IEs Only ). There are other ways to achieve this as well. Simply include a separate CSS, specific to your target IE. this could be achieved with what is called as Conditional Comments.
Conditional Comments is a way to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser specific. Browser detection can be done using many different techniques. This method has several advantages over earlier methods, that included style switching using javascript. To list important few, would be;
- Scripting is not required
- Cross-browser
How do we do this?
Do something in IE 5 only
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Do something in All IE versions
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Do something in All IE versions newer that IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
For more conditional vartiations , read this info on MSDN :
About Conditional Comment
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues | posted in Browser Quirks, CSS, HTML, JavasScript
Sep
15
2007
Simple speaking (for those who never heard about doctype before today)! DOCTYPE is the declaration in a HTML document that comes before the <HTML> tag, that looks something like this ( pasted from the source of this very page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Why use doctype?
It all began when browser standards were introduced by W3C. The earlier web developers implemented CSS according to the wishes of browsers, to have the pages rendered correctly in them and most websites had CSS that didn’t quite match these specifications/standards.
Therefore solution to this problem was to
-
allow web developers who knew their standards to choose which mode to use.
- continue displaying old pages according to the old (quirks) rules.
And DOCTYPE was born.
So, based on whether you page is designed to standards or not , you choose the appropriate doctype.
Relation between Doctype & Browser modes
Doctype is the statement that tells your browser what mode it should render the HTML page in or rather to be more precise how should the browser interpret the CSS in; Quirks Mode or Strict mode.
Old pages written before these standards were introduced don’t have a doctype. Therefore when there is no DOCTYPE in your HTML then the browser is in QUIRKS mode.
But if the DOCTYPE is defined as one of the following , then the browser is said to be in STRICT Mode.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
no comments | tags: Doctype, IE Fixes, modes | posted in HTML, User Interface Desgin
Sep
9
2007
Have you noticed sometimes , how simple things just refuses to work in IE6 …location.href is just such a thing.
If you have added an onclick function to your anchor tag like below …
<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);” > go to new location </a>
With some function like this…
function onclickLink(id){
var URI = “test2.html?id=”+id;
window.location.href = URI;
}
To your irony, you would notice that such a piece of simple script refuses to work in IE … Well! I can discuss reasons here, but not think it will be worthwhile … Though , I do seem to have a solution… ( I bet if you understand Javascript, you will understand , why we add this tweak for IE6)
The Solution
<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);return false;” > go to new location </a>
If you any simple answers , please do write a comment. It will really be appretiated, I bet , by Many!
no comments | tags: IE Fixes, IE6 | posted in Browser Quirks, JavasScript
Subscribe to by Email
