CSS - Html Or Xhtml For Css Design?

I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately...

I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it.

The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing.

See the following to understand my situation.

EDIT: Validation of my pages template in html format.

- yay! it validates as XHTML 1.1

EDIT: Validation of my pages stylesheet

- yay! it validates as CSS 2.0

EDIT: Validation of them both together returns the following:

- Boooo! It won't validate and also tells me:

Code:

"Please, validate your XML document first!

Line 2

Column 3

The markup declarations contained or pointed to by the document type declaration must be well-formed. "

I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS?

Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important.

Hi,

I want to validate my page to XHTML 1.1, but to do that I need to remove border="0" (Only used on two header images).

I have tried putting border-style:none in my CSS in EVERY place I could think of, but it just doesn't work.

My css is he
http://www.planetphillip.com/style.css

One other thing, when I remove the border="0" code, IE6 vertically re-aligns the header images. Would somebody be kind enough to explain why.

BTW the site in question is:
http://www.planetphillip.com/

TIA
Phillip

I am developing websites using ASP.NET and C# for the code-behind.

I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid.

IE:

ASP.NET automatically renders this piece of code everytime the page is rendered:
Code:

<script language="javascript">
<!--
	function __doPostBack(eventTarget, eventArgument) {
		var theform;
		if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
			theform = document.forms["frm"];
		}
		else {
			theform = document.frm;
		}
		theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
		theform.__EVENTARGUMENT.value = eventArgument;
		theform.submit();
	}
// -->
</script>

That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>.

There are many other instances of this that I won't go into detail.

In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second.

My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant?

on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$

thanks!

Hello,

I was just wondering how XHTML and CSS works within data-driven websites. I am new to developing database driven sites and need to develop one that uses XHTML and CSS formatting for content as this is what the company I work is aiming towards, due to web accessibility requirements. Does anybody know of any good books/resources that cover developing database driven (php/mysql) websites and implementing XHTML/CSS from within these sites.

Would I be right to say that an area for the database content is created in the page which is written in XHTML? if this is correct does this area link to the CSS?

Any help would be gratefully appreciated....

Thanks,

Andy

It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side.

http://www.members.shaw.ca/welcomehere/test.htm


please help.

I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: body background: fixed full page image banner: fixed, 100 pixels high, full-width, transparent background nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background footer: fixed, 30 px high, full width, transparent background mockup:

Here is as far as I could get in the actual design:
web page attemp

Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work.

What does everyone else usually do?

I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css


PHP Code:
 h2 {border-top:1px solid #4D65A0} 







I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in.

new line: slash_blue_mw.gif

sorry posted in the wrong spot b4

Hi All.

I've had a problem with a website for the last few days, i've done the design, and the html side is no problem in a table layout, but i'm trying to get it working using DIVS and pure CSS. I'm attaching an image of the layout.

URL

Look at the image, i want the design, aligned center and vertically in the middle. Here is a key to each section.

Yellow, Text would be in this section.
Red, Bar that goes the width of the screen.
Green, The Menu, Home | About etc etc etc (the red bar is actually the menu bar but only used for a menu where the green is)
Blue, This is an image, that over laps the menu bar.
White, this is just where the copyright notice goes.

If anyone could knock up a quick template i'd be extremely grateful, that is ofcourse if a layout like that is possible with DIVS etc.

Thanks people.

I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong?

PSD jpg
kansasoutlawwrestling.com/wrestling2.jpg

Site
kansasoutlawwrestling.com

I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content?

I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet?

Thanks.

OK, I've been pulling my hair out here. I've been googling around for a couple days now trying to find some solution to this....

I have been crunched by what I think is a nasty little bug within IE6 when running with a DocType of XHTML 1.0 Transitional.

Observe he
http://www.drcwbt.com/codetests/scrolltest.htm

My problem:
The horizontal scrollbar. It's nasty. I need to get rid of that puppy. Only happens on IE6 AND when running XHTML DocType.

My attempted (and failed) solutions: My Googles led me to what looked like a similar bug in IE 5 Mac. Unfortunately, those solutions don't help me here Addition of MS only "overflow-x:hidden" property. While this does get rid of the scrollbar, it also chops off the rightmost edge of the content within the DIV.

In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side.

The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other?

I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely?

Thanks for your thoughts
LB

I usually build in XHTML Traditional, and modify via CSS... but i want to learn how to build in XHTML strict.. and practice i notice is putting data in ul lists... which when the css is taken off, gives quite a nice structured layout of text and such... problem is, i dont know how to do it to where the "dot" doesnt show up...

anyhelp would be great. thanks

Currently, I'm working on an XHTML home page. After PHP, this is the result:
index.php Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<meta name="Author" content="Neil E. Hodges" />
	<meta name="Description" content="A site about the Kamakura Era" />
	<link rel="stylesheet" type="text/css" href="kstyle.css" />
	<title>index</title>
	<script type="application/x-javascript" src="switch.js" />

	<title>frames</title>
</head>
<body>
<div id="top">
<form id="switch" name="switch" action="">
	<input type="button" onclick="ch('left');" id="toLeft" value="To Left" disabled="disabled" />
	<input type="button" onclick="ch('right');" id="toRight" value="To Right" />
</form>
	<h1>Kamakura Era</h1>
</div>
<div id="sidebar" class="leftside">

	<a href="index.php" title="Home">Home</a>
</div>
<div id="main">
	<h2>Main</h2>
	<h3>H3</h3>
</div>
</body>
</html>

kstyle.css Code:

@charset "UTF-8";
div#top {
	width:100%;
	display:block;
	border-bottom:2px solid rgb(0,100,0);
	height:10px;
	height:4em;
	background-color:rgb(255,255,240);
}
div#top h1 {
	display:block;
	text-align:center;
	font:bold italic 3em/1 'Lucida Calligraphy', 'URW Chancery', 'Times New Roman', 'Nimbus Roman', 'Serif';
	width:80%;
	color:rgb(250,200,50);
}
form#switch {
	display:block;
	background-color: rgb(100,100,0);
	float:right;
	width:10%;
	height:3em;
}
form#switch input {
	display:block;
	margin:1%;
	height:48%;
	width:98%;
}
div.rightside {
	float:right;
	text-align:left;
	padding:1% 3% 1% 1%;
	border-left:1px dashed rgb(0,100,0);
}
div.leftside {
	float:left;
	text-align:right;
	padding:1% 1% 1% 3%;
	border-right:1px dashed rgb(0,100,0);
}
div#sidebar {
	width:15%;
	min-height:100em;
	background-color:rgb(240,240,255);
}
div#sidebar a {
	color:rgb(150,0,50);
	font:italic normal 1.1/1 'Nimbus Roman', 'Bitsream Charcter', 'Times New Roman', 'Computer';
	text-decoration:none;
	display:block;
	padding:2%;
	width:96%;
}
div#sidebar a:hover {
	color:rgb(150,75,200);
	font-weight:bold;
	text-decoration:none;
	border:0.5px solid rgb(150,75,50);
	margin-bottom:1.5em;
}
div#sidebar a:visited {
	color:rgb(50,75,150);
	text-decoration:underline;
}
div#main {
	padding:1em;
	width:85%;
	min-height:100em;
}
div#main h2 {
	color:rgb(0,100,200);
	font:italic bold 2.5em/1.1 'URW Bookman L', 'Times New Roman', 'Courier New', 'Sans-Serif';
	text-align:center;
	text-decoration:underline;
}
div#main h3 {
	color:rgb(175,0,50);
	font:bold normal 1.75/1.1 'Utopia', 'Lucida Handwriting', 'Serif';
	text-indent:5em;
}

switcher.js Code:

function ch(dir)
{
	if(dir == 'right')
	{
		document.getElementById("sidebar").setAttribute("class", "rightside");
		document.getElementById("toLeft").disabled = false;
		document.getElementById("toRight").disabled = true;
	//	document.getElementById("toLeft").setAttribute("disabled", false);
	//	document.getElementById("toRight").setAttribute("disabled", true);
	}
	else if(dir == 'left')
	{
		document.getElementById("sidebar").setAttribute("class", "leftside");
		document.getElementById("toRight").disabled = false;
		document.getElementById("toLeft").disabled = true;
	//	document.getElementById("toRight").setAttribute("disabled", false);
	//	document.getElementById("toLeft").setAttribute("disabled", true);
	}
}

If you enter all of these into their respectful files, except index.php into index.xhtml, there's a little white above the top of the page. I want to get rid of this margin. Can anyone help?

Also, this is mainly a problem in Firefox, since IE doesn't have XHTML support.