Click to See Complete Forum and Search --> : div overflowing rather than expanding


skilled1
10-15-2009, 01:22 PM
can someone take a look at

http://www.cosmeticsurgeryforyou.com/dev/index.html

for some reason it isn't clicking for me, and it is driving me mad

cfajohnson
10-15-2009, 10:00 PM
Before doing anything else, fix your code:

Errors found while checking this document as HTML 4.01 Transitional!
Result: 16 Errors, 4 warning(s)
Address: http://www.cosmeticsurgeryforyou.com/dev/index.html


If that doesn't solve your problem, post a follow-up.

skilled1
10-15-2009, 10:43 PM
errors like that that are being found are not problems that would be causing the div to break

<html>
<head>
<title>Plastic Surgery in Seattle | The Gallery of Cosmetic Surgery</title>

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

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen,projection" />

<style type="text/css">
html>body .outerpair1 {background: url(images/upperrightfade.png) right top no-repeat;}
html>body .outerpair2 {background: url(images/lowerleftfade.png) left bottom no-repeat; padding-top: 8px; padding-left: 8px;}
html>body .shadowbox {background: url(images/shadow.png) bottom right;}
html>body .innerbox {position: relative; left: -8px; top: -8px;}
.textbox {position: absolute; align: center;}
.style1 {font-size: medium}
</style>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br><br>

<div id="wrap">

<div class="outerpair1 textbox" >
<div class="outerpair2">

<div class="shadowbox">
<div class="innerbox">

<div id="wrap3" valign="top" align="center">

<div id="head">
<div id="top" align="center">
<table id="Table_01" width="1008" height="277" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="439" height="99">
<img src="img/b_01.jpg" alt=""></td>
<td rowspan="2" width="569" height="277">
<img src="img/b_02.jpg" alt=""></td>
</tr>
<tr>
<td width="205" height="178">
<img src="img/b_03.jpg" alt=""></td>
<td width="234" height="178">
<img src="img/b_04.jpg" alt=""></td>
</tr>
</table>
</div>
<div id="navi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=#>Home</a> &nbsp; | &nbsp; <a href="team.html">Our Team</a> &nbsp; | &nbsp; <a href="procedures.html">Procedures</a> &nbsp; | &nbsp; <a href="gallery.html">Photo Gallery</a> &nbsp; | &nbsp; <a href="products.html">Products</a> &nbsp; | &nbsp; <a href="financing.html">Financing</a> &nbsp; | &nbsp; <a href="blog.html">Blog</a> &nbsp; | &nbsp; <a href="news.html">News</a> &nbsp; | &nbsp; <a href="contact.html">Contact Us</a></div>
</div>
<div id="aboutleftside">

<div id="leftside" align="left">
<h2 class="hide">Menu:</h2>
<ul class="avmenu">
<li><a href="#">Main</a> </li>
<ul>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
</ul>
</div>
<div id="content">

<br>
<h2>The Gallery of Cosmetic Surgery, Seattle Plastic Surgeons</h2>
<h3>cosmetic surgery seattle, seattle plastic surgeons</h3>
<table width="820" cellpadding=0 cellspacing=0 align="center">
<tr>
<td>
<br><center><img src="img/types.jpg"></center><br><br>
At The Gallery of Cosmetic Surger, Dr. Jonv and Dr. Sobel take pride in their ability to refine and restore natural beauty. Our team of compitent professionalse are commited to providing skilled, compassionate and comprehensive care in our <a href="#">JCAHO accredited state of the art facility.</a>
<br><br>
At the gallery of Cosmetic Surgery, Seattle our purpose is not only to enhance physical attributes but to help restore confidence, vitality, and renew one's spirit. Our skilled Seattle plastice surgeons and our <a href="#">team of exceptional professionals</a> deliver honest evaluations and guidance, empowering our patients to make informed decisions about treatment. Our patient centered approach puts your needs first.
<br><br>
<center><img src="img/awards.jpg"></center>
</td>
<td></td>
</tr>
</table>
<br><br><br><br>
</div>


<div id="footer">
<p>&copy; 2007 - 2009 The Gallery of Cosmetic Surgery. All rights reserved. </p>
</div> </div>
</div>

</div>
</div>

</div>


</div>

</body>
</html>

thats the code

opifex
10-15-2009, 10:59 PM
html errors ARE causing your problem.... an unclosed div IS an html error. Clean it up... and you'll see!
There is absolutely no excuse for not fixing errors when you know what they are.
Enjoy!

skilled1
10-16-2009, 06:55 AM
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cosmeticsurgeryforyou.com%2Fdev%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0 (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cosmeticsurgeryforyou.com%2Fdev%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0)


errors telling me its height instead of HEIGHT, and that i don't have an alt attribute AREN'T causing my div to break.

can someone take a look at the code and tell me what i am not seeing, rather then giving me some run around answer, that would be great.

Eye for Video
10-16-2009, 09:01 AM
I agree that you need to start by validating the code. For example, the very first error is that there is no DocTypeDeclaration. So for starters, how is the browser suppose to know which set of rules to use to parse the page.
Then looking at the page in IE Developer Toolbar, it looks like your <wrap> div is intended to contain all the other stuff. But in IE, there's nothing in it. Looking at the code in DW and it looks like <wrap> is missing it's closing tag, in effect removing it from the page. Then throw in the elements that are absolute and relative positioned, but not in <wrap> and the content is all over the place.
Also double closing </body> and </html> at the bottom.
So declare a doc type, then get the page to validate, and I'll bet the problems straighten out.
Best wishes,
EfV

opifex
10-16-2009, 03:04 PM
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cosmeticsurgeryforyou.com%2Fdev%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0

errors telling me its height instead of HEIGHT, and that i don't have an alt attribute AREN'T causing my div to break.

.

BUT errors like
Line 28: start tag was here
><div id="wrap">
ARE causing your "div to break" because it is NOT closed.
If you really want help and really have any intention of learning anything, a good place to start would be to pay attention to what your "validator" of choice tells you and what people tell you instead of ignoring the obvious errors in your code.

skilled1
11-01-2009, 12:19 PM
Updated code. Same Problems.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cosmeticsurgeryforyou.com%2Fdev%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

http://www.cosmeticsurgeryforyou.com/dev/index.html


webpage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<title>Plastic Surgery in Seattle | The Gallery of Cosmetic Surgery</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="subject" content="">
<meta name="audience" content="general">
<meta name="copyright" content="Copyright ©2007 The Gallery of Cosmetic Surgery, All rights reserved">
<meta name="author" content="Carbone Design, data Chameleon, Inc.">
<meta name="keywords" content="plastic surgery in seattle, plastic surgeons in seattle, edmonds wa plastic surgery, plastic surgeons lynnwood, plastic surgery edmonds, plastic surgery clinics in lynnwood wa, plastic surgery in redmond wa, plastic surgeons in kirkland wa, plastic surgeons seattle, seattle plastic surgeons, plastic surgeon seattle , plastic surgery seattle wa, seattle plastic surgeon, seattle plastic surgery">
<meta name="description" content="Plastic surgery in Seattle can refine and restore your natural beauty. The physicians and professionals here will give you an honest evaluation and guidance to empower you to make informed decisions.">


<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen,projection">

<style type="text/css">
html>body .outerpair1 {background: url(images/upperrightfade.png) right top no-repeat;}
html>body .outerpair2 {background: url(images/lowerleftfade.png) left bottom no-repeat; padding-top: 8px; padding-left: 8px;}
html>body .shadowbox {background: url(images/shadow.png) bottom right;}
html>body .innerbox {position: relative; left: -8px; top: -8px;}
.textbox {position: absolute; align: center;}
.style1 {font-size: medium}
</style>

</head>

<body>
<br><br>

<div id="wrap">

<div class="outerpair1 textbox" >
<div class="outerpair2">

<div class="shadowbox">
<div class="innerbox">

<div id="wrap3" valign="top" align="center">

<div id="head">
<div id="top" align="center">
<table id="Table_01" width="1008" height="277" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="439" height="99">
<img src="img/b_01.jpg" alt=""></td>
<td rowspan="2" width="569" height="277">
<img src="img/b_02.jpg" alt=""></td>
</tr>
<tr>
<td width="205" height="178">
<img src="img/b_03.jpg" alt=""></td>
<td width="234" height="178">
<img src="img/b_04.jpg" alt=""></td>
</tr>
</table>
</div>
<div id="navi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.html">Home</a> &nbsp; | &nbsp; <a href="team.html">Our Team</a> &nbsp; | &nbsp; <a href="procedures.html">Procedures</a> &nbsp; | &nbsp; <a href="gallery.html">Photo Gallery</a> &nbsp; | &nbsp; <a href="products.html">Products</a> &nbsp; | &nbsp; <a href="financing.html">Financing</a> &nbsp; | &nbsp; <a href="blog.html">Blog</a> &nbsp; | &nbsp; <a href="news.html">News</a> &nbsp; | &nbsp; <a href="contact.html">Contact Us</a></div>
</div>
<div id="aboutleftside">

<div id="leftside" align="left">
<h2 class="hide">Menu:</h2>
<ul class="avmenu">
<li><a href="#">Main</a> </li>
<ul>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
</ul>
</div>
<div id="content">

<br>
<h2>The Gallery of Cosmetic Surgery, Seattle Plastic Surgeons</h2>
<h3>cosmetic surgery seattle, seattle plastic surgeons</h3>
<table width="820" cellpadding=0 cellspacing=0 align="center">
<tr>
<td>
<br><center><img src="img/types.jpg" alt=""></center><br><br>
At The Gallery of Cosmetic Surger, Dr. Jonv and Dr. Sobel take pride in their ability to refine and restore natural beauty. Our team of compitent professionalse are commited to providing skilled, compassionate and comprehensive care in our <a href="#">JCAHO accredited state of the art facility.</a>
<br><br>
At the gallery of Cosmetic Surgery, Seattle our purpose is not only to enhance physical attributes but to help restore confidence, vitality, and renew one's spirit. Our skilled Seattle plastice surgeons and our <a href="#">team of exceptional professionals</a> deliver honest evaluations and guidance, empowering our patients to make informed decisions about treatment. Our patient centered approach puts your needs first.
<br><br>
<center><img src="img/awards.jpg" alt=""></center>
</td>
<td></td>
</tr>
</table>
<br><br><br><br>
</div>


<div id="footer">
<p>&copy; 2007 - 2009 The Gallery of Cosmetic Surgery. All rights reserved. </p>
</div> </div>
</div>

</div>
</div>

</div>

</div>

</div>

</body>
</html>

opifex
11-01-2009, 02:09 PM
#content {margin: 0 2px 5px 184px; height: 199px;padding: 7px 10px 2px 17px; background-color:#584c3e; color:#bdb099;}
change
height: 199px; toheight: auto;
and... you still have errors in both your html and css.

skilled1
11-01-2009, 07:54 PM
3 errors one with a ul, and 2 with HEIGHT and VALIGN both supposed to be lowercase wasn't the problem.

however the content not being auto was, thank you for the heads up. now i can iron out the last few small details before i replicate the template.

thanks again.

opifex
11-01-2009, 08:48 PM
EVERY ERROR is a problem... that's why they are called ·errors" and not warnings!
To avoid these kinds of problems in the future, you might consider designing your own templates instead of trying to adapt someone else's mistakes to your needs... at least until you have a better understanding of html structure and how css works. You also have a couple of potential problems in the future if you keep combining different javascript frameworks in the same page. Usually everything will work OK, but there are a few conflicts that exist and of course they will show up when you least expect them.
PAY ATTENTION TO DETAIL!!! Spelling, punctuation and syntax count.

skilled1
11-02-2009, 03:12 PM
how is it an error when my code it is height, and valign, however the online checker reads it as a HEIGHT and VALIGN?

cfajohnson
11-02-2009, 03:49 PM
how is it an error when my code it is height, and valign, however the online checker reads it as a HEIGHT and VALIGN?

There is no attribute valign. (The validator sometimes gives the wrong explanation for an error.)

An error may have a cascading effect. Correct it, and other spurious errors may disappear.