Hello all!
I searched the archives and found some help with this issue, but was not able to completely solve my issue. I have an area within a <div> tag that I don't want to resize any smaller than 600px, but resize to 100% if it is larger than 600px.
What I have so far is this:
.red_line{
position:absolute;
top:85px;
left:0px;
width:expression(document.body.clientwidth < 750? "750px": "100%" );
min-width:750px;
}
...(inside <body>)
<div class="red_line" style="min-width:750px;">
...
This works in everything except IE. I know min-width is not supported in IE so I thought the expression() function would solve my IE issue, but I wasn't that lucky. Any suggestions?
Thanks to all who take the time to review this in advance.Solved my own problem. Solution came to me after I posted this...
<div class="red_line" id="no_smaller" style="min-width:750px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"./images/750px_spacer.gif">
</div>
The image is a transparent spacer 1px in height.
Also, for future reference if you want the text to not wrap you can add the following:
.item
{
white-space:nowrap;
}
Then you simply put the spacer image before the text and your text will not wrap or go any farther to the left.
Don't forget to include min-width for other browsers too.Not sure if there are any general guidelines against this - but to build on your idea further, I've always used a single pixel transparent gif (very similar to your 750px wide image) and then preset the img size...
<img src=http://www.webdeveloper.com/forum/archive/index.php/"transdot.gif" width="750" height="1">
Should do the same thing, but means that you have one image which can be used for different sizes of both vertical and horizontal spacing, that only needs to be Download ed once.
I searched the archives and found some help with this issue, but was not able to completely solve my issue. I have an area within a <div> tag that I don't want to resize any smaller than 600px, but resize to 100% if it is larger than 600px.
What I have so far is this:
.red_line{
position:absolute;
top:85px;
left:0px;
width:expression(document.body.clientwidth < 750? "750px": "100%" );
min-width:750px;
}
...(inside <body>)
<div class="red_line" style="min-width:750px;">
...
This works in everything except IE. I know min-width is not supported in IE so I thought the expression() function would solve my IE issue, but I wasn't that lucky. Any suggestions?
Thanks to all who take the time to review this in advance.Solved my own problem. Solution came to me after I posted this...
<div class="red_line" id="no_smaller" style="min-width:750px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"./images/750px_spacer.gif">
</div>
The image is a transparent spacer 1px in height.
Also, for future reference if you want the text to not wrap you can add the following:
.item
{
white-space:nowrap;
}
Then you simply put the spacer image before the text and your text will not wrap or go any farther to the left.
Don't forget to include min-width for other browsers too.Not sure if there are any general guidelines against this - but to build on your idea further, I've always used a single pixel transparent gif (very similar to your 750px wide image) and then preset the img size...
<img src=http://www.webdeveloper.com/forum/archive/index.php/"transdot.gif" width="750" height="1">
Should do the same thing, but means that you have one image which can be used for different sizes of both vertical and horizontal spacing, that only needs to be Download ed once.