EasyUI Forum
July 26, 2024, 10:11:08 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1] 2 3 ... 152
1  General Category / EasyUI for jQuery / Re: Datagrid Scrollview no rows after scrolling down and reload in window on: July 03, 2024, 07:05:56 PM
Please refer to this example https://www.jeasyui.com/demo/test/test20.html. It works fine.
2  General Category / EasyUI for jQuery / Re: numberbox + mobile device on: June 27, 2024, 08:30:31 PM
Please set the 'type' attribute with 'number' value to define the field for entering numbers with restrictions.

Code:
  <input id="nb" class="easyui-numberbox" label="Number:" labelPosition="top" precision="2" value="234.56" style="width:300px;">
  <script>
    $(function(){
      $('#nb').numberbox('textbox').attr('type','number')
    })
  </script>
3  General Category / EasyUI for jQuery / Re: Formdata with serialize on: June 24, 2024, 08:31:23 PM
Please wrap the field with a new element.
Code:
<form id="fmTest" method="post">
	<div>
		<input id="val1" name="val1" class="easyui-textbox">
	</div>
	<div>
		<input id="val2" name="val2" class="easyui-textbox">
	</div>
	<div class="valData">
		<input id="val3" name="val3" class="easyui-textbox valData">
	</div>
	<div class="valData">
		<input id="val4" name="val4" class="easyui-textbox valData">
	</div>
</form>
Call this line to get the specified field values.
Code:
const formData = $('.valData').find('.textbox-value').serialize();
console.log(formData);
4  General Category / EasyUI for jQuery / Re: Numberbox precision without behind zeros on: June 17, 2024, 08:33:09 PM
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-cellediting.js"></script>
	<script>
		var data = {
			"total": 28, "rows": [
				{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "ilosc": "36.50", "attr1": "Large", "itemid": "EST-1" },
				{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "ilosc": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
				{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "ilosc": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
				{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "ilosc": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
				{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "ilosc": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
				{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "ilosc": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
				{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "ilosc": "83.50", "attr1": "With tail", "itemid": "EST-15" },
				{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "ilosc": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
				{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "ilosc": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
				{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "ilosc": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
			]
		}
		$(function () {
			$('#dg').datagrid({
				data: data,
				columns: [[
					{
						field: 'ilosc',
						title: 'Ilość',
						width: '100px',
						halign: 'center',
						align: 'right',
						editor: {
							type: 'numberbox',
							options: {
								precision: 3,
								decimalSeparator: ',',
								formatter: function (value) {
									if (value) {
										value = parseFloat(value);
									}
									value += '';
									const dpos = value.indexOf('.');
									if (dpos >= 0) {
										const s1 = value.substring(0, dpos);
										const s2 = value.substring(dpos + 1, value.length);
										return s1 + ',' + s2;
									} else {
										return value;
									}
								}
							}
						},
						formatter: function (value) {
							if (value) {
								value = parseFloat(value);
							}
							value += '';
							const dpos = value.indexOf('.');
							if (dpos >= 0) {
								const s1 = value.substring(0, dpos);
								const s2 = value.substring(dpos + 1, value.length);
								return s1 + ',' + s2;
							} else {
								return value;
							}
						}
					},
				]],
				idField: 'id',
				rownumbers: true,
				singleSelect: true,
				onSelect: function (index, row) {
					$(this).datagrid('unselectRow', index);
				},
				onBeforeEdit: function (index, row) {
					$(this).datagrid('refreshRow', index);
				},
				onEndEdit: function (index, row) {
					if (parseFloat(row.ilosc) <= 0) {
						row.ilosc = 1;
					}
				},
				onAfterEdit: function (index, row) {
					$(this).datagrid('refreshRow', index);
				},
				onCancelEdit: function (index, row) {
					$(this).datagrid('refreshRow', index);
				}
			}).datagrid('enableCellEditing');
		})
	</script>
</head>

<body>
	<table id="dg" class="easyui-datagrid" title="Editing in DataGrid" style="width:700px;height:auto" data-options="
				singleSelect: true,
			"></table>

</body>

</html>
5  General Category / EasyUI for jQuery / Re: Numberbox precision without behind zeros on: June 12, 2024, 07:45:53 PM
Please try this code.
Code:
<th data-options="field:'unitcost',width:80,align:'right',editor:{
	type:'numberbox',
	options:{
		decimalSeparator: ',',
		precision: 3,
		formatter: function (value) {
			if (value){
				value = parseFloat(value);
			}
			value += '';
			const dpos = value.indexOf('.');
			if (dpos >= 0){
				const s1 = value.substring(0, dpos);
				const s2 = value.substring(dpos+1, value.length);
				return s1+','+s2;
			} else {
				return value;
			}
			
		}
	}
},
formatter: function(value){
	if (value){
		value = parseFloat(value);
	}
	value += '';
	const dpos = value.indexOf('.');
	if (dpos >= 0){
		const s1 = value.substring(0, dpos);
		const s2 = value.substring(dpos+1, value.length);
		return s1+','+s2;
	} else {
		return value;
	}
}
">Unit Cost</th>
6  General Category / Bug Report / Re: datagrid rownumberWidth property may not work on: May 10, 2024, 08:36:45 PM
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		var data = {
			"total": 28, "rows": [
				{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "listprice": "36.50", "attr1": "Large", "itemid": "EST-1" },
				{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "listprice": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
				{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
				{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
				{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "listprice": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
				{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
				{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "83.50", "attr1": "With tail", "itemid": "EST-15" },
				{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
				{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
				{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "listprice": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
			]
		}

	</script>
</head>

<body>
	<table class="easyui-datagrid" title="Basic DataGrid" style="width:800px;height:250px"
		data-options="singleSelect:true,data:data,rownumberWidth:100,rownumbers:true">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>

</body>

</html>
7  General Category / EasyUI for jQuery / Re: combotree + textField on: May 10, 2024, 08:30:02 PM
Please set the 'text' property for each nodes, or define the 'formatter' function to display the node text.
Code:
$('.easyui-combotree').combotree({
    formatter: function (item) {
        return item.name
    }
})
8  General Category / EasyUI for jQuery / Re: Datagrid data column width broken on: April 18, 2024, 01:38:02 AM
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		var data = [
			{"id":1,"opcje":"opcje1","wydzial_dzial":"wydzial_dzial1"},
			{"id":2,"opcje":"opcje2","wydzial_dzial":"wydzial_dzial2"},
			{"id":3,"opcje":"opcje3","wydzial_dzial":"wydzial_dzial3"},
			{"id":4,"opcje":"opcje4","wydzial_dzial":"wydzial_dzial4"},
			{"id":5,"opcje":"opcje5","wydzial_dzial":"wydzial_dzial5"}
			]
		$(function () {
			$('#example').datagrid({
				// url: 'example.php',
				data: data,
				columns: [[
					{
						field: 'opcje', title: 'Opcje', width: '60px', align: 'center',
						formatter: function (value, row, index) {
							if (row.editing) {
								const s = '<a href="javascript:void(0)" onclick="exampleSave(' + row.id + ')"><i class="fa-solid fa-floppy-disk fa-xl" style="color:black;"></i></a> ';
								const c = '<a href="javascript:void(0)" onclick="exampleCancel(' + row.id + ')"><i class="fa-solid fa-rotate-left fa-xl" style="color:black;"></i></a>';
								return s + c;
							} else {
								return '<a href="javascript:void(0)" onclick="exampleEdit(' + row.id + ')"><i class="fa-solid fa-pen-to-square fa-xl" style="color:black;"></i></a>';
							}
						}
					},
					{ field: 'wydzial_dzial', title: 'Koszty osobowe', width: '200px', halign: 'center' },
					{ field: 'stawka', title: 'Stawka godz. [PLN]', width: '120px', halign: 'center', align: 'right', editor: { type: 'numberbox', options: { min: 0, precision: 0, decimalSeparator: ',' } } },
					{ field: 'stawka_0', title: 'Stawka godz. + ogolnozakładowa [PLN]', width: '120px', halign: 'center', align: 'right' },
					{ field: 'stawka_narzut', title: 'Stawka narzut [PLN]', width: '120px', halign: 'center', align: 'right' },
				]],
				idField: 'id',
				rownumbers: true,
				singleSelect: true,
				onBeforeEdit: function (index, row) {
					row.editing = true;
					$(this).datagrid('refreshRow', index);
				},
				onAfterEdit: function (index, row) {
					row.editing = false;
					$(this).datagrid('refreshRow', index);
				},
				onCancelEdit: function (index, row) {
					row.editing = false;
					$(this).datagrid('refreshRow', index);
				}
			});
		})
	</script>
</head>

<body>
	<table id="example" style="width:700px;height:250px" data-options="singleSelect:true"></table>

</body>

</html>
9  General Category / EasyUI for jQuery / Re: Restrict user input to only numbers in easyui $.messager.prompt on: April 18, 2024, 01:27:26 AM
Please try this code.
Code:
var msg = $.messager.prompt('My Title', 'Please type something', function(r){
	if (r){
		alert('you type: '+r);
	}
});
msg.find('.messager-input').attr('type','number')
10  General Category / EasyUI for jQuery / Re: Checkall in TreeGrid on: February 29, 2024, 07:45:25 PM
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Custom CheckBox in TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		var data = {
			"total": 7,
			"rows": [
				{ "id": 2, "name": 'Dias' },
				{ "id": 3, "name": 'NECTARVIS' },
				{ "id": 4, "name": 'NECTARVIS-PGG', "_parentId": 3 },
				{ "id": 5, "name": 'NECTARVIS-08.602.452', "_parentId": 4 },
				{ "id": 6, "name": '% Peso Consumo', "_parentId": 4, "chave_faturamento": true },
				{ "id": 7, "name": 'Contratado', "_parentId": 4, "chave_faturamento": true },
				{ "id": 8, "name": 'Flex Minimo', "_parentId": 4 },
			]
		}
		$(function () {
			$('#tg').treegrid({
				columns: [[
					{
						field: 'checked',
						checkbox: true,
						styler: function (value, row) {
							if (!row.chave_faturamento) {
								return { class: 'hidden' };
							}
						}
					}, {
						field: 'name',
						title: 'Agente X Mês',
						width: 400
					}
				]],
				singleSelect: true,
				selectOnCheck: false,
				checkOnSelect: false,
				onLoadSuccess: function () {
					$(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('')
				},
				onCheckAll: function (rows) {
					const data = rows.filter(row => row.chave_faturamento)
					const state = $.data(this, 'datagrid');
					state.checkedRows = data;
				}
			})
		})
	</script>
	<style>
		.hidden .datagrid-cell-check {
			visibility: hidden;
		}
	</style>
</head>

<body>
	<table id="tg" title="Folder Browser" style="width:700px;height:450px" data-options="
				data: data,
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				singleSelect: true
			"></table>

</body>

</html>
11  General Category / EasyUI for jQuery / Re: Checkall in TreeGrid on: February 29, 2024, 01:19:31 AM
Please refer to this example.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Custom CheckBox in TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		var data = [{
			"id": 1,
			"name": "C",
			"size": "",
			"date": "02/19/2010",
			"children": [{
				"id": 2,
				"name": "Program Files",
				"size": "120 MB",
				"date": "03/20/2010",
				"children": [{
					"id": 21,
					"name": "Java",
					"size": "",
					"date": "01/13/2010",
					"state": "closed",
					"children": [{
						"id": 211,
						"name": "java.exe",
						"size": "142 KB",
						"date": "01/13/2010"
					}, {
						"id": 212,
						"name": "jawt.dll",
						"size": "5 KB",
						"date": "01/13/2010"
					}]
				}, {
					"id": 22,
					"name": "MySQL",
					"size": "",
					"date": "01/13/2010",
					"state": "closed",
					"children": [{
						"id": 221,
						"name": "my.ini",
						"size": "10 KB",
						"date": "02/26/2009"
					}, {
						"id": 222,
						"name": "my-huge.ini",
						"size": "5 KB",
						"date": "02/26/2009"
					}, {
						"id": 223,
						"name": "my-large.ini",
						"size": "5 KB",
						"date": "02/26/2009"
					}]
				}]
			}, {
				"id": 3,
				"name": "eclipse",
				"size": "",
				"date": "01/20/2010",
				"children": [{
					"id": 31,
					"name": "eclipse.exe",
					"size": "56 KB",
					"date": "05/19/2009"
				}, {
					"id": 32,
					"name": "eclipse.ini",
					"size": "1 KB",
					"date": "04/20/2010"
				}, {
					"id": 33,
					"name": "notice.html",
					"size": "7 KB",
					"date": "03/17/2005"
				}]
			}]
		}]
		$(function () {
			$('#tg').treegrid({
				columns: [[
					{
						field: 'checked',
						checkbox: true,
						styler: function (value, row) {
							var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini'];
							if ($.inArray(row.name, names) == -1) {
								return { class: 'hidden' };
							}
						}
					}, {
						field: 'name',
						title: 'Agente X Mês',
						width: 230
					}
				]],
				singleSelect: true,
				selectOnCheck: false,
				checkOnSelect: false,
				onLoadSuccess: function(){
					$(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('')
				},
				onCheckAll: function(rows){
					const data = rows.filter(row=>{
						var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini'];
							if ($.inArray(row.name, names) >= 0) {
								return true;
							} else {
								return false;
							}
					})
					const state = $.data(this, 'datagrid');
					state.checkedRows = data;
				}
			})
		})
	</script>
	<style>
		.hidden .datagrid-cell-check {
			visibility: hidden;
		}
	</style>
</head>

<body>
	<table id="tg" title="Folder Browser" style="width:700px;height:250px" data-options="
				data: data,
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				singleSelect: true
			"></table>

</body>

</html>
12  General Category / EasyUI for jQuery / Re: Checkall in TreeGrid on: February 27, 2024, 08:15:01 PM
The 'checkbox' selection is the built-in functionality in the treegrid component. Please look at this example:

https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=material-teal&dir=ltr&pitem=Custom%20CheckBox&sort=asc

If you want to custom the checkbox column, please define the 'title' property for your checkbox column.
Code:
{
	field: 'checked',
	title: '<input type="checkbox">',
	formatter: ...
}
13  General Category / EasyUI for jQuery / Re: Datalist checked rows on: February 21, 2024, 12:13:49 AM
Please show an example to demonstrade your issue.
14  General Category / EasyUI for jQuery / Re: set Checked Checkbox not working on: February 21, 2024, 12:11:49 AM
Please call the 'check' or 'uncheck' methods instead.

Code:
that.chkEnterAlarm.checkbox('check');
that.chkEnterAlarm.checkbox('uncheck');
15  General Category / EasyUI for jQuery / Re: Column width bug with loadData to datagrid on: February 21, 2024, 12:05:57 AM
Please look at this code, it works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		$(function () {
			$('#dg').datagrid({
				columns: [[
					{ field: 'nazwa', title: 'Nazwa', width: '160px', halign: 'center' },
					{ field: 'opis', title: 'Opis', width: '160px', halign: 'center' },
					{
						field: 'typ', title: 'Typ', width: '160px', halign: 'center',
						styler: function (value, row, index) {
							if (!row.idProdukt > 0) {
								return 'background:#FFC300;';
							}
						}
					},
					{ field: 'nrKatalogowy', title: 'Nr katalogowy', width: '160px', halign: 'center' },
					{
						field: 'producent', title: 'Producent', width: '120px', halign: 'center',
						styler: function (value, row, index) {
							if (!row.idProducent > 0) {
								return 'background:#FFC300;';
							}
						}
					},
					{ field: 'ilosc', title: 'Ilość', width: '50px', halign: 'center', align: 'right' },
					{
						field: 'jm', title: 'J.m.', width: '50px', halign: 'center',
						styler: function (value, row, index) {
							if (!row.idJm > 0) {
								return 'background:#FFC300;';
							}
						}
					},
					{ field: 'cena', title: 'Cena', width: '80px', halign: 'center' },
					{
						field: 'rabat', title: 'Rabat', width: '50px', halign: 'center', align: 'right',
						formatter: function (value, row, index) {
							return (value || 0) + '%';
						}
					},
					{ field: 'wartosc', title: 'Wartość', width: '80px', halign: 'center' },
					{
						field: 'waluta', title: 'Waluta', width: '60px', halign: 'center',
						styler: function (value, row, index) {
							if (!row.idWaluta > 0) {
								return 'background:#FFC300;';
							}
						}
					},
				]],
				idField: 'id',
				rownumbers: true,
				singleSelect: true
			});
		})
		function loadData() {
			$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] });
		}
	</script>
</head>

<body>
	<button onclick="loadData()">LoadData</button>
	<table id="dg"></table>

</body>

</html>
Pages: [1] 2 3 ... 152
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!