|
HTML - 100% Height Problem
Resolved and links no longer available so text removed.
Similar TutorialsHi, My site is here I am having problems with the left side. It looks how I want it in Firefox but in IE it is ignoring my height commands and centering all the rows across the whole table. Anyone know how I can get this to look the same in Firefox and IE? Bit of a numpty so please be gentle Thanks Jon Hello. I am creating a website that has a frames layout as follows: _______________________ | ..................................... | |______________________| | ..... | ................................ | | ..... | ................................ | | ..... | ................................ | |___|__________________| |______________________| Basically a header, a footer, links/navigation on the left, and the page in the center. My problem now is that I created this site in a high resolution (1280*1024) and when viewed in 1024*768 (standard for a lot of PC's I think), the Links frame becomes scrollable which is very ugly, and since the height of the header and footer are fixed, the main content frame becomes very flat (narrow is not a problem). My question now is: how do I assign fixed heights to the left (links/navigation) and the main content (center, right) so that if this webpage is viewed at a smaller resolution, the center and links frames are not individually scrollable, but that the ENTIRE page is scrollable (so the footer is not in sight, but at the bottom of the page). I'm not sure if the above is clear so I will say it again: main content and links are no longer scrollable (even in 1280*1024) but the entire webpage is scrollable. The links and content frames have fixed heights, and if this heigh it larger than the window size, the footer goes down and the entire webpage is scrollable. Thanks A LOT for your help! Hi Folks, I have a problem with my wordpress template. It's a header - 2 column - footer design: | ----- header ----- | | -- col 1 -- | col 2 | | ----- footer ------ | The problem is, that in some cases (like the main page), the col 2 has a bigger height than col 1. What I need is col 1 to have the same height so it fills it with the same background top to bottom and doesn't leave this ugly empty part on the bottom. (I don't want to define a set height for the col 1 because both column's content is dynamic. you know the deal) What's my brainfart? The site is @ www.priedel.com/dic Thanks a lot! Paul I get the impressions that td height= 100% messes with a lot of web designers. I am one of them. Someone please help me with my problem, or at least point me towards a resource that discusses this issue. Both of my files work fine on my PC in both IE and Netscape. However, they mess up on certain Apple browsers. I think Safari is one that they mess up on. I don't have an Apple, so I have no way to fiddle with them. http://www.customrocknyc.com/content/main/service.php http://www.customrocknyc.com/content/main/designer.php As you can see, I'm just try to get this star design to wrap around text of different lengths. Apple doesn't display the text right, it leaves half empty cells, and arranges the graphics badly. Can anyone make this page work? The code to look at is between these two tags: <!-- BEGIN TABLE THAT HOLDS COMPLETE GREY-PINK BOX --> <!-- END TABLE THAT HOLDS COMPLETE GREY-PINK BOX --> Hello, I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips? HTML Code: <table style="table-layout:fixed;" border=1 width=100%> <tr> <td style="height:17px;width:150px;"> </td> <td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td>This cell should take the rest of the available column height area</td> </tr> </table> Thank you. hi guys below is my css code and html code respectively but id doesn't work in mozila the height of outer div and few more divs doesn't increase automaticaly , please help //////////css code //////// * { padding: 0em; margin: 0em; } body { padding: 35px 0px 35px 0px; } #upbg{ position:absolute; text-align:left; margin:0 auto; width: 100%; height:20px; z-index: 1; left: 0px; right:0px; top: 0px; background-color:#434343; } #outer{ position:relative; margin:0 auto; width: 901px; border:1px double #FF0066; background-color:white; z-index: 1; } #container{ position:relative; width: 901px; background-image:url('images/bg2.jpg'); background-repeat:repeat-x; z-index: 1; } #image{ width:30%; float:left; position:relative; } #contect12{ width:69%; float:right; position:relative; left: 6px; top: 0px; } #Contentcontainer{ position:relative; padding-top:10px; width:55%; left:7px; padding:5px; float:left; z-index: 1; } #contect1{ border: 3px groove #000000; width:100%; position:relative; background-image: url('images/2.jpg'); background-repeat: repeat-x; left: 3px; } #lmnu{ position:relative; width: 895px; z-index: 1; left: 0px; } #lMenubar{ position:relative; width: 20%; padding:5px; float:left; z-index: 1; left: 0px; } #lmenu{ width:100%; position:relative; padding-top:10px; } #RMenubar{ position:relative; width: 20%; padding:5px; float:right; z-index: 1; left: 0px; } #rmenu{ width:100%; position:relative; padding-top:10px; } #header{ width:901px;; position:relative; left: 0px; top: 0px ; margin-bottom:2px; } #menu{ position:relative;border-width: 1px; border-color: #666666; width:901px; height:31px; background-image: url('images/1.jpg'); background-repeat: repeat-x; left: 0px; top: 0px; border-bottom-style: solid; } .td { background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px silver groove; } .td2 { background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px lime groove; } //////////// 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 content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Rishabh Arts ,Art of Making Confident People</title> <link rel="stylesheet" type="text/css" href="default.css"/> </head> <body> <div id="upbg"> </div> <div id="outer"> <div id="header"><img src="1.jpg" /><img src="2.jpg" /></div> <div id="menu" style="left: 0px; top: 0px" ></div> <div id="container"> <div id="lmnu"> <div id="lMenubar"> <div id="lmenu"> <table style="width: 100%"> <tr> <td class="td" style="width: 169px" >Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> </table> </div> </div> <div id="Contentcontainer"> <div id="contect1"> <div id="image" ><img src="rr.gif" style="float: left" /> </div> <div id="contect12"> skaydasid<br /> dasdgasd<br /> asdgasdas<br /> dasdhas </div> </div> </div> <div id="RMenubar" > <div id="rmenu"> <table style="width: 100%"> <tr> <td class="td2" >Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> </table> </div> </div> </div> </div> </div> </body> </html> Hi all, Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail. here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php any help you can offer muchly appreciated! Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar I'm having problems with making a div height to 100%. What i mean is that the div height stretches to how long the contents of the page is. If you check out my sample here, the green div on the left only stretch to the windows "visible" viewing area, then if you lower, the height doesn't go any lower than that. any idea? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</head>
<style type="text/css">
body{
margin:0px;
height: 100%;
min-height: 100%;
max-height: 100%;
}
#left{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
background-color: red;
width: 100px;
height: 100%;
}
</style>
<body onload="fixheight()" onresize="clearTimeout(t);t=setTimeout('fixheight()',10);">
<div id="left">
<div style="width: 100px;background-color: green;height: 100%"></div>
</div>
<div align="center">
<p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p></div>
</body>
</html>
This html code works in Google Chrome (100% height), but not in IE (25% height). How can i fix it so IE shows it correct? 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" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>
Welcome
</title>
<style type="text/css">
html
{
overflow: hidden;
}
body
{
margin: 0px;
}
object
{
width: 100%;
height: 100%;
}
.center
{
text-align: center;
margin-top: 20%;
}
</style>
</head>
<body>
<div class="holder">
<object type="application/x-shockwave-flash" data="preloader.swf">
<param name="movie" value="preloader.swf"/>
<div class="center">
To use this site you must have Javascript enabled and be using the current version of Adobe Flash Player.
<br/>
<br/>
<a href="http://get.adobe.com/flashplayer/">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" style="border: 0px;"/>
</a>
</div>
</object>
</div>
</body>
</html>
okay so i have page, i want it to build itself to encompass at the minimum 100% of the browsers height dynamically i have seen a few methods of doing this via css and html and i have done it in the past without issue but now it wont do it anymore and im not sure why so the site is www.wiffleague.com/main.php (you may have to maximize browser to see what i mean) i want the footer section (at the bottom, the table with the copyright info in it) to always be bottom justified no matter the height of the rest of the page. currently what occurs is that if the page does not have enough content to fill the vertical height then it simply appends the footer section at the bottom of that and then a blank space under the footer. Ok I have been racking my brain on this one for two weeks and I still cannot find an answer to this, which I know I will kick myself when I find out. I have this sidebar in a table and the sidebar spans 4 Rows the problem is that each cell does not condense down to the smallest size possible and I don't know what to do to fix it. The page in question is at http://wentworthatdraper.com/test/ The page renders great in Chrome but not FF and IE I'll put all the code I think is relevant here. <tr> <td width="77" height="160" class="sidebar" > <div class="title"> Main </div> <div class="subtitle3"> <ul> <li> <a href="index.html">Home</a> <a href="contact.html">Contact Us</a> <a href="calendar.html">Calendar</a> <a href="news.html">News</a> </li> </ul> </div> </td> <td width="721" colspan="2" rowspan="4" class="content"> <p> Edited </p></td> </tr> <tr> <td height="272" class="sidebar" > <div class="title"> Our Community </div> <div class="subtitle3"> <ul> <li> <a href="index.html">Living With Us</a> <a href="contact.html">Meet The Staff</a> <a href="calendar.html">Testimonials</a> <a href="news.html">Photo Gallery</a> <a href="index.html">Apartment Deals</a> <a href="contact.html">Dining Services</a> <a href="calendar.html">Amenities</a> <a href="news.html">Location</a> </li> </ul> </div> </td> </tr> <tr> <td height="20px" class="sidebar"> <div class="title"> Gallery </div> <div align="center"> <img src="../test/Images/photos/happy-home.jpg" width="131" height="86" /> </div> </td> </tr> <tr> <td height="100%" class="sidebar"> <div class="title"> Our Location </div> <div class="sidewriting"> 11631 S 700 E <br /> Draper, UT 8402 <p> <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=11631+S+700+E++Draper,+UT+8402&sll=37.0625,-95.677068&sspn=42.360237,93.076172&ie=UTF8&hq=&hnear=11631+S+700+E,+Draper,+Salt+Lak e,+Utah+84020&ll=40.540906,-111.870153&spn=0.009963,0.022724&z=16&iwloc=A" target="_blank">Get Directions </a></p> </div> </td> </tr> .sidebar { width:175px; background:url(../images/sidebar.jpg) repeat-y; vertical-align:top; margin:auto; } .title { background:url(../images/title.jpg) left no-repeat ; height:30px; padding:10px 0px 0 15px; color:#FFF; font-weight:bold; vertical-align:top; } Thank you so much for looking at this Hi, I have a table and I need a background in one cell to extend down to the bottom of the cell (which is also the bottom of the page) from a certain point (below the content of that cell). I figured I would just use a div to do that... like this <html> <head> <style type="text/css"> .divbg { background:url(tree.jpg); height: 100%; } </style> </head> <body> <table> <tr> <td> <p>Content</p> <div class="divbg"> </div> </td> <td> <p>Content takes up a lot of space here and continues down the page a bit, so that is why the background in the cell to the left has to continue down the page.</p> </td> </tr> </table> </body> </html> Unfortunately, that didn't do anything. It just left me with a strip of my background image right under the content. So... I discovered online that you have to set the parent to 100% as well. I made the td <td height="100%"> and with no luck, I made the table <table height="100">. This just did really weird stuff and I realized what the problem was. This was making the div 100% height of the window itself. All I want is for the div to go from top to bottom (not including the content at the top of the cell). Is this even possible? Let me know if my explanation is unclear... Thanks! P.S. In the real site I am using XHTML 1.0 Transitional if that makes a difference. I might be able to change that though, if I need to. It was just the default that Dreamweaver put there. I'm not sure what the rest of the site would look like if I changed that now. I have a div and within that my navigation menu. My menu is made up of ul with their styles removed and floated left to make the list horizontal. I'm trying to make the background colour of my div white, but it doesn't have any height so it's not showing up. I have two columns in my page layout. I would like them to be the same height without declaring an exact height for both coloumns. Is there anyway to do this. I have attched a simple example of what I mean. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.column1{
border: solid 1px black;
width: 400px;
margin: 20px;
padding: 5px;
margin-left: 100px;
background-color: aqua;
height: auto;
}
.column2{
border: solid 1px black;
float: right;
width:400px;
padding: 5px;
margin: 20px;
margin-right: 100px;
background-color: #92c847;
}
.holder{
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="holder">
<div class="column2">
<h4> Column 2</h4>
<p>text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
</p>
<p>text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
</p>
</div>
<div class="column1">
<h4> Column 1</h4>
<p>This should be the same height as column2</p>
</div>
</div>
</body>
</html>
Thanks Calyspo I am using an iframe to insert some common text/links in several pages. I want the 'src' to take up just as much space (vertically) as it needs, without using scrollbars. My problem is that as time goes on, I may add, or remove things from the 'src'. I don't want to have to go back to the individual pages that have the iframe tag and re-adjust the height="xxx" bit. Is there a way to do this ? I have a table row with a form with several buttons. The row is twice the height of the buttons and I haven't been able to control the height. Here is snippet: <html> <head> </head> <body> <center> <table border='1' cellpadding='0' cellspacing='0'> <tr> <td align='center'> <form> <input type='button' value='Prev month' id='btnPrevID' onClick='MonthYearChange("prev")'> <input type='button' value='Next month' id='btnNextID' onClick='MonthYearChange("next")'> <input type='button' value='Change Mo/Yr' id='btnChgID' onClick='DropDownChangeMonthYear()'> </form> </td> </tr> </table> </body> </html> I made a preliminary layout for a website: index4-table-bad.html The problem is that it only works as intended in Opera browser. In IE and in FireFox a problem occurs: the <td id="td-menu2"> expands and shows the red background (I gave the red background intentionally to better see the problem). The "Article", "Menu1", and "News" will be dynamically generated (in php) and can have different heights. There is no option to predict which one will be the tallest. Please tell how should I correct the page so that: - <td id="td-menu"> should not expand and stay 35px heigh and the article should go just below it with 5px spacing (as it now works only in Opera) - as it is now, all areas should end at the bottom at the same level (I mean: "MENU1", "ARTICLE", "NEWS" should end at the same level/line at bottom). What would be the best way to improve this layout to correct abovementioned bug? I haven't been coding html for over 10 years so I am not sure how I should approach to this bug nowadays. Is it better to add Javascript or trasform this layout into divs instead of the table. But even with divs it will perhaps need Javascript to keep areas ends at bottom at same level. Or is there any better way than Javascript? I am working with current browser versions: Opera 9.64, IE 8, FireFox 3.0.10. Regards, Mark Im working on a website for my city City of Crescent Springs And im having an issue with the upcomming events div. i cannot get it to stretch to the footer Any help? |
|||||||