PDA

View Full Version : Div height problem



vijetha
Feb 21st, 2010, 04:27 PM
hi am making a web site layout and so far so good. But as per the requirements i have to increase the height of the main content div. When i did it it so the entire layout is collapsing . plz see the coding and help me fix this please.

This is the Live demo with out any problem (http://mytestins.freehostia.com/post/indeex.htm)

This is the Live demo when i increase the height. (http://mytestins.freehostia.com/post/trouble/troublee.htm)

This is the css:

@charset "utf-8";
/* CSS Document */
img { border: none;
}
body{
margin: 0px;
padding: 0px;
background: url(../images/bg.png) repeat;
}
#wrapper{
width: 1000px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
overflow: auto;
}
#logohold{
height: 105px;
width: 1000px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}

.logo{
height: 65px;
width: 362px;
float: left;
margin-top: 20px;
}
#header{
background: url(../images/main_hader.png) no-repeat;
height: 372px;
width: 1000px;
clear: right;
margin-right: auto;
margin-left: auto;
}
#navbar{
float: right;
height: 40px;
width: 600px;
margin-top: 33px;
padding-right: 5px;
}
#navbar ul {
width: 600px;
margin: 0;
padding: 0;
}
#navbar ul li{
width: 99px;
height: 40px;
text-align: center;
float: right;
padding: 0;
list-style-type: none;
margin-right: 5px;
}
#navbar ul li a{
display: block;
width: 99px;
height: 40px;
font: bold 20px/35px "Trebuchet MS";
color: #000000;
}
#navbar ul li a:link{
font-family: Verdana;
text-decoration: none;
color: black;
}
#navbar ul li a:active{
background: url(../images/hover1.png) no-repeat;
}
#navbar ul li a:visited{
font: bold 20px/35px "Trebuchet MS";
color: #000000;
}
#navbar ul li a:hover{
background: url(../images/hover1.png) center;
color: white;
}
#manin_bg{
background: url(../images/main_bg1.png) repeat-x;
height: 710px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.lft_box{
float: left;
width: 470px;
margin-right: 15px;
margin-left: 18px;
margin-top: 15px;
padding-bottom: 5px;
display: inline;
}
.lft_box h1{
color: #000000;
background: url(../images/money.png) no-repeat;
height: 61px;
font: 27px "Lucida Grande";
text-indent: 65px;
}
.lft_boximg1{
background: url(../images/exchange.png) no-repeat;
float: left;
height: 114px;
width: 122px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.lft_boxtext{
font: 12px "Myriad Pro";
color: #444444;
text-align: justify;
padding: 0px 5px 5px;
display: inline;
}
.readmore1{
background: no-repeat;
height: 27px;
width: 152px;
border-width: 0px;
border-style: none;
float: right;
margin-right: 5px;
display: inline;
}
.rht_box{
float: left;
width: 456px;
margin-right: 18px;
margin-left: 18px;
margin-top: 15px;
padding-bottom: 5px;
display: inline;
}
.rht_box h1{
color: #000000;
background: url(../images/round.png) no-repeat;
height: 61px;
font: 27px "Lucida Grande";
text-indent: 65px;
}
.rht_boximg1{
background: url(../images/exchange.png) no-repeat;
float: left;
height: 114px;
width: 122px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.rht_boxtext{
font: 12px "Myriad Pro";
color: #444444;
text-align: justify;
padding: 0px 5px 5px;
}
.dotted_line{
background: url(../images/dotted-line.png) repeat-y;
width: 2px;
margin-top: 20px;
float: left;
height: 300px;
margin-bottom: 20px;
display: inline;
}
.notify{
background: url(../images/apply.png) no-repeat;
height: 36px;
clear: both;
float: left;
margin-top: 10px;
margin-left: 18px;
font: 14px/30px "Lucida Grande";
color: #FFFFFF;
width: 342px;
}
.notifytext{
text-decoration: none;
text-indent: 8px;
font-family: "Lucida Grande";
}
.notifytext a{
font: bold 14px/35px "Trebuchet MS";
color: #FFFFFF;
text-decoration: none;
}
.notifytext a:hover{
font: bolder 14px/35px "Trebuchet MS";
color: #FFFF00;
text-decoration: underline;
}
.holder1{
width: 472px;
height: 273px;
float: left;
position: relative;
left: 18px;
clear: left;
margin-top: 25px;
}
.holder2{
width: 472px;
height: 273px;
float: right;
clear: right;
margin-top: 25px;
position: relative;
right: 18px;
}
.currency_lftheader{
background: url(../images/lftbox_head.png) no-repeat;
height: 56px;
width: 472px;
font: 18px/40px "Trebuchet MS";
color: #444444;
text-indent: 8px;
}
.currency_lftmain{
background: url(../images/leftbox_main.png) no-repeat;
height: 203px;
width: 472px;
clear: left;
}
.currency_lftfooter{
background: url(../images/leftbox_footer.png) no-repeat;
height: 14px;
width: 472px;
clear: left;
}
.currency_rhtheader{
background: url(../images/rhtbox_head.png) no-repeat;
float: right;
height: 56px;
width: 472px;
clear: left;
font: 18px/40px "Trebuchet MS";
color: #444444;
text-indent: 350px;
text-align: left;
}
.currency_rhtmain{
background: url(../images/rhtbox_main.png) no-repeat;
height: 203px;
width: 472px;
clear: right;
overflow: auto;
}
.currency_rhtfooter{
background: url(../images/rhtbox_footer.png) no-repeat;
height: 14px;
width: 472px;
}
.currency_rhtmaintext{
font: 12px "Trebuchet MS";
color: #444444;
text-align: justify;
padding: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
overflow: auto;
}
#footer{
background: url(../images/footer.png) no-repeat;
height: 134px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.footernav{
width: 300px;
position: relative;
left: 18px;
top: 30px;
}

.footertext{
font: 15px "Myriad Pro";
color: #444444;
}
.footertext a{
list-style-type: none;
margin-right: 5px;
font: 15px "Myriad Pro";
color: #444444;
text-decoration: none;
}
.footertext a:hover{
border-bottom: 1px dotted #444444;
}
.online{
background: no-repeat;
float: left;
height: 54px;
width: 187px;
position: relative;
left: 18px;
top: 50px;
}
.online1{
background: no-repeat;
float: left;
height: 27px;
width: 127px;
position: relative;
left: 755px;
top: 325px;
}
.copyrighttext{
font: 14px "Trebuchet MS";
color: #444444;
position: relative;
top: 75px;
text-align: center;
float: left;
left: 165px;
}
.phonebox{
float: right;
height: 110px;
width: 265px;
margin-right: 18px;
position: relative;
bottom: 5px;
}
.emailtext{
font: 12px/5px "Trebuchet MS";
color: #444444;

}
.emailtext a{
font: 12px/5px "Trebuchet MS";
color: #444444;
text-decoration: none;
}
.emailtext a:hover{
text-decoration: underline overline;
}
.lt{
float: left;
position: relative;
width: 215px;
clear: left;
left: 10px;
margin-top: 15px;
padding: 0px;
text-align: center;
}
.rt{
float: right;
width: 215px;
position: relative;
right: 10px;
margin-top: 15px;
text-align: center;
}
.dts{
background: url(../images/dotted-line.png) repeat-y;
height: 175px;
width: 2px;
float: left;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}
.ltrt_txt{
font: 18px "Trebuchet MS";
color: #E61818;
text-decoration: underline;
}
.green_text{
font: bold 16px "Arial MT";
color: #006600;
}
.blk_text{
font: bold 12px "Trebuchet MS";
color: #000000;
}
.buynow{
height: 24px;
width: 75px;
background: no-repeat;
display: block;
margin: 10px auto 5px;
}
.sellnow{
background: repeat;
height: 24px;
width: 75px;
margin: 10px auto 5px;
}
.img1{
background: url(../images/gtbank.png) no-repeat;
float: left;
height: 93px;
width: 97px;
margin: 10px 5px 5px;
}
.img2{
background: url(../images/routepay.png) no-repeat;
float: right;
height: 59px;
width: 180px;
margin: 10px 5px 5px;
}
.img3{
background: no-repeat;
height: 59px;
width: 160px;
position: relative;
float: left;
margin: 40px 5px 5px;
}


This is the modfification on other page. see the height.

#manin_bg{
background: url(../../images/main_bg2.png) repeat-x;
height: 790px;
width: 1000px;
margin-right: auto;
margin-left: auto;

Josephbm91
Feb 21st, 2010, 05:06 PM
First off, That advertisement totally catches my shoe fetish and I hate you for that. :P

Secondly, your "working" version is nowhere close to working in IE7. I see two different scroll bars in my screen. There's a lot to fix.

On FF and chrome, the only problem with the "not working" version is that you have the main background set to repeat both up and down, so the green bar eventually shows up again as the page grows taller. If you want just the top green bar to appear, change your body style to




body{
margin: 0px;
padding: 0px;
background: url(../images/bg.png) repeat-x;
}



Now to fix the IE issue:
Add this to your css


#holders{margin: 0px auto;
width: 1000px;}

In your html, type <div id="holders"> immediately before <div class="holder1">, and then close the div after you close <div class="holder2">

That makes it line up for me.

Excavator
Feb 21st, 2010, 05:14 PM
hello vijetha,
This sounds an aweful lot like homework.

Adding a background color to your repeated image will help appearances too, like this -

body{
margin: 0px;
padding: 0px;
background: #e1e1e1 url(../images/bg.png) repeat-x;
}

vijetha
Feb 22nd, 2010, 07:46 AM
Thanks a lot Excavator and joseph . I have a new problem see there's a small gap appearing between the main bg and the footer div. i tried every thing to fix it with in my limited css knowledge. And as a last resort i am posting it in here for ur expert help.Also i gave 20 pix bottom to the wrapper div and its not apparing on the page as well.

Heres the Live Demo of the page (http://mytestins.freehostia.com/finaltesting/index.htm)

regards

Excavator
Feb 22nd, 2010, 08:27 AM
Thanks a lot Excavator and joseph . I have a new problem see there's a small gap appearing between the main bg and the footer div.

Hmm, I don't see any gap between #footer and #wrapper. I do see a line at the top of the footer image itself...
http://mytestins.freehostia.com/finaltesting/images/footer.png

vijetha
Feb 22nd, 2010, 09:07 AM
Hmm, I don't see any gap between #footer and #wrapper. I do see a line at the top of the footer image itself...
http://mytestins.freehostia.com/finaltesting/images/footer.png

plz see it am attaching he screen shot. is visible both on FF3.5.8,chrome and ie8

Excavator
Feb 22nd, 2010, 09:17 AM
Ahh, I see.
Remove this bit hightlighted in red -

#wrapper{
width: 1000px;
margin-right: auto;
margin-left: auto;
overflow: auto;
margin-bottom: 20px;
}

vijetha
Feb 22nd, 2010, 09:22 AM
Ahh, I see.
Remove this bit hightlighted in red -

#wrapper{
width: 1000px;
margin-right: auto;
margin-left: auto;
overflow: auto;
margin-bottom: 20px;
}

wow it worked.But still i need a clarification as am a novice but keen to learn css. see i gave the margin bottom to the wrapper and the footer is with in the wrapper. why its causing trouble ? why a gap appeared before ? and what if i want 20 pix bottom margin to the wrapper? should i give the margin bottom to he footer instead??

abduraooft
Feb 22nd, 2010, 09:44 AM
see i gave the margin bottom to the wrapper and the footer is with in the wrapper. why its causing trouble ? That's only your assumption :). Your footer is outside of wrapper, when I inspect it using firebug. The validator might give you some hints, see http://validator.w3.org/check?uri=http://mytestins.freehostia.com/finaltesting/index.htm

vijetha
Feb 22nd, 2010, 10:20 AM
That's only your assumption :). Your footer is outside of wrapper, when I inspect it using firebug. The validator might give you some hints, see http://validator.w3.org/check?uri=http://mytestins.freehostia.com/finaltesting/index.htm

yepp seems i missed some thing :(

vijetha
Feb 22nd, 2010, 03:18 PM
ok i went through that validations. Most of them i missed alt tags and alternatively i used title tags still its showing error. Also i couldn't able to locate where i fumbled up on the coding as well. Any help please. Thanks in advance.

Excavator
Feb 22nd, 2010, 05:09 PM
Good morning vijetha,
I don't understand, you ran your code through the validator but didn't fix anything?
What problem are you seeing now? The gap between the two divs is gone.



but... have you seen your site in IE7 yet?

vijetha
Feb 22nd, 2010, 05:19 PM
Good morning vijetha,
I don't understand, you ran your code through the validator but didn't fix anything?
What problem are you seeing now? The gap between the two divs is gone.



but... have you seen your site in IE7 yet?

Hi sir, yes that problem is fixed and when i validated my css i found lots of errors in my css and i don't know how to fix them as am a novice in css. Any help plz? rpm the validator i found i missed " alt " tags but alternatively i used " title " tags still its showing error. Also i couldn't able to locate where i fumbled up on the coding as well. Any help please. Thanks in advance.
http://validator.w3.org/check?uri=http://mytestins.freehostia.com/finaltesting/index.htm

Excavator
Feb 22nd, 2010, 05:31 PM
Did you know there are two validators? Your CSS validates (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3a%2f%2fmytestins.freehostia.com%2ffinaltesting%2findex.htm).

The 20 errors in your markup are not difficult to fix. Just start at the top of the list, fix one, then check it again because there are lots of times that fixing one error will eliminate 4 or 5 others.
As for how to fix the errors, the validator explains each one in great detail.
Give it a shot and post back if you have problems with one.

vijetha
Feb 22nd, 2010, 06:17 PM
Did you know there are two validators? Your CSS validates (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3a%2f%2fmytestins.freehostia.com%2ffinaltesting%2findex.htm).

The 20 errors in your markup are not difficult to fix. Just start at the top of the list, fix one, then check it again because there are lots of times that fixing one error will eliminate 4 or 5 others.
As for how to fix the errors, the validator explains each one in great detail.
Give it a shot and post back if you have problems with one.

sir this is my latest validations . Am upto 8 errors now

http://validator.w3.org/check?uri=http%3A%2F%2Fmytestins.freehostia.com%2Ffinaltesting%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

The actual problem is i gave the margin bottom to the wrapper and the footer is with in the wrapper. why its causing trouble ? why a gap appeared earlier ? and what if i want 20 pix bottom margin to the wrapper? should i give the margin bottom to the footer instead??

Excavator
Feb 22nd, 2010, 06:29 PM
In XHTML all elements must be specifically closed. Before <div class="readmore"1> you have a paragraph that is still open.

That first error says you can't have a div iside the p.
The next two show you your open paragraph and tell you to close it.

The validator results are pretty self explanitory if you read them.

vijetha
Feb 22nd, 2010, 07:09 PM
me closing up to 5 error now. But i still couldn't able to locate why my footer is not with in the wrapper div.

Excavator
Feb 22nd, 2010, 07:20 PM
me closing up to 5 error now. But i still couldn't able to locate why my footer is not with in the wrapper div.

It's there because that's how you wrote the code. You close #wrapper and then start #footer. It's not an error.

If you need #footer inside #wrapper, you will need to move #wrapper's closing </div>.

Do you have FireBug (http://getfirebug.com/) for FireFox? It clearly shows how your div elements are laid out. So should whatever editor your using though.


Another link just so I don't have to go look for it all the time. (http://mytestins.freehostia.com/finaltesting/index.htm)

vijetha
Feb 22nd, 2010, 07:46 PM
It's there because that's how you wrote the code. You close #wrapper and then start #footer. It's not an error.

If you need #footer inside #wrapper, you will need to move #wrapper's closing </div>.

Do you have FireBug (http://getfirebug.com/) for FireFox? It clearly shows how your div elements are laid out. So should whatever editor your using though.


Another link just so I don't have to go look for it all the time. (http://mytestins.freehostia.com/finaltesting/index.htm)

First of all sorry for my dumb questions. But am determined to learn and master css. I see i closed my wrapper div properly . Am enclosing the mark up.Its so weird. :confused:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>~~Vijetha.com-Index~~</title>
<link href="css/raja.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"> <!--Starting Wrapper Div-->
<div id="logohold"><!--Starting Logo Div-->
<div class="logo"> <a href="index.htm" title="vijetha.com"><img src="images/logo.png" alt="logo" width="362" height="65" border="0"/></a></div>
<div id="navbar">
<ul>
<li><a href="contact.htm" title="Contact">Contact</a></li>
<li><a href="faq.htm" title="FAQ">FAQ</a></li>
<li><a href="sell.htm" title="Sell">Sell</a></li>
<li><a href="buy.htm" title="Buy">Buy</a></li>
<li><a href="index.htm" title="Home">Home</a></li>

</ul>
</div>
</div><!--closing logohold Div-->
<div id="header"><!--Starting Haader Div-->
<div class="online1"><img src="images/online.png" alt="online" width="127" height="27" /></div>
</div><!--Closing Header Div-->
<div id="manin_bg"><!--Starting main_bg Div-->
<div class="lft_box"> <!--Starting left_bix Div-->
<h1>Who we are?</h1>
<div class="lft_boximg1"></div>
<p class="lft_boxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero<br /><br /></p>
<div class="readmore1"><a href="#"><img src="images/read_more1.png" alt="Readmore" title="Clcik Here to Read More.." /></a></div>
</div><!--Closing Left_Box Div-->
<div class="dotted_line"></div>
<div class="rht_box"><!--Starting rht_box Div-->
<h1>How Does it work?</h1>
<p class="rht_boxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique
<div class="readmore1"><a href="#"><img src="images/read_more1.png" alt="Readmore" title="Clcik Here to Read More.." /></a></div>
</p></div><!--Closing rht_box Div-->
<div class="notify"><!--Starting notify Div-->
<div class="notifytext"><a href="#" title="NOTIFY ADMIN OF PAYMENT MADE">NOTIFY ADMIN OF PAYMENT MADE</a></div>
</div>
<!--Closing notify Div-->
<div class="add"><img src="images/banner.gif" alt="Banner" width="468" height="60" /></div>
<div id="holders"><!--Starting Holders Div-->
<div class="holder1"><!--Starting Holder1 Div-->
<div class="currency_lftheader">Lorem Ipsum</div>
<div class="currency_lftmain">
<div class="lt"><span class="ltrt_txt">Lorem Ipsum</span> <br />
<br />
<span class="green_text">We Sell For</span><br />
<span class="blk_text">( N ) $ 165</span><br />
<br />
<span class="green_text">We Buy For</span><br />
<span class="blk_text">( N ) $ 175</span><br />
<div class="buynow"><a href="#"><img src="images/buy_now.png" alt="buy now" width="75" height="24" title="Click Here to Buy" /></a><br />
</div>
</div>

<div class="dts"></div>
<div class="rt"><span class="ltrt_txt">Lorem Ipsum</span><br />
<br />
<span class="green_text">We Sell For</span><br />
<span class="blk_text">( N ) $ 134)</span><br />
<br />
<span class="green_text">We Buy For</span><br />
<span class="blk_text">(N) $ 125</span><br />
<div class="sellnow"><a href="#"><img src="images/sell_now.png" alt="sell Now" width="75" height="24" title="Click Here to Sell" /></a><br />
</div>
</div>
</div>
<div class="currency_lftfooter"></div>
</div> </div><!--Closing Holder1 Div-->
<div class="holder2"><!--Starting Holder2 Div-->
<div class="currency_rhtheader">Latest News</div>
<div class="currency_rhtmain">
<div class="currency_rhtmaintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis.<br />

</div>
</div>
<div class="currency_rhtfooter"></div>
</div> </div><!--clsong Holder2 Div-->
</div><!--Closing Holders Div-->
</div > <!--Closing main_bg Div-->
<div id="footer"><!--Starting footer Div-->
<div class="footernav"><span class="footertext"><a href="#" title="Home">Home</a></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="footertext"><a href="#" title="Buy">Buy</a></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="footertext"><a href="#" title="Sell">Sell</a></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="footertext"><a href="#" title="FAQ">FAQ</a></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="footertext"><a href="#" title="Contact">Contact</a></span></div >
<div class="online"><img src="images/lr.png" alt="lr" width="62" height="54" />&nbsp;&nbsp;<img src="images/rp.png" alt="rp" width="54" height="54" />&nbsp;&nbsp;<img src="images/gtb.png" alt="gt" width="54" height="54" /></div >
<div class="copyrighttext">vijetha.com&copy;Copy Rights 2010, All Rights Reserved. </div>
<div class="phonebox"><img src="images/email.png" alt="e-mail" width="30" height="36" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="emailtext">&nbsp;<a href="#">&nbsp;[email protected]</a></span><br />
<img src="images/hand.png" alt="hand" width="32" height="28" /> <span class="emailtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vijjy</span><br />
<img src="images/mobile.png" alt="Mobile" width="18" height="30" /><span class="emailtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;234&nbsp;704&nbsp;245&nbsp;0977</span> , <span class="emailtext">&nbsp;234&nbsp;704&nbsp;245&nbsp;0977</span></div >
</div> <!--Closing footer Div-->
</div><!--Closing Wrapper Div-->
</body>
</html>

Live Demo (http://mytestins.freehostia.com/finaltesting/index.htm)

Excavator
Feb 22nd, 2010, 07:56 PM
It's not weird at all.
Sort out your other 5 errors and you'll probably fix this. Notice the extra closing tags the validator finds?

You comment <!--Closing Wrapper Div--> on a </div> but it is not the one that closes #wrapper.

What program are you using to write your website in? It should be able to highlight sections of code to show you where your actually closing #wrapper.

vijetha
Feb 22nd, 2010, 08:05 PM
It's not weird at all.
Sort out your other 5 errors and you'll probably fix this. Notice the extra closing tags the validator finds?

You comment <!--Closing Wrapper Div--> on a </div> but it is not the one that closes #wrapper.

What program are you using to write your website in? It should be able to highlight sections of code to show you where your actually closing #wrapper.

Am using Dreamweaver cs coding view for coding. ok now i am closing in to 1 error.

http://validator.w3.org/check?uri=http%3A%2F%2Fmytestins.freehostia.com%2Ffinaltesting%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

Live Demo (http://mytestins.freehostia.com/finaltesting/index.htm)

Excavator
Feb 22nd, 2010, 08:14 PM
Am using Dreamweaver cs coding view for coding


Open DW with Split view so you can see both code and design views.
Click on the design view window so it has focus and you should be able to move your mouse around and find different elements outlined with dotted lines.
Click on one of those dotted lines and it will highlight the corresponding code for that div in the code window ... you will be able to scroll down and see what </div> is actually closing each element.
All you have to do is find the dotted outline for #wrapper and DW will show you what </div> closes it.

vijetha
Feb 22nd, 2010, 08:42 PM
Open DW with Split view so you can see both code and design views.
Click on the design view window so it has focus and you should be able to move your mouse around and find different elements outlined with dotted lines.
Click on one of those dotted lines and it will highlight the corresponding code for that div in the code window ... you will be able to scroll down and see what </div> is actually closing each element.
All you have to do is find the dotted outline for #wrapper and DW will show you what </div> closes it.


awesome i think at last i solved this problem. Now i really understand the importance of validation.

css validations

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmytestins.freehostia.com%2Ffinaltesting%2Findex.htm&profile=css21&usermedium=all&warning=1&lang=en

xhtml validations

http://validator.w3.org/check?uri=http%3A%2F%2Fmytestins.freehostia.com%2Ffinaltesting%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0