Page 1 of 1

css clarification: height property

Posted: Sat Aug 20, 2005 5:20 am
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. :)

Posted: Sat Aug 20, 2005 8:34 am
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..

Posted: Sat Aug 20, 2005 10:18 am
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!!!

Posted: Sat Aug 20, 2005 12:47 pm
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

Posted: Sat Aug 20, 2005 4:08 pm
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???

Posted: Sat Aug 20, 2005 4:54 pm
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.