SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 63 of 63
  1. #51
    Non-Member holodoc's Avatar
    Join Date
    Jun 2009
    Location
    Internet
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what day new quiz post?

  2. #52
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    When Paul gets back from his holiday .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #53
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm increasingly feeling that the border/padding approach is the only possibility to simulate min-width for IE6.

    This approach can be simplified to the following:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    </head>
    <body>
    <div style="background:blue; width:90%; min-width: 960px;">
    	<div style="background:green; border-left:960px solid red; zoom:1;">
    		<div style="background:yellow; margin-left:-960px; zoom:1; position:relative; margin-top:5px;">
    			content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    		</div>
    	</div>
    </div>
    </body>
    [Of course, in a real-world instance, you would hide all but the outermost div tags inside IE6 conditional comments so that other browsers didn't see them.]

    The outermost div has a width and a min-width for all browsers; you then need a middle div with hasLayout (necessary) and either border or padding. Note, however, that if the outermost div has width:auto then you could apply the border/padding to that div instead for IE6 only, thus saving a div. Finally, the innermost div needs hasLayout if using border, or float if using padding.

    Quote Originally Posted by Anton P View Post
    However, alas, this float approach is not quite correct (whether using border or padding) … . Because of the slightly broken implementation of shrink-to-fit in IE6/7, the .container does not in general occupy the full width of the viewport (or the full 960px min-width for narrow viewports); instead, it shrinks a little bit too much to ensure that the right content edge is flush with the text content.
    Since the use of float on the innermost div when using padding results in imperfect shrink-to-fit, while the use of non-float hasLayout when using border results in the correct width, border turns out to be preferable after all, although once two or more border divs are required for wide min-widths it's a toss-up between that and padding IMO.


    All this nesting has got me thinking about an easy solution to IE6's box-expansion-instead-of-overflow problem: inside any box (green, in the example below) which you do not want expanding (because it would cause float-drop, for example) just place a secret inner div, of the same width as the box, but with a very large margin-right. For the overflow to show, this inner div needs position:relative, so you'd probably want that on the outer div too for cross-browser consistency.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    </head>
    <body>
    <div style="background:yellow; width:600px">
    	<div style="background:green; position:relative; float:left; _display:inline; width:400px;">
    		<div style="position:relative; width:400px; margin-right:-10000px">
    			asasdasadsasdadsadadsadadsadaasasadadsadsadsaasdfasfasfsdfggdfsdfgsgsgfsssgsggssfdsfdfsdfssssasadaddsdsdsdsdafasdfasdfafadafaasdadsadsasdaEND content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    		</div>
    	</div>
    	<div style="background:blue; float:left; _display:inline; width:200px;">
    		content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    	</div>
    </div>
    </body>

    Voil&#224;! A corrected implementation of width I can't imagine why it never occurred to me before!

  4. #54
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You do know that other brorwsers don't get if a float also has display:inline;. Only IE6 reacts to it. And if you are going to try nad target IE6 only don't use the underscore hack. Use the star html hack (* html #element{})

    But otherwise good post
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #55
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Anton P

    nice solutions : )
    i especially like the width solution.


    re: min width ie6.
    but the min-width for ie6 needs to be at least 1000px wide, and preferably as simple as possible. (in the quiz it was 1100px i think)

  6. #56
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    re: min width ie6.
    but the min-width for ie6 needs to be at least 1000px wide, and preferably as simple as possible. (in the quiz it was 1100px i think)
    If you're going to use border, I don't see any other way of overcoming IE6's border width limitation than using the nested divs approach that you and Paul have already illustrated. As I said above, for wide min-widths it's a toss-up between multiple border divs and a padding div with suboptimal shrink-to-fit IMO.


    Actually, given that border and padding both have quirks, we might be better off with margin to help us simulate min-width for IE6:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
    </head>
    <body>
    <div style="background:blue; min-width:1500px; width:80%">
    	<div style="background:green; margin-left:1500px; zoom:1;">
    		<div style="background:yellow; margin-left:-1500px; zoom:1; position:relative;">
    			content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    		</div>
    	</div>
    </div>
    </body>
    Here, the outermost div has a width and a min-width for all browsers; you then need a middle div with hasLayout (necessary) and margin-left. Finally, you need an inner div with hasLayout (necessary) and position:relative (necessary).

    This approach avoids both the width restriction problem of border and the shrink-to-fit problem of padding, but at the expense of needing position:relative on the inner div (and hence on the outermost div for cross-browser consistency). Also, it's never possible to avoid having the middle div.

    So: three choices, each with a different, minor associated annoyance. Given that the border method covers all eventualities without external or internal side-effects, albeit at the expense of multiple nested divs for wide min-width, you're guaranteed to have at least one suitable approach and can choose the simplest that is appropriate for your layout.


    Quote Originally Posted by RyanReese View Post
    You do know that other brorwsers don't get if a float also has display:inline;. Only IE6 reacts to it.
    Certainly. Actually, it's not so much that other browsers "ignore" or don't understand display:inline on floats; it's that CSS21 specifies that the computed value of 'display' on elements with display:inline and 'float' other than 'none' is 'block'. In fact, IE6 also happens to honour this… but has bugs such as the doubled float margin bug and the duplicate characters bug which are suppressed through explicitly specifying display:inline. (IE6 has several such talismans; explicitly setting overflow:visible on BUTTONs and INPUT buttons is another.)

    Quote Originally Posted by RyanReese View Post
    And if you are going to try nad target IE6 only don't use the underscore hack. Use the star html hack (* html #element{})
    This thread isn't really the place for a discussion of IE6 hacks, but quickly: the two hacks serve different purposes. The underscore hack is for individual properties, whereas as the star html hack is for rule sets. Each is appropriate in its place.

  7. #57
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anton P
    ...
    Actually, given that border and padding both have quirks, we might be better off with margin to help us simulate min-width for IE6:
    ...
    I like your min-width margin solution very much, thanks!

    I sure will use it.
    Happy ADD/ADHD with Asperger's

  8. #58
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    When Paul gets back from his holiday .
    I think he will get back on 5th July
    Cheers,
    Dinesh

  9. #59
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hey, I was just surfing the web for justified horizontal spacing of elements, instead of text and ran across this post. I was inspired by the cool CSS contests here and tried refining Quiz two with no JS or Hacks.

    Here is my semi-cleaned version, this quiz turned out to be quite a challenge to get the spacing to work in all browsers. Basically I figure this ends up working with any non-block elements, the justify in turn spaces out the white space between elements and the key is having the margin-left/right 100&#37; on the last element causing it to wrap and span the width of the page. Then just hide the last element from the users sight.

    The font-size, line-height, visibility, width:100% and overflow CSS declarations are basically just used to hide the last element from mainly IE, most other browsers only need the line height declared on the last element to do the trick of hiding it.

    Let me know if this solution is for better or worse I would enjoy knowing how I may have done and if there are any better CSS examples without using the Display:Table attributes.

    Thanks

    Code:
    <html>
    <head>
    
    <style type="text/css">
      .nav {
        text-align: justify;
        font-size: 1px;
        width: 100%;
        overflow-x: hidden;
      }
    	
      span { font-size:14px }
    
      .last {
        margin-right: 100%;
        line-height: 0px;
        font-size: 1px;
        visibility: hidden;
      }
    </style>
    </head>
    
    <body>
    
    <div class="nav">
      <span>stuff&nbsp;1</span>
      <span>stuff&nbsp;2</span>
      <span>stuff&nbsp;3</span>
      <span>stuff&nbsp;4</span>
      <span class="last">&nbsp;</span>
    </div>
    
    </body>
    </html>
    Last edited by Devin923; Jun 30, 2009 at 18:10.

  10. #60
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for all the extra comments while I've been away - the solutions are all interesting

  11. #61
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, when will next quiz be?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #62
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, when will next quiz be?
    I'll try and put something together on the weekend - work permitting

  13. #63
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)


Bookmarks

Posting Permissions

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