Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Debug


  • Please log in to reply
10 replies to this topic

#1 Nathan2508

Nathan2508

  • Members
  • 64 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, IL
  • Local time:02:40 PM

Posted 22 September 2009 - 10:18 AM

Here is an issue I can't seem to get past. The background on my WYSIWYG Expression Web Design View goes all the way to the bottom.

Posted Image

But when I preview it in the browser it stops near the top. It's kind of hard to see until you see it like this:

Posted Image

In the CSS code it is named "container"

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><meta name="description" content="description"/><meta name="keywords" content="keywords"/> <meta name="author" content="author"/> <link rel="stylesheet" type="text/css" href="default.css" media="screen"/><title>Student Home</title><style type="text/css">.style1 {	text-align: left;	vertical-align: top;}.style3 {	vertical-align: super;}.style4 {	font-size: 1.2em;}</style></head><body><div class="container">		<div class="main">		<div class="header">						<div class="title">				<a href="studenthome.aspx">				<h1 class="style1" style="height: 107px"><span class="style3">  Industrial Engineering Career Services</span>				<img src="img/flying_wv.jpg" class="style3" height="77" width="79" /></h1>								</a>			</div>					</div>				<!-- #BeginEditable "All" -->		<div class="content">				<div class="item">				<h1>(Heading)</h1>				<span class="style4"> (Content)</span> <br />				 <code><a href="privacy.html">Privacy Policy</a></code>						</div>		</div>		<!-- #EndEditable -->		<div class="sidenav">			<h1>Student Home</h1>			<ul>				<li><a href="studenthome.aspx">Home</a></li>			</ul>						<h1>My Account</h1>			<ul>				<li><a href="name.aspx">Name</a></li>				<li><a href="graddate.aspx">Graduation Date</a></li>				<li><a href="resume.aspx">Resume</a></li>				<li><a href="password.aspx">Password</a></li>			</ul>			<h1>Third and last</h1>			<ul>				<li><a href="index.dwt">sociis natoque</a></li>				<li><a href="index.dwt">magna sed purus</a></li>				<li><a href="index.dwt">pellentesque</a></li>				<li><a href="index.dwt">tincidunt</a></li>			</ul>			<form action="index.dwt">			<div> </div>			</form>		</div>	</div></div>						</body></html>

CSS:

* {	margin: 0;	padding: 0;}a {	color: #36C;}a:hover {	color: #06F;}body {	background: #E8E8E8;	color: #444;	font: normal 62.5% "Lucida Sans Unicode",sans-serif;	margin: 0;}input {	color: #555;	font: normal 1.1em "Lucida Sans Unicode",sans-serif;}p,cite,code,ul {	font-size: 1.2em;	padding-bottom: 1.2em;}h1 {	font-size: 1.4em;	margin-bottom: 4px;}code {	background: url(img/bgcode.gif);	border: 1px solid #F0F0F0;	border-left: 6px solid #39F;	color: #555;	display: block;	font: normal 1.1em "Lucida Sans Unicode",serif;	margin-bottom: 12px;	padding: 8px 10px;	white-space: pre;}cite {	background: url(img/quote.gif) no-repeat;	color: #666;	display: block;	font: normal 1.3em "Lucida Sans Unicode",serif;	padding-left: 28px;}h1,h2,h3 {	color: #367EA6;	padding-top: 6px;}/* misc */.clearer {	clear: both;}/* structure */.container {	background: url(img/bgcontainer.gif) repeat-y;	margin: 0 auto;	padding-bottom: 6px;	width: 950px;}.header {	background: url(img/header.gif) repeat-x;}/* title */.title h1 {	color: #FFF;	font: normal 4em Verdana,sans-serif;	height: 150px;	line-height: 150px;	margin-bottom: 8px;	text-align: left;}/* navigation */.navigation {	margin-bottom: 4px;}.navigation a {	background-color: #4A91C3;	color: #FFF;	float: left;	font: bold 1.2em "Trebuchet MS",sans-serif;	padding: 8px 0;	width: 19%;	border-right: 1px solid #FFF;	text-align: center;	text-decoration: none;}.navigation a:hover {	background-color: #000;	color: #FFF;}/* main */.main {	clear: both;	padding: 8px 18px;}/* main left */.sidenav h1,.sidenav ul {	padding-left: 12px;}.sidenav {	background: #EEE;	border: 1px solid #E5E5E5;	float: left;	width: 170px;}.sidenav h1 {	color: #666;	font-size: 1.2em;	height: 20px;	margin-top: 1.2em;}.sidenav ul {	border-top: 1px solid #FAFAFA;	background: url(img/bgul.gif) repeat-x;	margin: 0;	padding: 0;}.sidenav li {	border: 1px solid #FAFAFA;	border-top: none;	list-style: none;	margin: 0;}.sidenav li a {	color: #777;	display: block;	font-size: 0.9em;	padding: 3px 6px 3px 14px;	text-decoration: none;}.sidenav li a:hover {	color: #111;}/* content */.content {	float: right;	width: 730px;}.content .item {	padding: 6px 12px;	border: 1px solid #EEE;	background: #FFF;	margin-bottom: 8px;}.content .descr {	color: #333;	margin-bottom: 6px;}.content li {	list-style: url(img/li.gif);	margin-left: 18px;}/* search form */form {	padding: 0 0 6px 8px;}.styled {	border: 1px solid #DDD;	padding: 4px;}.button {	background: url(img/search.gif) no-repeat left bottom;	border: none;	height: 27px;	width: 27px;}/* footer */.footer {	background: #FFF;	border: 1px solid #EEE;	color: #666;	font-size: 1.1em;	margin: 0 auto;	text-align: center;	padding: 6px;	width: 1020px;}.footer a {	color: #36C;	text-decoration: none;}.footer a:hover {	color: #06F;	text-decoration: underline;}



Nathan

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:40 PM

Posted 22 September 2009 - 10:33 AM

Maybe try setting the height of the div to 100%. And then fix your HTML so that it is well-formed and valid.

#3 Nathan2508

Nathan2508
  • Topic Starter

  • Members
  • 64 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, IL
  • Local time:02:40 PM

Posted 22 September 2009 - 10:53 AM

Maybe try setting the height of the div to 100%. And then fix your HTML so that it is well-formed and valid.


Changed my CSS to

/* structure */.container {	background: url(img/bgcontainer.gif) repeat-y;	margin: 0 auto;	padding-bottom: 6px;	width: 950px;	height: 100%;}

Still isn't working. I'm going to need a little enlightenment on what you mean by "well-formed and valid."


Nathan

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:40 PM

Posted 22 September 2009 - 11:40 AM

You have no title tag, no closing body tag, and no closing html tag for starters. The structure of the document needs to be fixed before worrying about anything else, adn you may find that is all it takes to fix it. USe the validator found here:
http://validator.w3.org/#validate_by_input

#5 Nathan2508

Nathan2508
  • Topic Starter

  • Members
  • 64 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, IL
  • Local time:02:40 PM

Posted 22 September 2009 - 12:24 PM

I ran the validator and fixed the errors it gave me.

I'm still not sure what you mean by no title tag, closing body, or closing html tags.

Is the <title>Student Home</title> near the beginnig and the </body> and </html> at the end not enough?

Still having the error...

Updated code:

[codebox]<!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">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Student Home</title>
<style type="text/css">
.style1 {
text-align: left;
vertical-align: top;
}
.style3 {
border-style: solid;
border-width: 0px;
vertical-align: super;
}
.style4 {
font-size: 1.2em;
}
.style5 {
vertical-align: super;
}
</style>
</head>

<body>

<div class="container">

<div class="main">

<div class="header">

<div class="title">
<h1 class="style1" style="height: 107px"><span class="style5">&nbsp;&nbsp;Industrial Engineering Career Services</span>
<img src="img/flying_wv.jpg" class="style3" height="77" width="79" alt="" /></h1>
</div>

</div>

<!-- #BeginEditable "All" -->
<div class="content">

<div class="item">

<h1>(Heading)</h1>
<span class="style4">&nbsp;(Content)</span>&nbsp;<br />&nbsp;
<code><a href="privacy.html">Privacy Policy</a></code>

</div>

</div>
<!-- #EndEditable -->

<div class="sidenav">

<h1>Student Home</h1>
<ul>
<li><a href="studenthome.aspx">Home</a></li>
</ul>

<h1>My Account</h1>
<ul>
<li><a href="name.aspx">Name</a></li>
<li><a href="graddate.aspx">Graduation Date</a></li>
<li><a href="resume.aspx">Resume</a></li>
<li><a href="password.aspx">Password</a></li>
</ul>

<h1>Third and last</h1>
<ul>
<li><a href="index.dwt">sociis natoque</a></li>
<li><a href="index.dwt">magna sed purus</a></li>
<li><a href="index.dwt">pellentesque</a></li>
<li><a href="index.dwt">tincidunt</a></li>
</ul>

<form action="index.dwt">
<div>&nbsp;</div>
</form>

</div>

</div>

</div>

</body>

</html>[/codebox]


Nathan

#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:40 PM

Posted 22 September 2009 - 01:11 PM

Weird.. in the code that you gave up above, there were no closing tags, but they are there now. :thumbsup:

#7 Nathan2508

Nathan2508
  • Topic Starter

  • Members
  • 64 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, IL
  • Local time:02:40 PM

Posted 22 September 2009 - 02:40 PM

At any rate...

This isn't making any sense to me. For some reason the <div class="container"> is only covering up through the header and won't cover the side navigation or the content.

I've tried moving things all around and nothing works.

[codebox]<!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">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Student Home</title>
<style type="text/css">
.style1 {
text-align: left;
vertical-align: top;
}
.style3 {
border-style: solid;
border-width: 0px;
vertical-align: super;
}
.style4 {
font-size: 1.2em;
}
.style5 {
vertical-align: super;
}
</style>
</head>

<body>

<div class="container">

<div class="main">

<div class="header">

<div class="title">
<h1 class="style1" style="height: 107px"><span class="style5">&nbsp;&nbsp;Industrial Engineering Career Services</span>
<img src="img/flying_wv.jpg" class="style3" height="77" width="79" alt="" /></h1>
</div>
</div>


<div class="content">
<!-- #BeginEditable "All" -->
<div class="item">

<h1>(Heading)</h1>
<span class="style4">&nbsp;(Content)</span>&nbsp;<br />&nbsp;
<code><a href="privacy.html">Privacy Policy</a></code>

</div>
<!-- #EndEditable -->
</div>


<div class="sidenav">

<h1>Student Home</h1>
<ul>
<li><a href="studenthome.aspx">Home</a></li>
</ul>

<h1>My Account</h1>
<ul>
<li><a href="name.aspx">Name</a></li>
<li><a href="graddate.aspx">Graduation Date</a></li>
<li><a href="resume.aspx">Resume</a></li>
<li><a href="password.aspx">Password</a></li>
</ul>

<h1>Third and last</h1>
<ul>
<li><a href="index.dwt">sociis natoque</a></li>
<li><a href="index.dwt">magna sed purus</a></li>
<li><a href="index.dwt">pellentesque</a></li>
<li><a href="index.dwt">tincidunt</a></li>
</ul>

<form action="index.dwt">
<div>&nbsp;</div>
</form>

</div>

</div>

</div>

</body>

</html>[/codebox]


Nathan

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:40 PM

Posted 22 September 2009 - 04:48 PM

Is the content of the div a fixed height?

#9 Nathan2508

Nathan2508
  • Topic Starter

  • Members
  • 64 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, IL
  • Local time:02:40 PM

Posted 24 September 2009 - 08:28 AM

Not sure if I know exactly what you mean.

The container class is set at 100%.

/* structure */
.container {
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
padding-bottom: 6px;
width: 950px;
height: 100%;
}

While some elements that are used within that particular div are a fixed height...

<div class="container">

<div class="main">

<div class="header">

<div class="title">
<h1 class="style1" style="height: 107px"><span class="style5">&nbsp;&nbsp;Industrial Engineering Career Services</span>
<img src="img/flying_wv.jpg" class="style3" height="77" width="79" alt="" /></h1>
</div>
</div>

...etc, etc...


Nathan

#10 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:40 PM

Posted 24 September 2009 - 09:28 AM

Wait, what? Clearly you do know what I mean.... "some elements that are used within that particular div are a fixed height."

Set the height of your div to a fixed height. 100% is not fixed because it will vary with the resolution of the screen.

#11 Nathan2508

Nathan2508
  • Topic Starter

  • Members
  • 64 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, IL
  • Local time:02:40 PM

Posted 24 September 2009 - 09:34 AM

OK. But this is a .dwt page. I will have different content depending on the page you are visiting and what if this content exceeds the height I've specified for the template.


Nathan




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users