CSS - Css Validator Warnings And White Lines In Ie Tables

Hello,

I receive error when validating my css from w3c.

Code:

Line: 89 Context : #header_navigation 
Invalid number : display inline-block is not a display value : inline-block 

Line: 119 Context : #header_left_navs 
Invalid number : border Too many values or values are not recognized : 0 0 2px 0 #ffcc00 solid 

Line: 271 Context : .welcome_title 
Invalid number : font Impact is not a font-size value : Impact,Arial 

Line: 522 Context : .clearfix 
Invalid number : display inline-block is not a display value : inline-block 

but why does it work's well on my page?

Hi all

I've tryed the W3 validator for CSS and it appears the following error:

Code:

No error or warning found

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

I d'like to know what a hell misses on my css.

thanks in advance

btw this is my css file:

Code:

/* table.css - borders das tabelas */

.blueborder{
	border:3px solid;
	border-color:#94BAD6;
}

I got the following...

Line : 0 font-family: You are encouraged to offer a generic family as a last alternative

here is the .css file

any suggestions as how to make a font family non generic.

Code:

<!--
body{
	margin: 10px 10px;
	font-family: "Arial",Times;
	background-color: #FAEBD7;
}
form{
	padding: 2px;
	font-size: 10pt;
	line-height: 12pt;
	font-family: "Arial",Times;
}

input{
	background-color: #FAEBD7;
	border: solid 1px #000000;
}
div{
	width: 700px;
	padding: 10px;
	background-color: #FAEBD7;
}
div#header{
	height: 25px;
	color: #8E2323;
	font-size: 12pt;
	font-weight: 600;
	line-height: 14pt;
	text-align: center;
	letter-spacing: 2px;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
a{
	padding: 2px;
	color: #8E2323;
	font-size: 11pt;
	line-height: 16pt;
	text-decoration: none;
}
a.na{
	color: #000000;
	font-size: 11pt;
	font-family: "Arial",Times;
}
td#navContainer{
	padding: 5px;
	color: #000000;
	font-size: 11pt;
	text-align: left;
	line-height: 11pt;
	font-variant: small-caps;
}
p#footer{
	width: 565px;
	padding: 5px;
	font-size: 11pt;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
td#footer{
	width: 565px;
	padding: 5px;
	font-size: 11pt;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
div#viewContainer{
	width: 550px;
	padding: 10px;
	font-size: 11pt;
	text-align: left;
	font-family: "Arial", Times;
	border-left: solid 1px #000000;
}
p#copyright{
	width: 700px;
	padding: 5px;
	font-size: 8pt;
	line-height: 10pt;
	text-align: center;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
//-->

I've just run my site through the W3C CSS validator and I'm getting an error telling me I need to validate my XML document?

So, how do I validate my XML document, and where do I put the
</link> tag it tells me I need?

I fear this is just the start of my problems here's the validator link: http://jigsaw.w3.org/css-validator/...&usermedium=all

So, I'm looking for a tool that will crawl and suck down my website (just html, not images) and then examine my stylesheet and compare the rendered page output with css and help me eliminate unused styles definitions, styles for identical properties with different names, unfound class attribute names and that sort of thing.

The reason I need a spider is that my site runs on ATG and rql queries are pain to write when looking for styles in the repositories, and so I'd like to check the the final rendered page output, and not have to comb through my jhtml and my repositories separately.

I've downloaded a couple tools. Style Studio and Style Master and neither will crawl my live site and check css, and the one that was supposed to go through my local resources didn't search for unused styles, just invalid css2 (which i can do at w3c anytime!)

Ok, if that made sense to anybody and anybody knows the answer please let me know. Even a css2 seeker or something that will work on my site once i've crawled it with another spider tool would be cool too. I have 4000 lines of css and doing this by hand is driving me insane.


thanks everyone.

d

Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1:

EDIT: Here is the new code for CSS 3. I only copied the errors part.

Code:

23	 .socialmedia img	 Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in
24	 .socialmedia img	 Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in
25	 .socialmedia img	 Property transition doesn't exist : all 0.2s ease all 0.2s ease
38	 .socialmedia img.fade:hover	 Property -moz-opacity doesn't exist : 1 1
39	 .socialmedia img.fade:hover	 Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in
40	 .socialmedia img.fade:hover	 Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in
41	 .socialmedia img.fade:hover	 Property transition doesn't exist : all 0.2s ease all 0.2s ease
60	 #main-nav-search	 Value Error : padding-top -1.0 negative values are not allowed : -1px -1px
79	 .menu2-top-right	 Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000
80	 .menu2-top-right	 Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px
82	 .menu2-top-right	 Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px
87	 .menu2-top-right	 Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f
88	 .menu2-top-right	 Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f

What does it mean when it says "doesn't exist"?

Thought I'd run a page I'm working on through the W3C CSS validator... it doesn't seem to recognise decimals for the opacity property? Is this a bug, I don't think I've written anything incorrectly?

I have layed out the page but cannot seem to get the hang of the floats and positioning....!!

If anyone can give me a hint how I can position my text in the main white space I would be so grateful as I am confusing myself as to what i am doing wrong!!

the site is hosted at www dot getatrader dot com

PLEASE HELP!!

here is the CSS:

Code:

body {
  background: white;
  font-size: smaller;
  font-weight: bold;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}

#topnav {
 float:left;
 position: absolute;
}

#topnav img{
  display: block;
  border: none;
}

#header{
  position: relative;
  text-align: right;
  border: solid thin #999999;
  margin: 0px 0px 0px 0px;
  background: #336699;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #ffffff;
  height: 155px;
}

#headerright{
    position: relative;
    top: 20px;
    right: 10px;
}

#headerright li {         
  display: inline;
  list-style: none;
  padding: 40px;
}

#headerright img {
  border: none;
}

#headerright a:link {
  color: #ffffff;
  text-decoration: none;
}

#headerright a:visited {
  color: #ffffff;
  text-decoration: none;
}

#headerright a:hover {
  color: #ffffff;
  text-decoration: none;
}

#headerright a:active {
  color: #ffffff;
  text-decoration: none;
}

h1 {
  
}


h2 {
  width: 200px;
  text-align: center;
  color: white;
  background-color: black;
 font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: large;
  font-weight: bold;

}

#container {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}


#button {
position: relative;
display: block;
width: 152px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #336699;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
height: 500px;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#maintext {
 position: absolute;
 float: left;
}

#footer
{
  color: white;
  background-color:#336699;
  font-size: small;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin: 0px 0px 0px 0px;
}

Hi,

I'm working on a site in Css and it all works fine in Firefox. But in IE7 there is a lot of extra white space between elements like after the h2 heads.

Anyone know what i'm doing wrong?
Here's the code.

CSS
Code:

body {
	background: #1d1d1d url(../g/header_bg.gif); 
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	font-family:arial;
	font-size:11px;
	line-height:1;
 	font-weight: normal;
  text-decoration: none;
	color:#575859;
	text-align: left; 
}
#container {
	width: 992px;
	margin: 0px auto;
	text-align: left;
}
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
input, textarea{
font-family:Tahoma;
font-size:11px;
color:#000000;
vertical-align:middle;
font-weight:normal;
background:#FFFFFF;
text-align:left;
}
.formfield {
width:271px;
height:auto;
color:#000000;
background-color:#FFFFFF;
height:18px;
margin-right:8px;
border: solid 1px #404040;
}

#header {
	height: 63px;
}
.menu {
	float:left;
	padding-top:25px;
}
.menu li {
	background:url("../g/menu_sep.gif") right 3px no-repeat;
	padding:0px 10px 0px 15px;
	float:left;
}
.menu li a {
	background:url("../g/menu_arrow.gif") 0 6px no-repeat;
	color:#181818; font-weight:bold;
	padding:0px 10px 0px 15px; 
	text-decoration:none;
}
.menu li a:hover {
	text-decoration:underline;
}
.search {
	float:right;
	background:url("../g/search_bg.gif") 0 0 no-repeat;
	width:357px; 
	height:43px;
	padding:12px 0px 0px 10px;
	margin-top:10px;
}
h1.logo {
	width: 203px;
	height: 109px;  
	background: url("../g/title.gif");  
	text-indent: -9999px;  
	margin-left: 10px;
}

#left_container {
	float: left;
	width: 200px;
	background-color:#000000;
	margin-right: 20px;
	margin-left: 10px;
}

#middle_container {
	float: left;
}
#right_container {
	float: right;
}
.left_top {
	width:200px;
	height:12px;
	font-size:0em;
	background:url("../g/left_top_bg.gif");
}
.left_bottom {
	width:200px;
	height:12px;
	font-size:0em;
	background:url("../g/left_bottom_bg.gif");
}
#left_container h2 {
font-size:1.01em;
line-height:1.5;
color:#85B102;
font-weight:bold;
text-transform:uppercase;
padding:0px 0 10px 0;
margin-left:20px;
}

#left_container ul { margin-left:20px;}
#left_container li { font-size:1.01em; line-height:1.5em; color:#707070;}
#left_container li a { font-size:1.01em; line-height:1.5em; color:#707070; text-decoration:none; background:url("../g/arrow.gif") no-repeat 0px 6px; padding:0 0 0 19px;}
#left_container li a:hover { text-decoration:underline;}

HTML
Code:

<html>
<head>
	<title>Test</title>
	<link type="text/css" href="x/style.css" rel="stylesheet"/>
</head>
<body>
	<div id="container">
		<div id="header">
			<div class="menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Test2</a></li>
					<li><a href="#">Test3</a></li>
					<li><a href="#">Test4</a></li>
				</ul>
			</div>
			<div class="search">
				<form method="get" action="search.php">
				<input type="text" class="formfield" value=""><input class="submit" type="image" src="g/search.gif" value="submit">
				</form>
			</div>
		</div>
		<h1 class="logo">MyTitle</h1>
		<div id="left_container">
			<div class="left_top"></div>
   		<h2>Menu</h2>
			<ul>
       	<li><a href="#" title="home">Home</a></li>
    	 	<li><a href="#" title="home">Test2</a></li>
    	 	<li><a href="#" title="home">Test3</a></li>
    	 	<li><a href="#" title="home">Test4</a></li>
    	 	<li><a href="#" title="home">Test5</a></li>
    	 	<li><a href="#" title="home">Test6</a></li>
    	 	<li><a href="#" title="home">Test7</a></li>
	    </ul>
			<div class="left_bottom"></div>
		</div>
		<div id="middle_container">
			b
		</div>
		<div id="right_container">
			c
		</div>
	</div>
</body>
</html>

Hi;

I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yourheadstone.com</title>
<style type="text/css">

html head title{
  border:0;
  padding:0;
  margin:0;
}

body{
  padding:0;
  border:0;
  background-color:#3399FF; 
  margin:0;
}

table tr td{
  border: 1px solid #000000;
}

table{
 width:1024px;
 height:25px;
 padding:0;
 border:2px solid #000000;
 margin-top:5%;
 margin-right:auto;
 margin-bottom:auto;
 margin-left:auto;
 background-color: #E5FFFF;

}

tr td{
  padding:0;
  margin:0;
}


#nav {
  width: 100%;
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  border-top: 1px solid #ccc;


 }
#nav li {
  float: right; 
  
}
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc;


 }
#nav li a:hover {
  color: #c00;
  background-color: #fff; }


</style>
</head>

<body>

<table>

 <tr>

   <td>
     <ul id="nav">
       <li><a href="#">About Us</a></li>
       <li><a href="uploadform.php">FAQs</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">Headstones</a></li>
       <li><a href="#">Home</a></li>
     </ul>
    </td>
 </tr>

</table>
</body>
</html>

Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please?

Thanks so much!
vonatah

I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too.

I want a layout with two tables next to each at the top and then another below.

The two at the top are working fine, but the one below keeps jumping back up to the top.

I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution.

The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why.

Here is my code for my page and CSS.

If anyone can help I'd be most grateful.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
	document.getElementById("nav" + num).style.paddingTop = '0px'
	document.getElementById("nav" + num).style.paddingBottom = '0px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '10px';
	document.getElementById("nav" + num).style.borderBottomWidth = '10px';
	
}

function navoff(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
	document.getElementById("nav" + num).style.paddingTop = '8px'
	document.getElementById("nav" + num).style.paddingBottom = '8px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '2px';
	document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>

</head>

<body>
<div class="main">

<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>

<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	padding-right: 4%;
	padding-left: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #EEEEEE;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.main {
	background:#FFFFFF;
	border: 10px solid #36393D;
	width: 89%;
	padding: 5%;
}
.nav {
	padding: 8px;
	background-color: #C3D9FF;
	vertical-align: middle;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #36393D;
	cursor:pointer;
	border: 2px solid #36393D;
}

Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side)



Thanks!

I have finished my transparency box backgrounds.. and, thanks to some help here.. have them working in multiple browsers..

Now, I have received a call.. that one person sees "black lines" through the boxes on the transparent boxes on the attractions and info pages.. (user is using IE and 1024x768) -I cannot recreate this problem on any machine.. is there some little strange bug that causes this on certain browsers?

http://www.tkwebbiz.com/Gina2

Thanks so much.. *again*.. *Smiles*

I added a nav bar to my page. when I did so I now get a white space at the top of the page above the pictures I'm not sure why.

Here's a link the the page Dead Link(Link removed because it contained copyrighted content that was more than fair use would allow for. I don't want my friend getting in trouble)

any help would be appreciated.