Topic: Emulate Max-width & Min-Width Pages that link to <a href="https://ozoneasylum.com/backlink?for=26274" title="Pages that link to Topic: Emulate Max-width &amp;amp; Min-Width" rel="nofollow" >Topic: Emulate Max-width &amp; Min-Width\

 
Author Thread
robert_neville
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2005

IP logged posted posted 07-18-2005 19:42 Edit Quote

Internet Explorer always presents me with a challenge (partial repost). The current issue involves emulating max-width in IE using the technique described by Svend Tofte.

http://www.svendtofte.com/code/max_width_in_ie/

The CSS code uses JavaScript expressions and feeds the browser's width to the style. The CSS code follows.


* html #Content {
height: 1%;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}

This implementation resizes and displays the fluid width in IE. But it does not emulate the max-width property. Basically, I need help fixing the max-width implementation on #Content. Since max-width remains a challenge in IE, the min-width remains a greater mystery. Min-width would be nice as well. The page is complex with several wrappers for other IE display issues and JavaScript functionality. Presently, these workarounds and hacks have my head spinning.

The page has an overall wrapper #Container. #Content div has the max-width expression. It encases #div.bgWh, so the page could have true transparent round corners. One issue relates to how div.bgWh expands beyond #Content when the client's browser width approaches 260 pixels. These containers serve a purpose; but IE does not deal with their width in a predictable manner. Fortunately, Firefox does not have these issues. These scenarios leave me scratching my head more often than not. Overflow hidden property has worked for me in the past, but did not provide the magic bullet this time around.

Please load the page and shrink you browser to around 260 pixels. Keep your eye on the round corners around the main content area. The container, div.bgWh, expands beyond #Content. Please let me know if you see any relevant patterns and if you have any useful suggestions on implementing max-width. Somebody may suggest better approaches to the IE max-width conundrum.

http://neville.f2o.org/nifty_TEMP1.html

Styles in Question
#Content
div.bgWh
#Container

(Edited by robert_neville on 07-18-2005 19:58)

kuckus
Paranoid (IV) Mad Librarian

From: Glienicke
Insane since: Dec 2001

IP logged posted posted 07-18-2005 22:35 Edit Quote

Nothing you haven't found out already I suppose, but while I'm here:

How can I use the 'max-width' CSS property in Internet Explorer?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-19-2005 00:21 Edit Quote

google, there are some hacks out there, but a good layout needs neither min-width/height or max-width/height

robert_neville
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2005

IP logged posted posted 07-20-2005 23:35 Edit Quote

Thanks for these links. I have read a lot about the subject. My interests relate to resolving my current implementation. You may spend hours searching and reading, but it may not always resolve my current idiosyncrasies. My post involves understanding what went wrong in this implementation since it may occur in future designs.

(Edited by robert_neville on 07-20-2005 23:41)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu