[SOLVED] Doctype affects page, even transitional... Fully compliant code

Malevolence · June 25, 2009

Hey, I have a new web design that I have created, but when I add a doctype to the top for XHTML 1.0 Transitional, despite being completely compliant with the standards, the page renders in an odd way... Seeing as I can't show you due to all the images required (I may sort this later) I will show you the code to see if you can spot any reasons why, although to sum up, the div's that are nested are to make rounded corners so that's fine, what happens is the 3 boxes (with the nested divs) lose their parent's padding, so theres no gap from the left and top of the area they belong it, it looks bad.

HTML: (including doctype)

<!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" xml:lang="en" lang="en">
<head>
<title>Welcome to ScriptSwap.co.uk - The Script Exchange for Film Enthusiasts and Scriptwriters</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>
<body>

<div class="container">

	<div class="header">
		<div class="header_links">Login <strong><span class="dblue_txt">|</span></strong> Register</div>
	</div>
	<div class="srcbx_container">
		<form class="srcbx_form" name="searchbox" method="get" action="search.php">
			<div class="srcbx_textbkg">
				<input type="text" value="Type here to begin search..." onblur="if(document.getElementById('q').value == ''){document.getElementById('q').value = 'Type here to begin search...'}" onfocus="if(document.getElementById('q').value == 'Type here to begin search...'){document.getElementById('q').value = ''}" id="q" name="q" class="srcbx_text" />
			</div>
			<input type="submit" value="" name="submit" class="srcbx_submit" />
		</form>
	</div>
	<div class="featreel">

		<img src="im/featroll_flight52.jpg" alt="Flight 52 Illustrative Stock Image" /><img src="im/featroll_sweetlove.jpg" alt="Sweet Love Illustrative Stock Image" />
		<div class="featDescriptionl"><span class="fDTitle">Flight 52</span> a chilling hi-jack thriller</div>
		<div class="featDescriptionr"><span class="fDTitle">Sweet Love</span> a bittersweet romance</div>

	</div>
	<div class="bodyFeat"><div>
			<div class="bdsec_normBL"><div class="bdsec_normBR"><div class="bdsec_normTL"><div class="bdsec_normTR">

				<span class="feattitle dblue_txt">Latest Scripts</span>
				<ul class="featList">
					<li>Welcome to My World</li>
					<li>Impact</li>
					<li>A Dog Never Lies</li>
					<li>Intrusion</li>
					<li>Heartbreaker</li>
				</ul>

			</div></div></div></div>

			<div class="bdsec_normBL"><div class="bdsec_normBR"><div class="bdsec_normTL"><div class="bdsec_normTR">

				<span class="feattitle dblue_txt">Top Rated Scripts</span>
				<ul class="featList">
					<li>Flight 52</li>
					<li>Intrusion</li>
					<li>Sweet Love</li>
					<li>Till The Day I Fly</li>
					<li>Sorrow Tomorrow</li>
				</ul>

			</div></div></div></div>

			<div class="bdsec_genreBL"><div class="bdsec_genreBR"><div class="bdsec_genreTL"><div class="bdsec_genreTR">
				<a href="#" class="genreBrowse gBred">Romance</a>
				<a href="#" class="genreBrowse gBorange">Western</a>
				<a href="#" class="genreBrowse gByellow">Comedy</a>
				<a href="#" class="genreBrowse gBgreen">Drama</a>
				<a href="#" class="genreBrowse gBblue">Action</a>
				<a href="#" class="genreBrowse gBpurple">Thriller</a>
				<a href="#" class="genreBrowse gBpink">Short</a>
				<a href="#" class="genreBrowse gBred">Horror</a>
				<a href="#" class="genreBrowse gBwhite">Sci-Fi</a>

				<div class="bdsec_clr"> </div>
			</div></div></div></div>
			<div class="bdsec_clr"> </div>

	</div></div>
	<div class="bodyMain">

		<span class="footer lblue_txt">ScriptSwap.co.uk reserves the right to remove scripts that break the terms of use policy. Users may withdraw their scripts at any time
without notice. If you wish to produce a film using a script on this website, please ensure that the writer(s) has enabled public
production rights. If this is not the case, please contact them and if they don’t agree, then you may not use that script. Abusers of this
and any other rule will be banned and further action may be taken.</span>



	</div>
</div>

</body>
</html>

CSS:

/* BEGIN CONTAINERS */

body
{
background-image: url("im/bkg_hl.gif");
background-repeat: repeat-x;
background-color: #0071BC;
margin: 0;
text-align: center;
}

div.container
{
background-color: #FFFFFF;
font-family: helvetica;
font-size: 1.0em;
width: 867px;
margin: 0 auto;
padding: 0px;
}

div.header
{
background-image: url("im/header.gif");
background-color: #FFFFFF;
width: 867px;
height: 200px;
}

div.header_links
{
padding-right: 20px;
line-height: 18.5em;
text-align: right;
font-size: 1.1em;
color: #09519D;
margin-bottom: -185px;
}

div.srcbx_container
{
background-image: url("im/srcbx_outerbkg.gif");
background-repeat: no-repeat;
background-position: top left;
width: 857px;
height: 81px;
padding: 10px;
}

div.srcbx_form
{
margin: 0px;
padding: 0px;
border: 0px;
}

div.srcbx_textbkg
{
margin: 0;
background-image: url("im/srcbx_barbkg.jpg");
background-color: #0071BC;
width: 728px;
height: 81px;
display: inline;
float: left;
}

input.srcbx_text
{
background: transparent;
border: 0;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
width: 728px;
height: 81px;
display: inline;
float: left;
color: #FFFFFF;
font-family: helvetica;
font-size: 2em;
}

input.srcbx_submit
{
background-image: url("im/srcbx_btn.gif");
background-color: #1B1464;
border: 0;
margin: 0;
width: 119px;
height: 81px;
display: inline;
float: left;
}

div.bodyMain
{
padding: 10px;
}

div.bodyFeat
{
padding: 10 0 10 10;
}

div.featDescriptionl
{
position: relative;
top: -55px;
left: -280px;
margin-left: 300px;
margin-right: 156px;
margin-bottom: -46px;
font-size: 1em;
text-align: left;
}

div.featDescriptionr
{
position: relative;
top: -55px;
left: 150px;
margin-left: 300px;
margin-right: 150px;
margin-bottom: -46px;
font-size: 1em;
text-align: left;
}

span.fDTitle
{
font-size: 2.5em;
}

div.bdsec_normBL
{
background-image: url("im/bdsec_normBL.gif");
background-position: 0 100%;
background-repeat: no-repeat;
background-color: #EEEEEE;
margin-right: 10px;
width: 221px;
display: inline;
float: left;
}

div.bdsec_normBR
{
background-image: url("im/bdsec_normBR.gif");
background-position: 100% 100%;
background-repeat: no-repeat;
}

div.bdsec_normTL
{
background-image: url("im/bdsec_normTL.gif");
background-position: 0 0;
background-repeat: no-repeat;
}

div.bdsec_normTR
{
background-image: url("im/bdsec_normTR.gif");
background-position: 100% 0;
background-repeat: no-repeat;
padding: 10px;
text-align: left;
}

div.bdsec_genreBL
{
background-image: url("im/bdsec_genre.gif");
background-position: top left;
background-repeat: repeat-x;
background-color: #000000;
width: 395px;
display: inline;
float: right;
}

div.bdsec_genreBR
{
background-image: url("im/bdsec_genreBL.gif");
background-position: 0 100%;
background-repeat: no-repeat;
}

div.bdsec_genreTL
{
background-image: url("im/bdsec_genreTL.gif");
background-position: 0 0;
background-repeat: no-repeat;
color: #FFF;
padding: 27 0 27 19;
text-align: center;
}

div.bdsec_genreTR
{
background-position: top left;
clear: right;
}

div.bdsec_clr
{
font-size: 1px;
height: 1px;
clear: both;
}

a.genreBrowse
{
display: inline;
float: left;
width: 107px;
color: #FFF;
font-size: 1.5em;
font-family: helvetica;
text-align: left;
text-decoration: none;
margin-right: 15px;
margin-bottom: 2px;
padding-left: 3px;
}

a.genreBrowse:hover
{
border-bottom-width: 2px;
border-bottom-style: solid;
border-collapse: collapse;
margin-bottom: 0px;
}

a.gBred:hover { background-color: #f26c4f; color: #000; }
a.gBblue:hover { background-color: #5674b9; color: #000; }
a.gBgreen:hover { background-color: #3cb878; color: #000; }
a.gByellow:hover { background-color: #fff568; color: #000; }
a.gBorange:hover { background-color: #fbaf5d; color: #000; }
a.gBwhite:hover{ background-color: #FFF; color: #000; }
a.gBblack:hover{ background-color: #000; color: #FFF; border-bottom-color: #FFF; }
a.gBpurple:hover{ background-color: #a864a8; color: #000; }
a.gBpink:hover{ background-color: #f06eaa; color: #000; }

.dblue_txt
{
color: #1b1464;
}

.lblue_txt
{
color: #09519D;
}

.featlist
{
padding: 0;
margin: 9px 0 0 1.3em;
list-style: square;
}

.feattitle
{
font-size: 1.2em;
font-family: arial;
}

.footer
{
font-size: 0.9em;
}

The div's affected (from what I remember are the featlist ones, where 'bodyFeat' has no padding)

The site displays perfectly without the doctype at the top... didn't know that could even modify the page- mind you its all to do with quirks mode/compliant modes... Note that IE7, Firefox and Google Chrome are all displaying the page the same as each other both broken and fine but doctypeless. It's not a browser-based issue.

Thanks in advance,

Dan.

haku · June 26, 2009

It's not that the doctype changes the rendering, it's that the browsers stops having to guess how to render your code, and has an actual set of rules to work with. Then when rendering the code according to those rules, your site looks a little funny. In the future, it's best to start with the doctype so you don't have this problem, but I'm sure you've figured that out anyways.

Unfortunately, without at least an image, and preferably a link, I can't really help you with your problem myself, though someone else may be able to.

Hybride · June 26, 2009

div.bodyFeat
{
padding: 10 0 10 10;
}

You didn't specify a type, like pixels. It should be

padding: 10px 0 10px 10px

And you have unneccessary tags in your script, like this:

   <div class="bdsec_normBL"><div class="bdsec_normBR"><div class="bdsec_normTL"><div class="bdsec_normTR">

               <span class="feattitle dblue_txt">Latest Scripts</span>
               <ul class="featList">
                  <li>Welcome to My World</li>
                  <li>Impact</li>
                  <li>A Dog Never Lies</li>
                  <li>Intrusion</li>
                  <li>Heartbreaker</li>
               </ul>

            </div></div></div></div>

            <div class="bdsec_normBL"><div class="bdsec_normBR"><div class="bdsec_normTL"><div class="bdsec_normTR">

               <span class="feattitle dblue_txt">Top Rated Scripts</span>
               <ul class="featList">
                  <li>Flight 52</li>
                  <li>Intrusion</li>
                  <li>Sweet Love</li>
                  <li>Till The Day I Fly</li>
                  <li>Sorrow Tomorrow</li>
               </ul>

            </div></div></div></div>

            <div class="bdsec_genreBL"><div class="bdsec_genreBR"><div class="bdsec_genreTL"><div class="bdsec_genreTR">
               <a href="#" class="genreBrowse gBred">Romance</a>
               <a href="#" class="genreBrowse gBorange">Western</a>
               <a href="#" class="genreBrowse gByellow">Comedy</a>
               <a href="#" class="genreBrowse gBgreen">Drama</a>
               <a href="#" class="genreBrowse gBblue">Action</a>
               <a href="#" class="genreBrowse gBpurple">Thriller</a>
               <a href="#" class="genreBrowse gBpink">Short</a>
               <a href="#" class="genreBrowse gBred">Horror</a>
               <a href="#" class="genreBrowse gBwhite">Sci-Fi</a>
               
               <div class="bdsec_clr"> </div>
            </div></div></div></div>

you can shorten it since you're using the same classes to something like

   <div class="bdsec_normBL"><div class="bdsec_normBR"><div class="bdsec_normTL"><div class="bdsec_normTR">
               <span class="feattitle dblue_txt">Latest Scripts</span>
               <ul class="featList">
                  <li>Welcome to My World</li>
                  <li>Impact</li>
                  <li>A Dog Never Lies</li>
                  <li>Intrusion</li>
                  <li>Heartbreaker</li>
               </ul>

               <span class="feattitle dblue_txt">Top Rated Scripts</span>
               <ul class="featList">
                  <li>Flight 52</li>
                  <li>Intrusion</li>
                  <li>Sweet Love</li>
                  <li>Till The Day I Fly</li>
                  <li>Sorrow Tomorrow</li>
               </ul>

               <a href="#" class="genreBrowse gBred">Romance</a>
               <a href="#" class="genreBrowse gBorange">Western</a>
               <a href="#" class="genreBrowse gByellow">Comedy</a>
               <a href="#" class="genreBrowse gBgreen">Drama</a>
               <a href="#" class="genreBrowse gBblue">Action</a>
               <a href="#" class="genreBrowse gBpurple">Thriller</a>
               <a href="#" class="genreBrowse gBpink">Short</a>
               <a href="#" class="genreBrowse gBred">Horror</a>
               <a href="#" class="genreBrowse gBwhite">Sci-Fi</a>
               
               <div class="bdsec_clr"> </div>
            </div></div></div></div>

Malevolence · June 26, 2009

@ haku, yes but rendering is done by the browser, hence why I used such a word. I read previously that the doctype tag is simply a switch for browsers to read a page in 'standards mode' or whatever. I took some screenshots but evidently I didn't upload them, my bad

@ Hybride, thanks so far I will implement the px changes now, I actually usually do use px but for some reason, when I noticed that px was not required to display it, I didn't put it there (which is odd, mind you I work using insomnia as a tool to persist.. yes its odd but hey, that's me). I will try to remove those </div> tags, however the divs are seperate boxes and therefore i'd imagine the </div>s are completely necessary and good practice. As I used class rather than id, class is compatible with multiple calls.

Be with you shortly... will post screenshots if not fixed.

Malevolence · June 26, 2009

Thanks a bunch, the px thing fixed it... I also fixed a capital letter in the class for the bullet list... The </div> thing I haven't tried but its perfectly compliant code...

Malevolence · June 26, 2009

Here's the image of the fixed version for your pleasure I've also included what it did look like...

Can I ask what is the best way to add shadows to the left and right without using alpha transparency pngs? keeping in mind there are gradients in the background and I want the background to repeat for infinity... and the shadows need to repeat to the bottom, after the gradient. obviously, the shadows would have to be in a div seperately... the site is a centred site and is fixed width if that helps...

[attachment deleted by admin]

Sign In

[SOLVED] Doctype affects page, even transitional... Fully compliant code

Recommended Posts

Malevolence

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Hybride

Link to comment

Share on other sites

Malevolence

Link to comment

Share on other sites

Malevolence

Link to comment

Share on other sites

Malevolence

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information