css clarification: height property

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

css clarification: height property

Post by raghavan20 »

Recently I have been facing a tough time with CSS and making the pages compliant with other browsers.
Some times, it gets more difficult than the PHP itself may be not I am used to so much advanced CSS.

alright, here is the problem.
1. I have got a mainDiv which displays the main content. wot I want the mainDiv to do is:
a. there should be a minimum height set so that even if there is less content or no content it should not look so odd and this setting should be consistent with all browsers
c. I want the mainDiv to grow depending on the content without scrolling; if the content is going to so huge then the mainDiv should expand with no problems. the borders of the div should not break(border:1px dashed #000000)
d. I want this to be xhtml compliant; dreamweaver gives a warning saying since min-height is supported only in two browsers; also gives a warning that dashed property for border is not compliant with IE 5.

2. I am mostly using % for height and width since I thought it should be compatible with smaller monitors.
what you guys are using??? :roll:
I respect your answers more than the tutorials. :)
Last edited by raghavan20 on Sat Aug 20, 2005 4:56 pm, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I just use height, and don't set an overflow property when I need this. Unless you have overflow, most browsers will make height actually be min-height..
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

have a look at my personal site:
http://www50.brinkster.com/raghavan20/a ... efault.asp

you can see all other pages work fine, but
http://www50.brinkster.com/raghavan20/a ... ources.asp
http://raghavan20.allhyper.com/news.php

expand their widths on loading the content which pushes the submenu on the right.
because of this unexpected widening, i have to maintain a large distance mainDiv and the submenu which is ugly.
I hope you understand when you have a look at those pages.

The height property seems to be alright!!!
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post by wwwapu »

I'm not sure, but it might be these two fellows with combined 610px width

Code: Select all

.newsWrapper1{
	margin:2px;
	width:250px;
	border:1px dotted #000000;
	float:left;
}
.newsWrapper2{
	margin:2px;
	width:260px;
	border:1px dotted #000000;
	float:right;
}
And about ugly gap between mainDiv and submenu. Take a look how it looks with 1280x800 15,4 inch widescreen.

Image
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

now, if you had a look at your monitor it should not be a problem as it was earlier.
cos earlier i was experimenting sth, i had the mainDiv and subNav in pixels while the header and menu in %. now I have put all of them in %.
but you can still see a change in width of the mainDiv between the two pages i mentioned and the rest of the pages.
still dont know why???
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

I managed to get everything right but just one thing left
I was trying to put borders for the span objects in the main menu.
I could not draw border on top. can you guys figure out why???those spans are actually in a div with text-align, center.
Post Reply