CSS Problem

[Dale Ward]

Hi, Gang!

Can somebody examine this CSS code and tell me why my background image is not displaying?

BODY { font-family: Verdana, Arial, Sans-serif;
	font-size:medium;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	font-variant:normal;
	color: #00FFFF;
	
	background: #000000;
	background-image: stars2.gif;
	}

Thanks a lot, folks!

[v-six]

what were you intending with the

background: #000000;

If you want to set a background color in case the image doesnt load, use

background-color: #000000;

if your background is supposed to repeat, add this line:

background-repeat: repeat;

[DJ-Zep]

Replace
background-image: stars2.gif;

with

background-image: url(stars2.gif);

[v-six]

Originally Posted by DJ-Zep

Replace
background-image: stars2.gif;

with

background-image: url(stars2.gif);

well yeah, that too That was the so-close-to-my-face that I missed it part

[Dale Ward]

Interesting...

Apparently, the CSS Wizard in the web development package I have failed to insert the proper commands to do the job. I'll have to have words with the author.

However, about the URL thing... at the moment, I don't have a URL. All the files are sitting in a directory on my hard drive. How do I get around that?

And, finally, thank you both for sharing your knowledge. It is appreciated immensely!

[Dale Ward]

Here is the most recent attempt to get this dog to hunt...

BODY { font-family: Verdana, Arial, Sans-serif;
	font-size:medium;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	font-variant:normal;
	color: #00FFFF;
	
	background-color: #000000;
	background-image: "C:\Documents and Settings\Dale Ward\My Documents\Personal Website Files\Logbook Files\stars2.gif";
	background-repeat: repeat;
	}

Needless to say, it ain't workin'. I've tried 4 different ways to put that pathname in there. I suppose I could just put the background image in each page, but... darn it... I shouldn't have to!

[v-six]

Hmm.

You don't need the page uploaded to use the background-image: url(stars2.gif); code. Did you try it? Basically that tag will insert the root folder of the page that's being loaded before whatever location you add, regardless of where it is being stored.

Here's an example from a page I just put together:

background-position: center top;
background-image: url(../images/main_back.gif);
background-repeat: repeat;

It is organized in this way:
Main folder (containing all of my html and php files)
>Images folder (all jpgs and gifs)
>CSS folder (external css files)
>javascript folder (external javascript files)

I have a folder for my css files, and a folder for the images. The ".." in the URL instructs the browser to open the parent folder above my css files (the main folder), go to the images folder, then load main_back.gif If you are using seperate folders to store your files, you need to know this. Otherwise, ignore it.

Are you using any server-side scripting? It may help us to the the code for everything involved in the dysfunctional page, not just a piece of the css. Are you using this css inside the actual html files, or linking to it? Somewhere there's a gremlin in the code that we need to take care of.

[v-six]

Originally Posted by Dale Ward

Interesting...

Apparently, the CSS Wizard in the web development package I have...

Hehehehe... one more thing you should know. Any kind of web design wizard is considered a WYSIWYG editor (the category that things like Dreamweaver, Frontpage, and NVU are put into). You need to be aware that they're actually called WYSIRWYGOAGD...

What you see is relatively what you get, on a good day.

[Dale Ward]

Alrighty, I finally got it to work after a friend on another forum explained the syntax to me. Here I was thinking that...

background-image: url()

meant to replace the url with the path or link to the file named inside the ().

It absolutely never occurred to me that the proper syntax was to actually insert the three letters URL into the tag!!

Someone spent a long... LONG... time writing syntax that confusing!

Anyway, as I said, it works now... and, as is typical with most projects, it highlighted yet another problem. I have a temporary site online that I need more help with.

The first thing that will leap out at you is the bloody irritating white lines that criss-cross the page (at least, they will if you view the page in Firefox... IE only displays the top frame, for reasons that I doubt even Bill Gates could explain).

Those lines used to be the borders of the frames I'm using, but I used the frameborder="0" and the noresize="noresize" tags in my frameset declarations. That was supposed to make the seams between the frames invisible... shows you how my day has been going.

So, my questions are twofold. How do I absolutely get rid of those lines... and how do I get all of the frames to display in IE?



<EDIT>
I think the IE problem may have something to do with the pathnames for the various frame files. I may need to put the full pathname... although, I currently have all the files in the same directory.
</EDIT>

[v-six]

Dale, I haven't used frames in years, so I'll let one of the oldschool html guys jump on this. Check your private messages please.

[Dale Ward]

~grin~

It seems there have been at least two revisions to the HTML standard since the last time I tried to make a website. In fact, back then, there was no such thing as CSS.

So, basicly, I'm starting from scratch.

Lord help us all...

[devil lady]

Could you post the code for the whole page. i'm using IE so I can't see what you've got apart from the header.

[DJ-Zep]

Hello Dale. Welcome to TSF.

I'm currently reviewing your webpage and studying a little bit on frames. I should have a solution soon. Thank you for your cooperation.

[Dale Ward]

I'd love to see your solution, DJ... if only for my own satisfaction.

However, since three people have seen my design and suggested that I go with CSS positioning and boxes using the <DIV> tag, I believe I'll go that route.

I'm still interested in why I can't get rid of those white lines in the frames version, but it has become a much lower priority now. I'm almost done with the new .CSS file, and I'll let everyone know when I've posted the results to the temp site.

Thanks for all the help so far, everyone! I really appreciate it!

[DJ-Zep]

I was going crazy trying to remove the big white borders!

I recommend using tables. However, divs are useful, too. If you would like me to continue with the frames, drop a reply. If you want me to assist you in making the site using tables or divs, drop a reply.

[Dale Ward]

I could use a little explanation of the purposes of the properties float, clear, and overflow.

I'm not really sure why float and clear are necessary when you're supposed to have precise positioning, and I understand what overflow is for but I'm not sure what my options are (i.e. what comes after the colon.)

[Dale Ward]

Originally Posted by devil lady

Could you post the code for the whole page. i'm using IE so I can't see what you've got apart from the header.

No problem, DL...

mystyle.css

BODY { font-family: Verdana, Arial, Sans-serif;
	font-size:medium;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	font-variant:normal;
	color: #00FFFF;
	
	background-color: #000000;
	background-image: url(stars2.gif);
	background-repeat: repeat;
	}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> Logbook Of Chief Engineer Milo Mahoney </title>

<frameset rows="29%,64%,7%">

<frameset>
<frame name="banner" noresize="noresize" src="bannerframe.html" frameborder="0">
</frameset>

<frameset cols="20%,60%,20%">
<frame name="toc" noresize="noresize" src="tocframe.html" frameborder="0">
<frame name="active" noresize="noresize" src="activeframe.html" frameborder="0">
<frame name="rtmarg" noresize="noresize" src="rtmargframe.html" frameborder="0">
</frameset>

<frameset>
<frame name="footer" noresize="noresize" src="footerframe.html" frameborder="0">
</frameset>

</frameset>

</head>

<body>
</body>

</html>

bannerframe.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> banner frame </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<img src="newlogo.gif" width="576" height="144" border="0">

</body>

</html>

tocframe.html, activeframe.html, rtmargframe.html, and footerframe.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> toc frame </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

</body>

</html>

As you can see, tocframe.html, activeframe.html, rtmargframe.html, and footerframe.html are empty... but they should all be displaying the background image, since that was defined for the <BODY> tag. I can think of no logical reason why IE would not be displaying them.

As for the white lines visible in Firefox...