Jump to content
bjgrooven

CSS problem

Recommended Posts

I have just begun developing a web page for the first time. I am trying to apply my CSS that I have written to my page, but it doesnt work in firefox and comes up all funky in IE. I have gone through the tutorial and am still dumbfounded! Am I linking the CSS to the html wrong? Have I written the CSS wrong? Any help would be appreciated!HTML:

<html><head><link rel="stylesheet" type="text/css" href="css/NSCS.css"/><title>NSCS_University of Colorado at Boulder</title></head><body><div id="header1"><h1>Welsome to NSCS<br>in Boulder!<h1><br><p>The Home of Leadership, Scholarship, and Service<p></div><div id="thumb"></div><div id="content"><h2>Welcome<h2><p>This is a preliminary model and will soon be up on the real web!<p></div><div id="officers"><h1>Chapter Officers<h1><p> <P> <ul><li><b>Jocelyn Liipfert, <I>Co-Executive President</I></b><BR><a href="mailto:jocelyn.liipfert@colorado.edu">Jocelyn.Liipfert@colorado.edu</a><LI><b>Ashley Sullivan, <I>Co-Executive President</I></b><BR><a href="mailto:Ashley.Sullivan@colorado.edu">Ashley.Sullivan@colorado.edu</a><LI><b>Adam Schuckman, <I>V.P. Public Relations/Treasurer</I></b><BR><a href="mailto:adam.schuckman@colorado.edu">Adam.Schuckman@colorado.edu</a><LI><b>Greg Goeken, <I>PFCS</I></b><BR><a href="mailto:gregory.goeken@colorado.edu">Gregory.Goekin@colorado.edu</a><LI><b>Nick Newsum, <I>PFCS</I></b><BR><a href="mailto:nicholas.newsum@colorado.edu">Nicholas.Newsum@colorado.edu</a><LI><b>Leigh Murdock, <I>Coordinator</I></b><BR><a href="mailto:leigh.murdock@colorado.edu">Leigh.Murdock@colorado.edu</a><LI><b>BenHaugen, <I>Historian/Technology Facilitator</I></b><BR><a href="mailto:benjamin.haugen@colorado.edu">Benjamin.Haugen@colorado.edu</a></li></ul></div>    </font>CSS:

body { margin:0px; padding:0px; font:12px serif; font-family:serif; color:#000000; }h1 { margin:0px 0px 0px 0px; padding:0px 0px 0px 5px; font-size:18px; font-style:bold,"times new roman",underline; font-family:sans-serif; color:black; }h2 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:14px; font-family:serif; color:#000000; } #header1 { position:absolute; top:0px left:0px height:152px; width:567px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-style:solid; border-color:black; border-width:0px 3px 3px 0px; background-color:#FEC721; } etc, etc, etc...Thanks for the help!Ben

Share this post


Link to post
Share on other sites

Since you don't seem to be using XHTML (though you should still use a DOCTYPE but anyway), it might because of the slash at the end of your link tag. Try removing it.

Share this post


Link to post
Share on other sites

your code looks fine to me, it would be easier to help you if you could upload your work as a test page somewhere and tell us exactly what isn't working correctly.

Share this post


Link to post
Share on other sites

Here is my modified html and css docs. The page works just fine in IE but the image doesnt load in Firfox, nor do the rest of my styles work. Are there special characteristics of Firefox that I am missing? The css style link is the exact same format as that of a page I know works in Firefox, so that cant be the problem. Here are the new css and html.[/code]<html><head><style type="text/css" media="all">@import url("css/NSCS.css");</style><title>NSCS_University of Colorado at Boulder</title></head><body><div id="header1"><h1>Welcome to NSCS<br>in Boulder!</h1><br><h2>The Home of Leadership, Scholarship, and Service</h2></div><div id="thumb"></div><div id="content"><h2>Welcome</h2><p>This is a preliminary model and will soon be up on the real web!</p></div><div id="officers"><h1>Chapter Officers</h1><ul><li><b>Jocelyn Liipfert, <I>Co-Executive President</I></b><BR><a href="mailto:jocelyn.liipfert@colorado.edu">Jocelyn.Liipfert@colorado.edu</a><LI><b>Ashley Sullivan, <I>Co-Executive President</I></b><BR><a href="mailto:Ashley.Sullivan@colorado.edu">Ashley.Sullivan@colorado.edu</a><LI><b>Adam Schuckman, <I>V.P. Public Relations/Treasurer</I></b><BR><a href="mailto:adam.schuckman@colorado.edu">Adam.Schuckman@colorado.edu</a><LI><b>Greg Goeken, <I>PFCS</I></b><BR><a href="mailto:gregory.goeken@colorado.edu">Gregory.Goekin@colorado.edu</a><LI><b>Nick Newsum, <I>PFCS</I></b><BR><a href="mailto:nicholas.newsum@colorado.edu">Nicholas.Newsum@colorado.edu</a><LI><b>Leigh Murdock, <I>Coordinator</I></b><BR><a href="mailto:leigh.murdock@colorado.edu">Leigh.Murdock@colorado.edu</a><LI><b>BenHaugen, <I>Historian/Technology Facilitator</I></b><BR><a href="mailto:benjamin.haugen@colorado.edu">Benjamin.Haugen@colorado.edu</a></ul></div> </font>

/* css file modified from bluerobot.com */body {	margin:0px;	padding:0px;	font-size:12px;	color:black;	}h1 {	margin:0px 0px 0px 0px;	padding:0px 0px 0px 5px;	font-size:18px;	font-style:"times new roman";	font-style:bold;	font-style:underline;	font-family:sans-serif;	color:black;	}h2 {	margin:0px 0px 0px 0px;	padding:0px 0px 0px 0px;        font-size:14px;	font-family:serif;        color:black;}                                                    #header1 {	position:absolute;	top:0px		left:0px	height:152px;	width:570px;	border-style:solid;	border-color:black;	border-width:3px 0px 3px 3px;	background-color:#FEC721;	text-align:center;}	#header1 h1{	font-size:45px;	font-style:corsiva;	padding:0px;}#header1 h2{	font-size:24px;	font-style:italic;}#thumb {	position:absolute;	top:0px;	left:567px;	width:230px;	height:152px;	border-style:solid;	border-color:black;	border-width:3px 3px 3px 0px;	background-image: url("../CU2.jpg.jpg");}#content {	position:absolute;	top:155px;	left:0px;	height:700px;	width:570px;	padding:0px;	}#content h2{	text-color:#FEC721;	text-align:left;	backround-color:#990000;	border-style:solid;	border-color:black;	border-width:0px 0px 3px 3px;	}#content p{	padding:30px;	}	#officers {	position:absolute;	top:152px;	left:567px;	height:420px;	width:230px;	border-style:solid;	border-color:black;	border-width:0px 3px 3px 3px;	margin:0px 0px 0px 0px;	backround-color:#FEC721;	}#ofiicers ul{	margin:0px 0px 0px 0px;	text-align:left;	}#officers h1{	text-family:serif;	text-align:center;	}

Share this post


Link to post
Share on other sites

Hi,I just tried your code on my server and it worked fine with IE and with FireFox. I only had to change your picture with one of mine. I suppose that the name/extension of your image is not right :

background-image: url("../CU2.jpg.jpg");
It should be something like :
background-image: url("../CU2.jpg");
no?Kind regards from MexicoJerome

Share this post


Link to post
Share on other sites

Thanks for all the help, but I seem to have figured it out! The problem was some sort of error in the notepad document I was using. All I had to do was copy and paste my html script into a new document and it solved everything!Thanks again!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...