|
HTML - Firefox Not Displaying Img Height=100%!!
Hi...I am looking to create a vertical solid bar, in an HTML table.
But it's not displaying right in Firefox! In IE it's fine...I want the bar to go to 100% of the <td> cell. Here is what I have: <td rowspan="2"> <center> <img src="bluepixel.gif" style="width: 5px; height: 100%;" /> </center> </td> bluepixel.gif is a 1x1 pixel GIF file. Basically I'm creating a vertical colored version of a <hr> tag. Again...in IE it fills out 100% of the height. But Firefox only shows a 5x5 square...no matter how big the browser is resized. Any ideas?? Thanks! Jason Similar TutorialsHello all, Im having problems displaying my website in firefox, it displays fine in IE, however its displaying 1/2 way down the page in firefox. Any ideas where im going wrong? www.best-mobile-contracts.co.uk Hi, Im a bit of an amateur and for some reason I cant get an image to display in firefox, but its fine in explorer.... Does anyone know why this might be? Thanks Aly_ve hello, the attached below is a position template for displaying merchandise. in IE the html shows properlly with no internal borders. in FIREFOX (version 1.5.0.9), the cells and tables are all bordered. i have now intentionally put - BORDERCOLOR="FFFFFF' and BORDERWIDTH="0" -wherever i possibly could in order to try and eliminate the borders from showing in firefox - to no avail. any suggestions? weblost here is the link if you prefer to view it. the position is the one marked "test 2" http://cafepanik.com/lobby/3_sneekee...ial/index.html the page is displayed well in IE6, IE7, firfox 3, but not in firefox 2 no matter wht is the height of the page it only shows part of it (about 800px height) how can i solve that????? (i'm working locally) thnx in advance :hat: I am experiencing frustration due to the website that I've designed is being displayed perfectly in the Explorer browser, but in Firefox its all screwed up. Is it coding issues? My website is at www.wolfdenexpeditions.ca cheers I have created a div which sits on the right hand side. I have created two different size ones as one of my html pages has a lot more content on it. here are in the divs in CSS:
Code: #picstrip{
width:200px;
height:740px;
padding: 10px 10px 20px 10px;
background-color:#8d6cd1;
z-index:999999;
float:right;
}
#picstrip2{
width:200px;
height:1270px;
padding: 10px 10px 20px 10px;
background-color:#8d6cd1;
z-index:999999;
float:right;
}
I want these divs to be touching the footer i have created: Code: #footer{
background-color:#2ba475;
width:800px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}
table.foot{
text-align:center;
}
I am currently able to make it work it just one of the web browsers at a time. The div seems to be shorter in size in IE. is there any way round this problem? I will be so greatful for any help. Thank You hi guys. I am trying to get rounded edges to appear around my tables when displayed in Firefox. However, while it does display rounded edges, it also displays an angular border, which takes whatever colour the text has. here is the code. Quote: <!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" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <style type="text/css"> <!-- #MainCell { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; width: 800px; background-color: #FFF; height: 1000px; } .whitebackground { } #LogoCell { background-color: #006; height: 15px; } #LinksCell { background-color: transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; width: 77%; } #ContentCells { text-align: center; } #BottomLinksCell { } table { -moz-border-radius: 30px; border: #cc2800; } body { background-color: #006; color: #0F0; border: transparent; } .TableBackground { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } --> </style> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link rel="stylesheet" href="../ajxmenu.css" type="text/css" /> <script src="../ajxmenu.js" type="text/javascript"></script> </head> <body> <table width="100%" border="1" align="center" id="MainCell"> <tr> <th scope="row"><table width="100%" border="1" id="LogoCell"> <tr> <th class="whitebackground" scope="row">LogoCell - I'll see if my guy will do something for you or if you can get a mate to, if not I'd go to a professional</th> </tr> </table> <table width="78%" border="1" align="center" id="LinksCell"> <tr> <th scope="row"><div class="AJXCSSMenueDFaTFD"><!-- AJXFILE:../ajxmenu.css --> <div class="ajxmw1"> <div class="ajxmw2"> <ul> <li><a href="#"><b>Home</b></a></li> <li><a class="ajxsub" href="#"><b>Gallery</b></a> <ul> <li class="sfirst slast"><a href="#">Slideshow</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>Corporate Work</b></a> <ul> <li class="sfirst slast"><a href="#">Testimonials</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>About Us</b></a> <ul> <li class="sfirst"><a href="#">Qualifications</a></li> <li class="slast"><a href="#">Business Associates</a></li> </ul> </li> <li class="tlast"><a href="#"><b>Contact Us</b></a></li> </ul> </div> </div> <br /> </div> </th> </tr> </table> <!-- TemplateBeginEditable name="ContentRegion" --> <table width="68%" border="1" align="center" id="ContentCells"> <tr> <th width="50%" height="113" scope="row"><p> </p></th> <td width="50%"> </td> </tr> <tr> <th height="135" scope="row"> </th> <td> </td> </tr> </table> <!-- TemplateEndEditable --> <table width="100%" border="1" id="BottomLinksCell"> <tr> <th scope="row">BottomLinksCell</th> </tr> </table> </th> </tr> </table> </body> </html> Can anyone tell me how I can get rid of the angular border, and just be left with the rounded one? Thanks! 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 Hello, I am pretty new to the whole html world so forgive me if this is a simple problem. I have look all over for a post explaing this problem but i haven't found anything. I am making a site for a friend using Dreamweaver. I know i know, i regret not coding it from scratch but its too late now. Anyways I have a pretty good page layout going now but I have ran into a problem with loading my images. On my home page an image in a table nested inside another table will load when viewing in safari but seems to disappear in firefox. What is going on? Its a pretty simple piece of code. I place; <img src="Pictures/RDV couplepalm.jpg" width="200" height="" style="float:right; padding: 8px; margin-left:10px; margin-bottom: 10px" / inside of a paragraph in a row of a table. I have rewritten the code for this image, copied it from a working image and screwed around with the table heights (although I wasn't too sure what i was doing). What else should I try? I have attached screen shots of the site in both browsers a copy of the problem jpeg aswell as a copy of the html. Any information anyone could givee me would be REALLY appreciated! Thank you. 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 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>
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 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. 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. Hello, I've created a table with two columns, the second column is fixed width at 64px and contains a div, the div has a border and contains some text, the text renders to larger than 64px. This is a cut down version of a more complex page to illustrate the problem so just changing it to divs or some such wont help. In IE6 and FF2 the div border automatically stretches to contain the text, in IE7 the div is set to 64px and stays there, I don't think this is the correct behaviour, but I can't seem to find another mention of this problem, could anyone give me some pointers? tia, Dave here's the code or here http://members.iinet.com.au/~daven@powerup.com.au/ and the shorter url http://tinyurl.com/6gnpuc <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <BODY> <table cellspacing="0" cellpadding="0" style="width:100%"> <tr valign="top" style="width:100%;"> <td> hello </td> <td style="width: 64px;"> <DIV style="border: solid 1px #0000FF"> dsadsadsdsadas </DIV> </td> </tr> </table> </BODY> </HTML> I've created a webpage using html and was wondering if there was any way that when I open the file to have the address bar display a "fake" url. That is, when I open the file instead of saying "file:///Users.filename.html" it will say "www.example.com" in the browser's address bar. I'm on Mac OS and my browser is Google Chrome, if that helps. 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! |
|||||||