PDA

View Full Version : Nested Div's Relative to a Centered Div



db2six9
02-09-2007, 07:38 AM
Hello all and thanks in advance for your time.

I am trying to create a site in Dreamweaver using "Layers" (div's). I want to be able to have the whole page center within the browser when viewed at any resolution / size. The problem is; The div's are set to absolute alignment by default and as a result they nestle themselves in the top left corner. I have been trying to re-set alignment in the code, CSS, and others to "auto" for the container and "relative" for nested div's, but no luck.

Can somone please help me create a centered container div, with several nested div's within which maintain their position in relation to each other?

I am not too comfortable with code, so if you are going to describe the solution using code, please be painfully detailed (and if possible explain the result of the actions). If anyone knows how to do this in Dreamweaver I would be greatly appreciative.

Thanks again for your time.

Excavator
02-09-2007, 09:00 AM
Hello db2six9,
Have a look at this, just cut paste it all into a new document in DreamWeaver:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{
text-align: center;
background-color: #CCCCCC;
}
* {
margin: 0;
padding: 0; /*zeros out margin and padding in the whole document*/
}
#outer_wrapper {
width: 800px;
margin: 0 auto; /*this is what centers things*/
padding: 10px 0 10px 0;/*this completes the boxes*/
background-color: #CC0000;
}
#inner_wrapper {
width: 780px;
margin: 0 auto;
padding: 10px 0 10px 0;
background-color: #0000FF;
}
#container {
width: 760px;
margin: 0 auto;
background-color: #666666;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div id="container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!--closes container --></div>
<!--closes inner_wrapper --></div>
<!--closes outer_wrapper --></div>
</body>
</html>

db2six9
02-10-2007, 01:58 AM
Excavator,
first of all thank you for taking the time to reply.

Before I get going I wanted to ask about the asterisk before the brace just after the first body tag in your code . . . does that serve a specific purpouse? I am not familiar with the use please explain.

I pasted your code into a blank dreamweaver html doc and all works great! I made a few changes to it and have pasted my new code below. I am going to begin to try to place more layers within and see how far I get with this. Thank you so much for the insight.

Just one quick question . . . I am using IE 7 as my primary browser, when I reduce screen size to less than 100% the page is still nestled in the upper left, is this just a browser bug, or is the page really positioning in upper left? (I have small monitor with a bigger one on the way, but for now I am seeing the web thru a 15 inch window :( ) I know that when I enlarge the page is still centered with equall margins left and right but when I reduce it shrinks into the upper left. Also, how to reduce (if possible) the viewing area in firefox or netscape?

I guesse that was more than one question . . .

Thanks a million for your help, this will surely get me closer to my ultimate goal.

Heres the appended code, if you see any isues or have suggestions to clean it up I would love to hear them;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{
text-align: center;
}
* {
margin: 0;
padding: 0; /*zeros out margin and padding in the whole document*/
}
#outer_wrapper {
margin: 0 auto; /*this is what centers things*/
}
#inner_wrapper {
margin: 0 auto;
}
#container {
margin: 0 auto;
padding: 10px 0 10px 0;
}
#Layer1 {
margin: auto;
z-index:1;
overflow: auto;
}
body {
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div id="container">
<div id="Layer1">
<img src="Images/Background.jpg" alt="" width="984" height="850" /></div>
</div>
<!--closes inner_wrapper --></div>
<!--closes outer_wrapper --></div>
</body>
</html>

Excavator
02-10-2007, 02:41 AM
I think you need to tell me what it is your trying to do. So far, we've just made a mess of things.


Before I get going I wanted to ask about the asterisk before the brace just after the first body tag in your code . . . does that serve a specific purpouse? I am not familiar with the use please explain.

I gave you explanations - see highlighted in red below:


* {
margin: 0;
padding: 0; /*zeros out margin and padding in the whole document*/
}

#outer_wrapper {
width: 800px;
margin: 0 auto; /*this is what centers things*/
padding: 10px 0 10px 0;/*this completes the boxes*/
background-color: #CC0000;
}

db2six9
02-10-2007, 03:01 AM
Was it really that ugly?

Ok, the final product I wish to acheive is a site created with several divs. Probalbly somewhere in the neighberhood of 15. I want to be able to have a background image with several images, text boxes and multi-media components layered on top of it (roll overs, media players etc.).

This is a link to the site as is. (whcfa.org/Drew/Dizzy) The site is organized as I want it, if I could only take what I have now, place it into a container and center the container!
The issue as you will see, is that the divs are all positioned absolute. Now, as I said erlier, I am not too comfortable with code, so I just let dreamweaver do all the writing as I laid everything out. Be gentle.

I racked my brain trying to find a way to create this site using tables, but I could not find feasable solutions to several problems, ie;
have the background image with a scrolling text field over it,
have the navigation text pitched as is,
have images placed over background etc.

I know that a few of these issues could be solved by cutting the backgound and flattening the picts within it, but I would want the ability to replace images by simply loading them to the folder. Besides that, I have been wrestling with this for so long now I am on a quest to learn how to create a load of divs positioned absolute to a container div, then center the container div.

Is this possible . . . worth the effort? Or am I stuck with absolute positioning . . SAY IT AINT SO!

Excavator
02-10-2007, 03:12 AM
Is this possible . . . worth the effort? Or am I stuck with absolute positioning . . SAY IT AINT SO!

It's possible, it's worth it and without absolute positioning.
Absolute positioning corrupts absolutely!

Excavator
02-10-2007, 05:06 AM
Have a look at this so far:
http://www.nopeople.com/Dizzy/


It validates:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.nopeople.com%2FDizzy%2F and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nopeople.com%2FDizzy%2F

Check the links in my sig below to learn about validating.


Wifes got dinner on or I'd work on the menu... project for later I guess.

Excavator
02-10-2007, 06:13 AM
Well, that seems to work ok.
http://www.nopeople.com/Dizzy/
Doesn't validate anymore because of some errors in the menu, I just left them alone because I really don't know anything about js.
I would much rather just make a pure CSS rollover menu for this but this was fast cause I just cut/paste right off your original code.

When you make the other three pages you'll just need to put the _Static menu image in the right place.

db2six9
02-11-2007, 01:51 AM
All looks great!
Can you give a breif explanation of what you did. As you saw in my example I was trying to place layers / divs into the container but when I viewed the page on different browesers my placed images would be in different location.
What have you done here that allevieates this problem? How did you place the menu navigation images without them wanting to relocate when viewed in netscape/firefox etc?

If I wanted to move the navigation images, would I do this in the code by adjusting their top/left locations?

Thanks again for your help . . . well done.

Excavator
02-11-2007, 05:56 PM
Goodmorning db2six9,
Here is some of the CSS commented with explanations:

html, body{
text-align: center;/*browser compatibility - centers old browsers that don't recognize margin: 0 auto*/
background-color: #000000;
}
* {/*zeros out margin and padding throughout whole document*/
margin: 0;
padding: 0;
}
#container {
width: 1000px;
height: 850px;
margin: 30px auto;/*sets top and bottom margins at 30px, left and right margins at auto to center the page*/ background-image: url(dizzyfiles/Background.jpg);
}
#menu {
height: 75px;
width: 570px;
float: left; /*floated to position it*/
margin: 55px 0 0 380px;/*this is what positions it*/
/*margins and padding are set in this order: margin: top right bottom left;*/
}
#Layer17 {/*menu button*/
float: left;
height: 27px;
width: 135px;
margin: 35px 0 0 20px;/*positions menu button*/}
#dance_pics {/*contains the 3 images on the left*/
width: 182px;
height: 570px;
float: left;
margin: 148px 0 0 102px;
}
#scroll_window {/*contains scroll window background image*/
width: 500px;
height: 570px;
float: left;
margin: 127px 0 0 130px;
background-image: url(dizzyfiles/TextBox.gif);
}
#text_scroller {/*contains text inside of #scroll_window*/ width: 409px;
height: 494px;
margin: 40px auto;/*positions text*/
overflow: auto;/*makes scroll bar appear when needed*/
text-align: left;/*aligns all text in div to the left*/
}


See the links in my sig below for more info.

Arbitrator
02-11-2007, 09:59 PM
Before I get going I wanted to ask about the asterisk before the brace just after the first body tag in your code . . . does that serve a specific purpouse? I am not familiar with the use please explain.

I gave you explanations - see highlighted in red below:


* {
margin: 0;
padding: 0; /*zeros out margin and padding in the whole document*/
}I think he was asking what the asterisk means, not the style rule.

The asterisk (*) in CSS represents a universal selector. It represents any element. Used in this context, it removes existing margins and padding from any and all elements in the document. Examples of elements are html, head, body, img, and a.

Any time you use an ID or class selector without an element reference, a universal selector reference is implied. For example, #header and .special are identical to *#header and *.special; they would select any element with the matching ID or class. If you want to restrict the selection to certain elements, you would use an element reference instead of a universal selector; for example, div#header or img.special.

Excavator
02-11-2007, 10:14 PM
Yes, * is a wildcard, like in the old DOS days ... it means all or everything. Before I knew about using this I would apply margin: 0; padding: 0; to every element in the entire CSS file. Using the * is much easier.

db2six9
02-11-2007, 11:15 PM
Thank you so much for your time and effort. I am going to try to absorb all you have posted and see what I cant come out with.

Thanks to Arbitrator for the clarification.

I will try to apply what I have gathered here. I will post my resulting code and a link to the new page in a few days. I am sure they will be acompanied by many questions.

Thanks again.

db2six9
02-13-2007, 08:15 AM
Excavator,

Again, thanks for all your help. I have been re-coding the page with what I have been able to learn from your code, and trial and error. I have learned a lot about CSS coding, but I have hit a little snag.
Below please see my new (Cleaner:D ) code.

When I try to place my Sounds div and my Services Div inside the backgound div I get some weird results. The background div expands to repeat the background image I have linked and the image I am trying to place (either services or sounds) will repeat acorss the screen in its overlying div.

I am sure its a small matter of placing a tag, or indent somewhere, but I have been stuck on this for a couple hours unable to find the solution.

I had two additional questions . . . I am unable to institute a roll-over/swap image behavior for the sounds image. I am familiar with the process but cannot figure out how to ad this behavior when its not a "Layer".

Also, on the Dizzy page you have posted, I dont see the layers named and the parameters set. What I meen is; I dont see where your layers are broken down into the margin: x x x float: x x x x hieght: x x x etc.
Is there a reason this is not listed on the source? Is is a part of an external CSS? Is there a bennifet to this?

Well that should keep me busy for a while. Man I realy cant thank you enough for your input here.

Thank you.


As promissed, the code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dizzy Productions</title>
<style type="text/css">
html, body {
background-color: #000000;
text-align: center;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 1040;
height: 890px;
margin: auto auto auto auto;
}
#Background {
width:1000px;
height:850px;
float:left;
margin:20px 20px 20px 20px;
background-image: url(Images/Background.jpg);
}
#Services {
width:135px;
height:27px;
float:left;
margin:87px 407px;
background-image: url(Images/Nav_Services_Static.jpg);
}
#Sounds {
width:107px;
height:28px;
float:left;
background-image: url(Images/Nav_Sounds_White.jpg);
margin: 82px 556px;
}
</style>
</head>
<body>
<div id="container">
<div id="Background">
<div id="Sounds"> *********************
**************this is where I have been trying to place my
**************<div id="Services"> but I am not getting it!********
</div>
</div>
</div>
</body>
</html>

Excavator
02-13-2007, 02:52 PM
Goodmorning db2six9,
Right away I see your leaving a div open -

<body>
<div id="container">
<div id="Background">
<div id="Sounds"> *********************
**************this is where I have been trying to place my
**************<div id="Services"> but I am not getting it!********
</div>
</div>
</div>
</div><!--added closing tag for container-->
</body>

That's why I always put a comment explaining what each </div> is closing. When the page fills up later it's MUCH easier to debug if you know what each end tag is closing. See example:
<!--closes container --></div>

The CSS for the Dizzy page I created is loaded in the head by this line:

<link href="global.css" rel="stylesheet" type="text/css" /> That is called an external CSS file like you said.
The advantage is that one file can control all of your pages instead of reloading the CSS seperately in the head of each page.

What are you editing your page with?

db2six9
02-14-2007, 06:08 AM
I think the asteriks threw off my code. In my code there are as many closing div tags (</div) as there are new div identifiers (div id="container")
The code works fine with just one div inside the container, but when I tried to ad the second div (with closing </div tag) it gets thrown way off.

I am not sure what you meen by "What are you editing your page with?"
I am using Dreamweaver to construct the page. When there is something it doesnt like in the code like a missing ; or px it will underline the line of code. I guesse thats the extent of my editing.

As for the externall CSS, is there a way I can view the code for those sheets just as I view the code for the page? Or do I have to have the direct url?

Thanks again.

Excavator
02-14-2007, 07:52 AM
Hey db2six9,
Yeah, Dreamweaver is a good program for editing. I like the code hints too. I hand code in Code View and don't depend on the Design View window much as it's not very accurate.

To work on a linked CSS file:
click on Window/CSS Styles or click Shift-F11

Or, you can edit actual file itself in the code view window -it'll be another tab behind the html file your working on.

db2six9
02-14-2007, 04:51 PM
Excavator,
thanks for the direction as to viewing CSS off the web, I am sure that will be a big help in my learning code.

I am glad to hear that Dreaemweaver is a good program for editing code. I use the design view more often than not (I am a designer by trade), but split mode has become a necesity.

I will take a look at your CSS on the Dizzy page, hope I can find what it is that is causing my issues.

Your help has already paid dividens for me. The layers issue was a problem on another site I was working on, but with your help I was able to resolve the issue and now my div stays where I want it in a centered div! :D AWSOME!
Feel free to check out the site http://www.whcfa.org/Drew/alr509
I am working on centering the Flash movie intro, but the site is good to go.
Its just a front page for an exsting site, but all the imagery was designed by yours truly :cool: be gentel when it comes to the code . . . its dreamweavers fault.

I will post again after reviewing your CSS page, I am sure that will open a whole new box for me.

Thanks again, (cant say that enough)

Thanks for your help.

Excavator
02-14-2007, 06:46 PM
Hey db2six9,
That link is dead, I would like to take a look.
check your PM

db2six9
02-14-2007, 07:43 PM
HA! I made a stupid mistake.
no w3

http://whcfa.org/Drew/alr509

Sorry.

db2six9
02-15-2007, 03:19 AM
Excavator,
Hey, I've been parusing the forum and I see that you have been busy! Thanks for taking the time to help me.
Earlier I asked about viewing the CSS code for the Dizzy site and you replied;


To work on a linked CSS file:
click on Window/CSS Styles or click Shift-F11

Or, you can edit actual file itself in the code view window -it'll be another tab behind the html file your working on.

What I wanted to know was how would I view YOUR CSS code for the neopeople/Dizzy page. I am only able to view the html (or am I?)

I am still at an impass with the div issue on my page, I am hoping that if I am able to view your CSS I will be able to see the difference and find where it is that I am going wrong.

The other site is polished and ready, I think it turned out pretty well. (Especially the graphics :D )

I know the code is a mess, I havent foolded with it much outside of the div issue. Should I be concerned about this? If it views well across all platforms and at all resolutions, should I want to go in and re-tool the code to make it pretty?

Arbitrator
02-15-2007, 03:50 AM
What I wanted to know was how would I view YOUR CSS code for the neopeople/Dizzy page. I am only able to view the html (or am I?)

I am still at an impass with the div issue on my page, I am hoping that if I am able to view your CSS I will be able to see the difference and find where it is that I am going wrong.The easiest way to view other people’s external CSS files is to use the Web Developer (https://addons.mozilla.org/firefox/60/) extension for Firefox. After it’s installed, you can just use CSS > View CSS to view all of a site’s external and embedded style sheets.


I know the code is a mess, I havent foolded with it much outside of the div issue. Should I be concerned about this? If it views well across all platforms and at all resolutions, should I want to go in and re-tool the code to make it pretty?You should be concerned that the XHTML contains errors (http://www.validome.org/validate/?uri=http%3A%2F%2Fwhcfa.org%2FDrew%2Falr509%2Falr509.html). After that, you should be concerned that your XHTML is not semantic (tables for layout). Finally, if you want to enhance readability, you should use some form of indentation.

Excavator
02-15-2007, 06:54 AM
What I wanted to know was how would I view YOUR CSS code for the neopeople/Dizzy page. I am only able to view the html (or am I?)

Like Arbitrator said, Web Developers Toolbar is the greatest.
You could also click File/Save As in your browser and download the website but that doesn't always get all the files.

db2six9
02-15-2007, 07:38 AM
Thanks for the links, that will be a huge help (being able to view any CSS). As for the validation . . . I am going to do what I can, but I am not sure that I am at a level which I would be able to resolve all of these issues without damaging my page.

Out of curiosity; the alr509 page displays well across all browsers (all I tried) and both platforms, what issues exactly will come from the non compliant code? Again, this is simply hypothetical as I wish to make my pages 100% compliant.

You have any other little tricks you use while designing pages/sites?

db2six9
02-15-2007, 07:45 AM
One more thing, what was meant by; "your XHTML is not semantic (tables for layout)." Does this mean that I should not be using tables while using divs? Or are my layers & divs in the wrong order?

Thanks

Arbitrator
02-15-2007, 07:22 PM
One more thing, what was meant by; "your XHTML is not semantic (tables for layout)." Does this mean that I should not be using tables while using divs? Or are my layers & divs in the wrong order?It means that you’re not using tables according to their meaning. Tables should be used for tabular data such as baseball scores or other comparisons, like that of this page (http://www.webdevout.net/browser-support). Notice that the tables are not used for layout, but only data. Another example is a paragraph element; you would put a paragraph in it, rather than using it for the unsemantic purpose of invoking a line‐break for non‐paragraph content, as is commonly done. div elements, on the other hand, are semantically neutral, so you can use them for pretty much anything.


Out of curiosity; the alr509 page displays well across all browsers (all I tried) and both platforms, what issues exactly will come from the non compliant code? Again, this is simply hypothetical as I wish to make my pages 100% compliant.Incorrect code tends to produce rendering inconsistencies and more bad code to fix those inconsistencies, making your code inefficient and difficult to read, troubleshoot, and maintain.

It can also mean lack of basic accessibility. For example, the much ignored, but required, alt attribute indicates to the user that something is there even if an image fails to load; this is especially important for image‐based links since the user may not be able to navigate your site at all otherwise.

Then there’s forward compatibility to consider; if a browser stops supporting such erroneous code in the future, then your site will be broken in the future. You also can’t test in every browser there is or will be. If your code is correct, then at least you’ll know that it’ll work in all browsers that read HTML properly; any rendering problems will end up being the browser’s fault rather than the author’s fault. The way the Web is supposed to work is not “design for these X major browsers”; it’s “design for everyone”.

It’s also a matter of professionalism; well‐written code tells that someone knows what they’re doing. When one asks someone for help, it also shows that they’ve made the basic effort of ensuring that trivial errors are not the problem so that people can spend more time helping them and less time fixing the errors that they couldn’t be bothered to fix.


I am going to do what I can, but I am not sure that I am at a level…

If you do decide to use compliant code and don’t understand the error messages you’re getting, that what this forum and others are for.

db2six9
02-16-2007, 06:00 AM
I have been trying to validate my page thru the previously provided links. I was successfull in validating but I ran into a small problem. None of my roll over links work.

I have posted the working page at http://whcfa.org/Drew/alr509/alr509.html

and the validated page at http://whcfa.org/Drew/alr509/alr5092.html

I am fairly certain that the issue is related to the fact that I changed "<script language="JavaScript">" to
"<script type="JavaScript">" to apease the validation checker. What other syntax can I use to keep my JavaScript intact but also validate?

Another question; I am using two tables on this page to contain the text and the navigation. I know I can drop the table containing the text and re-format my div to look fine, but I am still stuck on the nav bar, this is the same issue I am having on the Dizzy page (working on it though). What is the bennefit to aboloshing tables? Should I aspire to design without tables unless listing data?

I have been making progress largley due to Arbitrator and Excavator's input. Anyone following this thread should add to their rep.

Excavator
02-16-2007, 07:09 AM
You could do that menu with CSS. That way you could lose the js as well as the tables.
Have a look at this page for a ton of examples. (http://www.cssplay.co.uk/menus/index.html)

db2six9
02-16-2007, 07:09 PM
Are there bennefits to coding only in CSS as oposed to JS or both? Will one or the other imapair the apperance of a page?

How would I create these drop downs in CSS? Are the codes similar?

Arbitrator
02-16-2007, 08:19 PM
I am fairly certain that the issue is related to the fact that I changed "<script language="JavaScript">" to
"<script type="JavaScript">" to apease the validation checker. What other syntax can I use to keep my JavaScript intact but also validate?The value of the type attribute is supposed to be a media type, not the name of the language. In this case, the media type you want is text/javascript.


Are there bennefits to coding only in CSS as oposed to JS or both? Will one or the other imapair the apperance of a page?Use CSS over JavaScript, if possible. Some individuals and organizations disable JavaScript as a security risk or they may be using a viewer that doesn’t support it. If you do use JavaScript, try to implement it in a way such that content is still accessible if the script fails to run or, if that isn’t possible either, at least provide an indicator that the user requires JavaScript.

db2six9
02-16-2007, 11:57 PM
Arbitrator,
how should my javascript be introduced? I have tried
script language=JavaScript (which allows the menu to work, but does not validate)
script type=JavaScript, which validates but leaves the menu useless,
and a combination of
script type=text/javascript, script language=javascript
(with the correct capitalization, punctuation etc.) the last few attempts renedered the whole page completly usless.
I checked out the page Excavator offered for CSS drop downs, but these seem to be overly complicated. Is there a way to create these drop downs in Dreamweaver without using JavaScript, but still keep it fairly simple?

I am going to start another thread concerning this as I think this thread has served its purpose for this topic(I will post more q's about div's on this thread as they come up). Please see
http://www.codingforums.com/showthread.php?p=535327#post535327

Thanks.

Arbitrator
02-17-2007, 12:37 AM
how should my javascript be introduced?For HTML, you would use the following:


<script type="text/javascript">

</script>

For XHTML served as HTML (pseudo‐XHTML that’s Internet Explorer‐compatible), you would use the following:


<script type="text/javascript">
//<![CDATA[

//]]>
</script>

Note that in XHTML, quoting all attribute values is mandatory; in this case, it is also mandatory for HTML because the value contains a slash (/).

The CDATA section markers are only required (in XHTML) if your script contains the less‐than (<) or ampersand (&) characters. I think you also need it if the script contains the character combination </. Best practice is to always use the CDATA section markers, needed or not, so that you never have to worry about adding them or to place your scripts in external JavaScript files so that CDATA section markers are not needed.