|
HTML - Table Not Stretching
I am making an eBay layout for a friend but one of the cells doesn't seem to be stretching. The cell is the one with layout_09.jpg as the background.
Heres how it looks like at the moment: http://ki114.phpnet.us/ebay/layout.html And heres the code: HTML Code: <html> <head> <title>layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (layout.psd) --> <table id="Table_01" width="780" height="700" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5" width="780" height="172"> <img src="images/layout_01.jpg" width="780" height="172" alt=""></td> </tr> <tr> <td colspan="5" width="780" height="4"> <img src="images/layout_02.jpg" width="780" height="4" alt=""></td> </tr> <tr> <td rowspan="2" width="34" height="471"> <img src="images/layout_03.jpg" width="34" height="471" alt=""></td> <td width="102" height="439"> <img src="images/layout_04.jpg" width="102" height="439" alt=""></td> <td rowspan="2" width="35" height="471"> <img src="images/layout_05.jpg" width="35" height="471" alt=""></td> <td rowspan="3" background="images/layout_06.jpg" width="562" height="478"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>m </td> <td rowspan="3" background="images/layout_07.jpg" width="47" height="100%"> </td> </tr> <tr> <td width="102" height="32"> <img src="images/layout_08.jpg" width="102" height="32" alt=""></td> </tr> <tr> <td colspan="3" background="images/layout_09.jpg" width="171" height="100%"> </td> </tr> <tr> <td colspan="5" width="780" height="64"> <img src="images/layout_10.jpg" width="780" height="46" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Thanks in advance. Similar Tutorialshi i'm new! i'm pretty good with html and i'm setting up my website, jesse-m.com. if you go to this link: http://jesse-m.com/fourth%20layout/header_test.php, that is what i want the sidebar to look like. but when i put my cutenews code in under the news section, this is what happens to the sidebar: http://jesse-m.com/fourth%20layout/header.php how do i make the sidebar not follow the height of the news section? i don't want it to stretch! i just want it to stop when it has nothing else to show and just continue the white background. because it's a php document, here is the source of the page WITH the cutenews: PHP 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"> <style type="text/css"> <!-- body { background-color: #E4E4E4; } --> </style> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>» JESSE-M.COM • a number one source for jesse mccartney fans</title> <link rel="stylesheet" href="http://www.katiecassidyfan.com/jesse/fourth layout/style.css" type="text/css" /> </head> <body> <div align="center"> <table width="610" border="0"> <tr> <td><img src="header.png" width="610" height="271" /></td> </tr> </table> <table width="614" border="0"> <tr> <td width="184" height="10" valign="top" class="sidebar">WELCOME</td> <td width="420" valign="top" class="sidebar">NEWS</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">welcome to jesse-m.com! we have been down for awhile but are now back stronger than ever and ready to supply you with the latest jesse gossip, pictures, and news. be sure to check back multiple times throughout the day because we will be following jesse's foot steps throughout his busy career and are happy to keep his most dedicated fans up to date.</td> <td rowspan="17" valign="top" bgcolor="#FFFFFF" class="news"><?PHP $number=10; include("/home/content/k/a/t/katiefan/html/jesse/cutenews/show_news.php"); ?></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">STATISTICS </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">owners: kirstie and ana <br /> opened: march 1st, 2008<br /> layout version: 2<br /> host: <a href="http://www.katiecassidyfan.com" target="_blank">katiecassidyfan</a><br /> contact: <a href="mailto:staff@jesse-m.com">staff@jesse-m.com</a> </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">NAVIGATION</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><a href="jesse">jesse</a>: facts, biography, awards<br /> <a href="http://www.jesse-m.com/gallery" target="_blank">gallery</a>: candids, photographs, scans<br /> <a href="video" target="_blank">video vault</a>: interviews, tv, movies<br /> <a href="web" target="_blank">web</a>: affiliates, links, official sources<br /> <a href="site" target="_blank">site</a>: information, webmasters, past</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">MUSIC PLAYER </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><center><object type="application/x-shockwave-flash" width="171" height="83" data="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf"> <param name="movie" value="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf" /> <embed src="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf" width="171" height="83"></embed> </object></center></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">RECENT PICTURES </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"> </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">ELITE AFFILIATES </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">1. <a href="http://www.katiecassidyfan.com" target="_blank">katie cassidy fan</a><br /> 2. <a href="http://www.glorianafans.com/" target="_blank">Gloriana Fans</a><br /> 3. because we have not been online for awhile, we erased all of our affiliates. if you'd like to be an elite, please contact us! </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">PROJECTS</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">"wanted" - body fragrance<br /> "alvin and the chipmunks: 2" - cinema </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">TAGBOARD</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><Center><!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="175" height="180" src="http://www3.cbox.ws/box/?boxid=3017165&boxtag=7321&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EBEBEB 1px solid;" id="cboxmain"></iframe></div> <div><iframe frameborder="0" width="175" height="75" src="http://www3.cbox.ws/box/?boxid=3017165&boxtag=7321&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EBEBEB 1px solid;border-top:0px" id="cboxform"></iframe></div> </div> <!-- END CBOX --></center></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">DISCLAIMER</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">jesse-m.com is a fansite and <em>only</em> a fansite for <strong>jesse mccartney</strong>. we are no way affiliated with jesse or his management unless stated so. we do not pose to be him or any of his family members and any exclusive information that is sent to this site is for our use, <em>and our use</em>, <u>only</u>. everything on this site was created by either ana or kirstie and are not be resdistrubited any where else without persmission. these graphics are ours and not yours to use! all photos, videos, articles and interviews are owned by copyright their respective owners. jf you'd like to have any illegal content removed, please <a href="http://www.katiecassidyfan.com/jesse/staff@jesse-m.com">e-mail</a> us before taking an legal action. we would love to cooperate with you.</td> </tr> <tr class="bottom"> <td height="10" colspan="2" valign="top" bgcolor="#FFFFFF"><div align="center">copyright: <strong>JESSE-M.COM</strong> | opened: 2008 | <a href="jesse">Jesse</a>, <a href="gallery">Gallery</a>, <a href="video">Video Vault</a> | Hits: <!-- Start FastWebCounter.com --> <script src="http://fastwebcounter.com/secure.php?s=www.jesse-m.com"></script> <!-- End FastWebCounter.com --> | Online: <!-- Start FastOnlineUsers.com --> <script type="text/javascript" src="http://fastonlineusers.com/on2.php?d=www.jesse-m.com"></script> <!-- End FastOnlineUsers.com --></div></td> </tr> </table> <p><br /> </p> </div></body> </html> Hi, Please review the following code and give me your thoughts... HTML Code: <table width="500" border="1"><tr> <td width="200"><p>This</p><p>is</p><p>very</p><p>very</p><p>very</p><p>LONG</p><p>text</p></td> <td width="300" height ="100%" valign="top"> <table width="300" height ="100%" border="1" cellspacing="0"> <tr><td width="300" valign="top">This should be at the TOP</td></tr> <tr><td width="300" valign="bottom">This should be at the BOTTOM</td></tr> </table> </td> See the attachment for what I am trying to achieve... The thing to focus on is the second column and how it has 2 rows which are trying to stretch to fill the height of the single row first column. It works in Firefox 3.6 but not at all in IE8. Any ideas? And please don't talk me out of tables for this thread... I know they aren't the greatest thing ever, I'm just trying to fix what I have. Thanks! - Jeff Hello, This is either a really easy question, or it just can't be done. I've tried it before, and could have sworn I've worked it out, but I can't do it again. I have a table with cells as below: What I want is Cell #2 to be Fixed and Cell #5 to be fixed in height. When Cell #3 expands, I only want Cell #4 to expand with it. So when #3 is 300px and #2 and #5 are 100px, then #4 should be 100px. But when if #3 expands to 400 px, then #2 and #5 should stay at 200px and #4 should expand to 200px. But this is not the case, atleast in IE. In Firefox, #2 and #5 stay how they are supposed to and #4 expands (yay!), but in IE, all three go haywire. I can't even find any consistancy in how IE determines which cell to expand and how much. I've created a test HTML file to see if I can get it working, and I still cannot. I have it available if anyone would like to see it and fiddle around with it. HTML Link (viewable): Table Test Zip File (includes html and ruler.gif Background): Table Test Zip As you can see, I have #2's height set to 100px and #5's height set to 50px. #4 has no height set. #3's is 300px. What I want is #4's then to be 150px (300 - 100 - 50 = 150). However, the case as it may be is that it just does not work out this way. How can I accomplish this. It must be possible. Note that the HTML contains CSS to determine the dimensions, but I have also tried it directly into the TD tags. I've also tried defining height directly in the TR and through a TR style as well as a ton of combinations of CSS postiioning and heights and floats and all kinds of stuff. I feel like I've tried everything. Any help appreciated. Thanks agin, Rege Hey guys i used to mess around doing simple sites but haven't messed with it for a few years and I about forgot everything.. Now what I'm trying to do here is make my content box stretch as more content is added but when I do it now it breaks my page.. Can anyone direct me to how to fix this problem.. here is what I mean. http://img687.imageshack.us/i/fixprob.jpg/ I need to do this without making my box a scroll bar box as I want it to just stretch down my page. My background where content should stretch is a solid color and my sides are all even as well so it should flow fine I just don't remember how to do this. Thanks in advance. i have a custom friendster layout which i made using basic HTML which basically turns my friendster profile into a blog: http://www.friendster.com/jholicmks have a question though about the object tag. as you can see from the website i use the <OBJECT> tag to import my blog contents into the content area of the site. unfortunately, after fiddling around with its height properties i can't seem to get the <OBJECT> to expand to fit its contents. all i've managed to do is get the scrollbar to disappear and, after 800px down, it cuts off completely. here's the code i used: http://h1.ripway.com/onlymoderatelymad/jholic.js it's very messy javascript coding, i know. but if anyone has a solution for my problem i'd appreciate it. hello why does the stretched gif which makes the right-hand column work on this page - http://www.testtracks.com/bios.html get broken when it goes to this page? - http://www.testtracks.com/test.html help very much appreciated, thanks sandy Hello everyone! I am having a trouble coding a website design. I am not even sure this is possible, but how can I stretch a window (pop-up window) between the top and the bottom of the page (so when I open the window on a larger display it looks the same)? Thank you in advance, Andrei Hello, I have recently ran into an issue with tables. I set a table width to 800px, and I want it so the text automatically breaks down to the next line instead of stretching the table past 800px wide. A solution that functions in both IE and FF would be very much appreciated. Thank you Hey, I made this photoshop template, and sliced it and everything, but when I open the index.html, it don't stretch across screen. Can someone help me do this? Here is the code: PHP Code: <html> <head> <title>10-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (10-1.psd) --> <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="15"> <img src="images/index_01.jpg" width="800" height="65" alt=""></td> </tr> <tr> <td rowspan="9"> <img src="images/index_02.jpg" width="54" height="480" alt=""></td> <td colspan="13"> <img src="images/index_03.jpg" width="685" height="2" alt=""></td> <td rowspan="10"> <img src="images/index_04.jpg" width="61" height="535" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/index_05.jpg" width="684" height="62" alt=""></td> <td rowspan="9"> <img src="images/index_06.jpg" width="1" height="533" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/index_07.jpg" width="684" height="12" alt=""></td> </tr> <tr> <td colspan="8"> <img src="images/index_08.jpg" width="432" height="1" alt=""></td> <td rowspan="3"> <img src="images/index_09.jpg" width="90" height="17" alt=""></td> <td colspan="3" rowspan="2"> <img src="images/index_10.jpg" width="162" height="2" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <img src="images/index_11.jpg" width="30" height="27" alt=""></td> <td rowspan="2"> <img src="images/index_12.jpg" width="90" height="16" alt=""></td> <td colspan="3"> <img src="images/index_13.jpg" width="177" height="1" alt=""></td> <td rowspan="2"> <img src="images/index_14.jpg" width="90" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_15.jpg" width="45" height="27" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_16.jpg" width="43" height="26" alt=""></td> <td> <img src="images/index_17.jpg" width="89" height="15" alt=""></td> <td rowspan="2"> <img src="images/index_18.jpg" width="45" height="26" alt=""></td> <td rowspan="2"> <img src="images/index_19.jpg" width="45" height="26" alt=""></td> <td> <img src="images/index_20.jpg" width="92" height="15" alt=""></td> <td rowspan="2"> <img src="images/index_21.jpg" width="25" height="26" alt=""></td> </tr> <tr> <td> <img src="images/index_22.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_23.jpg" width="89" height="11" alt=""></td> <td> <img src="images/index_24.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_25.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_26.jpg" width="92" height="11" alt=""></td> </tr> <tr> <td> <img src="images/index_27.jpg" width="1" height="22" alt=""></td> <td colspan="11" background="images/index_28.jpg" width="683" height="22" alt=""><marquee><font color="white">Welcome to conquer online website!</font></marquee></td> </tr> <tr> <td colspan="12"> <img src="images/index_29.jpg" width="684" height="354" alt=""></td> </tr> <tr> <td colspan="13"> <img src="images/index_30.jpg" width="738" height="55" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="54" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="43" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="89" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="92" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="61" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Hey guys. I have been playing with building a website for a b and b (figured it would give me calender plugins and a gallery to learn) which has been going well until recently. I have found a gallery plugin from TN3 that i really like, i downloaded it and have it working fine but for some reason it has messed up my formatting stretching a column more than i want and i have no idea how to fix it (the original page layout was form a free template and im new to CSS as last time i played with html was right at the start of CSS years ago). The page in question is: http://geekstest.web44.net/html/Gall...o/gallery.html Source is available, I can post the CSS in use if that is the source of the issue but i was hoping someone could take a quick look and guide me how i can fix the overscan on the right hand side? Thanks in advance; Andy Hi All, I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine. The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify. You can see the page in action at - http://staging.marware.com/iphone-cases/iphone-4-cases I have tried numerous combinations of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set. The code in place now looks like this: <table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center"> <tr style="height:100%;"> <!-- left side image --> <td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td> <td valign="top" width="400" align="center"> <!-- right side image --> <td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td> </tr> </table> Hey All Groovie forum you got here Ok, now to my main point... I want to be able to stretch a image (banner) fully across the screen. I dont want to adjust the height, just make it run from one to side to the other. Also how do I stretch the background image to fullscreen without css? Cheers I have built a webpage with a YouTube video using the new coding. Directly on top of the video I have placed the menu bar and have added a graphic as a kind of footer to the video so that the video sits inside these two elements. All is well until the page is stretched very wide. At some point the video "pops" out of alignment with the menu bar and the "footer" as the paged is "super stretched." Admittedly, no one is normally going to stretch the page that much, but the client has a huge two monitor set up and wants the menu bar/video/footer to remain as a package no matter how far the page is horizontally stretched. Does anyone have any ideas? You can to to the page and see exactly what I mean at www.nfocusprototype.com/vanallen. Thanks in advance for any suggestions. AWSariti Hi guys, I have a problem. Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this? http://automata.firephoenixnet.com/74s/ Thanks in advance guys. I am trying to put a background image but, it seems to be tiled instead of stretched. I want it to be all one image in the background, not a repeated image of itself off to the side of the moniter. I am using the string: background image="001back" -- That's without the brackets because i don't think it would show with them. Any suggestions on fixing this? Or stretching the background? Hello all, First post here, been stalking for a few weeks and of course, I'm milking for information. Wish I knew enough to contribute. I've undertaken a web design project for a friend and I've run into a few snags I've never seen. I have a background color set, and the background color only extends the size of the browser window. It's grey when I scroll down. www.thephoenixpages.com/ourstory Forgive the design, not my doing. Also, is there a discrepancy in positioning with Chrome vs FF ? The picture box is off in each browser. Lastly, I attempted the sticky footer(as seen on some of the pages, but not the linked one) and it had the same problem. It wouldn't stick to the bottom, but the bottom of the window as seen on the screen. If anyone could shed some light on these problems, I'll email you a high five. Thanks. larsy Hello I'm trying to work out a way of allowing my main content to increase without it stretching my nav and ruining the formatting. I have a table, 2 columns, 10 rows, cell spacing 4 I've set the main content (right) to span all 10 rows. I want to be able to increase the main content without it stretching my rows. Row height set to 40px. My answer so far has been to add an 11th row, turn it white and set the height so that the combined height of the cells in the left had column matches the height of the right hand one. This is fine, but a bit of nuisance if you want numerous pages where the main content takes up a different amount of space. Is there anyway to set the 11th cell on the left hand column to stretch along with my main content, without it messing up the height of the 10 calls above? You'd think you'd be able to set it to height = 100% or something, but apparently not. Many thanks, monki Sorry if my title sounds a little strange lol. I've been designing a layout for a new site of mine, and I decided to (attempt to) comply with XHTML guidelines, and use DIV's rather tables. I've got a container div, which contains a couple more divs, such as for the header, left navigation, content etc. Problem is, the left navigation bar is going to be quite long as I plan to include a skyscraper ad underneath the navigation bar, if possible. I've put the left navigation bar inside the content div (as you can see in the pictures coming up)...so when there's not much content, because the left nav will be so tall the left nav extends beyond the content box - I was hoping to find a way to make the content div stretch to accomodate this. It strangely works as desired in IE7 (http://img515.imageshack.us/img515/7070/ie7ix9.jpg), but in Firefox it doesn't ( http://img180.imageshack.us/img180/2480/ffow1.jpg) Is there any way to make the content div expand with the left nav div? Thanks very much Source code: Code: <html>
<head>
<style type="text/css">
body {
background-color: #272727;
color: #FFFFFF;
font-family: Verdana, Sans-Serif;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;
}
h1 {
color: #adc203;
font-size: 14px;
text-align: center;
}
a:link {
color: #adc203;
}
a:hover {
color: #444444;
}
a:visited {
color: #bbc758;
}
.container {
width: 775px;
background-color: #1a1a1a;
margin-left: auto;
margin-right: auto;
}
.header {
width: 775px;
height: 141px;
}
.logo {
width: 611px;
height: 141px;
float: left;
}
.login {
background-image: url(images/login.png);
width: 164px;
height: 141px;
float: right;
}
.content {
background-image: url(images/content.png);
width: 775 px;
background-repeat: repeat-y;
text-align: left;
}
.innercontent {
padding-left: 25px;
padding-right: 25px;
}
.linkbox {
margin-top: 5px;
margin-right: 15px;
width: 160px;
background-color: #151515;
float: left;
font-size: 14px;
}
.linkbox div {
padding: 5px;
padding-top: 0px;
}
.linkbox h1 {
color: #adc203;
font-size: 14px;
text-align: center;
}
.linkbox a:link {
color: #FFFFFF;
text-decoration: none;
display: block;
padding-left: 5px;
}
.linkbox a:hover {
color: #FFFFFF;
background-color: #abc203;
padding-left: 5px;
}
.linkbox a:visited {
color: #bbc758;
padding-left: 5px;
text-decoration: none;
}
.googlebox {
float: left;
clear: left;
margin-top: 10px;
margin-right: 15px;
width: 160px;
height: 600px;
background-color: #161616;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"><img src="images/logo.jpg" alt="DesignersVAULT" /></div>
<div class="login">Test</div>
</div>
<div class="content">
<div class="innercontent">
<div class="linkbox">
<div>
<h1><span style="color: #444444;">designers</span>vault</h1>
<a href="link.html">Home</a>
<a href="link.html">Contact Us</a>
<a href="link.html">Suggest A Feature</a>
<h1>tutorials</h1>
<a href="photoshop.html">Photoshop</a>
<a href="photoshop.html">XHTML</a>
<a href="photoshop.html">CSS</a>
<a href="photoshop.html">PHP/MySQL</a>
<a href="photoshop.html">General Design</a>
<h1>layouts</h1>
<a href="photoshop.html">Free</a>
<a href="photoshop.html">Premium</a>
<a href="photoshop.html">Designed For You</a>
</div>
</div>
<div class="googlebox">
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula. Nam nec nunc sed nunc malesuada pretium. Curabitur at augue. Sed pede est, ultrices sit amet, semper quis, venenatis a, turpis. Nam fermentum neque in tortor. Proin tortor. Suspendisse posuere. Duis gravida nulla a lectus. Vestibulum porttitor aliquet lorem. Morbi tortor. Fusce elementum. Quisque scelerisque mauris vitae mi. Ut et orci id augue sollicitudin auctor. Proin urna. In nibh purus, gravida vel, vehicula nec, vulputate eu, quam. Donec quis dolor. Aenean sed arcu at lectus imperdiet sodales. Pellentesque egestas. Praesent id augue. Maecenas nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed risus. Cras non ipsum. Duis mollis auctor nulla. Integer ornare orci a lorem. Praesent eleifend. Sed ac ligula et est faucibus rutrum. Aliquam felis. Sed elementum tempus erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lacinia massa et augue. Integer vel augue id arcu viverra tincidunt. In hac habitasse platea dictumst. Nunc sodales ante et nunc. Vivamus posuere. Morbi ipsum. Aliquam fermentum sollicitudin felis. Sed varius dolor ut leo. Duis consectetuer urna id eros. Suspendisse ut ante. Maecenas quis diam. Phasellus fringilla velit. Praesent interdum rhoncus tortor. Fusce sollicitudin. Mauris a nibh nec mauris tincidunt rutrum. Mauris malesuada, tellus in accumsan dignissim, quam ligula tempor enim, interdum feugiat nisi risus in elit. Vestibulum sapien. Aliquam erat volutpat. Sed id sem ac justo laoreet elementum. Aliquam urna. Curabitur felis. Nam sed purus non lacus hendrerit aliquet. Sed a urna a metus luctus venenatis. Aenean purus ante, rutrum eu, hendrerit vitae, tincidunt quis, nisi. Duis pellentesque, justo at malesuada vestibulum, urna dolor cursus mauris, eget luctus eros massa et purus. Nam magna. Ut aliquam sodales purus. Vestibulum ut augue sit amet est elementum lacinia. Vestibulum tempor est a magna. Nulla luctus pellentesque diam. Aenean elementum turpis et tortor. Maecenas feugiat rutrum erat. Nullam ac elit. Donec auctor gravida ligula. Vivamus posuere dui a arcu. Suspendisse potenti. Morbi dolor augue, sagittis quis, accumsan quis, aliquam molestie, enim. Phasellus faucibus odio id neque. Curabitur iaculis ligula ac purus. In quis ante ac ante bibendum vestibulum. Etiam a lacus id est rhoncus ultrices. Morbi vitae magna et erat porttitor luctus. Aliquam erat volutpat. Curabitur sit amet sapien sit amet nulla faucibus accumsan. Nam ornare, mauris vel dignissim commodo, risus dolor scelerisque purus, viverra porta lectus tortor quis mauris. Etiam at turpis eget nisi cursus pulvinar. Suspendisse ultrices. Vivamus blandit scelerisque odio. Curabitur fringilla eleifend nisi. Quisque vel purus vitae turpis auctor iaculis. Maecenas est pede, malesuada vel, adipiscing semper, adipiscing quis, tortor. Donec vitae nisl vel dolor lacinia sodales. Sed tempor. Nullam congue condimentum ante. Suspendisse blandit, nulla quis condimentum varius, tellus est posuere augue, a suscipit sem nulla dictum orci. Nunc sagittis turpis at ante. Donec sit amet massa et nulla lacinia mollis. Donec blandit, justo et faucibus tincidunt, pede massa eleifend tellus, id tristique mi nulla a nibh. Quisque commodo lacus nec diam. Aliquam suscipit. Aliquam a ante. Integer tincidunt purus vel pede. In hac habitasse platea dictumst. Etiam at nisi quis velit scelerisque ultricies. Sed dui lorem, fringilla sit amet, ultrices blandit, auctor a, magna.
</div>
</div>
</div>
</body>
</html>
Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! |
|||||||