CSS problem

[Kevin]

Hey everyone,

I am in somewhat of a pickle. I am trying to create a border around a page
header.

I have made 3 images, respectively the left-, middle- and rightside. So far
the middle section is working, but it would appear that the left and right
sides are not. I have no clue what's wrong here. As far as I can see
this -should- work. Well obviously it doesn't.

Can someone help me out to settle this issue?

Thanks a million!

Kevin

Page url: http://www.kurvalyn.com/testsite/test.html

CSS coding:
body {
background-color : #faf3e3;
color : #404040;
margin : 5px 5px 5px 5px;
font-family : "High Tower Text", fantasy;
font-size : 11px;
}


/* Page Header Styles */
div.PageHeader {
float : left;
width : 100%;
font-size : 4em;
font-variant : small-caps;
height : 48px;
vertical-align : middle;
}
div.PageHeaderLeft {
position : absolute;
top : 5px;
right : 5px;
background-image : url(../images/hd_left.gif);
background-repeat : no-repeat;
height : 48px;
margin : 0;
}
div.PageHeaderMiddle {
position : relative;
background-image : url(../images/hd_middle.gif);
background-repeat : repeat-x;
}

div.PageHeaderRight {
float : right;
background-image : url(../images/hd_right.gif);
background-repeat : no-repeat;
height : 48px;
margin : 0;
}

 

[Roy Schestowitz]

Hey everyone,

I am in somewhat of a pickle. I am trying to create a border around a page
header.

I have made 3 images, respectively the left-, middle- and rightside. So
far the middle section is working, but it would appear that the left and
right sides are not. I have no clue what's wrong here. As far as I can see
this -should- work. Well obviously it doesn't.

Can someone help me out to settle this issue?

Thanks a million!

Kevin

Page url: http://www.kurvalyn.com/testsite/test.html

CSS coding:
body {
background-color : #faf3e3;
color : #404040;
margin : 5px 5px 5px 5px;
font-family : "High Tower Text", fantasy;
font-size : 11px;
}


/* Page Header Styles */
div.PageHeader {
float : left;
width : 100%;
font-size : 4em;
font-variant : small-caps;
height : 48px;
vertical-align : middle;
}
div.PageHeaderLeft {
position : absolute;
top : 5px;
right : 5px;
background-image : url(../images/hd_left.gif);
background-repeat : no-repeat;
height : 48px;
margin : 0;
}
div.PageHeaderMiddle {
position : relative;
background-image : url(../images/hd_middle.gif);
background-repeat : repeat-x;
}

div.PageHeaderRight {
float : right;
background-image : url(../images/hd_right.gif);
background-repeat : no-repeat;
height : 48px;
margin : 0;
}

Looking at the source at:

http://www.kurvalyn.com/testsite/css/test.css

I can see the following in div.PageHeaderMiddle:

margin-left : 5px;
margin-right : 5px;

You probably want these to be 0 in value. In your original post you do not
have these attributes...

Roy

 

[Jonathan N. Little]

Kevin wrote:
If you are using images are your header why make them background, just
put them in the header div and be done with it. Why use an image to
create the boarder? If you want the dots in the corner and your header
text is an image, create the image with just the dots in the corner and
put the image in a div with a 1 px black border...

If you want to add text to this header div it gets more complicated,
with CSS you can spec corners on your div border but your are going to
have trouble with legacy browsers and IE