|
HTML - Cell Padding Trouble
Hi! I am in the process of designing my first web page and I am having some difficulty with cell padding. I want there to be some space between my text and the edge of the tan box. What i am doing is obviously not working! Any help would be greatly appreciated!
Here's the URL: http://www.freewebs.com/pixelsnponies/index.htm And here's the code: <html> <head> <title>Pixels 'n Ponies Graphics</title> </head> <body bgcolor="A85045"> <img src="http://img221.imageshack.us/img221/6698/sagebannerwg7.jpg" align="center" width="100%"> <br> <br> <TABLE width=100%><TR><TD bgcolor=#A85045 width=20% valign=top> <center><A href="http://www.freewebs.com/pixelsnponies/index.htm"><font color="161513"><img src="http://img222.imageshack.us/img222/9146/homelinkaf5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Layouts.htm"><font color="161513"><img src="http://img136.imageshack.us/img136/7010/layoutsap5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Seasons.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/9294/theseasonsst5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Breeds.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/7374/thebreedsgw1.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Banners.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/1058/bannersandadshw3.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Support.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/4702/supportgx7.jpg"></FONT></A></center> </TD><TD bgcolor=#EEE7DB width=80% valign=top cellpadding=10><center><font size="3" face="baskerville" color="161513" > <br> <b>Welcome to Pixel's n' Ponies Howrse Graphics!</b> <br> <br> Your Howrse profile page represents you, so it's appearence is important. Here you can find a number of free layouts to make your page look professional. Feel free to take a look around and choose a look that suites you. A new layout is added every week, so check back often! <br><br>Don't have a Howrse account? <A href="http://www.howrse.com" target="_blank"><font color="161513">Click here</A> and come join the fun!</center> <br> <br> <b>FAQ</b> <br> <br> <b>Q: How do I put the layout on my page?</b> <br><br><b>A:</b> - Copy the HTML code. <br>- Go to "Edit My Profile" <br> - Click "HTML Mode" <br> - Paste the code. <br> - Click "Edit My Profile" <br> - Add your own text, pictures, etc. <br> <br> <b>Q: Can I have a custom layout?</b> <br><br> <b>A:</b> Due to the time it takes to design and code a layout, I do not make custom layouts for free. However, I would consider doing one for around 400E. Message me for details. My Howrse name is Pookielou. <br> <br> <b>Q: I have a good idea for a layout. Will you code it?</b> <br> <br><b>A:</b> I'm always open to new ideas. If you message me with your proposal, I will consider coding it and adding it to the free layouts on this site.<br></font> </TD> </TR> </TABLE> </body> </html> Similar Tutorialsi set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? http://dampheat.com/store.html i cant recall the html to make the spacing to the left and atop that graphic go away. Has now been sorted. I have a table that looks like this: Code: <table style="height: 100%;" cellspacing=0 cellpadding=0 border=1> <tr><td colspan=2 style="height: 100px;"> <center> <span style="font-size: 24pt; text-align: center;"> <img src="H&R banner.jpg" border=0></span></center></td></tr> <tr> <td style="width: 200px;"> <center> <span style="text-align: center;"> MARGIN<br> (latest news)<br> (possibly links) </span> </center> </td> <td> <table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=1> <tr> <td style="height: 50px;"> <center> <span style="font-size: 14pt;">menu bar</span> </center></td> </tr> <tr> <td> <center> <span style="font-size: 24pt; text-align: center;"> CONTENT </span> </center> </td> </tr> </table> </td> </tr> </table> I'm having trouble controling the width of the first bolded table cell. This happens in IE9. I have it set to 200px, but for some reason it wants to be wider than that (I can tell because the text seems to be centering within the first 200px of its width, but it's not centered within the whole cell). I can fix this by specifying a % width (as in style="width: 25%;"), but I'd prefer to stay away from percentages. I can also fix the problem by specifying the width of the next cell (to its right, in bold above) to some specific value, but then this fixes the size of the whole table, and I would like to keep it variable. Does anyone know why the width likes to increase to more than I specified, and if so, how do I fix this problem? I am having trouble getting an image to line up in a cell so that the text aligns left and the image directly to the right of it to match the other cells. http://smartvending.com/testindex.html Can anyone see what is wrong with the code that is preventing the Coin Counters & Sorters gray box from allowing anything to align closer to the right side of the box matching the other cells? Any help is greatly appreciated! Thanks Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash Hi all, Does anyone have other techniques to mock a padding in IE. I think the new IE ver8+ have padding, but i don't think IE ver6-7 have it. I did not realize it becuase i would always expect my clients to update thier browsers. I also see that there are still a HUGE percentage of people across the world that is still using IE 6. One trick that i use is to create two div for example: HTML Code: <div>
<div style="margin: 10px;">
content
</div>
</div>
this mocks a padding type hope anyone finds this useful Website is Here Ok, so I'm trying to get the text near the picture with the old guy with the roses padded a little. I tried adding "padding: 2px;" to the css but that doesnt work...Can someone look at my css and figure it out? Im stuck! -Thanks Hi All, I have a table under a div tag, and there seems to be some padding that I want to remove. I've set the padding and border-width property to 0px, but there gap's still there. Any suggestions? Thanks, HTML Code: <html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="stuff1" style="background-color: red">Stuff 1</div>
<table style="padding-top: 0; border-top-width: 0px">
<tr><td style="background-color: Black">asd</td></tr>
</table>
</body>
</html>
I run a forum with a small progress bar under the user's avatar showing how far until the user achieves the next rank. The progress bar is simply an image resized based on the % of current posts to posts needed for the next rank. The styling of the progress bar is done entirely inline. <dd style="padding-left:5px; padding-top:2px;"> <div style="text-align:left; display:block; height:3px; width:80px; border:1px solid #DACDA5;"> <div style="height:3px; width:{postrow.RANK_LEVEL_SIZE}px; background: url('images/progress.jpg') no-repeat;"></div> </div> </dd> In Firefox and later versions of IE, the progress bar renders perfectly: In IE6 however, the bar is oversized and the padding is clearly off: Any suggestions on how I might correct the padding for IE6 would be greatly appreciated. I was going to create a seperate set of code showing the progress bar bracketed by <!--[If IE]> <![endif]-->. Hello htmlforums and members, i am having trouble with spacing my text away from my image... Problem: -------------------------------------------------- as you all can see from my picture the text is to close to the image even though i have checked my css and html i cant find the problem line css: PHP Code: #small-content { float:left; width:150px; height:372px; padding:12px 0 0 0; margin:18px 0 0 34px; } #box1 { height:124px; padding:38px 5px 0 5px; margin-bottom:22px; font-size:0.6em; line-height:1.0em; overflow:auto; html: PHP Code: <div id="small-content"> <div id="box1"> <a id="link" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19"> <img style="float: left; padding: 3px 3px 0px 3px;" src="http://i713.photobucket.com/albums/ww140/daveedking/moviezsmall.png" width="25" height="25" /> </a> <p> http://Betyoulikeit.com is on a mission to obtain only the best clean, virus Free Data From around the World... We Do not Host the Data But WE Track Down and Run Security scans on all Files... ___________________________ -Upgrading Everyday- </p> </div> help me find the errors of my ways jajajaja.... -tikki- Hey guys, I want a kind of horizontal border down the side of my comment div, and padding that pushes it away from it. So far, it's worked perfectly in Firefox and Opera, but it goes all haywire in IE. I honestly don't even know what's going on. Here's an example page with the comments: http://automata.firephoenixnet.com/item/85 It looks okay in Firefox, but it looks all weird in IE. Can someone tell me what's causing this? How do I fix this: Please help! Hello, I am using a template to make a webpage. The background for one of the cells is not covering the entire area. I have looked and looked at this and can not figure it out. Therefore I thought I would ask some pros. Thanks!! When you use a <p> tag, there is space between paragraphs. Not sure if there is are automatic margins set for the top and bottom, but that's the way it seems. I'm using <p> tags inside a <table> and I'd like the first paragraph to be tight to the top of the cell but the only way I know how to do it is to remove the <p> tags from the first paragraph. I don't really want to do this as I'd like to have the <p> tags around each paragraph. Here is what I have, which btw does exactly what I want it to but as you can see the first set of <p> tags have been removed. What's a better way to get this effect? Code: <table cellspacing="10"> <tr> <td class="menu" style="background-color:#8C9429"><a href="lab4-2bsolution.html">Prices</a> <p><a href="http://www.antiquity.ac.uk/">Links</a></p></td> <td class="content">Voytokovich Antiquities is the leadinng wholesaler for Asian, Middle Eastern, and European antiquities. Items in our store include masks from a variety of cultures, statues, paintings, and other collectibles. Bring the past into your own homes with the beautiful art pieces offered in our store. Come visit us often to find new and unusual items not found elsewhere <p>The links on the left take you to pricing information and our favorite Web sites. Please take a look at our prices and call or e-mail us for a price quote.</p> <p>Please sent any comments to <a href="mailto:voytkovich@isp.com">voytkovich@isp.com</a>.</p></td> </tr> </table> This is for a class assignment. It calls for a one row, two column borderless table. The first column has two links (one on top of the other), and the second column has three paragraphs of text. Thanks for any suggestions! 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 everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. Hi, Is there anyway to script in such a way that if i never enter a specify to a cell, and give it 100% instead, my cell below will go all the way to the bottom by putting my whole table as 100% too? |--------------------------| | | | 100% | | | |--------------------------| | 50px | | | |--------------------------| something like that. well, it actually work in firefox and not IE, and i cant solve the problem. Thanks in advance. |
|||||||