|
CSS - Table Height 100% In Firefox
I noticed that in Firefox, setting the height to 100% in the style tag attribute, does not work.
See code below: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
}
#divider {
cursor: e-resize;
width: 8px;;
background-color: #444444;
vertical-align: center;
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'
//this function gets the original div height
function setPos(e){
//for handling events in ie vs. w3c
curevent = (typeof event == 'undefined' ? e:event);
//sets mouse flag as down
mouseStatus = 'down';
//gets position of click
curPos = curevent.clientX;
//accepts height of the div
tempWidth = document.getElementById('leftMenu').style.width;
//these lines split the width value from the 'px' units
widthArray = tempWidth.split('px');
curWidth = parseInt(widthArray[0]);
}
//this changes the height of the div while the mouse button is depressed
function getPos(e){
if(mouseStatus=='down'){
curevent = (typeof event == 'undefined' ? e:event);
//get new mouse position
newPos = curevent.clientX;
//calculate movement in pixels
var pxMove=parseInt(newPos-curPos);
//determine new width
var newWidth = parseInt(curWidth+pxMove);
//conditional to set minimum width to 5
newWidth = (newWidth < 10 ? 10:newWidth);
//set the new width of the div
document.getElementById('leftMenu').style.width = newWidth+'px';
}
}
function toggleMenu(e) {
e.stopPropagation();
if (document.getElementById('leftMenu').style.display != 'none') {
document.getElementById('leftMenu').style.display = 'none';
} else {
document.getElementById('leftMenu').style.display = '';
}
}
//-->
</script>
</head>
<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
<tr valign="top">
<td id="leftMenu" style="width: 230px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</td>
<td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
<td id="mainContent">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
<p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
<p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
<p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
<p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Can anyone suggest a solution? Similar TutorialsHi and thanks in advance for any of your help. I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space. I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen. Code is below with screenshot attached of what I expect to happen (as in IE). Code: <html style="height:100%;"> <body style="height:100%; margin:0;"> <table style="height:100%; width:250px;"> <tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr> <tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr> </table> </body> </html> Thanks again for any help or pointers as to where I have gone wrong. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Hello, I am trying to create a component on a web page that will have rounded corners. This component looks correct in FireFox and IE 8. However, it does not look correct in IE 7. IE 7, seems to mess things up by several pixels. At this time, the pixels I am referring to are placed under the content in the middle column. I basically want the entire row to be 35 pixels in height. But IE 7 keeps rendering the content as 40 pixels in height. What am I doing wrong? here is my code. Code: <table border="1" cellpadding="0" cellspacing="0" style="width:276px; padding-top:4px; padding-right:1px;">
<tr>
<td><img alt="[Title]" src="/images/ulc.png" height="35" width="20" /></td>
<td style="background-image: url(/images/bckgd.png); background-repeat:repeat-x; font-size:11pt; color:White;width:245px; padding-top:3px; background-color:Lime;">[Title]</td>
<td><img alt="[Title]" src="/images/urc.png" height="35" width="11" /></td>
</tr>
</table>
Hello, I am not trying to start an IE vs FireFox debate here. However, I have got a web page layed out exactly how I want in FireFox. Unfortunately, when I run the same page in IE 7+ the column mentioned in the code below is rendered as 51px+ in height instead of the 47px that I have explicitly set. How do I overcome this problem such that the same page works in both IE and FireFox? My dimensions are very specific because of what my designer has created. Thank you, Crystal Code:
<table border="1" cellpadding="0" cellspacing="0" style="width:930px; padding-top:17px;">
<tr style="vertical-align:bottom;">
<td></td>
<td rowspan="3" style="width:240px;"><img alt="Welcome" src="/logo.png" height="154" width="240" /></td> <td align="right" colspan="2"> Help | <a class="toolbar" href="/contactUs.aspx">Contact Us</a></td>
<td></td>
</tr>
<tr style="vertical-align:bottom;">
<td style="vertical-align:bottom; width:44px;">
<img alt="" src="/upperLeftCorner1.png" width="44" height="3" /></td><td style="width:227px; background-image: url(/edge.png);background-repeat:repeat-x; background-position:bottom;"> </td>
<td align="right" style="padding-top:20px; vertical-align:bottom;"> </td>
<td style="vertical-align:bottom; width:37px;"><img alt="" src="/upperRightCorner1.png" width="37" height="3" /></td> </tr>
<tr style="height:47px; vertical-align:bottom;"> <td style="width:44px;"><img alt="" src="/upperLeftCorner2.png" width="44" height="47" /></td><td align="right" colspan="2" style="background-color:White;">[This column is my problem]</td> <td style="width:37px;"><img alt="" src="/upperRightCorner2.png" width="37" height="47" /></td> </tr></table>
Hi, I'm having problems with FireFox (or rather it's having problems with my coding). If you go to he http://jigsaw.w3.org/css-validator/...&usermedium=all It's all valid css but http://www.wnv2.com/v11.php shows up funny in FF but looks great in IE/Maxthon. View course for html, but the css code is in the validation link, Any help would be great! Thanks Hi guys, I'm having a problem with this test version of a site I'm creating. It looks fine in IE (though I have to properly align some text etc), but in Firefox the footer overlaps the main content paragraphs and the intended content background (the subtle paper texture) doesn't stretch vertically as intended. I've tried a couple of things including adding height:100% to the content div and its parent divs as I think other tutorials were getting at, but to no avail. Any ideas what I'm doing wrong? Thanks in advance for any help or pointers you can give me! Ed CSS: Code:
body div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0px; padding: 0px; border: 0px;
}
/* browser reset removes defaults */
html {
height:100%;
}
body {
background: #3ea7e9 url('images/background.jpg'); background-repeat:no-repeat; background-repeat:repeat-x;
color: #000;
font-family: tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-size: 100%; /* font grows with layout */ margin:0 0 0 0; /* eliminates gap between header section and top of page */
}
#container {
position:relative;
background: url('images/banner.jpg'); background-repeat:repeat-y;
width:100%; float:left;
}
#logo {
position:relative;
/*background: url('images/logo.jpg'); background-repeat:no-repeat;*/ height:70px; width:905px;
}
#logo h1 a {
display: block; width: 905px; height: 70px; float: left; margin:0 auto;
background: url('images/logo.jpg') no-repeat; text-indent: -9999px;
}
#textbox {
position:relative;
background: url('images/textbox.jpg'); background-repeat:no-repeat; height:104px; width:905px;
}
#textbox p {
position:relative;
color:#efddad;
padding-top:30px;
padding-left:80px;
width:750px;
}
#feature-nav {
position:relative;
background: url('images/feature-nav.jpg'); background-repeat:no-repeat; height:146px; width:905px;
}
#feature {
position:relative;
color:#efddad;
float:left;
padding-top:50px;
padding-left:80px;
}
#nav {
position:relative;
color:#FFF;
float:right;
}
#button {
position:relative;
color:#FFF;
padding-top:76px;
padding-right:80px;
float:right;
}
#top-body {
position:relative;
background: url('images/top-body.jpg'); background-repeat:no-repeat; height:261px; width:905px;
}
#top-body p {
width:485px;
}
#top-left {
position:relative;
float:left;
padding-left:80px;
}
#top-left p {
width:485px;
float:left;
}
#top-right {
position:relative;
float:right;
width: 150px;
}
#top-right p {
width:150px;
}
#content {
position:relative;
width:905px;
background: url('images/body.jpg'); background-repeat:repeat-y;
padding-bottom:30px;
padding-left:80px;
height:100%; /* why doesn't this stretch everything to footer? */
}
#content p {
width:485px;
float:left;
}
#sidebar {
position:relative;
width: 150px; /*top: 340px;*/ bottom:0px; float:left; padding-left:70px;
}
#sidebar p {
width:150px;
}
#footer {
position:relative;
background: url('images/footer.jpg'); height:293px; repeat-y;
margin: 0 0 0 0;
}
h3 {
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ed Evans dot co dot uk</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="logo"> <h1><a>Ed Evans Web Design</a></h1> </div><!--end logo--> <div id="textbox"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> </div><!--end textbox--> <div id="feature-nav"> <div id="feature"> <p>sdfsdfsdfsd</p> </div><!--end feature--> <div id="nav"> <p>sdfsdfsdfsd</p> </div><!--end nav--> <div id="button"> <p>sdfsdfsdfsd</p> </div><!--end nav--> </div><!--end feature-nav--> <div id="top-body"> <div id="top-left"> <h3>About</h3> <p>My name is Ed, yadda yadda Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div><!--end top-left--> <div id="top-right"> <p>sdfdsfdsfdsfsdf</p> </div><!--end top-right--> </div><!--end top-body--> <div id="content"> <h3>Test</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? <br /><br /> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. <br /><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? <br /><br /> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <div id="sidebar"> <p>sdfsdfsdfsdfsdfs sssssssssssssssssss</p> </div><!--end sidebar--> </div><!--end content--> <div id="footer"> </div><!--end footer--> </div><!--end container--> </body> </html> I am in the process of replacing a totally table generated web page with one using CSS. This seems to be fairly straightforward except that I'm having an issue that seems to be backwards from what I see when I lookup the issue. In this case, I have an outerbox div that is supposed to contain the entire content and be a minimum of a certain size. If the content within the outerbox is longer, then I need it to expand to match. This is working on MSIE7, but not in Firefox 2 which is the backwards part. I've stripped out a lot of the extra stuff to show the outerbox, a few inner boxes and a example of where the content is going past the end of the minimal size. Sample Page: http://www.zipturtle.org/test.php Associated CSS: http://www.zipturtle.org/test.css At this point, I've tried a number of changes and nothing has worked. I've tried some of the hacks like: PHP Code: selector { min-height:500px; height:auto !important; height:500px; } But that didn't seem to work either. I have not been able to "see" what this looks like with MSIE6 as I don't have access to it, so it is plasible that while it looks okay in MSIE7 it does something similar as my Firefox is showing. On the sample page above, the text in the main body of the document with the Arff's in it, is longer than the normal minimum height. In Firefox it is extending beyond the outside box where in MSIE7 is is working as I would expect. For some reason my code adds a vertical scrollbar in firefox (although not in IE but you can make anything work in IE). I am not sure why. The scroll amount is only 1 pixel vertically. Everything looks good to me. Any ideas? PHP Code: <style type="text/css"> <!-- html {height:100%;} body { margin:0; padding:0; height:100%; background:#ffffff url(bg.gif) top right repeat-y; font-family:Papyrus, Rockwell, Poor Richard, Times New Roman, serif; } #wrap { position:relative; background:url(bg.gif) top left repeat-y; min-height:100%; } * html #wrap {height:100%} #clear_footer { clear:both; height:19px; overflow:hidden; } #footer_full_width { position:absolute; bottom:0; height:19px; background-image: url(../images/bottomredstripe.jpg); width:100%; color:#fff; background-color: #999; text-align:center; } #footer_panel { position:relative; bottom:0; height:19px; background-image: url(../images/gray_bottom.jpg); width:730px; height: 19px; color:#fff; background-color: #999; text-align:center; } #left { float:left; width:200px; text-align:center; } #main { position:relative; margin-left:200px; } #right { float:right; width:200px; text-align:center; } #content { padding:5px; margin-right:200px; text-align:left; } * html #content, * html #main { height:1px; } --> </style> <div id="wrap"> <div id="header">header</div> <div id="left">left</div> <div id="main"> <div id="right">right</div> <div id="content">main content</div> </div> <div id="clear_footer"></div> <div id="footer_full_width"> <div id="footer_panel">FOOTER</div> </div> </div> Sorry if this is a common problem. I tried a search but didn't find anything that seemed helpful. I've got "frame" (not a <frame>) around the content of my site and I need this frame to expand vertically if necessary, according to the content. I've done this by having a 1px high image, set to 100% height and an exact pixel width. The frame is a table, three cells wide, with the side images in the two outermost cells and the content in the central cell. It's the side images that cause a problem. What I've got works fine in Firefox but in IE6, the sides of the frame don't display, or the image displays but doesn't stretch (I can't tell 'cos the images are only 1px high). Here's the basic table layout: Code: <table id="frameTable" border="0"> <tr> <td> <img id="FrameLeftImg" src="resource/frameleft.png" /> </td> <td> <?php /*Add constructed page data*/ ?></td> <td> <img id="FrameRightImg" src="resource/frameright.png"/> </td> </tr> </table> And here's the CSS for the side images: Code:
#FrameLeftImg {
position: relative;
width: 26px;
height:100%;
}
#FrameRightImg {
position: relative;
width: 28px;
height:100%;
}
The table is contained in a div that is absolutely positioned by pixels but has no value specified for width and height. Anyone know what I'm doing wrong? If you check out my site: ConnectBasic It shows fine in IE, but not in FF. The two side gradiants at either side of the box right at the top are made within a div tag, with the height set to 100% so they should be the height of the whole box (Down to where the bottom dotted line is), but in firefox this doesn't work, anyone know why? I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? I normally do not have an issue with firefox and CSS but this renders fine in IE. Any suggestions: In IE it looks the way it should. Code: div#wrapper {
margin: 0 auto;
margin-top: 20px;
border: 1px solid #ffffff;
width: 760px;
height: 100%;
background: #6f1727 url('../../images/logo_grayscale2.png');
background-position: bottom right;
background-repeat: no-repeat;
}
html>body div#wrapper {
min-height: 600px;
height: 100%;
}
But in FF The wrapper div will not scale to 100% of the containing divs. Any ideas would be much appreciated. It will not let me send a link to the site in this post. I'm actually getting weird results in IE too, the page seems to extend way beyond 100% of the screen. Also, in Firefox when the browser is at a height of less than 730px the right (blue) bar seems to come up from the footer div. What's up with this? I'd really appreciate it if someone could lend me some advice on this. Sources: http://www.upliftingathletes.org CSS: http://www.upliftingathletes.org/s/content.css I'm slightly new at CSS, but I've typed out the following code to set up my site. Code:
body { margin: 0px 0px 0px 0px;
}
a:link { font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
}
a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
color:purple;
background-color: white}
#leftcontent {
position: absolute;
left: 0px;
top:auto;
width: 144px;
background-color: #9E1817;
border: 0px;
height: 100%;
}
#centercontent { top:auto;
background:white;
margin-left:145px;
margin-right:-1px;
border:0px;
width: 784px;
}
#banner { background:lavender;
height:138px;
border-top:0 solid darkblue;
border-right:0 solid darkblue;
border-left:0 solid darkblue;
margin: 0px 0px 0px 0px;
}
p { margin:0px 10px 10px 10px;
}
#copyright { border-top-color:#990000;
border-top-style:dashed;
border-top-width: 1px;
width: 100%;
position:absolute;
bottom: 20px;
}
My problem is that the 'leftcontent' div is overflowing, and I want it to only do so when the content has to overflow. My copyright div is also acting screwy (I think because of the leftcontent not acting properly). It is setting itself 20 pixels from the bottom, but just the visible area upon first viewing the page. The overflow makes it sit more like 150px fro mthe bottom. Any ideas on how to rid myself of the overflow problems? I've tried overflow:hidden, but it didn't exactly work. The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. First, the site is, http://www.silver-dawn.net Now, my problem is that when I do not have an XHTML 1.0 Transitional doctype in, the page stretches perfectly to the bottom, as it should. But when I add this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> It doesn't stretch the way it should. Now, I'm assuming there's something messed up with my CSS, but I'm still new at it, so I can't figure out what is causing this. Here is my CSS: Code:
html body
{
margin:0px;
background: url(http://www.silver-dawn.net/images/sdr/bgbig.jpg) repeat-x;
background-color:#222239;
width:100%;
height:auto!important;
height:100%;
text-align:center;
}
#expand
{
width:764px;
height:auto!important;
height:100%;
min-height:100%;
color: #FFF;
background: url(http://www.silver-dawn.net/images/sdr/centertile2.jpg);
margin-left:auto;
margin-right:auto;
text-align:left;
}
html>body #menubuttons li{padding-top:6px;}
#content
{
width:750px;
padding:0px;
margin-left:7px;
margin-top:0px;
margin-bottom:0px;
}
#menu
{
width:752px;
height:25px;
background: #242449;
margin-left:7px;
margin-top:0px;
padding-top:0px;
font-size:70%;
}
#content p
{
padding-left:20px;
padding-right:10px;
padding-top:10px;
font-family:arial;
font-size:70%;
margin:0px;
}
#step
{
font-size:110%;
font-family:arial;
margin-bottom:0px;
padding-bottom:5px;
padding-left:10px;
margin-top:0px;
}
#expandbottom
{
width:764px;
color: #FFF;
background: url(http://www.silver-dawn.net/images/sdr/bottombg2.jpg);
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
text-align:center;
font-size:70%;
font-family:arial;
}
#menuButtons ul
{
margin:0;
margin-left:7px;
padding: 0;
list-style-type: none;
}
#menuButtons li
{
height:15px;
width: 107.4px;
/*margin-right: 1em;*/
font-family: verdana;
font-size:8pt;
background: #222239;
text-align: center;
margin:0px;
margin-left:0%;
padding-top:0px;
float: Left;
border-right: 0px solid #000;
border-bottom: 2px solid #222239;
}
#menuButtons li:hover
{
background: #222c4a;
border-bottom: 2px solid #FFF;
}
If anyone can help me with this problem, I would greatly appreciate it. Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin Hi all, I'm trying to create a simple menu with rollover links using CSS, but while it works in IE, it stops as soon as the link text ends in Firefox. Is this because Friefox is ignoring the width and heigh commands in CSS? And is there any way to fix this? If so, how? I've got this working on Firefox Code:
.menu_item {
}
.menu_item a:link{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:active{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:visited{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:hover{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_1.gif);
background-repeat: no-repeat;
color: #ED1C2D;
text-decoration: none;
}
Cheers. |
|||||||