|
HTML - 3 Tables, Messed Up Spacing
I am working on a site, and want to make 3 tables (one on top of another). Here is an image depicting what I want to do: Layout. I made the layout without 3 tables, just one, and it works fine. Here it is: 1 Table. But when I make three tables, like the picture shows, it messes all the spacing up. 3 Tables. I am doing all of this because I want to make a form and to make a form all of the fields need to be in one table. Here is how far I got with the form: 3 Tables and Form. Any help would be greatly appreciated.
Thanks, Matt **Also, the site looks better in firefox than IE, so view it in IE to see the real problems. Similar TutorialsHey guys, Im new on here but i need some help with a table. http://er0r.freehostia.com/test.html -See how in the content section its writing is about half way down the page? How can i make it at the top? Quote: The coding : HTML Code: <center> <table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"> <tr height="50"><td colspan="2" bgcolor="white"> <table title="Banner" id="banner" border="0"> <img src="http://er0r.freehostia.com/er0rbannah.jpg"> </table> </td></tr> <tr height="200"><td bgcolor="white"> <table id="navigation" title="Navigation" border="0"> <a href="http://er0r.freehostia.com/about.html"> <img src="http://er0r.freehostia.com/about.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/baits.html"> <img src="http://er0r.freehostia.com/baits.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/files.html"> <img src="http://er0r.freehostia.com/Files.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/tutorials.html"> <img src="http://er0r.freehostia.com/tutorials.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/Guestbook.html"> <img src="http://er0r.freehostia.com/Guestbook.jpg" border="0"> </table> </td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> </center> Thanks er0r Problem Solved, Thanks everyone Hey, How can I get rid of the space in between these 2 tables (see image), I don't know whether it's spacing or padding or something else. I've tried a few things but they didn't work. Any suggestions? hi guys, how do i move certain things left or right using tables and cell spacing. this is the code im using so far but i cant see how i can position these components left or right horizontally. - <style type="text/css"> ul { margin: 10px; padding:70px 0px; list-style-type:none; text-align:right; } ul li { display: inline; margin:20 20px; } ul a { padding:4px 10px; font-family:'trebuchet ms',sans-serif; font-size:12px; color:#000; text-decoration:none; } ul a:hover { border-color:#000; color:#fff; background-color:#c6c5c4; } </style> thanks I hand coded my website myself, but whilst working perfectly in IE, there are some problems when viewing it using Firefox. Specifically, the table rows have double-spacings (scroll down to the 'Education' section he www.lombrozo.co.uk/resume.html), and also table borders have a 3D look (a black border to emphasise the shadow), again, this shadow is not visible in IE... Any ideas anyone? Any help would be most appreciated! when you the page i am working on in IE it does not line up the div tag correctly, p.s. the background is black for debuging reasons http://userpages.umbc.edu/~zane1/temp/insurethisnow/ Code: <p><center><table width="50%" bgcolor="black" cellpadding="20px"><tr><td><a href="index.html">Home</a></td><td><a href="imglist.html">Img list</a></td></tr><td><a href="about.html">About</a></td></tr></table></center></p> in ie the center works fine, but in firefox its almost 2 inches to the left of being center, why would that be? I have created a website which works perfectly in IE7/8 and FF but its all messed up in IE6. Please someone help me fix it. HTML Code: http://www.paknus.com/nus Hello! I have a problem with my webpage, only occuring when I am surfing with Firefox. I have an identic code on two different pages, but on one of them the letters look normal, on the other one they are suddenly messed up. At the pictures it can be seen. I have no clue why it is happening... can anyone help? The text is good at for example: http://www.hungarybudapestguide.com/restaurants/ - but if I go in to read about whatever restaurant later described the texts are messed up in Firefox as seen on the picture. How come? IE is working fine for once, but when I view it in FF there are the bullets for the <li> showing up. How can I get rid of them ? Html: 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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="Keywords" content="beveled, glass, mirror, beveling, bevel, company, custom, design, shaped, shapes, curved, curves, round, polished, edgework, business, small, residential glass,
etched glass, plate glass, tempered glass, tempered, replacement, replacement windows, remodel, window screens, screens, door screens, mirror, mirrors, custom glass and mirror,
custom, Milford CT., ct., Milford,">
<title>Custom Glasss & Mirror</title>
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
</head>
<body>
<h5>Visit Our Newley Remodeled Showroom At 807 Boston Post Rd. Milford, Ct.</h5>
<div id="container">
<!-- Start of Page Header -->
<div id="header_container">
<div id="page_header">
<div id="header_company">
<img src="images/header6.jpg" width="500" height="200">
</div>
<div id="header_menu">
<ul>
<li><a href="#" /><span>Home</span></a></li>
<li><a href="about.html" /><span>About Us</span></a></li>
<!--li><a href="service.html/"><span>Services</span></a></li-->
<li><a href="gallery1.html" /><span>Photo Gallery</span></a></li>
<li><a href="contact.html " /><span>Contacts</span></a></li>
</ul>
</div>
<div id="header_welcome">
<div id="welcome_text">
</div>
</div>
</div>
</div>
<!-- End of Page Header -->
<!-- Start of Left Sidebar -->
<div id="left_sidebar">
<!-- Start of Latest News -->
<div class="box_container">
<div id="news">
<h4>
Glass
</h4>
We have a wide range of choices when it comes to glass. Whether it's for a table top, cabinet door or replaceing your picture window,
we have a piece of glass for you.
<div class="link-more">
<a href="glass.html" />...more</a>
</div>
<h4>
Window & Door Screens
</h4>
We can replace any size window or door screen. Do you have a damaged frame ? Bring it in, we can make you a new one.
We even have paw proof screens .
<div class="link-more">
<a href="screen.html"/>...more</a>
</div>
<h4>Home Improvment</h4>
We now offer full home improvements. From kitchens and bathrooms, to a full addition.
<div class="link-more">
</div>
<h4>Shower & Tub Enclosures</h4>
We carry a full line of standard and custom shower and tub enclosures.
<div class="link-more">
<a href="enclosures.html"/>...more</a>
</div>
</div>
<div class="clearthis"> </div>
</div>
</div>
<!-- End of Latest News -->
<!-- End of Left Sidebar -->
<!-- Start of Main Content Area -->
<div id="maincontent_container">
<div id="maincontent">
<div id="maincontent_top">
<!-- Start of How We Started -->
<div id="started_container">
<div id="started">
<center>
<table border="0" width="100%">
<tr>
<td><h5> Free Estimates </h5></td>
<td> </td>
<td><h5> Fully Licenced and Insured</h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
* Beveled Glass & Mirror<br>
*Table Tops<br>
*Plate Glass<br>
*Plaxi Glass<br>
*Patterned Glass<br>
*Thermo Units<br>
*Storm Doors & Windows<br>
*Storm Door & Window Screen Repair<br>
*Vinyl & Wood Replacement Windows<br>
*Shower & Tub Enclosures<br>
*Home Improvment<br>
*Store Fronts<br>
... and much, much, more
</div>
</div>
<!-- End of How We Started -->
<div id="right_container">
<!-- Start of Get Special Offer -->
<div id="offer_container">
<div id="offer">
We carry a complete line of cleaners to keep your
glass, mirrors and shower enclosures as clean as the first day we installed them.
<p>
<center>
<img src="images/products_ava.jpg">
<p>
<a href="cleaners.html"/>...More</a>
</div>
</div>
</div>
<div class="clearthis"> </div>
<!-- End of Get Special Offer -->
<!--Start of repair-->
<div id="repair">
<div class="link-more">
<a href="screen.html" /></a>
</div>
</div>
<div class="clearthis"> </div>
<!-- End of We Also Do Repairing -->
</div>
<div class="clearthis"> </div>
</div>
<!-- Start of Featured Products -->
<div id="featured_container">
<div id="featured">
<center>
<!--a href="gallery1.html">Photo Gallery Preview</a-->
<div id="featured_products">
<ul>
<li><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/brassline_b-1669-lg.jpg" height="100" width="90" alt="" /></li>
<li><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/brassline_b-1631-b-lg.jpg" height="100" width="90" alt="" /></li>
<li><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/brassline_b-158-lg.jpg" height="100" width="90" alt="" /></li>
<li class="end"><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/mirror3.jpg" height="100" width="90" alt="" /></li>
</ul>
<div class="clearthis"> </div>
</div>
<div class="clearthis"> </div>
</div>
</div>
<div class="clearthis"> </div>
<!-- End of Featured Products-->
</div>
<!-- End of Main Content Area -->
<!-- Start of Page Footer -->
<div id="page_footer">
Copyright 2007 <a href="http://wrathchild.edit-strike.nl" />Wrathchild Productions</a>
</div>
<!-- End of Page Footer -->
<div class="clearthis"> </div>
</body>
</html>
My Css is in the post below. All of a sudden I can't put in an affiliate link that contain an image. There's no problem with a text link. I've tried all kinds of links but none of them work. Every time I put one in a "img class with 4 random 20 character sets jumps in and the link doesn't work. Here is what I mean I put this in <a href="http://www.tkqlhce.com/click-4072394-10684742" target="_top"> <img src="http://www.awltovhc.com/image-4072394-10684742" border="0" alt="$5.99 Flat Shipping up to 15lbs" width="120" height="90" /></a> and this comes out <a href="http://www.tkqlhce.com/click-4072394-10684742" target="_top"> <img class=" gyucpbdejrxphzavvzpr gyucpbdejrxphzavvzpr" src="http://www.awltovhc.com/image-4072394-10684742" border="0" alt="$5.99 Flat Shipping up to 15lbs" width="120" height="90" /></a> I imagine it's something I have done as I seem to be able to mess up just about everything in my computer sooner or later. I sure would appreciate any help I can get on this as I've been playing with it for the past week. Thank you, donrock Hey, Well, I made this webpage, and when I preview in IE its ok, but in opera theres something messed up. I use table (I know thats bad, but I'v got it to work before), and I use css to script hoover images(buttons) in the menu and stuff. When I preview these in Opera, it shows both the ordinary image, and the hoover image partially overlapping and making the table bigger and messe sup everything. Any ideas? I really hope someone can help me with this. About 2 months ago all my websites plummeted in the search engines. I found out later that i had a permalink structure problem which i solved by disabling a certain plugin. After that, i thought my rankings would have returned but unfortunately they didn't. With no clue as to where to go from there, i contemplated deleting my 5 websites and starting again from scratch. Then i noticed my keywords showing up in Google were messed up. All of my posts on all websites had the "website title" tacked onto the end of each post. Example: I have a post called "Natural Sleeping Remedies" When this post shows up in the search engines it looks like this... Natural Sleeping RemediesNatural Health Remedies As you can see, the title of my website homepage (Natural Health Remedies) is tacked onto the end of my post title. This happens with every post, on all websites. No matter how much i changed the post title, nothing helped. I thought that if i changed the theme, it would solve the problem. So, i tried theme after theme and finally came across one that worked. But, the big problem now is that i can only use one theme for all my sites which is just not appropriate for some sites. Every time i want to use a new theme, the homepage title always gets tacked onto every post, unless i use the same theme all the time. Has anyone had this problem before? Any ideas how to fix this? At the moment all is fine because i use this one theme, but i really don't like it. P.S. I created another website last week and the same problem is always there. Is there a php file or html file that i can look at to determine what is happening. I'm a newb when it comes to this sort of stuff. Feeling dejected at the moment. Thanks in advance for any replies. got a very basic page as this stuff is super new to me, not sure where to put or ask about this ... when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know -->loaded page up temporarily http://www.legendofthegknight.com/test/index.html Code: <p><center><table width="50%" bgcolor="black" cellpadding="20px"><tr><td><a href="index.html">Home</a></td><td><a href="imglist.html">Img list</a></td></tr><td><a href="about.html">About</a></td></tr></table></center></p> in ie the center works fine, but in firefox its almost 2 inches to the left of being center, why would that be? ive tried to change the precent and all, but that doesnt do a thing. I have created an image in Photoshop and sliced it to create different links as a banner. When I opened the html file on my computer it works and the links all work. The part that doesn't work is when I changed the file locations to the location on photobucket. Somewhere I have something wrong. If anyone can direct me on what I need to correct I would greatly appreciate it. I feel like I am close but something is off. This is the image itself http://www.shopmemento.com/images/me...gemap4copy.jpg This is where I got the directions of how to do a multiple link image with image slicing: http://www.createblog.com/tutorials/...l.php?id=13888 HTML Code: <HTML> <HEAD> <TITLE>memento image slice</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 (memento image slice.psd) --> <TABLE WIDTH=338 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=8> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif" border="0" alt="Photobucket"></a> <WIDTH=338 HEIGHT=131 ALT=""></TD> </TR> <TR> <TD> <A HREF="http://www.shopmemento.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Website'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=46 BORDER=0 ALT="Memento's Website"></A></TD> <TD ROWSPAN=2> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_03.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_03.gif" border="0" alt="Photobucket"></a> <WIDTH=15 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.blogspot.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Blog'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_04.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_04.gif" border="0" alt="Photobucket"></a> ><WIDTH=69 HEIGHT=46 BORDER=0 ALT="Memento's Blog"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_05.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_05.gif" border="0" alt="Photobucket"></a> <WIDTH=18 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.etsy.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Etsy Shop'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_06.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_06.gif" border="0" alt="Photobucket"></a> <WIDTH=68 HEIGHT=46 BORDER=0 ALT="Memento's Etsy Shop"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_07.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_07.gif" border="0" alt="Photobucket"></a> <WIDTH=13 HEIGHT=56 ALT=""></TD> <TD> <A HREF="mailto:terri@shopmemento.com " ONMOUSEOVER="window.status='Email Memento'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_08.jpg" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_08.jpg" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=46 BORDER=0 ALT="Email Memento"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_09.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_09.gif" border="0" alt="Photobucket"></a> <WIDTH=8 HEIGHT=56 ALT=""></TD> </TR> <TR> <TD> <IMG SRC<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_10.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_10.gif" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_11.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_11.gif" border="0" alt="Photobucket"></a> <WIDTH=69 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a <WIDTH=68 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=10 ALT=""></TD> </TR> </TABLE> <!-- End ImageReady Slices --> </BODY> </HTML> Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Ok so I'm learning along the way by playing around with what my web designer started. I'm having trouble working out what part of the html does the spacing between my text and the input box. Here's what I'm stuck at: You can see how where it says 'click for more fonts' the box isn't in line with the others. Any help would be much appreciated.... I'm starting to go cross-eyed lol. Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic: I'm wanting to move it up some, but I don't know how, I have been trying for a long time though. Here is the HTML Code: Code: <div class="box2 margin1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <h3><span><span>Partners</span></span></h3> <div class="indent2"> <center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center> <center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center> <div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div> </div> </div> </div> </div> </div> </div> </div> </div> Here is the CSS: Code: .box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;}
.box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;}
.box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;}
.box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;}
.box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;}
.box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;}
.box2 .indent {padding:4px 6px 6px 4px;}
.box2 .indent2 {padding:15px 12px 0px 6px;}
Any help will be greatly appreciated. Thank you. |
|||||||