Background Images

[Magikey]

Hello all. I am very new to CSS and have found myself in a bind.

I am trying to insert a background image, that is in the right margin. The image appears fine in the editor, but when it is viewed, it is cut off. Also, I would like for the text that will be placed there to have some space between the borders of the image.

Here is the code I used for the image:

.quicklink {background-image: url(images/bor_beige.gif);
background-repeat: no-repeat;
MARGIN-TOP: 0px; FONT-SIZE: 12px; WIDTH: 200px; HEIGHT: 245px; FLOAT: right; MARGIN-BOTTOM: 1.5em; MARGIN-LEFT: 1.5em; WIDTH: 25%; COLOR: #1e56a0; TEXT-INDENT: -0.33em; LINE-HEIGHT: 1.5em; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Geneva, Helvetica, sans-serif; BACKGROUND-COLOR: #f3f0cd}

.quicklink P {PADDING-RIGHT: 1em; PADDING-LEFT: 2em; PADDING-BOTTOM: 1.33em; PADDING-TOP: 0.5em}

The url is: http://iwdtestsite.com/Premier/home.htm. Here is a link to the CSS: http://iwdtestsite.com/Premier/main.txt.

Thanks in advance for any and all your help.

Magikey

[moderator's note: edited to correct links]

[DaveSW]

Can you send us a screenshot, and annotate what should be where? In IE6 I'm not sure what the problem is.

[ray326]

Remove that width:25% and change the width:200px to width:166px and you should be good to go. That second width is what's getting you.

[Magikey]

Thank you Ray. That solved the first part of my problem. Now I would like to know how to make sure the text is within the the borders of that image. As you can see, the words, "Quick Links" is right on the border. The url is: http://iwdtestsite.com/Premier/home.htm. Here is a link to the CSS: http://iwdtestsite.com/Premier/main.txt.

Thank you again for your help.

Peggy

[Sam]

page not found...

[Magikey]

I'm sorry. It is:

http://iwdtestsite.com/Premier/home.htm

[Sam]

it looks fine here, but if you want to increase the space, just increase your padding-top, unless there's something I'm missing

[Magikey]

Thank you Sam. Since you influenced me to use CSS in the first place, how do you think I did for my first try at an all CSS page? I still have a lot to learn. But I would like to send a big THANK YOU for your assistance.

Magikey

[Sam]

a few things i noticed:
the image on the top, with all the people, repeats at higher resolutions
the padding on the top of quick links is a bit to much in firefox

[ray326]

Looks nice. From a symantic standpoint you might consider replacing that into para with an h2 and consider using an h2 for the quick links heading followed by a ul of links.

[Magikey]

Hello Ray and Sam.

I've been consistently working to improve that same page with CSS. I have run into what I hope is the final two problems.

1. The top navigation (which now has a list style)- I have text decoration set at none, yet it is still underlining the links. the stylel is as follows:

#nav {font-size: 95%; line-spacing: 2em; border-bottom: 1px solid #1a46a0; background-color: #ece7aa; width: 120px; padding-left: 2em; margin-top: 3px;}
#nav ul {list-style-image: url(image/arrow_top) inside none; margin-left: -1em; padding-left: 0; width: 12em; margin-top: .5em;}
#nav ul li a:link: {color: #1a46a0; text-decoration: none; }
#nav ul li a:visited: {color: #1a46a0; text-decoration: none; }
#nav ul li a:hover: {color: #CC0000; text-decoration: none; }


2. I still can't get the quick link to work, meaning, the text is too close to the margins. That style is:

#quicklink {background-image: url(images/bor_beige.gif); background-repeat: no-repeat; MARGIN-TOP: 10px; FONT-SIZE: 11px; WIDTH: 166px; HEIGHT: 245px; FLOAT: right; MARGIN-BOTTOM: 1.5em; MARGIN-LEFT: 1.5em; COLOR: #1e56a0; TEXT-INDENT: -0.33em; LINE-HEIGHT: 1.5em; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Geneva, Helvetica, sans-serif; BACKGROUND-COLOR: #f3f0cd}
#quick {padding: 20px 5px 20px 5px; width: 176;}
#quicklink P {PADDING: 3px;}
#quicklink p a:link {color: CC0000; text-decoration: underline;}
#quicklink p a:visited {color: CC0000; text-decoration: underline;}
#quicklink p a:hover {color: #1a46a0; text-decoration: underline;}
#quicklink th {color: CC0000; font-weight: bold; font-size: 85%;}

the page is found at: http://iwdtestsite.com/Premier/index3.htm.

Thank you.

Magikey

[Magikey]

I'm sorry, the link isn't working correctly:

http://iwdtestsite.com/Premier/index3.htm

[Sam]

you do realize you're in quirks mode, correct? This may be part of the problem. perhaps this list of valid doctypes will help