CSS - Stylesheet Help For Proper Image Display...

This stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility.

In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.).

Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it.

In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me.

I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide.



body{
background-color: Black;
background-position: center;
text-align: center;
vertical-align: center;
margin: 2px;
}

h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
color: black;
}

h6{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: normal;
color: black;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bolder;
color: black;
text-transform: uppercase;
}

h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #8B0000;
}


div#wrapper{
background-position: center;
background-color: #F0F1EB;
width: 762px;
height: 420px;
margin: 0px;
border: 1px solid #black;
padding: 0 px;


}

div#top{
background-position: center;
background-image: url(../images/top.jpg);
width: 760px;
height: 123px;
margin: 0px;
border: 0px;
padding: 0 px;
text-align: right;
vertical-align: top;
text-transform: uppercase;
}

div#toplinks{
background-position: center;
width: 634px;
height: 15px;
margin: 0px;
border: 0px;
padding: 2 px;
float: right;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
text-align: center;
color: white;

}

div#midlinks{
background-position: center;
background-color: #F0F1EB;
width: 760px;
height: 17px;
margin: 0px;
padding: 0 px;
border-bottom: 1px solid #9E9E9E;;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #9E9E9E;
}


div#midleft{
background-color: white;
width: 126px;
height: 16px;
margin: 0px;
padding: 6 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #9E9E9E;
border-top: 0px;
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;


}

div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;
text-decoration: none;
}

div#midright{
width: 631px;
height: 16px;
margin: 0px;
padding: 6 px;
float: right;
border:0px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: white;
text-transform: uppercase;

}

div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: #990000;
text-transform: uppercase;
text-decoration: none;
}

div#left{
background-position: center;
background-color: #F0F1EB;
width: 125px;
margin: 0px;
padding: 7 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
text-transform: uppercase;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
}

div#left a, div#left a:hover, div#left a:visited, div#left a:active{
text-transform: uppercase;
color: #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
text-decoration: none;
}

div#main{
background-position: center;
background-color: White;
width: 635px;
height: 470px;
margin: 0px;
padding: 0 px;
float: right;
border-left: 1px solid #9E9E9E;

}


div#mainl{
background-position: center;
background-color: white;
width: 310px;
height: 289px;
margin: 0px;
border: 0px;
padding: 10 px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main2{
background-position: center;
background-color: white;
width: 317px;
height: 450px;
margin: 0px;
padding: 10 px;
float: right;
border-bottom: 0px;
border-left: 1px solid #9E9E9E;
border-right: 0px;
border-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main1col{
background-position: center;
background-color: white;
width: 625px;
height: 289px;
margin: 0px;
padding: 10 px;
border: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col td, div#mainl td, div#main2 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}


div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

.container { position: relative; left: 1px; top: 1px;}

.text {position: absolute; left: 5px; top: 0px;}


.container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;}
.text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;}

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

I cant seem to get this to position correctly in firefox. Looks great in IE though...

Perhaps I should just use divs with margins rather than ul's

Quote:
Dan Cederholm of SimpleBits:

It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work.


I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden.

At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden.

However, when I do try to reduce the alt sheet to just:

Code:

#container { width: auto; }

#main { width: 65%; }

#navbar { width: 30%; }

all unincluded formatting is lost.

Am I doing something wrong?

Cheers, Sam.

I have a very strange problem. My firefox is ignoring the changes I made to the style sheet. I have this in my webpage and the style.css file location is right (one directory up).

<link href="../style.css" rel="stylesheet" type="text/css">

Because it's ignoring my new changes, I deleted everything in my style.css file, and the page still displays as though the file exists. However, if I delete the above line, then the page will display without any style.

IE is loading with the changes I made though. I have also checked my stylesheet with the W3C css validation and it has no error.

So, any body know why this is happening?