navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Element height quandary

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Element height quandary 		Page: [1]
 
Ls3

 

Posts: 1
Joined: 7/13/2003
Status: offline

  		Element height quandary - 7/13/2003 15:47:40   
Hi, I' m converting my table-centric website over to a table-less layout using CSS, but I' ve encountered a problem with trying to set heights.

Could someone point out what I' m doing wrong? 
	body {
		font: 11px Verdana, Arial, sans-serif;
		background: #CCCCCC;
		margin: 0px;
		padding: 0px;
		}
	
	#page{
		width: 630px;
		border: none;
		margin-right: auto;
		margin-left: auto;
		}
	#content {
		border-left:1px solid; border-top:1px solid; border-bottom:1px solid; 
		background-color:#F0F0F0;
		background-image: url(' /dead1.jpg' );
		background-repeat: norepeat;
		background-attachment: scroll;
		background-position: top;
		float: left;
		border-right: 0px none;
		width: 359px;
		margin: 20px 0px;
		

	}
	#banner {
		float: left;
		background: #191818;
		width: 98px;
		margin: 0px 0px 0px 0px;
		border: 1px solid;
		border-color: #000000;
		border-top: 0px;
		border-bottom: 0px;
		height:100%;
	}
	#navigation{
		border-right:1px solid; border-top:1px solid; border-bottom:1px solid;
		background-color:#F0F0F0;
		background-image: url(' /dead1.jpg' );
		background-repeat: norepeat;
		background-attachment: scroll;
		background-position: top;
		float: left;
		width:169px;
		margin: 20px 0px;
		border-left:0px none; 			
	}
Spooky

 

Posts: 26603
Joined: 11/11/1998
From: Middle Earth
Status: offline

  		RE: Element height quandary - 7/14/2003 4:14:19   
Do you have a web site example and a description of the perceived problem?

_____________________________

If you arent part of the solution, then there is good money to be made prolonging the problem

§þ:)k¥


(in reply to Ls3)
Donkey

 

Posts: 3888
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: online

  		RE: Element height quandary - 7/19/2003 8:07:08   
I' m having a simillar problem on an unpublished test site that I' m using to learn CSS.
I am creating navigation buttons using <h1><h2> etc. to set the style and <div.a><div.b>etc. to set position but the height setting does not appear to do anything. I am using IE ver. 6.0.2800.11061S.

This is the relevant code from the stylesheet
h3 { 
color : #FFFF33; font-family : Verdana; font-weight: normal; font-size: 14px; text-align: center; 

background-color: #9cf; border-style: solid; border-color: #ccf #336 #669 #99f ; border-width: 

4px  }


div.a{  position: absolute; left: 10px; top: 60px; width: 120px;}
div.b{  position: absolute; left: 10px; top: 87px; width: 120px;}
div.c{  position: absolute; left: 10px; top: 114px; width: 120px;}
div.d{  position: absolute; left: 10px; top: 141px; width: 120px;}

a.gray:link {font-style: normal; font-weight: normal; text-decoration: none; color: #ffff99}
a.gray:visited {font-style: normal; font-weight: normal; text-decoration: none; color: #000099}
a.gray:hover {font-style: normal; font-weight: normal; text-decoration: none; color: #cc0000}
a.gray:active {font-style: normal; font-weight: normal; text-decoration: none; color: #cc0000}


And this is an example of the code on the page;
<div class=" a" >
<h3><a class=" gray"  href=" http://Domain Name 1" >Domain Name 1</a></h3></div>

<div class=" b" >
<h3><a class=" gray"  href=" http://Domain Name 2" >Domain Name 2</a></h3></div>


The " buttons" form OK and in the right places, but the height is dependent on the font size and adding say " height: 200 px; " to the <div> description on the style sheet makes no difference. Am I making a basic mistake here or is the height attribute not recognised by the browser?

Peter

(in reply to Ls3)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		RE: Element height quandary - 7/19/2003 9:50:58   
I too had many problems with this the following cleared it up for me:

quote:

According to the specs height: 100% means: " give the element a height of 100% of the containing block' s height." In ' Quirks mode' this rule works to our advantage. The containing block of the div is the body, and the body itself stretches 100% of the viewport. So we tell the div to stretch 100% of 100% and it works.................



I have added the emphasis. Links below are to the source of the quote.


Maybe you should try adding this:


body {
height: 100%;
}

or this:

html {
height: 100%;
}


Further points:

Donkey - I have never heard of a nav structure being created with hx selectors and feel quite strongly that it could lead to a lot of problems later. However I am not anywhere near as expert as some of the other gorillas in this. but why not use a.xxxx?


Ls3 here is some extracts from some code that I once used when i was trying to learn heights. In it I have tried using backgounds to achieve an illusion of uniform height. I found it helpful as I really had not understood heights propery. Maybe it will be useful to somebody you' ll have to clean up some of the syntax like closing the tags properly. :

Uniform 3-col layout w/ header and footer


<style>
.body { margin: 0px; padding: 0px; }
.maincont { margin-top:70px; background-color: #FFfFFF; }
.mainrow { width:760px; height:100%; background-color: #E2F3FE; }
.leftcont { width:580px; height:100%; float:left; background-color: #FFfFFF; }
.center { width:400px; height:100%; float:right; background-color: #FFfFFF; }
.leftcol { width:180px; height:100%; float:left; background-color: #E2F3FE; }
.rightcol { width:180px; height:100%; float:right; background-color: #E2F3FE; }
.content { margin: 5px; }
.header { position:absolute; width:760px; top:0px; left:0px; }
</style>


</head>
<body>
<div class=" maincont" >
<div class=" mainrow" >
<span class=" leftcont" >
<span class=" center" >
<div class=" content" > main content
</div>

</span>
<span class=" leftcol" >
<div class=" content" >
left col
</div>
</span>
</span>
<span class=" rightcol" >
<div class=" content" >
right col
</div>
</span>
<div style=" clear:both" >
</div>
</div>
<div style=" clear:both" >
</div>   </div>
<div class=" header" >
This is a header
</div>
This is a footer
</body>

Maybe if you play a little with the percentages you might find it helps clarify the problem you are having.

The link I am posting here gives a good discussion of heights:

http://www.xs4all.nl/~ppk/css2tests/100percheight.html

If you go to his main page you will see that he deals with some very common problems also. i have bookmarked that site!

http://www.xs4all.nl/~ppk/css2tests/


Wolf Sternberg

Spokesgorilla for the weekend because Thor is out in the jungle checking what else went on while he was away....

< Message edited by gorilla -- 7/19/2003 10:54:19 AM >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to Ls3)
Donkey

 

Posts: 3888
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: online

  		RE: Element height quandary - 7/19/2003 11:27:43   
Thanks for the info Wolf, I will check out the links and see what I can learn.

When you say use a.xxxx I assume you mean use another class of anchor tag with formatted borders? I' ll try that later and see if it works.

Thanks again.

Peter

(in reply to Ls3)
gorilla

 

Posts: 2974
From: Denmark
Status: offline

  		RE: Element height quandary - 7/20/2003 7:48:52   
quote:

ORIGINAL: Donkey

Thanks for the info Wolf, I will check out the links and see what I can learn.

When you say use a.xxxx I assume you mean use another class of anchor tag with formatted borders? I' ll try that later and see if it works.

Thanks again.

Peter


Yah - you' re welcome Peter - if you really want to see the power of this thing check out Pageone Result' s posting in this forum:

http://www.frontpagewebmaster.com/m_135568/tm.htm

W

< Message edited by gorilla -- 7/20/2003 7:49:15 AM >

_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower



(in reply to Donkey)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Element height quandary 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.