Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145

    Opera not displaying correctly!


    Hi,

    I am trying to do some simple CSS. I have succeced in having the same output in both IE6.0 and FireFox, however Opera is not giving me the same result. Here is the CSS and HTML code:
    Code:
     <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
      <head>
        <style>
    
          /* Hides from IE-mac \*/
          * html .clearfix {height: 1%;}
          .clearfix {display: block;}
          /* End hide from IE-mac */
    
          div.box{
    
            border: 2px solid black;
            width: 200px;
            height: 200px;
          }
    
          div.box div.innerBox{
    
            border: 1px solid red;
            display:inline-block;
            margin: 0px;
          }
    
          div.box div.innerBox:after {
            content: ".";
            display: block;
            height: 0;
            font-size: 0;
            clear: both;
            visibility: hidden;
              }
    
          div.box div.innerBox div.innerInnerBox{
    
            border: 1px solid blue;
            float: left;
          }
    
        </style>
    
    
      </head>
      <body>
        <div class="box">
          <div class="innerBox">
            <div class="innerInnerBox">
              1
            </div>
            <div class="innerInnerBox">
              2
            </div>
          </div>
          <div class="innerBox">
            <div class="innerInnerBox">
              3
            </div>
            <div class="innerInnerBox">
              4
            </div>
          </div>
    
        </div>
      </body>
    </html>
    What I am trying to achieve is having one big box (class=box), with a black border, containing several box (class=innerBox) (under each other) with a red border, and these boxes have other boxes (class=innerInnerBox) next to each other.

    Internet Explorer and FireFox have achieved the result I am aiming for; however Opera is not displaying fine. Opera is placing the InnerBoxes next to each other as well.

    Opera is doing this because I have the ‘display:inline-block;’ in the div.innerBox CSS. However I can not just remove this, because other wise it will not display fine in IE6.0!

    Thanks you very much for any suggestions.

    Regards,
    Sim085
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    That's your problem. Opera 7+ support display:inline-block properly while IE/Win and Firefox don't.

    Use the clearfix technique as it was written and everything will be fine.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Hi Kravvitz,

    I am using the tutorial specified here which once you gave me (together with other links):

    http://www.positioniseverything.net/easyclearing.html

    As much as I know, the hack I used above is exactly the same as the one in that tutorial, as much as I know.

    Or the one you gave me now is even better?

    Regards,
    Sim085
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    The article I linked to is the other one on that technique. They're about the same.

    The problem is that the order of rules (except for the one with the :after pseudo-element as part of its selector) in that technique matters.

    Remove "display:inline-block;" from the "div.box div.innerBox" rule and then try it like this:
    Code:
    .clearfix:after,
    div.box div.innerBox:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility:hidden;
    }
    .clearfix,
    div.box div.innerBox {
      display: inline-block;
    }
    /* Hides from IE Mac \*/
    * html .clearfix, * html div.box div.innerBox {height: 1%;}
    .clearfix,div.box div.innerBox {display:block;}
    /* End Hack */
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Thanks,

    that worked fine. However do you think I should use the one you have sugested in the previous post? Is that one better then this.

    I had already used this in the past, and it worked fine. However if the other one is better, I will find those css and change them accordingly!

    Regards,
    Sim085
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome

    *chuckles* Look at the code closely. The classes are named differently, but the only significant difference is that the one I linked to adds the font-size property to the first rule. I use the variant that doesn't include the font-size property.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2006
    Posts
    20
    Rep Power
    0
    So why not just do the css like this:
    Code:
        <style>
    
        div.box{
          border: 2px solid black;
          width: 200px;
          height: 200px;
        }
    
        div.box div.innerBox {
          display: block;
          *display: inline-block;
          border: 1px solid red;
        }
    
        div.box div.innerBox:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility:hidden;
        }
    
        div.box div.innerBox div.innerInnerBox{
          border: 1px solid blue;
          float: left;
        }
    
        </style>
    I tried this on IE6.0, FireFox and Opera, and it always showed correctly! wouldn't this hack be simpler? or I am actually being stupid when doing something like that?

    Best Regards,
    bormli
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Hi,

    sorry to disturb again, but why not do the simple hack mentioned above:
    Code:
    div.box div.innerBox {
      display: block;
      *display: inline-block;
      border: 1px solid red;
    }
    
    div.box div.innerBox:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility:hidden;
    }
    The above hack does work on IE6.0, FireFox, and Opera, and now I also tested it on IE7.0 and it works as well. So why not just use that hack? Is it unprofessional? or potentially backfiring?

    Thanks & Regards,
    Sim085
    Last edited by sim085; September 15th, 2006 at 04:39 PM.
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    *display: inline-block; is not valid CSS. It isn't a well known hack either. Using it is an extremely bad idea. By the way Opera 5 is prone to this bug just like IE/Win.

    Also, using it in place of the other hacks will keep this clearing technique from working in IE5/Mac.

    If you don't like this clearing technique, than you can often use the overflow clearing technique.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Aaa ok, so basically that would not work on all browsers! thanks

    Regarding not being valid CSS, do you mean it is a hack? or it can not be considered as a hack either? (sorry, but did not understand exactly what not valid CSS means!)

    Thanks and Regards,
    Sim085
  20. #11
  21. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Tony's clearfix hack can be further simplified, especially if you are willing to ignore Mac IE, as we should by now.

    The inline-block value for display is necessary for IE Mac, but it has hidden benefits. It also triggers hasLayout[1] in WinIE, which is the purpose of the Holly Hack.

    Using Claire's tripswitch is dead simple,
    Code:
    .floatcontainer:after { 
        content: "."; 
        display: inline-block; /*this is part 1 of switch*/  
        height: 0; 
        font-size:0; 
        clear: both; 
        visibility:hidden; } 
    
    .floatcontainer {
        display: block; /*this is part 2*/
        }
    If you just must support IE Mac, wrap the second part in the "hide from Mac" comment. Notice that the original clearfix included the hasLayout tripswitch, making the Holly Hack redundant, anyway.

    cheers,

    gary

    [1] See Claire Campbell's hasLayout Tripswitch article. Claire is a CSS luminary and moderates the css forum at Webmaster World Forums as SuzyUK.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2006
    Posts
    558
    Rep Power
    16
    Originally Posted by kk5st
    Code:
    .floatcontainer:after { 
        content: "."; 
        display: inline-block; /*this is part 1 of switch*/  
        height: 0; 
        font-size:0; 
        clear: both; 
        visibility:hidden; } 
    
    .floatcontainer {
        display: block; /*this is part 2*/
        }
    Hi kk5st,

    So I try to do that on opera but to no avail , in opera the div seems like in the left side unlike the rest of the browsers IE,FF,N.

    css
    Code:
    div#header_navigation {
    	position:absolute;
    	float:right;
    	display: block;
    	text-align:center;
    	font-size:13px;
    	font-weight:bolder; 	
    	z-index:1; 
    	margin:33px 119px 0 0;
    }
    div#header_navigation ul {
    	float:right;
    	list-style-type:none;
    }
    div#header_navigation li {
    	display:inline
    }
    div#header_navigation a {
    	float:left;
    	width:5em;
    	text-decoration:none;
    	color:#666666;
    	background-color:#fffd52;
    	padding:.1em .1em;
    	border-left:2px solid white;
    }
    div#header_navigation a:hover {
    	color:#FFFFFF	
    }
    .floatcontainer:after {
        content: ".";              
    	display: inline-block;          
        height: 0;             
        clear: both;          
        visibility: hidden;	 
    }
    
    .floatcontainer {display: inline-block;}
    * html .clearfix {height: 1%;}
    .floatcontainer {display: block;}
    </style>
    html
    Code:
    <body>
    <div id="header_navigation" class="floatcontainer">
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About Us</a></li>
    		</ul>
    </div>					
    </body>
  24. #13
  25. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Originally Posted by kk5st
    The inline-block value for display is necessary for IE Mac, but it has hidden benefits. It also triggers hasLayout[1] in WinIE, which is the purpose of the Holly Hack.
    I learned that shortly after IE7 beta 2 preview was released.

    Originally Posted by kk5st
    Using Claire's tripswitch is dead simple,
    Code:
    .floatcontainer:after { 
        content: "."; 
        display: inline-block; /*this is part 1 of switch*/  
        height: 0; 
        font-size:0; 
        clear: both; 
        visibility:hidden; } 
    
    .floatcontainer {
        display: block; /*this is part 2*/
        }
    If you just must support IE Mac, wrap the second part in the "hide from Mac" comment. Notice that the original clearfix included the hasLayout tripswitch, making the Holly Hack redundant, anyway.
    That doesn't work in IE5-7/Win, Firefox, or Opera.

    Originally Posted by sim085
    Regarding not being valid CSS, do you mean it is a hack? or it can not be considered as a hack either? (sorry, but did not understand exactly what not valid CSS means!)
    There are two categories of CSS hacks -- those that aren't valid and those that are. I only recommend a few of the ones that are.

    The star-property and underscore hacks are both non-validating CSS hacks.
    The Star HTML hack and Escaped Comment-End hack are both validating CSS hacks.

    For the most part validating hacks exploit browser bugs while not braking any of CSS2's syntax rules or use properties or selectors that not all browsers support.
    Last edited by Kravvitz; September 17th, 2006 at 01:26 AM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  26. #14
  27. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    ops: Sorry, I got carried away. It should be
    Code:
    .clearing:after {
        content: "."; 
        display: block;
        height: 0; 
        clear: both; 
        visibility: hidden;
        }
    
    .clearing { 
        display: inline-block;
        }
    
    .clearing {
        display: block;
        }
    which works in Firefox, IE and Opera.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  28. #15
  29. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It doesn't work in IE5.0/Win or IE5/Mac though.

    Neither display:inline-block; nor IE's zoom property trigger hasLayout in IE5.0/Win as they do in IE5.5+/Win.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo