/    Sign up×
Community /Pin to ProfileBookmark

Hi can someone help me with my style sheet? it keeps coming up bold when bold isnt…

Copy linkTweet thisAlerts:
Jul 13.2006

OK this is my stlye sheet

[code=html]<html>
<body>
<style>body {background:none; no}</style>

<style type=”text/css”>
<!–body {
scrollbar-3dlight-color: #CDF123;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #CDF123;
scrollbar-darkshadow-color: #CDF123;
scrollbar-face-color: #CDF123;
scrollbar-highlight-color: #CDF123;
scrollbar-shadow-color: #CDF123F;
scrollbar-track-color: #CDF123;
}

body, td {
font-family:Century Gothic;
font-size:8pt;
color:##000000;
}

TEXTAREA, .input {
FONT-SIZE:8px;
FONT-FAMILY:Century Gothic;
COLOR:#000000;
BACKGROUND-COLOR:#b9b9b9;
}

SELECT, TEXTAREA, INPUT {
BORDER-RIGHT:#000000 1px solid;
BORDER-TOP:#000000 1px solid;
FONT-SIZE:10px;
BORDER-LEFT:#000000 1px solid;
COLOR:#000000;
BORDER-BOTTOM:#000000 1px solid;
FONT-FAMILY:Arial;
BACKGROUND-COLOR: #b9b9b9;
background-attachment:fixed;
}

a:link {
color:White;
text-decoration:none;
}

a:active {
color:white;
text-decoration:none;
}

a:visited {
color:White;
text-decoration:none;
}

a:hover {
color: #ffffff;
text-decoration:none;
}
–>
</style>[/code]

and this is the screenshot of how it comes out

[img]http://i1.tinypic.com/1zwlwgp.jpg[/img]

Can any1 help me take off the smudgy bold.. there is no bold on here but it just doesnt work.

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogJul 13.2006 — For one thing, a font name with spaces in it must be quoted:
<i>
</i>font-family: "Century Gothic";

You should also provide a generic font-family in case the user's browser does not support you specified font(s):
<i>
</i>font-family: "Century Gothic", serif;

Also, if you're going to embed your style within HTML comment tags, make sure there is a space (or newline) after the two hyphens in the comment tag:
<i>
</i>&lt;style type='text/css'&gt;
&lt;!--
/* style info here */
--&gt;
&lt;/style&gt;

Lastly, make use of the CSS validator: http://jigsaw.w3.org/css-validator/

This will help you find the other errors and warnings I haven't mentioned.
Copy linkTweet thisAlerts:
@WebJoelJul 13.2006 — Another thing is that you've got your STYLEs in the BODY. They should occur before the closing </head> statement...

<html>

[B]<body>[/B]

<style>body {background:none; no}</style>


<style type="text/css">

<!--body {

scrollbar-3dlight-color: #CDF123;

scrollbar-arrow-color: #000000;

scrollbar-base-color: #CDF123;.... (etc.)....

or is this just by way of example? If this is the way the HTML page is written, there will be errors.
Copy linkTweet thisAlerts:
@sweetbajanauthorJul 14.2006 — ok thnx for replying.. i think i did what you told me but it still comes out bold. is there someone who can help me rewrite the whole CSS sheet. Im sorry but i am new at this.
Copy linkTweet thisAlerts:
@WebJoelJul 14.2006 — I implore you in the name of all that is good and right, -do NOT make font-size in "pt"!! Make them "px" at least, but preferably in "em" sizes. For fonts, this is very important.

?

Now, let me look your code over and I'll maybe have something shortly...

Okay I'm back.

I can't get to any images of yours (no URL to access really), so I re-did a bit of your code and made a new template. Feel free to do with it what you will. ?

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
body {background-image:url('http://i1.tinypic.com/your-background-image-here.gif');
font-family:arial, verdana, serif; color:#000; }
/*arial is the best-looking 'business' font, verdana was created for web page use,
and serif is an all-purpose generic 'fall-back' font if all else fails*/
</style>
<!-- don't worry about multiple "body" selectors. This is okay to do this -->

<style type="text/css">

body {
scrollbar-3dlight-color: #CDF123;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#CDF123;
scrollbar-darkshadow-color:#CDF123;
scrollbar-face-color:#CDF123;
scrollbar-highlight-color: #CDF123;
scrollbar-shadow-color: #CDF123F;
scrollbar-track-color:#CDF123;
}

body, td {
font-family:"Century Gothic", arial, verdana, serif;
font-size:1em;;
color:#000;
}

TEXTAREA, .input {
FONT-SIZE:8px;
FONT-FAMILY:"Century Gothic" arial, verdana, serif;
COLOR:#000;
BACKGROUND-COLOR:#b9b9b9;
}

SELECT, TEXTAREA, INPUT {
border:1px solid black;
FONT-SIZE:10px;
COLOR:#000000;
FONT-FAMILY:Arial, verdana, serif;
BACKGROUND-COLOR: #b9b9b9;
background-attachment:fixed;
}
/* The proper order of links is "LoVe-HAte" that's "L-V-H-A(ctive)" This is important to do it right! */
a:link {color:black;text-decoration:none;}

a:visited {color:blue;text-decoration:none;}

a:hover {color:red;text-decoration:underline; font-size:1.1em;}

a:active {color:green;text-decoration:none;}

ul li {list-style-type:none;}/* removed bullet from list-items*/
ul li a {color:black;}
h1, h2, h3, h4, h5, h6 {margin-left:8px;}/* indents all these H-tags 8-pixels*/
</style>

</head>

<body>
<div style="width:85%; height:auto; margin:15px auto; padding:10px; border:3px double red; background-color:#ebf4f3;">
<h1 title="My Web Page and Stuff" style="white-space:nowrap;">My Web Page and Stuff</h1>
<h2 title="A basic template" style="white-space:nowrap;">A basic template</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
<img alt="some small image, floated left" src="http://i1.tinypic.com/images/some-image.gif"
style="width:90px; height:100px; float:left; clear:left; margin:6px; border:1px dotted gray;" />
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<ul>
<li><a href="#" title="click here to go to link 1">Link One Here</a></li>
<li><a href="#" title="click here to go to link 2">Link Two Here</a></li>
<li><a href="#" title="click here to go to link 3">This Is Link Four</a></li>
<li><a href="#" title="click here to go to link 4">And This Is Link Five</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@sweetbajanauthorJul 14.2006 — ok thanx so much - i changed the code to:

<html>

<head>

<title></title>

<style>body {background:none; no}</style>


<style type="text/css">

<!--body {

scrollbar-3dlight-color: #CDF123;

scrollbar-arrow-color: #000000;

scrollbar-base-color: #CDF123;

scrollbar-darkshadow-color: #CDF123;

scrollbar-face-color: #CDF123;

scrollbar-highlight-color: #CDF123;

scrollbar-shadow-color: #CDF123F;

scrollbar-track-color: #CDF123;

}

body, td {

font-family:Century Gothic, serif;

font-size:8pt;

color:##000000;

}

TEXTAREA, .input {

FONT-SIZE:8px;

FONT-FAMILY:Century Gothic, serif;

COLOR:#000000;

BACKGROUND-COLOR:#b9b9b9;

}

SELECT, TEXTAREA, INPUT {

BORDER-RIGHT:#000000 1px solid;

BORDER-TOP:#000000 1px solid;

FONT-SIZE:10px;

BORDER-LEFT:#000000 1px solid;

COLOR:#000000;

BORDER-BOTTOM:#000000 1px solid;

FONT-FAMILY:Arial;

BACKGROUND-COLOR: #b9b9b9;

background-attachment:fixed;

}

a:link {

color:White;

text-decoration:none;

}

a:active {

color:white;

text-decoration:none;

}

a:visited {

color:White;

text-decoration:none;

}

a:hover {

color: #ffffff;

text-decoration:none;

}

-->

</style>

</head>




<body bgcolor="#FFFFFF">[/QUOTE]

and it still comes up dark, the thing is it comes up dark on some pc's but on others it is fine.
Copy linkTweet thisAlerts:
@WebJoelJul 14.2006 — If this doesn't work, I need to see your entire code

Also:


body, td {

font-family:Century Gothic, serif;

font-size:8pt;

color:[B]##[/B]000000;

}

is wrong
Copy linkTweet thisAlerts:
@sweetbajanauthorJul 14.2006 — ^ ^ you want me to change the pt to px right?
Copy linkTweet thisAlerts:
@NogDogJul 15.2006 — The following is valid syntax (except none of the scrollbar stuff is part of the CSS specification, ans so will not work in many browsers):
<i>
</i>&lt;style type="text/css"&gt;
&lt;!--
body {
scrollbar-3dlight-color: #CDF123;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #CDF123;
scrollbar-darkshadow-color: #CDF123;
scrollbar-face-color: #CDF123;
scrollbar-highlight-color: #CDF123;
scrollbar-shadow-color: #CDF123;
scrollbar-track-color: #CDF123;
}
body, td {
font-family:"Century Gothic", sans-serif;
font-size:8pt;
color:#000000;
}
TEXTAREA, .input {
FONT-SIZE:8px;
FONT-FAMILY:"Century Gothic", sans-serif;
COLOR:#000000;
BACKGROUND-COLOR:#b9b9b9;
}
SELECT, TEXTAREA, INPUT {
BORDER-RIGHT:#000000 1px solid;
BORDER-TOP:#000000 1px solid;
FONT-SIZE:10px;
BORDER-LEFT:#000000 1px solid;
COLOR:#000000;
BORDER-BOTTOM:#000000 1px solid;
FONT-FAMILY:Arial, sans-serif;
BACKGROUND-COLOR: #b9b9b9;
background-attachment:fixed;
}
a:link {
color:White;
text-decoration:none;
}
a:active {
color:white;
text-decoration:none;
}
a:visited {
color:White;
text-decoration:none;
}
a:hover {
color: #ffffff;
text-decoration:none;
}
--&gt;
&lt;/style&gt;
Copy linkTweet thisAlerts:
@sweetbajanauthorJul 15.2006 — ok i copied the code u gave me and it still came out that way... i think it has somethin 2 do with the browser, so dont worry about it. maybe you will see it differently if you go to the site. the site is ** so look there and tell me if u see it how i see it.
Copy linkTweet thisAlerts:
@WebJoelJul 15.2006 — It looks fine to me. Fine on Firefox, a bit better even on IE. I still say that the font-size first off, is too small. I find it hard to read. It would be easier to read if it were upon a lighter/white background, OR if the text were slightly larger. You want to keep the background I assume, -so my suggestion is make the font slightly larger. Using "em" sizes, you can do this oh-so easily! If 0.8em is too small, -try 0.9em. Or 1.0em... or 1.03em, 1.05etc etc etc... ?

If you haven't, -get rid of the "pt" for font-size!. This is so terribly Dreamweaver/Frontpage-esque... (don't get me started on those two renowned products... :rolleyes: ).

You should use "em" size for any "font" and "h" tags. This ensures that the sizes are more correct for all media. As a web page builder I mostly get content from writers whom use Frontpage or some other such 'Office'-esque software. It is not a 'copy & paste' affair to get their content into a working web page. I have to convert most of the fonts to sizes that work for screen-media (computers, etc), and alot of punctuation marks and etc. aren't compatible either...

And that (see [B]BOLD[/B]):

body, td {

font-family:Century Gothic, serif;

font-size:8pt;

color:[B]##[/B]000000;

}

if you haven't changed it, is a big problem. ?

Notice too, that you can combine similar declarations for the same selector:

("selector" here being "BORDER" and "declarations" being "everything after the " [SIZE=4]:[/SIZE] ")


SELECT, TEXTAREA, INPUT {

[B] BORDER-RIGHT:#000000 1px solid;

BORDER-TOP:#000000 1px solid;[/B]

FONT-SIZE:10px;

[B] BORDER-LEFT:#000000 1px solid;[/B]

COLOR:#000000;

[B]BORDER-BOTTOM:#000000 1px solid;[/B]

FONT-FAMILY:Arial, sans-serif;

BACKGROUND-COLOR: #b9b9b9;

background-attachment:fixed;

}

becomes:

[B]border: 1px solid #000000; [/B](or #000;, -means the same thing)

I do not beleive that is makes any difference in what order you write this. I write pixel-amount, style(solid, double, etc) and then color, but it works either way).

You can do this shorthand manner of writing this because all four border are the SAME thickness, style and color.

Saves time writing it and saves a few KB of web page space/download time for slower connections. ?

You have a few errors in the page I see. 14 I count. Things like:

<html>

<head>

<title>The Beyonce Fix</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

[B]<body background="/Graphics/Layouts/BBB.jpg" bgcolor="#ffffff" bgproperties="fixed">



<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

[/B]

<!-- ImageReady Slices (VersionOne.psd) -->

<img src="/Graphics/Layouts/VersionOne.gif" width="1000" height="1518" border="0" alt="" usemap="#newnew_Map">,....

Okay, -you're allowed ONE "<body>" tag in the HTML. In a STYLEsheet or internal STYLE(s), you can do multiple "body {foo:~}" tags.

And you should investigate the use of valid !doctype useage. You page doesn't appear to have one, and the risk here that it will throw a browser into "quirks mode" whereby the browser will try to render things that maybe it doesn't understand... and probbly start making some mistakes.. :eek:
×

Success!

Help @sweetbajan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...