SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS code help

  1. #1
    SitePoint Enthusiast Dr. Corvinus's Avatar
    Join Date
    Oct 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation CSS code help

    Hi,

    I have been trying to figure out the following code but I am stuck, it is derived from the working code for the footbag freaks site.

    It fixes the following problem:



    You can see the page here:

    http://www.wutani.com/sitepoint/test.html

    I cleaned it as much as I could without messing the layout to get to something small and simple to understand.

    I understand 3 column layout with footer, sidebars float right and left, clear at the bottom all that, but the last part of the code makes no sense to me. It works fine, though it crashes my visual web developer so don't open it there (I don't know why).

    The #maincontent I understand, but I am lost in the following parts:

    * html #content
    .x
    * html .xx

    Can someone help me and tell me what's going on...?
    Why those floats?
    I thought (and I could be wrong I am still learning) that * html was to target IE but then it would overwrite the #maincontent part, Im confused
    Thanks! I really appreciate it!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Footbag Freaks</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    *  
    {
        margin: 0;
        padding: 0;
    }
    
    body
    {
        color: #ffffff;
        background: #050845 url(img/bg.jpg) repeat-x;
        font: small Arial, Helvetica, Verdana, sans-serif;
        padding-bottom: 2%;
    }
    
    #wrapper
    {
        background: #fdf8f2;
        margin: 2% 3% 0 3%;
        padding: 10px;
    }
    
    #main
    {
        margin-top: 10px;
        background: #ffffff url(img/sidebarbg.gif) top right repeat-y;
        height: 1%;
    }
    
    #mainfeature
    {
        background: #112236 url(img/mainimg.jpg) no-repeat;
        color: white;
        padding: 7em 2em 1em 140px;
    }
    
    #sidebar
    {
        float: right;
        width: 220px;
    }
    
    #sidebar2
    {
        float: left;
        width: 159px;
        border-top: 1px solid #b9d2e3;
        border-left: 1px solid #b9d2e3;
        background: white;
    }
    
    #footer
    {
        border: 1px solid #b9d2e3;
        border-left: none;
        border-right: none;
        margin: 10px 0 0 0;
    }
    
    #footer p
    {
        font-size: 90%;
        color: #256290;
        padding: 0.2em 0 0.2em 1em;
    }
    
    #clearone
    {
        clear: both;
        height: 1px;
        overflow: hidden;
    }
    
    #main2
    {
        background: url(img/leftbg.gif) repeat-y;
        height: 1%;
    }
    
    #content
    {
        margin: 0 240px 0 160px;
        border-top: 1px solid #b9d2e3;
        border-bottom: none;
        height: 1%;
    }
    
    /* From this point on I am in trouble*/
    
    * html #content
    {
         margin: 0 21px 0 1px;
    }
    
    .x
    {
        float: left;
        width: 100%;
    }
    * html .xx
    {
        float: left;
    }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <img src="img/logo.gif" alt="Footbag Freaks" height="77" width="203" />
            </div>
            <div id="main">
                <div id="main2">
                    <div id="sidebar"></div><!-- sidebar -->
                    <div id="sidebar2"></div><!-- sidebar2 -->
                    <div class="xx">
                        <div id="content">
                            <div class="x">
                                <div id="mainfeature">
                                    <h2>Simon Says</h2>
                                </div><!-- mainfeature -->
                                <div class="inner">
                                    <h2>Recent Features</h2>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div id="clearone">&nbsp;</div>
                    </div><!-- content -->
                </div><!-- main2 -->
            </div><!-- main -->
            <div id="footer"><p>Copyright 2006 - All Rights Reserved</p></div>
        </div>
    </body>
    </html>
    Corvinus
    Fortune favors the bold...!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Although Ben has already described this I will try again

    The * html .xx {float:left} is just for ie6 and under and eliminates the 3 px jog (among other things) by making it a widthless float that will sit between the other two floats. Only ie gets this because other browsers would make the float extend to 100&#37; and it wouldn't fit. They don't need it anyway.

    The margins are then overwritten to give ie6 and under inner margins inside the middle section. * html #content {margin: 0 21px 0 1px}.

    The style .x is given to all browsers and is a 100% float the fits inside the middle and will restrict the clearing of inner elements (that use the clear property) to the centre column and not clear the floated side columns.

    That's about it. It could be done with one less div using negative margins but thats another topic.

    Note you shouldn't put your height:1% hacks in the main code as it will affect all browsers when only ie6 needs it.

    Code:
    #content
    {
        margin: 0 240px 0 160px;
        border-top: 1px solid #b9d2e3;
        border-bottom: none;
        height: 1%;
    }
    That would need to be given to ie only.

    Code:
    #content
    {
        margin: 0 240px 0 160px;
        border-top: 1px solid #b9d2e3;
        border-bottom: none;
        min-height: 0;/* ie7 haslayout*/
    }
    /* mac hide \*/
    * html #content {height:1%}
    /* ie6-  haslayout*/
    Last edited by Paul O'B; Mar 2, 2007 at 06:23. Reason: Typo - See kravvitz's coment

  3. #3
    SitePoint Enthusiast Dr. Corvinus's Avatar
    Join Date
    Oct 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you very much, your explanation makes it all clear, I finally understand what the code is doing, and how it fixes the problem, I just needed someone that could word the solution explained as you did, I found it difficult to understand a short sentence, and I really tried.

    Seriously, thank you!

    Ben,

    You can lead a horse to water, but you can't make it drink
    But someone had to show the horse how to drink slowly the first time so that he didn't choke right? I bet the horse did not start running just after being born either....

    I am sorry but I do not have to like your remarks, I need help, not remarks...

    Anyway, I thank you for the previous help, but if I ask again is because your answers were too complicated and as I said in the post that you refer to, I bought the book because I am "learning".

    It is nice to know the answer, but it is better to understand it.

    Thank you guys!

    Thanks Paul!
    Fortune favors the bold...!

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    /* mac hide \*/
    * html #content {height:1*}
    /* ie6-  haslayout*/
    Paul, what's the asterisk after the 1 there for? Shouldn't it be "px" or "&#37;"?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •