|
Tuesday, March 14, 2006 |
|
|
A min-max that works for all!
By Jonathan Shroyer @ 8:31 PM :: 1809 Views ::
0 Comments
:: Articles, Code
|
I thought I would share the code that I use to make all browsers (except Mac IE5) use the min-max property without any hacks and it validates!
I personally like to use 700px to 1000px for my layouts. It seems to be a great mix from what I've seen of peoples browsing tehniques.
- First thing to do is to wrap your page in a div. For the purpose of showing you on this tutorial I will use #wrap-page.
- Add this code to your style sheet:
#wrap-page {min-width:700px; max-width:1000px;}
- Open your default.aspx file and enter this at the end of the head:
<!--[if IE]>
<style type="text/css">
#wrap-page {width: 700px;}
div#wrap-page { width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth : document.body.clientWidth)
> 1018 ? "1000px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 718 ? "700px" : "99.7%")); }
@media print {
div#wrap-page {width: 100%!important;}
}
</style>
<![endif]-->
- To change the min or max just change the px value and add 18 for the number before it. These numbers seem to be the smoothest transition between min and max for IE. Don't use 100% at the end. It can cause the screen to stick when it's at 100% of it's width and not stretch back.
- If you want your screen to center then add this to your style sheet:
body {text-align: center;}
#wrap-page {
width: 100%;
margin: 0 auto;
text-align: left;}
I have tested these codes in every browser I have (over 20 on mac and pc) and the only one that it doesn't work with is Mac IE5. All they have to do is make their screen smaller than 1000px wide and it will look right on there as well.
Happy DNNing! |
|
|
|
|