|
CSS - Annoying Height Problem
Hi,
I've gone as long as I can without asking for help, but this has got me stumped. I have a site I'm trying to make at http://joe.terrarum.net/test.html If you resize the window so its less than 600px or so, the drop shadow starts getting clipped. I know why this is happening (the height is set to 100%, so it's just following the rule of being 100% the size of the window when the window is smaller than the inside block) but I would like it to be the same size as the block inside even when the window is smaller. Make sense? The block is actually the block showing the background. It's 532px in length from the header. The gray box is just a simple context box (that should also push the height of the background box if it gets too big). Anyone have any ideas? Thanks! -Joe Similar TutorialsOk, Now when I am trying to nest divs for the header bar, left column. Nothing gets put into the header div and I've tried tons of stuff to get it to work. Heres a sample: Code:
<HTML>
<HEAD>
<title>
Page Title
</title>
<style>
.defaultText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.titleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.addModuleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.adminHeaderText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
border: 1px solid #0099FF;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #1C4F9B;
}
.smallText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
.moduleTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.TabBg {
background-color: #1C4F9B;
border-color: black;
}
.NormalTabsBg {
background-color: #559cec;
border-color: black;
}
.selectedTab {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:white;
font-weight: bold
}
.normalTabs {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:gainsboro;
text-decoration:none;
font-weight: bold
}
.textBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
.largeTextBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
#addNewModule {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
}
#addNewModule a
{
border: 1px solid #000;
background-color: #1C4F9B;
padding: 5px;
}
#bodyWrapper {
border: 1px solid purple;
background-color: #559CEC;
width: 100%;
}
#header {
background: #EEE;
border: 1px solid red;
}
#header #headerLeftColumn {
float: left;
width: 500px;
}
#header h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: left;
vertical-align: top;
color: #000;
padding-left: 15px;
padding-top: 20px;
width: 100%;
}
#header #loginControl {
float: right;
width: 250px;
border: 1px solid #000;
}
#container {
float: left;
width: 100%;
margin-right: -260px;
border: 1px solid red;
}
#content {
border: 1px solid yellow;
margin-right: 260px;
}
#left
{
float: left;
width: 250px;
border: 1px solid #FFF;
}
#middle {
margin-left: 260px;
border: 1px solid orange;
}
#sidebar {
float: right;
width: 250px;
border: 1px solid #000;
}
#footer {
background: #999;
border: 1px solid #cecea5;
clear: both;
}
#module {
position:relative;
width: 100%;
padding: 2px;
background: #FFF;
border: 1px solid #000000;
font-size: 10px;
}
#title {
background-color: #C2DBF5;
padding: 3px;
border: 1px solid #144678;
text-align: left;
color: Black;
font-weight: bold;
font-size: 14px;
}
#moduleItem {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#moduleItem h1 {
font-weight: bold;
font-size: 12px;
margin-bottom: 0px;
}
#moduleItem p {
margin-top: 0px;
margin-bottom: 10px;
}
#module #footer {
background-color: #C2DBF5;
border: 1px solid #144678;
padding: 4px;
text-align: left;
color: black;
font-weight: normal;
font-size: 10px;
}
body {
color: #000000;
background-color: #E8E8E8;
font-family: Verdana, sans-serif;
font-size: smaller;
margin: 10px 10px 0px 10px;
}
</style>
</HEAD>
<BODY>
<form runat="server" ID="frm">
<DIV id="header">
<DIV id="headerLeftColumn">
<h1>Site Title
</h1>
<p>
Paragraph left text
</p>
</DIV>
<DIV id="loginControl">
Login buttons
</DIV>
</div>
<DIV id="bodyWrapper">
<DIV id="container">
<DIV id="content">
<DIV id="left">Left</DIV>
<DIV id="middle">Center</DIV>
</DIV>
</DIV>
<DIV id="sidebar">Sidebar text</DIV>
</div>
</form>
</BODY>
</HTML>
Hi guys, I'm new to this forum but the advice looks great - I hope someone can help me out! I'm having a really weird problem with my CSS in Windows Firefox. Everything displays fine in Mac.Opera, Mac.Firefox, Mac.Safari, Windows.IE7 but doesn't display correctly in Windows.Firefox! For some reason it's creating a gap between the menu tabs and the line below, it's coming from the padding-bottom of #ddcolortabs a .link which is 3px. However, I need this to create the right spacing between the bottom of the words in the menu and the top of the line. I'm not allowed to put a URL in this post, which is very annoying! If you think you could help I'll send you the link in a message I guess?! Let me know if there's another way! If anyone has any ideas for a solution I would be very grateful! Cheers, Andrew Dear All, On top of my page I like to have a picture which is stretched from left to right with an gap (left/right) of 11px. That works for IE & Opera. BUT in Netscape & Firefox it doesn't stop 11px on the right site. ?????? Does anybody have an idea .. damn think is quite important for my design. The call in (XHTML validated) page is. <div id="banner"> <img class="ocean" src="/_img/headers/texture.gif" alt="" /> </div><!-- end banner --> the CSS: .ocean { position:absolute; top:12px; width: 100%; left:11px; right:11px; height: 110px; border: 0; } banner #banner { background:#fff; background-color: #7adaff; height:110px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid white; voice-family: "\"}\""; voice-family: inherit; height:110px; } html>body #banner { height:110px; } body { margin:10px 10px 10px 10px; padding: 0; font: 'verdana', 'geneva', 'arial', 'sans-serif'; color : #6388ff; background-color: tomato; border: 1px solid white; } Appreciate any ideas Jack I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
I've been browsing the web for a while now and all I can find are issues relating to people being unable to get their divs to span the whole viewport, but I'm having the opposite problem. I just want this div to span the distance of the content inside it, but at 100% height. This is just an experimentation of mine. I'm trying to get a div to go from 0% height to 100% height, but that 100% height I only want to be the 100% height of the content in this div, and not the entire content. What attributes need to be set for 100% of this div to be just the intrinsic height? thanks~ I'm beginning to convert my site from HTML tables to CSS divs. I am having problems with two of my image borders, both on the left and right side of my layout. Neither of the borders stretch to the bottom of the page. The left border stretches to the height of the content in the current DIV. The right border doesn't appear at all. How do I make to borders stretch to the bottom of the page? CSS version: http://www.depiction.net/layoutsliced.php HTML version I'm trying to match: http://www.depiction.net/?id=tutorials the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="aoms.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> d </div> <div id="nav"> d </div> <div id="contentTop"> d </div> <div id="content"> d </div> <div id="contentBottom"> d </div> </div> </body> </html> the css: Code: body{
margin:5px 5px 5px 5px;
padding:0px 0px 0px 0px;
height:100%;
}
#container{
min-width:800px;
max-width:800px;
width:800px;
min-height:100%;
max-height:100%;
height:100%;
background-color:#ffffff;
}
#header{
background-image:url('images/header.jpg');
background-repeat:no-repeat;
min-height:124px;
max-height:124px;
height:124px;
padding:0px 0px 5px 0px;
}
#nav{
background-image:url('images/nav.gif');
background-repeat:no-repeat;
min-height:30px;
max-height:30px;
height:30px;
padding:0px 0px 5px 0px;
}
#contentTop{
background-image:url('images/contentTop.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
#content{
background-color:#A1A1A1;
min-height:400px;
max-height:100%;
height:100%;
}
#contentBottom{
background-image:url('images/contentBottom.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
the problem 'FF': 'container' is not stretching to 100% height, its only as big as the other divs stretch and in IE its more than 100%? hope you can understand that. Shem here is my style sheet.....simplified, so i can figure out the problem before i get too deep: body { margin:0; padding:0; height:100%; } #container{ height: 100%; width: 750px; margin: 0 auto; } #left_col{ height: auto; width: 200px; float:left; } #right_col{ width: 550px; height: auto; float:left; } and my page very very simplified: <body> <div id="container"> <div id="left_col">content </div> <div id="right_col"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> Problem is that the right column will stretch down to accommodate the text, but the left column will not....nor will the container.. how can i get the left_col or container to stretch when the right_col stretches...??? It works in IE6 and IE7 but not Fire Fox... Okay so I essentially have 3 divs. #header #body #footer header will ALWAYS be 60px footer will ALWAYS be 20px I would like body to fill 100% of the remaining space no matter what, with no scrollbars showing. Is this even possible? I had gotten it to work in FF and then saw IE7 was a no go. I did something conceptually like this Code:
<div id="container">
<table>
<tr>
<td><div id="header"</td>
</tr>
<tr>
<td height=100%>
<div id="body"></div>
</td>
</tr>
<tr>
<td valign="bottom"><div id="footer"></div></td>
</tr>
</table>
</div>
in CSS, the HTML, BODY, #body, and #container are set to 100% height hi, I would like my #leftNav to have 100% height and fit the hiehgt of its container. After looking into it I found that the parent has to have 100% also, and body and html My problem is that in IE, it works but leaves a ridiculous amount of white space under the bottom of the site. And in FF it #leftNav does not go 100% height but still has some white space under the bottom of the site (meaning u can scroll down but its just white) see it here so heres my css: PHP Code: html { height: 100%; } body { margin: 0; padding: 20px 0 0 0; color: #000; font-size: 12px; font-family: times; background: #fff; height: 100%; } #container { height: 100%; margin:0px auto; padding: 0; width: 760px; display: table; } #content { margin:0px auto; padding: 0; width: 760px; height: 100%; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; height: 100%; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; height: 100%; } thank you Hopefully someone can help. I can't seem to get a div to have 100% height to work properly across all browsers. http://dis.emsix.com/default.asp The outermost div (with the gray side borders) is supposed to stretch the page length. I've made some minor fixes to get it to work in IE6 & 7, but it doesn't work in Safari of Mac FF (PC FF is fine). Any help with or insight on this would be great! Thanks in advance. I am trying to display some data from a mysql file in a spreadsheet format. The first column of data displayed is boolean so I want to show it as a check box, which requires defining a form. When I do this is it increases the row height on the screen, regardess of what I set the height to in the css file. If I take out the form column, it respects the row height setting in the css file. Any thoughts on why the form overrides the row setting and how to fix it? PHP Code: <tr class="firstrow"> <td class="colDone"> <form class="form1" name="form1" method="post" action=""> <input <?php if ($row_rsList['isDone']) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" value="checkbox" disabled="disabled" /> </form> </td> <td class="colItem"><?php echo $row_rsList['taskitem']; ?></td> <td><?php echo $row_rsList['taskpriority']; ?></td> <td><?php echo $row_rsList['taskcategory']; ?></td> <td><?php echo date("m-d-Y",strtotime($row_rsList['taskduedate'])); ?></td> </tr> from css file: tr.firstrow { background-color:#FFFFCC; height: 20px; } Problem fixed... I'm stupid... a moderator can delete this... Hello! I want to layout my page using CSS and DIVs. But I have a problem. If you look at this site , you will see that when a give to a div height 100%, it doesn't fill the remainder of the page. How can I fix this problem? Thanks Artashes Have problem with DIV height not displaying as it should in Explorer 6.0. It displays correct in FF 1.03 and OP 8.0 and NE 7.2 Have not tested any other browsers. Please see attached .htm file for example code. Any idea why not working in IE? Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<br><br>
<table border=1 cellpadding=0 cellspacing=0><tr>
<td>EmptyCellHere</td>
<td valign="top">
<div id="hdiv1" style="display:block; position:relative; z-index:1; height:50px; width:200px; background-color:#44f"></div>
</td>
<td>Why is the red rectangle to the left not 10px x 10px in Explorer (6.0)<br> it is showing up right in FF 1.0.3 and OP 8.0 and NE 7.2</td>
</tr></table>
<div id="hubba" style="display:block; position:absolute; z-index:2; visibility:hidden; top:0px; left:0px; margin:0; padding:0; background-color:#f00; width:10px; height:10px;">
</div>
<!--<img src="spacer.gif" height="10px" width="10px" alt="" border="1">-->
</body>
</html>
<script>
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
// first get left and top of the hdiv1
var el, left, top;
el = document.getElementById('hdiv1');
left = findPosX(el);
top = findPosY(el);
document.getElementById('hubba').style.left = left;
document.getElementById('hubba').style.top = top;
document.getElementById('hubba').style.visibility = 'visible';
</script>
Hi Guys I am building a web log and my plan is to insert text in to the web log dynamically, which means I will not be able to rely on a fixed height. How do i get a div container to follow the height of a div inside it? I am using a div container that has a div floated to the left and a div floated to the right inside it. The text which i want to insert dynamically will appear in the right div, is there a way for the left div to also follow the height of the right div? I have tried using height: auto and height: 100% . my web log can be found here my css file is at In IE the web log looks almost how it should except for the grey space on the bottom left. In FF it is even uglier! Any help or suggestions would be much appreciated The problem is that it seems to be making a 10px scrollbar that I just can't seem to get rid of. I've tried all sorts of things to get rid of the scrollbar and none of them seem to work. Can anyone give me a helpful hand or some pointers? This is my first go at a fully css xhtml document. Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css">
html,body {
height:100%;
}
#frame {
width:770px;
margin-right:auto;
margin-left:auto;
margin-bottom: 0px;
padding:0px;
text-align:left;
height:100%;
background:#cdcdcd;
}
#contentleft {
width:170px;
padding:0px;
float:left;
background:#dadada;
height:100%;
}
#contentcenter {
width:600px;
padding:0px;
float:right;
background:#eee;
height:100%;
}
#contentheader {
background:#fff;
}
#contentmenu {
background:#fff;
}
p,h1,h2,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
h2 {
font-size:11px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
</head><body>
<div id="frame">
<div id="contentheader"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: static width and centered (Title Pic Here)</h1></div>
<div id="contentmenu"><h2><a href="home.asp">Menu Could go here</a></h2></div>
<div id="contentcenter">
<h1>contentcenter</h1>
<p>3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>
<p><strong>Scroll down for the source.</strong></p>
<p >Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>
<div id="contentleft">
<h1>contentleft</h1>
<p>Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. </p>
</div>
</div>
</body>
</html>
|
|||||||