CSS - aligning corner picture problems

nanolucas

01-15-2008, 02:38 AM

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:

<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:

.headerbar {
background: #D1FDD0 none repeat-x;
color: #FFFFFF;
height: 100px;
width: 90%;
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.

Excavator

01-15-2008, 10:53 AM

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.

<!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>
</div>
</body>
</html>

nanolucas

01-15-2008, 02:40 PM

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.

Excavator

01-15-2008, 05:46 PM

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.