Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts

    attempting a min-width alternative

    Why can't I get an image to stop a wrapper from shrinking?

    Look at my test page to see what I've tried so far...
    I'm not having much luck.

    -Just trying for an IE6 alternative. I know if I set a min-width that IE7 and FF will do it.
    -border around .gif is just temporary, so you can see it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not very sure about the behavior when an element is sized smaller than a contained image, but I think it should act just as it does in your example...

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    but I think it should act just as it does in your example...
    haha, that's the problem, huh? It's behaving just like it's supposed to.
    I have tried everything I can think of today...
    Maybe tomorrow I'll be smarter.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The image shouldn't stop the wrapper from shrinking. It doesn't fit so it has no place to go. Only way to stop the wrapper from shrinking is to use min-width. Normally I use IE CSS expressions to fake min-width. The way I see it is if the user is using IE then its likely they don't even know how to turn off javascript because if they did then they probably be using a different browser like Firefox. I understand some people are forced to use IE because of their job but then again if they are at their job what are they doing browsing the internet.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You don't need to use an image to set a minimum width - you can set the minimum width using stylesheet commands. For example if you want all elements with a class of [b]small[/] to be at least 50 pixels wide you can specify:

    Code:
    .small {min-width:50px;}
    * html .small {width: document.body.clientWidth < 51 ? "50px" : "auto";}
    Firefox, Opera, Safari and IE7 will read the first line and ignore the second while IE6 will ignore the first and process the second to give the same result.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by felgall View Post
    Code:
    * html .small {width: document.body.clientWidth < 51 ? "50px" : "auto";}
    I think you need to mark that as an expression or something, like this:

    Code:
    * html .small { width: expression(document.body.clientWidth < 51 ? "50px" : "auto"); }
    Internet Explorer 6 functionally treats width the same as min-width though, so you may as well use the shorter * html .small { width: 50px; }.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Arbitrator View Post
    I think you need to mark that as an expression or something, like this:

    Code:
    * html .small { width: expression(document.body.clientWidth < 51 ? "50px" : "auto"); }
    Internet Explorer 6 functionally treats width the same as min-width though, so you may as well use the shorter * html .small { width: 50px; }.
    But what if mostly text is to be within the element? The 50px will cause the text to wrap. Using a min-width hack will allow the text to fill up more of the screen so I don't think just setting the width here will help.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    But what if mostly text is to be within the element? The 50px will cause the text to wrap. Using a min-width hack will allow the text to fill up more of the screen so I don't think just setting the width here will help.
    Hmm… You’re right. I’m thinking over‐sized content along the lines of the expanding box bug.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That's pretty cool felgall, I'd never seen that before.
    I googled "document.body.clientWidth " and ended up with what's on that test page I linked to.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •