Dreamweaver - CSS Validation Problems

Author

CSS Validation Problems

Dan Whitelock

2004-04-22, 9:28 am

Apologies I got so caught up in typing my previous post, I forgot to
include the URL!

http://www.british-publishing.com/p...bria/about.html

Doh

Barry Pearson

2004-04-22, 9:28 am

Dan Whitelock wrote:
> Apologies I got so caught up in typing my previous post, I forgot to
> include the URL!
> http://www.british-publishing.com/p...bria/about.html

How much do you care about problems with the IE 5 box model?

Some hacks are there to be as near pixel-perfect as possible. (I have one or
two of those, because I needed absolute precision because I had a background
photograph, for example). In one case, instead of using CSS hacks, I avoided
padding & margins (so IE 5 didn't get the chance to go wrong). Then I used
some   to make some links look as though they had padding on their left.
(Gosh! I have no shame). If you want to laugh at this method, have a look at
the navigation bar in these:
http://www.barry.pearson.name/articles/templates/

But perhaps you can tolerate some differences in IE 5 (say)? After all, your
users typically won't compare IE 5 with the others. Perhaps it just has to
look OK in each case, without being identical.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

djinn

2004-04-22, 9:28 am

Dan Whitelock wrote:
|| Apologies I got so caught up in typing my previous post, I forgot to
|| include the URL!
||
|| http://www.british-publishing.com/p...bria/about.html
||
|| Doh

Take out your inline CSS and try this in a linked stylesheet.....

/* CSS Document */

body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}

h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:14px;
font-weight:900;
color:#ccc;
}

h2 {
font:bold 12pt/16pt Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:9pt/13pt Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
color: #000000;
}

..content {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:0px none #FFFFFF;
background-color:white;
padding:0px;
z-index:3;
background-image: url(../../Media/Cumbria/bluehead.gif);
background-repeat: repeat-x;
}

..Content>p {margin:0px;}

..Content>p+p {text-indent:30px;}

a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}

a:link {color:#09c;}

a:visited {color:#07a;}

a:hover {background-color:#eee;}

/* Here is the ugly brilliant hack that protects IE5/Win from its own
stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value
is
below. See http://glish.com/css/hacks.asp for details. */
#navAlpha {
position:absolute;
width:128px;
top:20px;
left:20px;
border:0px none;
background-color:#FFFFFF;
padding:10px;
z-index:2;
voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct
length values to user agents that exhibit the parsing error exploited above
yet get
the CSS box model right and understand the CSS2 parent-child selector.
ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack
(above). */
body>#navAlpha {width:128px;}

#navBeta {
position:absolute;
width:190px;
top:20px;
right:20px;
background-color:#66BB49;
padding:10px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* Again, "be nice to Opera 5". */
body>#navBeta {width:168px;}

#navcontainer { width: 170px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 160px;
background-color: #66BB49;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #48BBD6;
color: #fff;
}
..subheadslilac {
color: #A76FB4;
border-left: 10px solid #A76FB4;
padding: 0px 0px 5px 5px;
border-bottom: 1px solid #A76FB4;
}
..imagepadding {
padding: 10px 10px 15px 0px;
}
..piccaptionsrd {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-style: italic;
color: #97282E;
border-left-width: 15px;
border-left-style: solid;
border-left-color: #97282E;
padding-left: 5px;
}
..quotation {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #FFFFFF;
font-style: normal;
line-height: 13pt;
font-weight: normal;
}
..backtotop {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #666666;
text-decoration: underline;
}
..piccaptionslc {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-style: italic;
color: #A76FB4;
border-left-width: 15px;
border-left-style: solid;
border-left-color: #A76Fb4;
padding-left: 5px;
}
..linepadding {
padding-top: 2px;
padding-bottom: 15px;
}
..subheadsgreen {
color: #5DB487;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 10px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #5DB487;
border-left-color: #5DB487;
}
..piccaptionsgn {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-style: italic;
color: #5DB487;
padding-left: 5px;
border-left-width: 15px;
border-left-style: solid;
border-left-color: #5DB487;
}
..subheadsblue {
color: #0389B4;
padding-bottom: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 10px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #0389B4;
border-left-color: #0389B4;
text-transform: uppercase;
}
..subheadsblue1 {
color: #0389B4;
padding-bottom: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 10px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #0389B4;
border-left-color: #0389B4;
}
..piccaptionsbl {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #0389B4;
padding-left: 5px;
border-left-width: 15px;
border-left-style: solid;
border-left-color: #0389B4;
font-style: italic;
}
..pagelinks a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #666666;
text-decoration: underline;
}
..pagelinks a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #000000;
text-decoration: underline;
}
..pagelinks a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #666666;
text-decoration: none;
}
..subheadsorange {
color: #FE7D1F;
padding-bottom: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 10px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #FE7D1F;
border-left-color: #FE7D1F;
}
..piccaptionsog {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-style: italic;
color: #FE7D1F;
padding-left: 5px;
border-left-width: 15px;
border-left-style: solid;
border-left-color: #FE7D1F;
}
..subheadsred {
color: #97282E;
padding-bottom: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 10px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #97282E;
border-left-color: #97282E;
}
..subheadsred2 {
color: #97282E;
padding: 0px;
}
..subheadslilac2 {
color: #A76FB4;
}
..subheadswt {
color: #FFFFFF;
padding-bottom: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 10px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
..subheadswt2 {
color: #FFFFFF;

HTH

--
Keep in touch with yourself !!

chin chin
Sinclair

If I somehow managed to help
no need to post a thanks.

You're welcome already!!

djinn

2004-04-22, 5:29 pm

It perhaps needs a bit of tweaking - or maybe it's just the images missing -
but you can test it here........

http://www.bijouwebsites.co.uk/danstest/about.html

and run the url through.....

http://jigsaw.w3.org/css-validator/validator-uri.html

and

http://www.htmlhelp.com/tools/validator/

--
Keep in touch with yourself !!

chin chin
Sinclair

If I somehow managed to help
no need to post a thanks.

You're welcome already!!

Dan Whitelock

2004-04-22, 5:30 pm

Sorted the problem.

The web page I got the css layout from didn't clearly explain that the
box model hack had to be situated within the div that it related to and
not just floating around in the style sheet as they have it on the
download.

Once I moved it (I read in detail about the hack on Tantek's
website),the site validated no problem.

I've tested it on a mac in Opera, Safari and IE 5.5 and it works just
fine.

Many thanks

Dan

In article <c68co0$9ov$1@forums.macromedia.com>,
"djinn" <scobies@dsl.pipexYerKitAff.com> wrote:

> It perhaps needs a bit of tweaking - or maybe it's just the images missing -
> but you can test it here........
>
> http://www.bijouwebsites.co.uk/danstest/about.html
>
> and run the url through.....
>
> http://jigsaw.w3.org/css-validator/validator-uri.html
>
> and
>
> http://www.htmlhelp.com/tools/validator/