external stylesheet isn't working.

stylesheet for csszengarden template

[rezachemical]

hello,

perhaps someone would like to tell me what i've done wrong; my stylesheet has been included externally in the html file using both @import and link ref and to no prevail....

the link is: <oops>

if you take the "html2.html" it'll show you the files and the fact that the stylesheet is in fact intact.

again, thank you in advance everyone

[edited by: SuzyUK at 1:24 pm (utc) on April 12, 2006]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[bcolflesh]

What if you remove the path - ./?

[doodlebee]

1: To start off with, your link is probably gonna be removed soon - as it's a violation of TOS - just thought i'd warn ya.

2: you're linking to "./mydotcss.css"

should be "mydotcss.css" - no ./ needed - you're forcing it to look for the stylesheet up one level from the directory you're one, when it's in the same directory. You're pointing to it wrong.

3: It's not going to read *anything* properly with all those spaces between everything in your stylesheet. You have a space between every dingle letter in there - that will *so* not work. For example, this (criminy, I can't even copy it - it's so screwed up - I have to type it in by hand!):

* {
m a r g i n : 0 ;
p a d d i n g : 0 ;
}

Will be completely disregarded by browsers, as it makes no sense. It need to be:

* {
margin:0;
padding:0;
}

HTH!

[rezachemical]

okay i just got word from a mac user that it IS working in his safari. ;)

but no good w/ the rest. atleast not on my end.

[rezachemical]

my new problem is that it's just not styling the way it should....

to make it easier for me to show you what i want it to look like ive included a gif link: <snipped>

my first big issue is the fact that i have visibility issues when i change #preamble h3 to have inline display instead of block. the same occurs when i change the value for clear, or float. is this a hack i have to work around?

[edited by: SuzyUK at 1:23 pm (utc) on April 12, 2006]
[edit reason] removed personal details [/edit]

[D_Blackwell]

1: To start off with, your link is probably gonna be removed soon - as it's a violation of TOS - just thought i'd warn ya.

Post the relevant code of the busted design. Isolating the problem will often lead directly to the fix. If not, then somebody here will recognize the issue.

[rezachemical]

/* CSS FILE */

* {
margin:0;
padding:0;
}

body {
margin:0px;
padding:0px;
}

p {
font-family:Georgia, Palatino, "Times New Roman", Times, serif;
font-size:10px;
color:#6A8763;
}

ul {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#799c80;
padding-bottom:2em;
list-style:none;
}

/* div properties */

#intro {
display:block;
width:768px;
margin:0 0 1em 1em;
}

#pageHeader {
background-image:url(header.gif);
background-repeat:no-repeat;
height:318px;
width:768px;
z-index:1;
}

#pageHeader h1 {
background-image:url(pageHeaderh1.gif);
background-repeat:no-repeat;
height:29px;
}

#pageHeader h1 span {
display:none;
}

#pageHeader h2 {
background-image:url(pageHeaderh2.gif);
background-repeat:no-repeat;
height:21px;
}

#pageHeader h2 span {
display:none;
}

#quickSummary p.p1 {
background-image:url(quicksummaryp1.gif);
background-repeat:no-repeat;
height:41px;
position:absolute;
top:217px;
left:335px;
z-index:2;
}

#quickSummary p.p1 span {
display:none;
}

#quickSummary p.p2 {
position:absolute;
top:994px;
left:574px;
width:164px;
text-align:center;
z-index:2;
}

#preamble {
background-image:url(preamble-bg.gif);
background-repeat:no-repeat;
height:184px;
width:463px;
}

#preamble p {
width:235px;
text-align:justify;
padding:0 0 1em 20em;
border:1px solid #900;
}

#preamble p.p1 {
padding-top:2em;
}

#preamble h3 {
background-image:url(preambleh3.gif);
background-repeat:no-repeat;
height:38px;
border:1px solid #900;
}

#preamble h3 span {
display:none;
}

#supportingText {
width:466px;
margin: 0 0 0 1em;
}

#explanation {
background-image:url(explanation-bg.gif);
background-repeat:no-repeat;
height:177px;
width:466px;
}

#explanation h3 {
background-image:url(explanationh3.gif);
background-repeat:no-repeat;
height:34px;
}

#explanation h3 span {
display:none;
}

#participation {
background-image:url(participation-bg.gif);
background-repeat:no-repeat;
height:244px;
width:466px;
}

#participation h3 {
background-image:url(participationh3.gif);
background-repeat:no-repeat;
height:22px;
width:138px;
border:1px solid #900;
}

#participation h3 span {
display:none;
border:1px solid #900;
}

#participation p {
width:301px;
padding: 0 1em 1em 1em;
text-align:justify;
}

#participation p.p1 {
padding-top:0;
}

#benefits {
background-image:url(benefits-bg.gif);
background-repeat:no-repeat;
height:91px;
width:466px;
}

#benefits h3 {
background-image:url(benefitsh3.gif);
background-repeat:no-repeat;
height:15px;
}

#benefits h3 span {
display:none;
}

#benefits p {
text-align:justify;
width:466px;
height:66px;
}

#requirements {
background-image:url(requirements-bg.gif);
background-repeat:no-repeat;
height:266px;
width:466px;
}

#requirements h3 {
background-image:url(requirementsh3.gif);
background-repeat:no-repeat;
height:19px;
}

#requirements h3 span {
display:none;
}

#footer {
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
text-transform:uppercase;
background-color:#E2E6D0;
text-align:center;
padding-top:9px;
width:164px;
height:21px;
position:absolute;
top:1024px;
left:574px;
z-index:2;
}

#linkList {
background-image:url(linkList-bg.gif);
background-repeat:no-repeat;
height:722px;
width:176px;
position:absolute;
top:338px;
left:567px;
z-index:1;
}

#lselect h3 {
background-image:url(selecth3.gif);
background-repeat:no-repeat;
height:19px;
}

#lselect h3 span {
display:none;
}

#larchives h3 {
background-image:url(archivesh3.gif);
background-repeat:no-repeat;
height:15px;
}

#larchives h3 span {
display:none;
}

#lresources h3 {
background-image:url(resourcesh3.gif);
background-repeat:no-repeat;
height:15px;
}

#lresources h3 span {
display:none;
}

-----------------------------end css

-----------------------------begin html minus anything above and below body

<mod note>
... HTML code snipped - it is the CSS Zen Garden template [csszengarden.com] code :)

[edited by: SuzyUK at 1:28 pm (utc) on April 12, 2006]
[edit reason] removed paste and added link to Zen garden template [/edit]

[rezachemical]

i didnt wna paste cuz it's so long sorry if it's against the rules. ;)

[saucey]

just my 2 cents...

What I would suggest is you rewrite and only put the stuff in that is Necessary and leave all the 'trickery' that you are going for until you have things working. There is just So much stuff that is going on with your code that it made my head hurt trying to follow.

Just curious... why all the <span> tags inside of Every tag? I see a few cases where you are doing your 'trickery', but why do you have it in the other places?

So what I'm suggesting is pull Everything out except the bare essentials and then work back to all the stuff that you are trying to add that isn't essential to the layout.