CSS and Javascript XHTML

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

CSS and Javascript XHTML

Post by a.heresey »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I've got a some content, right, and I want it to be a certain size, centered horizontally the middle of the page. 
So, I put it in a <div> and put the code below in an external .js file to center the <div>. 

I tested it in Safari 1.9 and Mozilla 2.01 and it worked ... in quirks mode.


Any ideas on how this can work in Strict XHTML 1.0?

[syntax="html"]
<!DOCTYPE html PUBLIC "//W3C//XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Center</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="centerscript.js">
</script>
</head>
<body>
<div id="centerme">
Some stuff in a box
</div>
</body>
</html>

Code: Select all

window.onload=initResume;
window.onresize=centerBlockH;

function initResume(){
	if (document.getElementById){
		centerBlockH();
	}
	else {
		//object detection
		document.location.href="pagenowork.html";
	}
}

function centerBlockH(){
	//centers block horizontally in document
	var leftSpace;
	var winWidth;
	
	//set winWidth
	w3c=(window.innerWidth)?true:false;
	if(w3c){
		//Mozilla
		winWidth=window.innerWidth;
	}else if (document.documentElement.clientWidth){
		//IE 6
		winWidth=document.documentElement.clientWidth;
	}else if(document.body.clientWidth){
		//IE 4
		winWidth=document.body.clientWidth;
	}

	//get the proper space on left
	leftSpace= (winWidth-650)/2;
	//put space on left
	document.getElementById('centerme').style.left=leftSpace;
}
Thanx.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

You can center horizontally with just CSS.

Code: Select all

#centerme{
   width:760px;
   margin-left:auto;
   margin-right:auto;
}
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Post by a.heresey »

Thanx Zoxive, it's working now in firefox and safari, but not in IE.

Any ideas?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

The method Zoxive describes should also work in IE. For IE5 (or also ie6 in quirks mode, not sure at the moment) there's another thing you should do:

Code: Select all

body {
  text-align:center;
}
#centerme{
   width:760px;
   margin: 0 auto;
  text-align:left;
}
Post Reply