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
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
8
2007
If you have been writing CSS for while, you would have experience those times when you literally pull your hair when your CSS layouts looked fine in all the new browsers ( I mean browsers later than IE6) , but IE 6 throws a tantrum. You struggle hard to adjust your CSS but it doesn’t work … Well! Try These HACKs…
1. Underscore Hack :-
By definition, CSS 2.1 specification allows underscore (“_”) in CSS identifiers. But many browsers still seem to ignore any identifies proceeded with an underscore but IE. This IE’s bug/feature thus becomes a very clear way to set CSS properties for IEs only. so remember, A CSS property written with the underscore on the start is visible for Internet Explorer (all versions but IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}
View demonstration of this underscore hack
Also, The min-height hack for IE6 uses the underscore hack, check out
2. Hash(#) Hack :-
Like the underscore hack, this one is too is for IEs oly, with a good difference, property identifiers preceded with # on the start is visible for All IE versions , IE7 included and is invisible for any other standard browser.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
This hack has been used nicely to demonstrate a cross browser vertical align solution, have a look at this article to find our more
3. CSS for IE6 only:-
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}
These hacks seems heaven sent, when nothing else works… If any of these hacks saves your life someday, dont forget to treat me to a coffee:)
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues | posted in Browser Quirks, CSS, JavasScript
Jul
12
2007
I had this problem where , if you had a mouseover event on a division (DIV) and that division , for some good reason had to be transparent(as In my case, where it was required to display some tags over an image on mouseover of this transparent division), IE failed to trigger the mouseover event ( Worked fine in FireFox).
Tried several options … many of which was just a desperate attempt to get the event to fire in IE. One of the sensible ones, that I thought might work was to set a background color to the division and set the opacity to zero … Well! dint work!
The final solution which seemed to work and not disturb the functionality I required was to put a one pixel repeated/transparent background image in that division
… Silly! but now IE seems happy.
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues | posted in Browser Quirks
Jun
11
2007
Simple … To correct this problem use display:inline.
div {float:left;margin:40px;display:inline;}
If you have a floated element such as a div and you place margin-right or margin-left on that element, Internet Explorer 6.0 will double that margin value, messing up the html/css layout. To fix this simply add display:inline; to your floating element.
no comments | tags: IE Bugs, IE Fixes, IE Hacks, IE Issues, IE6 | posted in Browser Quirks, CSS
Subscribe to by Email
