SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Vertical Align, Double Circles (Not Perfectly Round)

    Hi all, I hope you're all doing fine!

    I'm having the following issues with my code:
    - Vertical align works but produces two div's, or in my case two circles! How can I make it just one circle?
    - My circles are refusing to be perfectly round
    - Does my code seem at all messy/sloppy or does it look just fine in terms of neatness/organization?

    Here is the Fiddle link.

    Or, if you prefer the code here, here it is:

    CSS:
    Code:
    #menu_div{
        margin-top:40px;
        margin-right:10px;
        float:right;
    }
    
    .menu_circle_1 {
        height: 106px;
        width: 106px;
    }
    
    .menu_circle {
        font-family: Impact, Helvetica, sans-serif;
        background-color: white;
        color: black;
        border: 2px solid transparent;
        -moz-border-radius:50px;
        -khtml-border-radius:50px;
        -webkit-border-radius:50px;
        border-radius:50px;
        display: block;
        float: left;
        font-size: 28px;
        //font-weight: bold;
        height: 106px;
        width: 106px;
        text-align: center;
        text-decoration: none;
    }
    
    .menu_circle:hover {
        border: 2px solid black;
        cursor:pointer;
    }
    
    #menu_bg {
        height: 200px;
        background: black;
    }
    
    #menu {
        margin-top:40px;
        float:right;
        height: 150px;
        background: black;
     }
    
    #menu a {
        font-family: Impact, Helvetica, sans-serif;
        background-color: white;
        color: black;
        border: 2px solid transparent;
        -moz-border-radius:50px;
        -khtml-border-radius:50px;
        -webkit-border-radius:50px;
        border-radius:50px;
        display: block;
        float: left;
        font-size: 28px;
        //font-weight: bold;
        height: 106px;
        width: 106px;
        text-align: center;
        text-decoration: none;
    }
    
    #menu a:hover {
        border: 2px solid black;
        cursor:pointer;
    }
    
    #menu ul {
    	list-style-type: none;
    	padding-top: 5px;
    }
    
    #menu li {
    	float: left;
    	position: relative;
    	padding: 3px 0;
    	text-align: center;
        margin-right:10px;
    }
    
    #menu ul.sub-menu {
    	display: none;
    	position: absolute;
    	top: 80px;
    	left: -40px;
    	padding: 10px;
    	z-index: 90;
    }
    
    #menu ul.sub-menu li {
    	text-align: left;
    }
    
    #menu li:hover ul.sub-menu {
    	display: block;
    	//border: 1px solid #ececec;
    }
    
    #menu ul.sub-menu a {
        font-family: Impact, Helvetica, sans-serif;
        background-color: white;
        color: black;
        border: 2px solid transparent;
        display: block;
        font-size: 24px;
        padding: 10px 10px;
        //padding: 19px 25px;
        height: auto;
        width: 150px;
        border: 1px solid rgb(170, 170, 170);
        border-radius: 15px;
        background: white;
        //background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;
        text-decoration: none;
    }
    
    #menu ul.sub-menu a:hover {
        border: 1px solid black;
        cursor:pointer;
    }
    HTML:
    Code:
    <html>
    <head>
        <meta charset="UTF-8" />
    	<meta name="author" content="Pamela" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        
    	<title>Home, Sweet Home</title>
    </head>
    
    <body bgcolor="#ffffff">
    
    <div id="menu_bg">
    <div id="menu">
    
    <ul>
        <li>
            <div class="menu_circle_1" style="#position: relative; #top: -50%;">
                <a href="about.php">
                    <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                            Red
                        </div>
                    </div>
                </a>
            </div>
        </li>
    
        <li>
            <div class="menu_circle_1" style="#position: relative; #top: -50%;">
                <a href="about.php">
                    <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                            White
                        </div>
                    </div>
                </a>
                            <ul class="sub-menu">
                            <li><a href="about.php">Alaska</a></li>
                            <li><a href="about.php">Rhode Island</a></li>
                            <li><a href="about.php">Florida</a></li>
                            <li><a href="about.php">District of Columbia Downtown</a></li>
                            <li><a href="about.php">New York City</a></li>
                            </ul>
    
                
            </div>
        </li>
        
        <li>
            <div class="menu_circle_1" style="#position: relative; #top: -50%;">
                <a href="about.php">
                    <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                            Blue
                        </div>
                    </div>
                </a>
            </div>
        </li>
        
        <li>
            <div class="menu_circle_1" style="#position: relative; #top: -50%;">
                <a href="about.php">
                    <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                            Stars
                        </div>
                    </div>
                </a>
            </div>
        </li>
    
        <li>
            <div class="menu_circle_1" style="#position: relative; #top: -50%;">
                <a href="about.php">
                    <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                            Stripes
                        </div>
                    </div>
                </a>
            </div>
        </li>
    
    </ul>
    
    </div>
    </div>
    
    </body>
    </html>
    Thanks so much!

    - Pam

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am confused by what you mean mby multiple divs? Actually I am just confuse that you need so many unsemantic elements. BTW , unless you are using HTML5 you cant wrap an A tag around a DIV ( tho that isnt the cause your problem). Still you shouldn't change those inner DIVs to SPANs. Inline CSS is probably conflicting there too ( also not good practice, even if it isnt the cause of your problem) . Also you cant give position:absolute to something that has display:table-cell. (not that all rules in your inline style will be honored, since you have '#' in front of several of them). You also forgot to close the UL of your sub-menu.

    So, multiple dives because you have too many elements on your markup. As far as getting perfectly round circles,

    I hate to say it but at this point I would scrap the whole thing.

    Instead try this:
    Code:
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="Pamela" />
        <style type='text/css'>
    
    #menu {
        margin-top:40px;
        float:right;
        padding:  22px 0;
        width:100%;
        background: black;
     }
    #menu a {
        font-family: Impact, Helvetica, sans-serif;
        background-color: white;
        color: black;
        border: 2px solid transparent;
        -moz-border-radius:50%;
        -khtml-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        display: block;
        font-size: 28px;
        line-height: 106px;
        vertical-align: middle;
        /*font-weight: bold;*/
        width: 106px;
        height: 106px;
        text-align: center;
        text-decoration: none;
    }
    
    #menu a:hover, #menu .sub-menu a:hover {
        border-color: black;
        cursor:pointer;
    }
    
    #menu , #menu ul {list-style: none;}
    #menu li {
        float: left;
        position: relative;
        text-align: center;
        margin-left:10px;
    }
    
    #menu .sub-menu {
        position: absolute;
        top: 80px;
        left: -9999em;
        padding: 10px;
        z-index: 90;
    }
    
    #menu .sub-menu li {
        text-align: left;
        margin-bottom:6px; 
    
    }
    
    #menu li:hover .sub-menu {
        left: -54px;
        /*border: 1px solid #ececec;*/
    }
    
    #menu .sub-menu a {
        font-family: Impact, Helvetica, sans-serif;
        display: block;
        font-size: 24px;
        padding: 10px;
        /*padding: 19px 25px;*/
        height: auto;
        width: 150px;
        border: 1px solid #ececec;
        -moz-border-radius:15px;
        -khtml-border-radius:15px;
        -webkit-border-radius:15px;
        border-radius:15px;
        /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
        text-decoration: none;
        line-height: normal;
    }
    
    </style>
    <title>Home, Sweet Home</title>
    </head>
    
    <body>
    
    
    <ul id="menu">
        <li><a href="about.php">Red</a></li>
        <li><a href="about.php">White</a>
            <ul class="sub-menu">
            <li><a href="about.php">Alaska</a></li>
            <li><a href="about.php">Rhode Island</a></li>
            <li><a href="about.php">Florida</a></li>
            <li><a href="about.php">District of Columbia Downtown</a></li>
            <li><a href="about.php">New York City</a></li>
            </ul>
        </li>
        <li><a href="about.php">Blue</a></li>
        <li ><a href="about.php">Stars</a></li>
        <li><a href="about.php">Stripes</a></div></li>
    </ul>
    
    </body>
    </html>
    Now, isn't that cleaner?

    One additional suggestion is beware of liberal use of IDs.. it tends to cause some serious specificity issues.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pamela
    My circles are refusing to be perfectly round
    In IE they are perfect, 90-angled squares :)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, lots o unnecessary divs and things there. You could just do a normal dropdown setup, with the <a> in the lop level LIs set to display: block and rounded corners on them.

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I am confused by what you mean mby multiple divs? Actually I am just confuse that you need so many unsemantic elements. BTW , unless you are using HTML5 you cant wrap an A tag around a DIV ( tho that isnt the cause your problem). Still you shouldn't change those inner DIVs to SPANs. Inline CSS is probably conflicting there too ( also not good practice, even if it isnt the cause of your problem) . Also you cant give position:absolute to something that has display:table-cell. (not that all rules in your inline style will be honored, since you have '#' in front of several of them). You also forgot to close the UL of your sub-menu.

    So, multiple dives because you have too many elements on your markup. As far as getting perfectly round circles,

    I hate to say it but at this point I would scrap the whole thing.

    Instead try this:
    Code:
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="Pamela" />
        <style type='text/css'>
    
    #menu {
        margin-top:40px;
        float:right;
        padding:  22px 0;
        width:100%;
        background: black;
     }
    #menu a {
        font-family: Impact, Helvetica, sans-serif;
        background-color: white;
        color: black;
        border: 2px solid transparent;
        -moz-border-radius:50%;
        -khtml-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        display: block;
        font-size: 28px;
        line-height: 106px;
        vertical-align: middle;
        /*font-weight: bold;*/
        width: 106px;
        height: 106px;
        text-align: center;
        text-decoration: none;
    }
    
    #menu a:hover, #menu .sub-menu a:hover {
        border-color: black;
        cursor:pointer;
    }
    
    #menu , #menu ul {list-style: none;}
    #menu li {
        float: left;
        position: relative;
        text-align: center;
        margin-left:10px;
    }
    
    #menu .sub-menu {
        position: absolute;
        top: 80px;
        left: -9999em;
        padding: 10px;
        z-index: 90;
    }
    
    #menu .sub-menu li {
        text-align: left;
        margin-bottom:6px; 
    
    }
    
    #menu li:hover .sub-menu {
        left: -54px;
        /*border: 1px solid #ececec;*/
    }
    
    #menu .sub-menu a {
        font-family: Impact, Helvetica, sans-serif;
        display: block;
        font-size: 24px;
        padding: 10px;
        /*padding: 19px 25px;*/
        height: auto;
        width: 150px;
        border: 1px solid #ececec;
        -moz-border-radius:15px;
        -khtml-border-radius:15px;
        -webkit-border-radius:15px;
        border-radius:15px;
        /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
        text-decoration: none;
        line-height: normal;
    }
    
    </style>
    <title>Home, Sweet Home</title>
    </head>
    
    <body>
    
    
    <ul id="menu">
        <li><a href="about.php">Red</a></li>
        <li><a href="about.php">White</a>
            <ul class="sub-menu">
            <li><a href="about.php">Alaska</a></li>
            <li><a href="about.php">Rhode Island</a></li>
            <li><a href="about.php">Florida</a></li>
            <li><a href="about.php">District of Columbia Downtown</a></li>
            <li><a href="about.php">New York City</a></li>
            </ul>
        </li>
        <li><a href="about.php">Blue</a></li>
        <li ><a href="about.php">Stars</a></li>
        <li><a href="about.php">Stripes</a></div></li>
    </ul>
    
    </body>
    </html>
    Now, isn't that cleaner?

    One additional suggestion is beware of liberal use of IDs.. it tends to cause some serious specificity issues.
    Wow, thanks dresden!

    I seriously suspected my code wasn't so efficient, but I had no idea just how terribly horrendous it was! My code (if you want to call it that) was light years away from yours. By the looks of how terrible my code was, you would think I got dropped here from another planet where CSS doesn't exist! I didn't even get the CSS commenting right! What an insult to CSS!

    Thanks so much dresden! I have been analyzing your code over and over again, trying to learn as much from it as possible. I'm still quite befuddled as to the reason for my coding CSS/HTML so incorrectly. I never learned CSS or HTML for that matter, in a structured manner, but rather learn the relevant methods for whatever it is that I am trying to do--perhaps this is the issue? Do you, or anyone else, have some tips for me as to how I can seriously, seriously improve--maybe not quite as good as your level, but at least half your level?

    Again, thanks so much! You have made me see the CSS/HTML light--now I just have to figure out how to shine that light instead of just looking at it.

    - Pam

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The first mistake you made was common , so no worries, and that is to code TRYING to make it LOOK some way rather than using semantics. The CSS part is just experience, that will come soon enough


    Explaining what I did:
    Vertically centering was a trick. As you noticed you cant really vertically center on anything else but TDs , but we really could use display TD here to begin with and trying to do so would lead to adding semantically unnecessary tags anyway. So whats to do? CHEAT. You really cant use padding, because the box model add s padding to the height/width.. so unless you measured the text exactly(another thing you SHOULDN'T EVER DO) you would get these misshapen circles. So we use LINE-HEIGHT , which works as long as we dont have to wrap the text.. but since everything was one or two words.. that was unlikely to happen.

    Since we eliminated the extra tags, the problem with the dual borders on hover was automatically solved.

    but rather learn the relevant methods for whatever it is that I am trying to do--perhaps this is the issue?
    it could be. You will come to realize that is a really bad idea to write CSS piecemeal. What ever you do to one thing affects all things in the cascade , so a method that may solve your immediate issue may cause something else down the line. Thus the most effective frame of mind is to keep things simple and to think of the WHOLE code rather than one problem at a time.

    Hope that sheds a little light on the subject , for you.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Vertically centering was a trick. As you noticed you cant really vertically center on anything else but TDs , but we really could use display TD here to begin with and trying to do so would lead to adding semantically unnecessary tags anyway. So whats to do? CHEAT. You really cant use padding, because the box model add s padding to the height/width.. so unless you measured the text exactly(another thing you SHOULDN'T EVER DO) you would get these misshapen circles. So we use LINE-HEIGHT , which works as long as we dont have to wrap the text.. but since everything was one or two words.. that was unlikely to happen.
    Thanks Ray!

    How about if the text in the circle does wrap? Would the best way to do this be to omit line-height and then use span for non-wrapped lines and a div for wrapped lines like the following?

    The fiddle.

    The CSS:
    Code:
    #menu {
        margin-top:40px;
        float:right;
        padding:  22px 0;
        width:100%;
        background: black;
     }
    #menu a {
        font-family: Impact, Helvetica, sans-serif;
        background-color: white;
        color: black;
        border: 2px solid transparent;
        -moz-border-radius:50%;
        -khtml-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        display: block;
        font-size: 28px;
        /*line-height: 106px;*/
        vertical-align: middle;
        /*font-weight: bold;*/
        width: 106px;
        height: 106px;
        text-align: center;
        text-decoration: none;
    }
    
    #menu a:hover, #menu .sub-menu a:hover {
        border-color: black;
        cursor:pointer;
    }
    
    #menu , #menu ul {list-style: none;}
    #menu li {
        float: left;
        position: relative;
        text-align: center;
        margin-left:10px;
    }
    
    #menu .sub-menu {
        position: absolute;
        top: 80px;
        left: -9999em;
        padding: 10px;
        z-index: 90;
    }
    
    #menu .sub-menu li {
        text-align: left;
        margin-bottom:6px;
    
    }
    
    #menu li:hover .sub-menu {
        left: -54px;
        /*border: 1px solid #ececec;*/
    }
    
    #menu .sub-menu a {
        font-family: Impact, Helvetica, sans-serif;
        display: block;
        font-size: 24px;
        padding: 10px;
        /*padding: 19px 25px;*/
        height: auto;
        width: 150px;
        border: 1px solid #ececec;
        -moz-border-radius:15px;
        -khtml-border-radius:15px;
        -webkit-border-radius:15px;
        border-radius:15px;
        /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
        text-decoration: none;
        line-height: normal;
    }
    
    #menu span {
        margin-top: 35px;
        text-align: center;
        display: inline-block;
        padding: 0;
        width: 106px;
        height: 106px;
        overflow: hidden;
    }
    #menu .span2 {
        margin-top: 20px;
        text-align: center;
        display: inline-block;
        padding: 0;
        width: 106px;
        height: 106px;
        overflow: hidden;
    }
    The HTML:
    Code:
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="Pamela" />
        
    <title>Home, Sweet Home</title>
    </head>
    
    <body>
    
    
    <ul id="menu">
        <li><a href="about.php"><div class="span2">Red & White</div></a></li>
            <li><a href="about.php"><div class="span2">White & Blue</div></a>
            <ul class="sub-menu">
            <li><a href="about.php">Alaska</a></li>
            <li><a href="about.php">Rhode Island</a></li>
            <li><a href="about.php">Florida</a></li>
            <li><a href="about.php">District of Columbia Downtown</a></li>
            <li><a href="about.php">New York City</a></li>
            </ul>
        </li>
        <li><a href="about.php"><span>Blue</span></a></li>
        <li ><a href="about.php"><span>Stars</span></a></li>
        <li><a href="about.php"><span>Stripes</span></a></div></li>
    </ul>
    
    </body>
    </html>
    Thanks!

    - Pam

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, just one correction to my above post (too late to edit my previous post): one span for non-wrapped lines and a separate span for wrapped lines like the following?

    Here is the corrected fiddle.

    The CSS is the same, but just one slight modification to the HTML:
    Code:
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="Pamela" />
        
    <title>Home, Sweet Home</title>
    </head>
    
    <body>
    
    
    <ul id="menu">
        <li><a href="about.php"><span class="span2">Red & White</span></a></li>
            <li><a href="about.php"><span class="span2">White & Blue</span></a>
            <ul class="sub-menu">
            <li><a href="about.php">Alaska</a></li>
            <li><a href="about.php">Rhode Island</a></li>
            <li><a href="about.php">Florida</a></li>
            <li><a href="about.php">District of Columbia Downtown</a></li>
            <li><a href="about.php">New York City</a></li>
            </ul>
        </li>
        <li><a href="about.php"><span>Blue</span></a></li>
        <li ><a href="about.php"><span>Stars</span></a></li>
        <li><a href="about.php"><span>Stripes</span></a></div></li>
    </ul>
    
    </body>
    </html>

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you were close.

    Getting rid of the line height is not the solution tho, that only worked because of the mathematics of this specific case. :/ That's CCS trickery for you. You could adjust the amount of line space so that it verically centers but chances are you'd end up with a large amount of space between text lines. So we are left having to add that span. However, you are still depending on tweaking line-height for multiple lines and that's not good.


    so here is the trick:
    #menu a>span { line-height: 1;display: inline-block;vertical-align: middle}
    #menu a:after { content: ""; display: inline-block; height:106px;vertical-align: middle}

    and the explanation:
    a>span ( is so we dont have to use a class name, as it automatically targets any span that is a DIRECT child of the anchor link.)
    {#menu a>span { line-height: 1;display: inline-block;} set the lineheight back to normal within the span, and gives that element a display of inline-block...which acts just like it sounds... this means we can align it vertically with another inline element.

    where do we get that extra element? We use a:after{content:""} to create it.
    we give it a display of inline-block; and a height that's the same as the height of your circle... and that gives us the effect we wanted; the text will automatically align vertically to any # of lines or font size.
    I hope that sheds more light on the subject.

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    you were close.

    Getting rid of the line height is not the solution tho, that only worked because of the mathematics of this specific case. :/ That's CCS trickery for you. You could adjust the amount of line space so that it verically centers but chances are you'd end up with a large amount of space between text lines. So we are left having to add that span. However, you are still depending on tweaking line-height for multiple lines and that's not good.


    so here is the trick:
    #menu a>span { line-height: 1;display: inline-block;vertical-align: middle}
    #menu a:after { content: ""; display: inline-block; height:106px;vertical-align: middle}

    and the explanation:
    a>span ( is so we dont have to use a class name, as it automatically targets any span that is a DIRECT child of the anchor link.)
    {#menu a>span { line-height: 1;display: inline-block;} set the lineheight back to normal within the span, and gives that element a display of inline-block...which acts just like it sounds... this means we can align it vertically with another inline element.

    where do we get that extra element? We use a:after{content:""} to create it.
    we give it a display of inline-block; and a height that's the same as the height of your circle... and that gives us the effect we wanted; the text will automatically align vertically to any # of lines or font size.
    I hope that sheds more light on the subject.
    Wow, thanks Ray! That is CSS trickery, indeed! I had to carefully read it a few times.

    Quote Originally Posted by dresden_phoenix View Post
    You could adjust the amount of line space so that it verically centers but chances are you'd end up with a large amount of space between text lines.
    That's exactly what happened and is what threw me off, and in turn made me wrongly throw away the line height!

    This is my first time seeing that "after" value, but I'm already liking it!

    Did you intentionally omit the semi-colons before the final brackets, after vertical-align: middle?

    Thanks again!

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    Did you intentionally omit the semi-colons before the final brackets, after vertical-align: middle?
    The semi-colon is a separator, not a terminator, so strictly speaking it's unnecessary after the final declaration. I always include it, because I might want to add another rule later and, knowing me, will probably forget to put the semi-colon in first.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    The semi-colon is a separator, not a terminator, so strictly speaking it's unnecessary after the final declaration.
    Thanks TechnoBear! So it looks like in regards to the semi-colon, CSS isn't too much different than the English language.

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    So it looks like in regards to the semi-colon, CSS isn't too much different than the English language.
    oooh I like that!

    But yeah, I was kinda busy.. so I was being lazy, since it is allowed on CSS. It is good practice to end all your declarations with ";" IF ONLY because that way you can add more declarations to your rules later w/o having to worry about starting from a ";"


Tags for this Thread

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
  •