Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 153
  • Last Modified:

CSS Help Needed

Hi folks,

I've attached a css file. Which setting is it that would allow me to increase the height of my web page. This is a pre built web page and I'm allowed to edit the CSS file to my liking. I have played with the settings here, and I got the width to get wider but no luck with the height.

Thanks
Dlewis
/*------------------------------------
GENERAL
------------------------------------*/
body {
    margin: auto;
}

.sf_outer_wrapper {
    width: 798px;
    margin: 50px auto;
}

.sf_wrapper {
    width: 798px;
    position: relative;
}

a {
    color: #000;
}
a:hover {
    color: #333;
}
a:visited {
    color: #000;
}

/* ------------------------------------
HEADER
------------------------------------ */
.sf_header_wrapper {
    margin-top: 0px;
	height: 133px;
}

.sf_main_header p, .sf_sub_header p { margin: 0; padding: 0; }
.sf_main_header {
	padding-top: 25px;
	text-align: left;
	line-height: 0.9;
	margin-left: 18px;
	height: 40px;
	overflow: hidden;
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size: 24px;
	font-weight: bold;
}

.sf_sub_header {
	text-align: left;
	padding: 4px 0 30px 50px;
	width: 450px;
	height: 30px;
	overflow: hidden;
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

/* ------------------------------------
NAVIGATION
------------------------------------ */
.sf_navigation_top { display: none; }
.sf_navigation {
    clear: both;
	min-height:30px;
    height: auto !important;
	height:30px;
	width: 798px;
}

.sf_navigation ul {
    margin: 0 0;
    height: auto !important; height: 1%;
    padding-left: 0;
}

.sf_navigation ul:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

.sf_navigation ul {
    list-style-type: none;
}

.sf_navigation ul li {
    float: left;
    width: auto !important;
    width: 5px;
    white-space: nowrap;
}

.sf_navigation ul li a {
	height: 40px;
	margin: 0 0 0 1px;
	text-decoration: none;
	display: block;
	line-height: 28px;
	padding: 0 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

.sf_navigation ul li a:hover {
    text-decoration: none;
    color: #fff;
    display: block;
}
.sf_subnavigation, .sf_subnavigation2 {
	display:none;
}
/*------------------------------------
	Dropdown
------------------------------------*/
#Nav1 iframe {
	position: absolute;
	/* account for the border */
	left: -0.25em;
	top: -0.25em;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
	margin-left: 3px;
}
#Nav1, 
#Nav1 ul { /* all lists */
	list-style:none;
	width:100%;
}

#Nav1 a {
	display:block;
}

#Nav1 li { /* all list items */
	float:left;
}

#Nav1 li ul { /* second-level lists */
	position:absolute;
	left:-999em;
	width:130px;
	margin:-4px 0 0 0;
	border:solid 1px #929292;
	background:#ffffff;
	padding:3px 3px 0 3px;
	z-index:1000;
}
#Nav1 li ul li{
	margin:0;
	padding:0;
	background:none;
}
#Nav1 li ul li a{
	background:#e8e8e8;
	height:auto;
	margin:0 0 3px 0;
	width:120px;
	padding:5px;
	line-height:normal;
	white-space:normal;
	border:none;
}
#Nav1 li ul li a:hover{
	background:#999999;
}
#Nav1 li:hover ul, 
#Nav1 li.sfhover ul { /* lists nested under hovered list items */
	left:auto;
}
/*------------------------------------
CONTENT
------------------------------------*/
.sf_pagetitle {
	clear: both;
	padding: 10px 0 0 20px;
	text-align: left;
	min-height: 30px;
	height: auto !important;
	height: 30px;
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

.sf_pagetitle h1 {
	font-size:24px;
	font-weight:normal;
	margin:0;
}

.sf_content {    
    padding: 20px 20px 0 20px;
    margin: 0px;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
   	min-height: 200px;
	height: auto !important;
    height: 200px;   
}

.sf_content:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

/*------------------------------------
FOOTER
------------------------------------*/
.sf_footer {
    font-size: 13px;
    padding: 25px 0 10px 20px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#F6F6F6;
}

/*------------------------------------
BANNER
------------------------------------*/
div.sf_banner {
    margin-bottom: 35px;
    padding-top: 50px;
    text-align: center;
    font-size: 13px;
}

div.sf_banner div#bannerLink {
    padding-top: 10px;
}
/**
 * Sticking flyout menu bug
 *
 * @bugfix
 * @affected ie7
 * @css-for ie7
 * @valid yes
 */
#Nav1 li:hover, #Nav1 li.hover {  
    position: static;  
}

Open in new window

0
dlewis61
Asked:
dlewis61
  • 3
  • 2
  • 2
2 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
Height usually expands to accommodate the content.  I don't see anything in your CSS that will change it.
0
 
dlewis61Author Commented:
Dave, so it's not the "height auto" ? If I commented that out, could I insert a fixed height?
0
 
Dave BaldwinFixer of ProblemsCommented:
All 'auto' does is conform to the content which is the normal action.  If you're talking about ".sf_content", then putting a fixed height there can increase the height of that section.  It won't necessarily do all that you want though.  CSS also depends on the actual HTML content.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
SSupremeCommented:
dlewis61, if you want to make content box, which will expand based on content, use overflow:hidden; .
0
 
dlewis61Author Commented:
Thanks SSupreme but where is that I should make the change?
0
 
SSupremeCommented:
Well, I don't know, as I don't know the structure of page. Could be .sf_wrapper or .sf_header_wrapper or something else.
0
 
dlewis61Author Commented:
Thanks Guys
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now