Maximum and Minimum Height and Width in Internet Explorer

by Jeff Starr on Tuesday, January 16, 2007 90 Responses

Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!

Why is this so great? Well, because in other, standards-compliant browsers, max/min-height and max/min-width properties are easily accomplished with this simple bit of CSS..

<div style="max-width: 333px;">
   [the contents of this division will be at most 333px in width on compliant browsers]
</p>

Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand the max-width attribute. Fortunately, IE supports its own expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max-width and max-height. For example, to specify a width property value via the expression attribute, we could use this:

div {
   width: expression(333 + "px");
}

..Which is equivalent to this:

div {
   width: 333px;
}

The down side to using IE’s expression attribute is that it fails when JavaScript is disabled (or otherwise missing) in the user’s browser. Nonetheless, establishing max/min-widths/heights (as well as other properties) remains an important tool in the web developer’s toolbox. So, without further ado, here are a few generalized examples for slapping IE widths and heights into proper shape..

max-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes) and include in your document via conditional comment. In this example, we are setting the max-width at 777px 1 for IE and all standards-compliant browsers:

* html div#division { 
   width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
div#division { 
   max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

In this example, we are setting the max-width at 33em for IE and all standards-compliant browsers:

* html div#division {
   width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
}
div#division {
   max-width: 33em; /* this sets the max-width value for all standards-compliant browsers */
}

min-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-width at 333px 1 for IE and all standards-compliant browsers:

* html div#division { 
   width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* set min-width for IE */
}
div#division { 
   min-width: 333px; /* sets min-width value for all standards-compliant browsers */
}

max-height in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division { 
   height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
div#division {
   max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}

min-height in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division { 
   height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
}
div#division { 
   min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}

Footnotes

  • 1 Why is the conditional value slightly different than the target value in the expression? Read this comment to find out.

About the author

[ Jeff Starr ]

Jeff Starr is a web developer, graphic designer and content producer with over 10 years of experience and a passion for quality and detail. Jeff is co-author of the book Digging into WordPress and strives to help people be the best they can be on the Web. + Follow Jeff on Twitter and subscribe to Perishable Press for quality web-design content delivered fresh.


90 Responses
[ Gravatar Icon ]

Mike Gillan#1

Thanks very much… I had given up and gone to a fixed-height container (very ugly) so I’m very glad to finally “get it right”. Worked perfectly in IE6 & IE7

[ Gravatar Icon ]

dumbboy#2

What does the “* html” mean in the code?

Thanks,

Dumbboy

[ Gravatar Icon ]

Perishable#3

The "* html" targets the IE browsers for which this particular method is designed..

[ Gravatar Icon ]

bikeman#4

No good in IE6 - caused browser to stop responding.

[ Gravatar Icon ]

Perishable#5

Yeah, sorry about that — I need to update this post to reflect the following information:

Expressions with equal “conditional” and “target” values may cause IE6 to chase after itself and freeze up:

width: expression( document.body.clientWidth > 777 ? "777px"

Notice the matching 777 values? That is the cause of the error. Solving this issue involves simply changing one of the numbers to a slightly different value. For example, this code will produce the desired effect (without crashing) in IE6:

width: expression( document.body.clientWidth > 776 ? "777px"

Thanks for the comment — now I need to edit the article!

[ Gravatar Icon ]

Chirag#6

I am using max-height and max-width for images in my site.
Max height works perfectly fine.
Max width also works, but it stretches the smaller images to the specified max-width and thereby warping the image.

How do I fix that?

[ Gravatar Icon ]

Perishable#7

Good question, Chirag, although I am not entirely certain I understand you correctly. If I’m not mistaken, max-width will enable an image to increase in width until the specified maximum value is achieved. Thus, it would seem that if you specify a max-width value that exceeds that of the image itself, the image will indeed “stretch” and become distorted..

If I have totally misunderstood your question, perhaps you could point me to an example page demonstrating the issue. I would be more than happy to help in a more specific manner, provided I have something concrete with which to work.

[ Gravatar Icon ]

Chirag#8

The site which I am working on is still in development phase. So, don’t have a place to point to.
U have almost got the problem.
It is like this,
When image width is larger than the specified max-width, then the image scales down(maintaining the aspect ratio) to max-width.
But when image width is smaller than specified max-width, then the image gets stretched to max-width and therefore looks ugly.

I think I got the problem. I have a list of pictures on my page with class = “pictures”. So, even if one of those images is larger than the max-width, then the expression returns max-width thereby stretching the smaller images as well.

Am I making any sense, or is it still too vague.

How do i fix this problem now?

[ Gravatar Icon ]

Chirag#9

I think I was wrong. I tried it with all the images smaller than max-width. But still it is stretching them all to max-width.

[ Gravatar Icon ]

Perishable#10

Hmmm yes, I see.. however without a specific case, I may only generalize possible solutions and provide a few clues for your further experimentation. Having said that, you may want to try specifying an explicit width along with the max-width. If the width is specified via dynamic units (e.g., ems, %), the images will remain resizable, and you may obtain more control over stretching/sizing issues for all values less than that of the specified max-width. Also, I assume you are experiencing the problem in IE only, as most other modern browsers seem to correctly interpret the infamous max-width property. Although there is generally a CSS-based solution to issues such as this, it is sometimes necessary to resort to manipulating the DOM directly via JavaScript. I hope this helps..

[ Gravatar Icon ]

Jack Book#11

WOW!!!
It works amazingly!
since I’m so often using pre on my post (because it’s a tutorial about hacking the blogger) so it’s really helpful.

THANK YOU!!

[ Gravatar Icon ]

Chirag#12

Yeah, max-width works perfectly fine with other browsers and I do so much hate IE. But then most of the users or so to say ignorant internet users, use that pathetic browser.

I will let you know when my site goes on production and probably then you can suggest some changes.

Thanks for all the help.

[ Gravatar Icon ]

Chirag#13

Fixed the problem. Atleast it works with my code.
Although I stumbled upon the solution by mere accident. I was wondering, why is the expression code different for max-width and max-height.
And used the following code, and it worked.

width: expression(this.scrollWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */

Let me know if there is any flaw in my reasoning.

[ Gravatar Icon ]

Perishable#14

Chirag,

Glad to hear you fixed the problem. As far the difference between max-width and max-height, they are targeting two different aspects of the client browser, and thus require two different JavaScript expressions to accomplish it:

document.body.clientWidth - returns the width of the broswer window

this.scrollHeight - returns the height of the broswer window

Other than the property values, the JavaScript expressions should be the only difference between the two CSS selectors.

So, if the code you provided is correct and works as it should, everything is go! — Congrats!

[ Gravatar Icon ]

HDL#15

About min-height for IE:

use min-height for the real browsers an
* hmtl #foo{ height:xxxpx; }
for IE.
IE threads height like min-height. no need to use the expression in this case.

[ Gravatar Icon ]

Perishable#16

Ah! Very good, HDL.. I need to add this to the article.
Every opportunity to avoid unnecessary JavaScript (especially in CSS!) should definitely be taken.
— Thank you for sharing this info!

[ Gravatar Icon ]

Greg Robinson#17

Thank you so much for publishing this information. I have been searching for half a day for a max-height work around in IE and THIS is finally something that works. You’ve saved the rest of the hair on my head!

[ Gravatar Icon ]

Perishable#18

You’re welcome! — Thanks for the positive feedback :)

[ Gravatar Icon ]

Chirag#19

document.body.clientWidth - returns the width of the broswer window, but I want to fix a max-width for one of the divs/classes that I am using.
Can anybody help me on how to do that?

[ Gravatar Icon ]

Jess#20

I am slightly confused as to how to do this.

That is the image I am having trouble with. It resizes in Firefox to 70% of the browser just fine, but in Internet Explorer, it is way too big. I was wanting to set the maximum width at 700px. Thanks very much for the help.

[ Gravatar Icon ]

Perishable#21

Yes, I see what you mean.. way too big in IE. I see you are using table-based layouts. I have not tried this technique on tables or their various components. You might try wrapping the image in a <div> (which would itself be placed within a td element). Once you have that, then return to this article and apply the max-width portion of the tutorial to the div rather than to the image or a table element.

[ Gravatar Icon ]

Jess#22

Thanks so much for your help.

I have tried using the max-width for IE code, but I guess I am not putting the script in correctly.

This is the code for the picture that has the problem:

CurrentProjectsBigSurvey070904a.html

How would I insert the code to get it to work? Thank you so much.

[ Gravatar Icon ]

Perishable#23

Jess,

It looks like your code was gobbled up by WordPress, but I’m not entirely sure..

I will take a look at this issue as soon as possible. I downloaded an example page and will try hitting it over the head with a shovel to make it work.

Stay tuned..

[ Gravatar Icon ]

Jess#24

Thanks very much!

[ Gravatar Icon ]

Perishable#25

Jess,
I think I got it..
Try adding this to the <head> of the document:

<style type="text/css">
* html td#gallery img {
     width: expression( document.body.clientWidth > 699 ? "700px" : "auto" ); /* sets max-width for IE */
}
td#gallery img {
     max-width: 700px; /* this sets the max-width value for all standards-compliant browsers */
}
</style>

..and then tag your image container (table cell) with an id="gallery" attribute, for example:

<td id="gallery">

Given the table-based design with which you are working, this approach should do the job: images will be displayed with a max-width of 700px. The trick was to apply the CSS expression to the image itself, rather than to its container. Keep in mind, however, that this method employs a CSS hack (* html), which you may want to include via a conditional comment.

[ Gravatar Icon ]

Jess#26

Thank you very much for the time and effort you put into this! I really, really appreciate it! I can’t wait to try it! -Jessy

[ Gravatar Icon ]

Perishable#27

My pleasure! Let me know how it goes ;)

[ Gravatar Icon ]

Tom#28

So after working on this site for a while I opened it for the first time in Internet Explorer 6 and lo and behold it looks like garbage.

Basically, users can upload pics to the site and I display them in different sizes using the max-height and max-width tags. IE 6 does not recognize these tags.

Aside from the fact that I am now strongly cursing Microsoft under my breath for having a browser that most people use which doesn’t support these tags, I have no choice but to get around it.

I found the following code that works in a stylesheet:

.index_image:
{
height: expression(this.height > 150 ? 150: true);
width: expression(this.width > 150 ? 150: true);
}

This works as written but unfortunately does not retain the image’s aspect ratio. In other words, there is an image that is 371×640 and is correctly displayed in Firefox/Opera/Safari/etc using max-width and max height as 86×150.

Using this IE hack however, since both dimensions are greater than 150, it stretches the aspect ratio to 150×150.

Is there anyway to get around this through a CSS expression?

Ugh, darn you IE.

[ Gravatar Icon ]

Pujit#29

I am facing same problem mentioned above,

can i maintain aspect ration on both conditions in IE?

max-width : 120px;
max-height: 160px;

[ Gravatar Icon ]

Pujit#30

Solution,

for 120×160 aspect ratio.

.index_image{

height:expression(this.height>this.width+40 && this.height>160?160:true);
width:expression(this.width+40>this.height && this.width>120?120:true);

max-width : 120px;
max-height: 160px;

}

for u Tom,

150×150 aspect ratio

.max{

height:expression(this.height>this.width && this.height>150?150:true);
width:expression(this.width>this.height && this.width>150?150:true);

max-width : 150px;
max-height: 150px;

}

this will maintain aspect ratio also

[ Gravatar Icon ]

Matthew Vines#31

It should be noted that since the workaround is actually executing javascript and not css that it will fail for users without javascript, and those with it disabled. Not a huge problem, but something that the developer may have to take into account when using this solution.

[ Gravatar Icon ]

Perishable#32

Absolutely, Matthew. Excellent point, thank you for the reminder ;)

[ Gravatar Icon ]

H5N1#33

Hey, we meet again, PP! :)

For the min/max-width property (just like the max-height) no other possibilities than use expression, but for the min-height I prefer the old !important method.

#division {
     height: auto !important;
     min-height: 10em;
     height: 10em;
}

Only for your feedback: I found again this blog by CSS Beauty News Feed :)

[ Gravatar Icon ]

Perishable#34

Hey H5N1! Wow, good to see you again :) Good to know that I am getting a little love from some of the big sites out there — wow, CSS Beauty even!

Thanks for sharing the ‘ol tried-and-true !important method with us — it will definitely be put to good use ;)

[ Gravatar Icon ]

H5N1#35

Yeah, you are in the CSS Beauty feeds!
Didn’t you know? :)
For years I’ve been a sys admin and hardware technician with the passion of developing websites and now I’m changing (hope) my job.
I like to share expereance and knowledge.
By the way, even if —> there is something telling me I can’t, I’d like to say “Nice site”! :D

[ Gravatar Icon ]

Perishable#36

Looks like CSS Beauty has been keeping my server working overtime the last several days! It is unbelievable how much traffic some of the more popular sites can send with a single link..

So you left a “Nice site” comment — I guess that means I have to delete all of them! ;)

[ Gravatar Icon ]

Kunal#37

Hi
The tip you have given is great. I’m working on a fluid website - my first one - (I haven’t put it on the web yet) for my hostel. The javascript works great in IE when I reduce the screen size of IE (7) from a maximized position, but when I return it to its original maximized state, the site stays at the same minimum widths/heights and doesn’t expand again. Is there any way around this? To re-flow the content? Or should I use some other method?
THanks.

[ Gravatar Icon ]

H5N1#38

@Kumal: It depends… Have you set measurements in pixel, em or percentage?
It depends from many other cases too… If you want U can email me at H5N1.vir [at] gmail.com

[ Gravatar Icon ]

Kunal#39

Hi again
Well, I was using percentages and realized my mistake as soon as I left my comment. I’ve just altered the condition to 0.x * this.parentNode.clientWidth/scrollHeight and it works fine now.

[ Gravatar Icon ]

Perishable#40

@Kunal: Glad to hear you got it worked out ;)

@H5N1: Thank you for your willingness to help :)

[ Gravatar Icon ]

H5N1#41

@Kunal: I’m glad too. :)
Hope my last post gave you a clue to find the solution. :)
@Perishable: knowledge is nothing whitout sharing! :)

[ Gravatar Icon ]

Joomlabased#42

Really good article it will help lots. Thank you :)

[ Gravatar Icon ]

Perishable#43

My pleasure — happy to help!

[ Gravatar Icon ]

E#44

Great article. Unfortunately, when I made some changes to include a min-width property, IE still freezes and crashes for me.

#wrapper {
   min-width: 750px;
   position: relative;
   padding: 5px;
   margin: 0 auto;
   text-align: left;
}

/*Min-width not working for me*/

* html div#wrapper {
width: expression( document.body.clientWidth < 750 ? "750px" : "auto" );
}

Can you please advise as to what I am doing incorrectly or am missing?

I would greatly appreciate it! Thank you

[ Gravatar Icon ]

Perishable#45

Hi E,

Check out comment #5 for some information that may help you..

[ Gravatar Icon ]

E#46

i did and am still experiencing the freeze and crash unfortunately.

i tried if < 750? “749px” ; “auto” and i still had the problem.

[ Gravatar Icon ]

Perishable#47

It is difficult to “guess” at the source of the issue.. do you have a link to a page demonstrating the problem? An actual test case would be very helpful.. If you prefer, send a link via email (scroll down for email links).

[ Gravatar Icon ]

H5N1#48

@E: it depends.
The crash may occurr in different cases. I notice you’re using relative positioning: this make me think at some IE6 bugs.

1 - If you’re using some javascript parsing a “display : none” property
2 - If you’re using some kind of opacity modificato rstuff (like filter alpha)
3 - if the relative positioned element contains some absolute positioned block and you’re trying to parse the node with javascript
4 - If IE is not updated! :)
5 - If it’s IE!
5 - Some other non-documented bug

Obviously a link to the page can be of some help, Can you host it?

[ Gravatar Icon ]

Perishable#49

@H5N1: Thanks for jumping in on this one! It certainly is nice having you around ;)

“5 - If it’s IE!”

— Classic :)

[ Gravatar Icon ]

Dustin Diaz#50

min-height is best implemented in plain css like this:

selector {
     min-height: 500px;
     height: auto !important;
     height: 500px;
}

[ Gravatar Icon ]

H5N1#51

Hi Dustin,
nice to meet you even here :)
I just suggest the same solution some comment before :)
See comment n. 33 :)

[ Gravatar Icon ]

Perishable#52

@Dustin: Yes indeed, thank you for sharing your CSS knowledge with us — it is greatly appreciated! :)

@H5N1: Thanks for keeping an eye on things around here when I’m offline (very kind of you)! ;)

[ Gravatar Icon ]

nooto#53

Hi there,

I’m pretty new at html, I was trying yesterday this method on my web site, however with no success so far. I guess I’m missing something, something about the syntax. This works fine for Firefox :

div.center {
     width: 70%; height: 82%;
     position: absolute;
     top: 8%;
     bottom: 7%;
     left: 14%;
     min-height: 527px;
     min-width: 726px;
}

Could you please let me know how to make it work for explorer also?

[ Gravatar Icon ]

H5N1#54

If you want to center your div is better to use another method instead positioning absolutely. :)
You have to create a wrap around the fiv (another div) with the attribute “text-align” set to “center” for IE to work and the contained DIV must have the “margin” property set to “0 auto”.
In this way you got a DIV center-positioned in all browsers and can remoce that problematic “position:absolute” :)
Give it a try! :)

[ Gravatar Icon ]

nooto#55

Yeah I know I can position things in the center like that. However I would like to stay with my current configuration, well… so far… Or do you want to say that it’s not possible for me to have min-height and min-width with a configuration like this ? All I need is the same container to have min- height/width in IE, as it does in firefox.

[ Gravatar Icon ]

H5N1#56

Well, back to your problem nooto:
you have to trick IE just like just said…
for the minimum height you con use:

min-height: 527px;
height : auto !important;
height : 527px;

What this trick do?
Simple: IE doesn’t understand the !important thing so it parse an error and DO NOT apply anything of that line. Other browsers’ rendering engine, instead, skip the content of the "height" declaration and apply the one with "!important". Ie, then, apply the HEIGHT attribute that it use to treat just like a minimum height.

For the minimum width you have to trik it with the "expression" thing:

width: expression( this.clientWidth < 527 ? "527px" : "auto" );

that’s all

[ Gravatar Icon ]

Richard Kimber#57

This is great, I’d never heard of ‘expression’ before. Thanks.

[ Gravatar Icon ]

nooto#58

H5N1 , you said :
“Ie, then, apply the HEIGHT attribute that it use to treat just like a minimum height.”
Doesn’t that mean that in IE my div will remain in fixed height all the time? I need it to have min-height if the browser window shrinks below min-size and expand if the window expands.

And about the min-width, I guess I just don’t understand how to use the syntax. As I understand I have to do this :

.center {
     width:70%;
     position: absolute;
     top: 8%;
     bottom: 7%;
     left: 14%;
     min-width:400px;
     min-height:292px;
     height : 82% !important;
     height : 292px;
}

* html .center {
width: expression( this.clientWidth < 400 ? "400px" : "auto" );
}

This still works for Firefox, but not for IE. Maybe you can help me with it? Please notice that I want my div to have size of 70% height and 82% width when browser is in “maximize” state.

[ Gravatar Icon ]

Perishable#59

@nooto: Your expression will not work in Internet Explorer because of the equal width values in the clientWidth argument. When the values are the same in an expression using a “less-than” (<) or “greater-than” (>) operator, IE chokes on it. To correct this issue, simply replace the first width value (the one before the question mark) in min-width expressions such that its value is one pixel greater than the second expression. For example, in your case, you would write:

* html .center {
   width: expression( this.clientWidth < 401 ? "400px" : "auto" );
}

Similarly, for max-width expressions, you need to ensure that the first width value is less than the second expression. For example:

* html .center {
   width: expression( this.clientWidth > 399 ? "400px" : "auto" );
}

As for the min-height struggle, I would start with the basics:

.center {
   min-height: 500px;
   height: auto !important;
   height: 500px;
}

..verify that it works, and then build up from there.

Good luck!

[ Gravatar Icon ]

Perishable#60

@H5N1: Yes, sorry about that — WordPress is a complete monster whenever it sees certain characters.. The best way to avoid gobbled code (at least at this site) is to wrap each line (word, character, whatever) in a <code> element. In the meantime, I am going to consolidate your posts into one, such that the correct code (i.e., less-than sign) is displayed in your original comment. Sorry for the confusion, and thanks for keeping an eye on things!

Regards,
Jeff

[ Gravatar Icon ]

Perishable#61

@nooto: One more thing I forgot to mention. Your code example includes several syntax errors that may be causing problems. Specifically, consider the extra white space after your height properties — removing these will help eliminate potential errors. Further, while the spacing inconsistencies present in other portions of your code may not be enough to “break” anything, using consistent (and correct) syntax throughout your CSS is good practice. Sorry if this sounds like nitpicking — I am only trying to help! ;)

[ Gravatar Icon ]

Fabio#62

Thanks, finally something that really works!

[ Gravatar Icon ]

Paulo#63

I am a bit confused here. I simply want a css “width” command to be applied for ie6. I need the “page” wrapper to be 960 px
I tried this:
page {
   width: expression(960 + "px");
}
in the css file. It didn’t work
Then I tried to set the minimum width using your above code, replacing the numbers with 960 and 961. Also didn’t work. But I am not sure about your ” * html div#division ” bit of code. My division is called “page” so I just need to write #page { . . . right?

Or do I need a new css file just for ie6?

Anyway, I hope you can help. I guess it’s a simple thing but I have been trying for days!! It looks good in FF and ie7 . . but I just can’t set a width in ie6

[ Gravatar Icon ]

Perishable#64

Hi Paulo, the * html is a CSS hack targeting IE6. Without it, the style(s) will be applied in other browsers as well. If you are simply trying to specify a width for all browsers, that is easily done with no need for the JavaScript expression:

page {
     width: 960px;
}

..should do the job just fine. On the other hand, if you are trying to implement a minimum width that is applied in all browsers (including IE6), the tutorial above should provide the necessary information. I hope that helps!

[ Gravatar Icon ]

Paulo#65

Ok, Thanks a lot, you are very kind . . . . but I started with just using the “width” and it didn’t work in ie6! So you mean, ie6 should understand “width” and set the page accordingly? Nothing else needed

[ Gravatar Icon ]

Jose M Estrada#66

I would really like to read this article but I just can’t see the content.

[ Gravatar Icon ]

H5N1#67

@Paulo: yes, IE6 should understand the width property. Mayebe there’s some other declartations in conflict with this. It’s difficult troubleshooting without a complete code :)

@Jose M Estrada: Really, I can’t understand… you cannot just read it beacause it’s not visible, because its too small or what else?

[ Gravatar Icon ]

Perishable#68

Perhaps it’s time for another redesign? - Hmmm.. ;)

[ Gravatar Icon ]

Rajab#69

dude am still not clear about this !important.. can someone elaborate on that please.. thx..

[ Gravatar Icon ]

UniGen Head Geek#70

Confirm readability issue in some browsers at some times.
Recommend:
1. Use higher contrast, with text darker than background.
2. Stop using whatever it is that overrides the browser’s “increase text size” feature.
Oddly, this morning in IE6, your stylesheet seems to have been skipped, so the entire thing is a very readable black-on-white with no formatting at all.

[ Gravatar Icon ]

Perishable#71

@Rajab: The !important rule simply designates that particular CSS property as, well, important. Nothing a quick Google search won’t clear up ;)

@UniGen Head Geek: Thanks for the input regarding my theme. I am in the process of revamping things around here, and hope to resolve the readability issue once and for all. In the meantime, feel free to select the “high-contrast” stylesheet by clicking on the sun icon located in the lower-right corner of the browser window.

[ Gravatar Icon ]

mindi#72

wow this is really kool tutorial, worked for me! Thanks

[ Gravatar Icon ]

Perishable#73

Sure thing, mindi — happy to help! :)

Trackbacks / Pingbacks
  1. CSS Maximum and Minimum Height and Width in IE | David Bisset: Web Designer, Coder, Wordpress Guru
  2. Max Design - standards based web design, development and training » Some links for light reading (12/12/07)
  3. Internet Explorer Hacks | milo
  4. links for 2007-12-12 « toonz
  5. Weekly Web Design Roundup | Andrew Benton
  6. Sexta-feira dos Web Standards #8 · project.47 - Portfolio e blog sobre Web Standards
  7. Maximum and Minimum Height and Width in Internet Explorer · Style Grind
  8. HTML Editor Reviews » del.icio.us bookmarks for December 6th through December 20th
  9. jan korbel » Archiv » [Odkazy] Teoreticky praktická, papírová vánoční edice
  10. IE min- and max-height hack | eatfoodhavestuff
  11. ) design collected ( :: links for 2008-01-01
  12. Contrast | The Blog | Dear IE6, I hate you
  13. CSS-FAQ » Blog Archive » Give It Up for the 8th Wonder of the Virtual World
  14. Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? - Smashing Magazine
  15. Cross Browser Compatability - DesignersTalk
  16. Relatively Fixed » The Ultimate List of IE6 Hacks, Fixes, & Resources
  17. The Ultimate List of IE6 Fixes & Hacks « blog.mattsparks.com
Comments are closed for this post

If you have or need further information, contact me.



Attention: Do NOT follow this link!