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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS - aligning corner picture problems

    Hi there, i'm trying to get corners working on a new site template but at the moment it's giving me some problems.

    It's looking how i want it to look in IE (which doesn't mean it's right in any way) but it's displaying incorrectly in Firefox.

    Just looking for a hand in getting the bottom corners to align properly.

    Here is the html:

    Code:
    <html>
    	<head>
    		<title>Twelve 3.0 Network Portal</title>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		
    		<link rel="stylesheet" type="text/css" href="./stylesheets/twelve2.css" />
    
    	</head><body>
    	<div class="headerbar">
    		<span class="corners-top"><span></span></span>
    	</div>
    	<div class="content">
    		<div id="latestentries">
    			<div class="inner"><span class="corners-bottom"><span></span></span></div>
    		</div>
    	</div>
    </body>
    </html>
    And this is the content of twelve2.css:

    Code:
    .headerbar {
    	background: #D1FDD0 none repeat-x;
    	color: #FFFFFF;
    	height: 100px;
    	width: 90&#37;;
    	margin-right: auto;
    	margin-left: auto;
        text-align: center;
    }
    
    .content {
    	background: #E8FDEC none repeat-x;
    	color: #FFFFFF;
    	height: 550px;
    	width: 90%;
    	margin-right: auto;
    	margin-left: auto;
        text-align: center;
    }
    
    .content #latestentries {
    	background-color: #D1FDD0;
    	background-position: top;
    	float: right;
    	width: 300px; 
    	height: 500px;
    }
    
    span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span, 
    .inner span.corners-top, .inner span.corners-bottom, .inner span.corners-top span, .inner span.corners-bottom span {
    	font-size: 1px;
    	line-height: 1px;
    	display: block;
    	height: 18px;
    	background-repeat: no-repeat;
    }
    
    span.corners-top {
    	background-image: url("./images/2/cnr-top-left.gif");
    	background-position: 0 0;
    	margin: 0 0px;
    }
    
    span.corners-top span {
    	background-image: url("./images/2/cnr-top-right.gif");
    	background-position: 100% 0;
    }
    
    span.corners-bottom {
    	background: #E8FDEC url("./images/2/cnr-bot-left.gif") no-repeat bottom left;
    	position: relative;
    	padding-top: 0;
    	padding-bottom: 18px;
    	margin: 1em 0 0 0;
    	height: 100%;
    }
    
    span.corners-bottom span {
    	background: #E8FDEC url("./images/2/cnr-bot-right.gif") no-repeat bottom right;
    	padding: 1em 2em 18px 0;
    	margin: 0 0 -18px 18px;
    	height: 100%;
    }
    
    .inner span.corners-top {
    	background-image: url("./images/2/cnr-top-left2.gif");
    	background-position: 0 0;
    	margin: 0 0px;
    }
    
    .inner span.corners-top span {
    	background-image: url("./images/2/cnr-top-right2.gif");
    	background-position: 100% 0;
    }
    
    .inner span.corners-bottom {
    	background: #d1fdd0 url("./images/2/cnr-bot-left2.gif") bottom left no-repeat;
    	position: relative;
    	padding-top: 0;
    	padding-bottom: 18px;
    	margin: 1em 0 0 0;
    	height: 100%;
    }
    
    .inner span.corners-bottom span {
    	background: #d1fdd0 url("./images/2/cnr-bot-right2.gif") bottom right no-repeat;
    	padding: 1em 2em 18px 0;
    	margin: 0 0 -18px 18px;
    	height: 100%;
    }
    The corner images were generated by this: http://tools.sitepoint.com/spanky/index.php

    And here is the page running with the html and css: http://www.imtwelve.com/new/index2.php

    The bottom corners show at the top of the right panel instead of the bottom.
    ".inner span.corners-bottom" and ".inner span.corners-bottom span" seem to be the ones not working correctly.

    If any of this hasn't been clear, please let me know and i'll try to explain what i was doing better. Any help would be most appreciated.

    Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello nanolucas,
    Wow, that link is really a mess!
    I'll look at the code you posted a bit instead.

    All I did really is take the height:500px; off #latestentries and add margin:450px 0 0 0; to .inner so it would look like it was pushed down by some content.

    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">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Twelve 3.0 Network Portal</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    .headerbar {
    	background: #D1FDD0;
    	color: #FFFFFF;
    	height: 100px;
    	width: 90%;
    	margin: 20px auto 0 auto;
        text-align: center;
    }
    .content {
    	background: #E8FDEC;
    	color: #FFFFFF;
    	height: 550px;
    	width: 90%;
    	margin: 0 auto;
        text-align: center;
    }
    .content #latestentries {
    	background: #D1FDD0;
    	float: right;
    	width: 300px; 
    }
    span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span, 
    .inner span.corners-top, .inner span.corners-bottom, .inner span.corners-top span, .inner span.corners-bottom span {
    	font-size: 1px;
    	line-height: 1px;
    	display: block;
    	height: 18px;
    	background-repeat: no-repeat;
    }
    span.corners-top {
    	background: url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-top-left.gif") no-repeat;
    }
    span.corners-top span {
    	background: url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-top-right.gif") 100% 0 no-repeat;
    }
    span.corners-bottom {
    	background: #E8FDEC url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-bot-left.gif") no-repeat bottom left;
    	padding-bottom: 18px;
    	margin: 1em 0 0 0;
    }
    span.corners-bottom span {
    	background: #E8FDEC url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-bot-right.gif") no-repeat bottom right;
    	padding: 1em 2em 18px 0;
    	margin: 0 0 -18px 18px;
    }
    .content #latestentries .inner {
    	width: 300px; 
    	margin-top: 450px;
    }
    .inner span.corners-top {
    	background: url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-top-left2.gif") 0 0;
    }
    .inner span.corners-top span {
    	background-image: url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-top-right2.gif");
    	background-position: 100% 0;
    }
    .inner span.corners-bottom {
    	background: #d1fdd0 url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-bot-left2.gif") bottom left no-repeat;
    	padding-bottom: 18px;
    	margin: 1em 0 0 0;
    }
    .inner span.corners-bottom span {
    	background: #d1fdd0 url("http://www.imtwelve.com/new/stylesheets/images/2/cnr-bot-right2.gif") bottom right no-repeat;
    	padding: 1em 2em 18px 0;
    	margin: 0 0 -18px 18px;
    } 
    </style>
    </head>
    <body>
    	<div class="headerbar">
    		<span class="corners-top"><span></span></span>
    	</div>
    	<div class="content">
    		<div id="latestentries">
    			<div class="inner"><span class="corners-bottom"><span></span></span></div>
    		</div>
    	<!--end .content--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    nanolucas (01-15-2008)

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ah so it was actually fine all along but just lacking in content? How very frustrating! Thanks so much for the help

    Will stop me going over and over it for no reason.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by nanolucas View Post
    Ah so it was actually fine all along but just lacking in content? How very frustrating! Thanks so much for the help

    Will stop me going over and over it for no reason.
    Pretty much. The spans with your corners stayed at the top when you put that height:500px; in. You just needed something to push the corners to the bottom.
    Be sure and remove the margin I put in there when you do put some content in that div.
    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
    •