|
HTML - Tricking Ie Into Paying Attention To Height
I've got a somewhat complicated page that breaks down into a fairly simple table.
There are two columns. The left one is just one big cell, with a fixed width. The length will vary and cannot be known beforehand. The right one contains two rows. The first is full of tables. It will vary less frequently, but given that all browsers decide to render the tables differently, its exact height is not known either. It also changes based on the width of the browser window. Either the left or the right column could be longer at any given time. The problem is with the second row on the right-hand column. It needs to have a static height. A simple <td height=X> does the job for Firefox. IE totally ignores the height value. So...what can I do to make IE accept that the second row should always be X pixels high? No more or no less. I am currently clueless when it comes to styles and CSS and all that, since I learned my HTMLing back in the Stone Age (I still hack my own code with pico), but I am willing to learn. I would prefer to learn as little as possible (let's call it "efficiency"), however, since no other pages on the site will have an issue like this. I am sure pretty much everything I know is deprecated, but what's the least amount of code I could use to replace something like this with something IE will pay attention to? Code: <tr><td height=X>Why, hello there!</td></tr> Any help would be greatly appreciated. Similar TutorialsHi, I'm new to this forum and this is my first post...Because I needed some help... I have some files on my site which i want others to see e.g. xml files and swf files but I wnat to deny direct access to them through the url e.g if they wrote in the adddress bar http://htmlforums.com/flashfile.swf then they wouldn't be able to access it i.e they can only access it through my site... Someone please help me with this... Thanks (by the way i have a .htaccess file and ...no nothing about html codes and stuff) Thanks Right now, working with my website is a bit of a pain in terms of adding content and the way it's displayed on Google looks very unprofessional. I am currently acquiring some assistance so I can get my website back on the road. Please contact me by MSN @ michael40449@gmail.com OR on Steam, my username is soldatboi76 First come, first serve. EDIT: Site is also viewed unaligned with the Internet Explorer browser (Margins) 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 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>
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>
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 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 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. 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. Hello all, I am making a website with the lay-out based on a table (I know I shouldn't, when will I ever learn? ;-)). The problem is the following: I have divided my page into several blocks: The lowest <td> row has been set at 544px while the top row has been set at auto. Firefox gives the correct output. In IE the lowest row is longer than 544 px (the red line gives the height it should have, the red arrow points to the real hight). Putting the height on 100% doesn't help because it stretches the top row over the complete page, leaving the bottom row out of the screen (the positive side of this is that now the bottom row is 544 px as I had orderd it to)... So does anyone have advice for me (besides the fact that I should make my lay-out with div's: tried it, but it just doesnt work for me :-)). Thanks for the help, JuliusV ps. I've checked my code (html and css) with w3 and no errors have been found. Hey guys, me and my friend are going to begin working on a forum but we've run into one small problem with CSS floats and 100% height (yes, I know it doesn't work). Could you look at this page in Firefox, please? http://automata.firephoenixnet.com/atom.ic/ As you can see, everything works fine except for the posts (which are supposed to look-forum like) and the sidebar, which doesn't stretch all the way down to the footer bar (because of the post weirdness). Is there any way to fix this? Thanks guys! Im having an issue with the table row heights on my page, i have three rows: The top row has the navigation menu, the second had a sub navigation menu (previous and next) to go between pages and then the third is has the content. I want the top to rows to snug up with the top of the table (like the top 25%) and then the content to be in the middle of the bottom row. Barring putting 'height="25%"' in the tr tag, is there a good way to do this? Thanks Hi @ all! I am working on a layout with XHTML + CSS by use of a table, wich fills 100% of the browser window's height. Now here's my example: http://dennishoene.de.funpic.de/index2.html (Please just ignore the advt. popping up) I designed a simple grid for prospective contents. In Firefox, Safari and Opera it works fine, in IE not. I used fixed heights for the first line (30px), the second line (120px), the third line (30px) and the fifth line (30px). The fourth line should be variable (due to different screen resolutions), but in the end, the table should be of 100% height (see CSS-indications in <head>). It seems as the Internet Explorer simply does not take any notice of these values, whereas Firefox & the rest do (in detail: IE accepts the height: 100% statement, but ignores or deranges the fixed height values of the particular table cells/lines). How can I solve my problem? Any suggestions? Thanks in advance. Dennis 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 dont understand why the wrapper won't stretch around the content... could someone please help me here... im baffled, as usual... http://pzpff.pzproductions.com OK so i have made this template and so far i like it but i have come accross a bit of an issue http://marlosweb.com/templates/test/contact.php OK so you see that little black bar on the left of the navigation? Well i want that to span the length of my page but 100% height wont work because CSS requires that the parent element has a fixed value. Does someone know how to cure this? Resolved and links no longer available so text removed. Greetings! Let me start this out by getting this out of the way - I know I should not be using tables for layout anymore But with this project I have good reasons as to not using them. Learning curve being one and time being another But I am headed that way! So here is the issue I have a simple layout and nested within is this little table for content and navigation Worked fine in FF, but IE7 is giving me some unexpected results with no explanation I can find. Here is the example page http://www.mountainroseherbs.com/test/blank.html Top left (blue) is the navigation image and cell - set height should be static and remain at the top Bottom Left (red) is a nav *footer*, I guess, but it remains at the bottom and the cell above it needs to be able to stretch indefinitely - with the images sitting on the bottom. Right (Orange) is the content area - dynamically stretching with the *red* following it. In FF this works great! Not so much in IE7 - in fact it skews the height of even the *blue* which is set!? Thanks so much in advance for your help on this, I am at my wits end! Nate~ Hi, I am using an iframe in my website, and I don't know how I am supposed to get the height to be correct. The problem is, I am treating the iframe like a little portal to another site. So when the user clicks a link on the page that is in the iframe, the page in the iframe changes and so does its height. I cant set a fixed height obviously, and I tried using 100% but that didn't work either. Does anyone know what I can do? Thanks! |
|||||||