21 replies [Last post]
viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Hi all,
I am trying to remove the CSS warning which i get while validating.

Warning 1:
You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.

Warning 2:
.top_menu ul li This property applies to block-level elements.

In warning 1, i have a link which is over a graphic so i cannot give it a background color. so i kept it transparent.

In warning 2:
please explain me bit more.

Thanx very much!

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Ok now this is the only

Ok now this is the only warning which is the background-color problem
Validator gives warning:
You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.

This is CSS:
#skiptocontent a {position:absolute; top:1px; right:0px; background-color:transparent; padding:2px;padding-left:16px;margin-right:0px;color:#fff !important;}

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Ok though i am not yet able

Ok though i am not yet able to find out how is the way to get away with the warning from a validator when you are using white text over transparent background but i solved the warning by giving it a bg now.

But if there is a way out please let me know!

NEXT Question :
I have a sidebar on right followed by footer, the footer comes over sidebar in IE6 and 7. As side bar is positioned asbolute please guide me how to fix it.

If sidebar was floated right cleared would have worked in footer but how to this in this case??

#sidebar {width: 190px;position:absolute;z-index:1;top:241px;right:0;} #footer { clear:both; width: 720px; height: 400px; background: #555555; color: #FFFFFF; margin: 0px auto 0px; text-align: left; position: relative; line-height: 17px; }

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 10 years 52 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

if your #sidebar is position

if your #sidebar is position absolute it does not take up any inline space, thats why the footer runs up on it.

you should do just the opposite. float the side bar, clear it, and leave the footer where it is.

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

yups i tried this if i float

yups i tried this if i float the sidebar right, everything is ok but there comes a big gap from the top and side bar.
any ideas?

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 10 years 52 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

i'd love to think that i can

i'd love to think that i can read your mind, but if i can't. Smile

if you have an example i can help you with it. if there is a gap its most likely because there is an inline element displacing the float. for example, if you have element with margins or something, it may not be visible to you, but to the float, that margin is still there.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The Jigsaw warning is just

The Jigsaw warning is just that, a warning. It is in respect of accessibility requirements, and is designed to warn you that you could fall foul of a user setting their own background perhaps to the same color as your text. These warnings may be ignored as long as you understand why they are displayed. You can also reduce warning levels by changing url argument from &warning=2 to &warning=0 iirc.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

thanx Hugu, yes i understand

thanx Hugu, yes i understand that point was just trying to make my css document warning free.

Vinhboy,thanx Mate

This is the CSS, its for wordpress, but simple layout which is like this
Page
Header
Topmenu
Content and sidebar
Footer

html, body {width:100%;margin:0;padding:0;}

body {height:100%;font:62.5% Tahoma, Verdana, Arial, Sans-Serif;color:#4B5D67;
background:#333 url(/bodybg.png) repeat-x fixed top center;line-height: 200%}

div, body, p, ul, ol, li, a, form, img, h1, h2 {margin:0;padding:0;}

img {border:none;}

ul, li {list-style:none;}

a, a:active, a:visited {font-weight:bold; text-decoration:none;color:#6E0000;background-color:inherit;}

a:hover { text-decoration:none;color:#fff;background-color:#680000;}

h1 {font-size:1.6em;background-color:inherit;color:#4B5D67;}

h2 {font-size:1.3em;background-color:inherit;color:#4B5D67;padding:0;margin:0;}

/* layout */

#page {width: 770px;margin: 0 auto;background:#fff url(images/background/bg_container.gif) 578px 0 repeat-y;position:relative;color:#4B5D67;}

#page .font_resize {position:absolute;top:20px;right:20px;z-index:1;}
#skiptocontent a {position:absolute; top:0px; right:0px; background-color:#3f3d3d; padding:2px;padding-left:16px;margin-right:0px;color:#fff !important;}
#header {width: 770px; height:204px; background: url(images/background/bg_header.gif) top left no-repeat;position:relative;margin-bottom:75px;}

#header .header_bg {position:absolute;width:300px;height:204px;top:0;left:300px;background:url(images/background/bg_header2.gif) top left no-repeat;}

#header .header_bg2 {position:absolute;width:170px;height:204px;top:0;left:600px;background:url(images/background/bg_header3.gif) top left no-repeat;}

#header span {display:none;}

#header h1 a.title {width:601px;height:42px;position:absolute;z-index:1;top:60px;left:86px;background:url(images/ramandeep_singh.gif) no-repeat;}

#header div a.subtitle {width:231px;height:20px;position:absolute;z-index:1;top:113px;left:267px;background:url(images/next_generation.gif) no-repeat;}

.top_menu {height:42px;width:770px;position:absolute;top:204px;left:0px;background:#3f3d3d;color:#fff;}

.top_menu ul li {float:left;margin:0;padding:0;text-align:center;width:13%;}

.top_menu ul li a {height:30px;padding:12px 15px 0 15px;display:block;border-left:none;border-top:none;border-bottom:none;border-right:2px solid #fff;font-size:1em;font-weight:bold;text-transform:uppercase;color:#fff;text-decoration:none;background-color:#3f3d3d;}

.top_menu ul li a:visited, .top_menu ul li a:active {color:#fff;text-decoration:none;background-color:inherit;}

.top_menu ul li a:hover {color:#fff;text-decoration:none;background-color:#680000;}

textarea#comment {width:470px;}

#content h3 a {text-decoration:none;}

.comment {background-color:#EFEFEF;color:#4B5D67;border:1px solid #000;padding:20px;}

.comment p {margin:10px 0;}

.comment #submit {background:#3F3D3D;color:#fff;border:1px solid #000;}

#content {width: 525px;margin-right:5px;padding:5px 25px 25px 25px;font-size:1.2em;min-height:400px;}

#sidebar {width: 190px;position:absolute;z-index:1;top:241px;right:0;}

#sidebar ul {padding:0 0 10px 0;margin:0 0 5px 0;}

#sidebar li {margin:0;}

#sidebar li a {font-size:1.2em;border-top:1px solid #C0C0C0;color:#680000;background-color:inherit;text-decoration:none;display:block;height:20px;padding:5px 0 0 5px; font-weight:bold}

#sidebar li a:hover {color:#6E0000;background-color:#EFEFEF;}

#sidebar h2 {background:#585858 url(images/background/bg_top_menu.gif) bottom repeat-x;color:#fefefe;text-align:center;padding:8px 10px 8px 10px;margin:5px 0;}

#content .postwrapper {margin:20px 0;clear:both;padding-bottom:35px;}

#content .postwrapper .title h2 {float:left;margin:0;padding:0 10px 0 0;line-height:1.2em;font-size:1.8em;font-weight:normal;}

#content .postwrapper .title h2 a {text-decoration:none;}

#content .postwrapper .post {clear:both;margin:0;padding:0;}

#content .postwrapper .post .entry {padding:5px 0;}

#content .postwrapper .post .entry p {padding:10px 0 5px 0;clear:both;}

#content .postwrapper .post .entry br {padding:0;margin:0;font-size:0;}

#content .postwrapper .post .entry ul, #content .postwrapper .postinfo ul {padding:0;margin:0;}

#content .postwrapper .postinfo ul li {float:left;margin-right:7px;}

#content .top {position:absolute;top:241px;left:0px;z-index:1;width:580px;height:28px;padding-top:10px;}

#content .top h2 {color:#fff;background-color:inherit;text-align:center;font-size:1.2em;padding:0;border:none;margin:0;}

#content .top h2 a {color:#fff;background-color:inherit;}

/* Other */

#sidebar .form {padding:0 0 10px 6px;margin:0 0 10px 5px;}

form#searchform input {vertical-align:middle;width:135px;margin:5px 0;}

form#searchform input#searchsubmit {width:auto;}

/************************************************
* Footer Background *
************************************************/

#footerbg {
background: #555555;
color:#fff;
}

/************************************************
* Footer *
************************************************/

#footer {
clear:both;
width: 720px;
height: 400px;
background: #555555;
color: #FFFFFF;
margin: 0px auto 0px;
text-align: left;
position: relative;
line-height: 17px;
}

#footer p {
color: #feffff;
background-color:inherit;
padding: 0px;
list-style-type: none;
margin: 0px;
}

#footer h2 {
color: #FFFFFF;
background-color:inherit;
font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
border-bottom: 4px solid #FFFFFF;
padding: 0px 0px 2px 0px;
margin: 15px 0px 0px 0px;
text-transform: uppercase;
}

#footer h3 {
color: #FFFFFF;
background-color:inherit;
font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
border-bottom: 4px solid #FFFFFF;
padding: 0px 0px 2px 0px;
margin: 15px 0px 3px 0px;
text-transform: uppercase;
}

#footer a {
color: #AAAAAA;
background-color:inherit;
text-decoration: none;
}

#footer a:hover {
color: #FFFFFF;
background-color:inherit;
text-decoration: none;
}

#footer ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#footer ul li {
display: inline;
padding: 0px;
margin: 0px;
}

#footer ul li a {
display: block;
color: #fff;
background-color:inherit;
text-decoration: none;
margin: 0px;
padding: 5px 0px 5px 5px;
border-bottom: 1px solid #C0C0C0;
}

#footer ul li a:hover {
background-color:#EFEFEF;
color: #6E0000;
}

#footerleft {
background: #555555;
color: #feffff;
float: left;
width: 225px;
margin: 0px 20px 0px 0px;
padding: 0px;
}

#footermiddle {
background: #555555;
color: #feffff;
float: left;
width: 230px;
margin: 0px 20px 0px 0px;
padding: 0px;
}

#footerright {
background: #555555;
color: #feffff;
float: right;
width: 225px;
margin: 0px 0px 0px 0px;
padding: 0px;
}
/* external links */
a.external, a.external:link
{
background: url(/linkout.gif) no-repeat right center;
padding-right: 18px;font-weight:bold; text-decoration:none;color:#6E0000;background-color:inherit;
}
a.external:hover
{
background: url(/linkouth.gif) no-repeat right center;
padding-right: 18px;text-decoration:none;color:#fff;background-color:#680000;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

viks wrote:thanx Hugu, yes i

viks wrote:
thanx Hugu, yes i understand that point was just trying to make my css document warning free.

The real point is, and the one I was trying to make is that you don't worry about such warnings and do not strive to clear them away, they do not mean you have done anything wrong necessarily.

The validator is a devise that can not determine whether you have actually dealt with this problem, it cannot actually associate a antecedent element with a set background actually effecting a deep nested element that may have color set but no background and which is perfectly valid and safe.

There are times where you can not/must not set a background for one reason or another but need to set a color , in this respect the Jigsaw validator is confusing for people and the warning should come with an explanation of this fact and exactly what the warning means.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burnjob
Offline
newbie
canada
Last seen: 12 years 36 weeks ago
canada
Joined: 2007-01-06
Posts: 3
Points: 0

background-color

a.external:hover { background: url(/linkouth.gif) no-repeat right center; padding-right: 18px;text-decoration:none;color:#fff;background-color:#680000; } css doesn't use 'background-color' as a selector ... use 'background'only. ie:

a.external:hover{ background:#680000 url(/linkouth.gif) no-repeat right center; }

as long as you input the CSS properly you will remove the warning
all the best

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

burnjob wrote: css doesn't

burnjob wrote:

css doesn't use 'background-color' as a selector ... use 'background'only.
ie:

as long as you input the CSS properly you will remove the warning
all the best

:? Can you explain that statement? background-color is valid and it isn't a 'selector' it's a 'property'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burnjob
Offline
newbie
canada
Last seen: 12 years 36 weeks ago
canada
Joined: 2007-01-06
Posts: 3
Points: 0

incorrect reply

my apologies ... you're correct

background-color is a valid 'property' ... sorry ... i also used the wrong word ... i guess that's why i'm a newbie

i think a valid solution would be to use the CSS shorthand so that the background-color 'property' isn't overriding the background:url declaration ... for example.

a.external:hover {background:#680000 url(/linkouth.gif) no-repeat right center; padding-right:18px; text-decoration:none; color:#fff; }

I believe that I am correct in this statement as opposed to my first comments

all the best

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Thanx Hugo, input much

Thanx Hugo, input much appreciated!

still wonder solution of my problem, i have a situation where my content and sidebat are positioned absolute and footer tends to go over sidebar in IE 6 and 7.

Yes if i float them it works, but i am trying to understands why abosolute positioning can't do this or whats the work out?

Page
header
top menu
Content | Sidebar
Footer

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

There's a sticky post on why

There's a sticky post on why not to use position absolute; essentially it's removed completely from the element flow which means other elements don't see it and it does not in reality occupy any space.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

burnjob wrote:my apologies

burnjob wrote:
my apologies ... you're correct

background-color is a valid 'property' ... sorry ... i also used the wrong word ... i guess that's why i'm a newbie

i think a valid solution would be to use the CSS shorthand so that the background-color 'property' isn't overriding the background:url declaration ... for example.

a.external:hover {background:#680000 url(/linkouth.gif) no-repeat right center; padding-right:18px; text-decoration:none; color:#fff; }

I believe that I am correct in this statement as opposed to my first comments

all the best

Don't worry about being a noobie, we all had to start somewhere, and you're learning!

You're correct, it's best not to mix shorthand and longhand CSS properties, so your latest code is correct.

Verschwindende wrote:
  • CSS doesn't make pies

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Well when everything is done

Well when everything is done the only problem i can see now is the
Gap between top menu and content & sidebar
http://ramandeepsingh.com/
Header
Top menu
>>here is a gap<<
Content| Sidebar
Footer

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Well when everything is done

Well when everything is done the only problem i can see now is the
Gap between top menu and content & sidebar
http://ramandeepsingh.com/
Header
Top menu
>>here is a gap<<
Content| Sidebar
Footer

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Sorry i was trying to edit

Sorry i was trying to edit my post and it does not display half the content
this goes below that
>>here is a gap<<
Content| Sidebar
Footer

edited in '<' Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's because you can't use '

It's because you can't use ' <' directly it's a tag bracket and gets parsed, you have to escape it using & lt ; (no spaces) I did mention this in a sticky which just goes to show no one bothers to read them Smile

You'll have to explain a bit better where this gap is.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Sorry Hugo, yes i knew what

Sorry Hugo, yes i knew what mistake i was making.

To explain the gap bit more

If you click on the top link saying Skip to Content, you can see it brings you right on top of the content layer.
That content layer need to be right below the topmenu

or
you can see the gap from sidebar you can see gap between top menu and Categories in side navigation.

I hope this will help you bit better.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The space is because you're

The space is because you're trying to source order using position absloute on the top_menu bar. You have on the #header:

#header {width: 770px; height:204px; background: url(images/background/bg_header.gif) top left no-repeat;position:relative;margin-bottom:75px;}

The bottom margin is acting on the #content and #sidebar because position absolute is removed from the flow and the other elements don't see it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

viks
Offline
Regular
Last seen: 12 years 36 weeks ago
Joined: 2007-01-05
Posts: 11
Points: 0

Cheers thats sorted!

Cheers thats sorted!