HTML - Simple Wordpress Table/form Issues With Alignment. Thanks
Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though:
1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces 2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly..... I put my code into this site: http://w3schools.com/html/tryit.asp?...=tryhtml_intro ...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again...... so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem. my site's url is: http://www.allautoinsurance.org my code that I'm editing is on the right sidebar, where the alignment messes up: <div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br /> <br /> <form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post"> <table border="0" cellpadding="0" cellspacing="0" width="225"> <tr> <td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td> </tr> <tr> <td class="background1" valign="middle" height="54" width="153"> <style> .background1 { background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg); background-repeat: no-repeat; } </style> <input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';"> </td> <td> <input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td> </tr> </table> </form> </div> <div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;"> </span></span></span></span><br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br /> </div> <div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br /> <span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years. We respect your privacy, it is just as important to us as it is to you.</span></span></span> .....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again. Best, Kyle P Similar TutorialsHello, I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width. Here is the url: http://rezina.awardspace.com/layout01 I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left. Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that? Thanks. =)) oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how.. G'day guys, I'm having trouble getting my submit button aligned to the right edge of the textarea above it. Could you please tell me what I'm doing wrong, (still a bit raw when it comes to CSS). Here's the link: http://csusap.csu.edu.au/~jpress03/impel/contactus.html Here's my CSS code: Code: #frmwrap { border: 1px dashed #8DBA2C; padding: 10px; width: 350px; } form { font-family: Arial, Sans-serif; } input, textarea { border: 1px solid #gray; font-family: Arial, Sans-serif; } label { display: block; float: left; width: 100px; } form div { margin-top: 3px; } .button { background: #f1f1f1; border: 1px solid gray; } Any help is greatly appreciated. Cheers, Jamie <DIV id=regform style="BOTTOM: 60px; RIGHT: 411px; POSITION: absolute"> <FORM action=sendmail.php method=post>sitename.com<b style="COLOR: black;font-family:arial;font-size:20%;"></b> <BR><INPUT size = 15 name=email> <INPUT type=submit value=Submit></FORM></DIV> This code makes my email box move dependent on the size of your web browser window. How can I stop this ? Really appreciate help here. Thankyou. The Image of the guy on this page ( http://www.kaerumusic.com/2011/06/13/jay-chou/ ) is coded like this: HTML Code: <img src="http://i139.photobucket.com/albums/q303/froggirl003/KM%20Pix/6962_jaychou.jpg" alt="" width="200px" height="280px" align="left" /> But I want the text after the description (the tabs) to be after the picture. How to do this? I am new to the world of web design and i am building http://www.bluephoric.com i am using a bg image on two of the pages and it is throwing off the header alignment. the header jumps around depending what page you are on? i am soo lost as how to fix this. can someone please help thanks Hey guys. Having some issues on both my website and one I did for my Brother, the images not aligning properly. Both are fine in Firefox, but not in IE. www.michaelsingleton.co.uk www.ucba.co.uk If anyone would be so kind as to have a look over the code, it would be much appreciated! Thanks Mike. Hello all, I am having a problem which I can't seem to figure out with an html page. I sliced up a photoshop image then turned it into a web page. I took the html table from the sliced up header, and plugged it into the final web page. It looked like it was aligned properly in Dreamweaver, however when I viewed the webpage there were some alignment issues with the page. Here is the link to the misaligned page: http://test.gridpointpm.com Here is the code for part of the index page that includes the header with the alignment issues: 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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="maxheight.js" type="text/javascript"></script> </head> <body id="page1" onload="new ElementMaxHeight()"> <div class="w"> <div class="site_center"> <div class="site_center1"> <div id="header"> <div class="flash"> <!-- Save for Web Slices (indexheader.psd) --> <table id="Table_01" width="866" height="441" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="13"> <img src="images/index_01.jpg" width="866" height="66" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="66" alt=""></td> </tr> <tr> <td colspan="13"><img src="images/index_02.jpg" width="866" height="206" alt="" /></td> <td> <img src="images/spacerh.gif" width="1" height="206" alt=""></td> </tr> <tr> <td colspan="7" rowspan="2"> <img src="images/index_03.jpg" width="632" height="114" alt=""></td> <td colspan="5"> <img src="images/index_04.jpg" width="157" height="34" alt=""></td> <td rowspan="6"> <img src="images/index_05.jpg" width="77" height="169" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="34" alt=""></td> </tr> <tr> <td colspan="5" rowspan="2"> <img src="images/index_06.jpg" width="157" height="95" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="80" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/index_07.jpg" width="360" height="15" alt=""></td> <td rowspan="3"> <img src="images/index_08.jpg" width="180" height="40" alt=""></td> <td rowspan="4"> <img src="images/index_09.jpg" width="92" height="55" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="15" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/index_10.jpg" width="153" height="40" alt=""></td> <td> <img src="images/index_11.jpg" width="42" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_12.jpg" width="9" height="40" alt=""></td> <td> <img src="images/index_13.jpg" width="58" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_14.jpg" width="98" height="40" alt=""></td> <td rowspan="3"> <img src="images/index_15.jpg" width="31" height="40" alt=""></td> <td> <img src="images/index_16.jpg" width="44" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_17.jpg" width="7" height="40" alt=""></td> <td> <img src="images/index_18.jpg" width="55" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_19.jpg" width="20" height="40" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="16" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_20.jpg" width="42" height="24" alt=""></td> <td rowspan="2"> <img src="images/index_21.jpg" width="58" height="24" alt=""></td> <td rowspan="2"> <img src="images/index_22.jpg" width="44" height="24" alt=""></td> <td rowspan="2"> <img src="images/index_23.jpg" width="55" height="24" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="9" alt=""></td> </tr> <tr> <td> <img src="images/index_24.jpg" width="180" height="15" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="15" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> </div> </div> Any help would be much appreciated. Thanks in advance. hello all, I've recently ventured back into html and css after an extended break and was wondering if I could run this past someone: If you visit www.pcclinic-loanhead.co.uk, when you click on each of the menu links you will find that the page alignments don't seem to synch. What is strange is that the Home and Contact pages share the same alignment whilst Services and Epson share another. I've scanned the HTML and can't see any obvious differences.. there is also a main.css attached to each page. Can anyone with an expert eagle eye take a look at this and a) verify that you see the same problem and b)if possible, suggest a solution? Thanks very much in advance. Sam Hello, quick question here. I'm working on this site: (replace @'s with a's) v@rd@burstyn.com/version2/ The previous designer left it in a bit of a mess, and now that I've made some changes that appear nicely in my Safari browser, the tables are hugely misaligned when I look at a number of the pages in Firefox (i.e., water.html or rites.html). Any advice as to how to get the tables back under control? I've tried for a while but nothing seems to fix it. Thanks very much in advance. Hey everyone! I am completely new to webpage design and have enjoyed some parts of it! I have just been teaching myself as I go and viewing tutorials to learn most of what I have done. Now I am in a jumble and have no idea what to do. I am working ... my main problem is things aligning correctly. I am working on this for a friend and really would like to just be done with it! Please check it out, I attached the pages so maybe you can lead me in the right direction. I believe I have not positioned things correctly. They appear okay sometimes on internet explorer / funcky on firefox / and reallly crazy on safari! Also, the navagation bar is very glitchy, maybe I shouldn't have done a flash navigation? Im going nuts over here! I appreciate all your help. Dear forums! I'm having issue with an padding-problem which i'm not able to solve on my own. I don't understand why my code returns the problems that it does, but it for some reason does. Okay, what is the problem? I've drawn them into this picture; http://i42.tinypic.com/4v1veo.png The problem is that the first navigation-button starts off with about 10-15 pixels, and ends about 3 pixels out of the actual navbar (if you check the borders). I would like to remove this, so that the navbar button covers the whole area of the navbar div / element, without starting too late or ending too late. CSS code can be found here; http://www.myhrensolutions.net/tolkf...sign/index.css the HTML-code can be viewed here; http://www.myhrensolutions.net/tolkfirma/tjenester.html All help is muchly appriciated, thank you! - Scott. Hey guys, I have been designing a portfolio for my photography for some time. There are a few issues I have and I would appreciate your help. http://fjchapman.com/portfolio/portfolio.html 1. If you'll notice, the SWF object won't open. If you go to http://fjchapman.com/portfolio/viewer.swf , the swf is fine. There is just something wrong with my code. 2. Why is it so screwed up in IE? I have been going through my code but I cannot understand why IE is adding some mysterious padding. Help? 3. Alignment of links. While the links are just fillers (concert photography, portraits) for now, how can I have them aligned to the bottom left of my header? Thank you guys so much for your time. Hi, I have a simple alignment question but I can't seen to get it right. I want my menu to sit to the right of my header image; right now it is resting just underneath it. I would really appreciate some help. Thanks! Here is my code: HTML HTML 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type='text/css'> #num {padding-left: 6px;} .img-bot {margin-bottom: 6px; display: block; } </style> <link rel="stylesheet" type="text/css" href="css/style_project_page.css" /> <link rel="stylesheet" type="text/css" href="css/js_style.css" /> <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script> <script type="text/javascript" src="scripts/javascript1.js"></script> <script type="text/javascript" src="scripts/javascript_jquery.js"></script> <script type="text/javascript" src="scripts/rollovers.js"></script> <title>The Lovers Were Ambassadors To Imaginary Utopias</title> <script type='text/javascript'> $(document).ready(function() { $('.pics').cycle({ fx:'fade', speed:'2000', timeout: 0, next:'#next', prev:'#prev'}); }); </script> </head> <body> <div id="container"> <div id="header" style="width:239;"> <!--#include file="includes/header.shtml" --> </div> <div align="left" id="menu" style="width:400px;"> <!--#include file="includes/sidebar2.shtml" --></div> <div id="mainContent" style="margin-top: 20px;"> <div id="slideshowWrap"> <div class="slideshow"> <div class="nav"><a id='prev' href='#'><img border="none" src="images/prev.gif" alt="previous" /></a><span class="hash"> | </span><a id='next' href='#'><img border="none" src="images/next.gif" alt="next" /></a> <span id='num'></span></div> <div class="pics"> <div><img src="images/lovers/lovers_lg.jpg" width="600" height="408" /> <p>The Lovers Were Ambassadors To Imaginary Utopias, 2007, C print</p></div> <div><img src="images/lovers/praise_lg.jpg" width="600" height="402" /> <p>In Praise of Alpine Landscapes, 2008, C print</p></div> <div><img src="images/lovers/mailaise.jpg" width="500" height="337" /> <p>Her Malaise Only Made Her Heart Grow Fonder, 2008, C print</p></div> <div><img src="images/lovers/seduce.jpg" width="500" height="336" /> <p>He Was Always Able To Seduce Them by his Old World Charm, 2008, C print</p></div> <div><img src="images/lovers/adventure.jpg" width="500" height="337" /> <p>The Adventure, 2008, C print</p></div> <div><img src="images/lovers/deja_vu_lg.jpg" width="400" height="576" /> <p>Deja Vu, 2008, C pint</p></div> <div><img src="images/lovers/peggy_350.jpg" width="350" height="497" /> <p>Did You Know That Peggy Guggenheim Owned the Last Private Gondola In Venice?, 2008, C print</p></div> <div><img src="images/lovers/baroque.jpg" width="500" height="331" /> <p>Baroque Elephants Hovered in Unelegant Drawing Rooms, 2008, C print</p></div> <div><img src="images/lovers/splendor.jpg" width="500" height="334" /> <p>Splendour in the Grass, 2007, C print</p></div> <div><img src="images/lovers/surface.jpg" width="500" height="331" /> <p>Surface Tension (Girl and Bush), 2007, C print</p></div> <div><img src="images/lovers/noon.jpg" width="500" height="323" /> <p>At Noon in the Lawn she was thinking about Wallpaper for the Dollhouse, C print</p></div> <div><img src="images/lovers/dreaming.jpg" width="500" height="334" /> <p>Dreaming of Filming Landscapes in Shades Darker than Black, 2007, C print</p></div> <div><img src="images/lovers/ennui_sm.jpg" width="400" height="548" /> <p>Ennui and Sympathy, 2008, C print</p></div> <!-- end .pics --></div> <!-- end .slideshow --></div> <div id="description"><h3>the lovers were ambassadors to imaginary utopias</h3><p> <em>the lovers were ambassadors to imaginary utopias</em> is a series that appropriates a family archive for the trope of cinematic fiction. Inspired by certain images from the archive that recall filmic compositions, the images have been altered by titles or superimpositions to create new readings. Consciously using the nostalgia and romanticism inherent in engaging with this archive, this series attempts to draw out new fictions from documents through playful manipulations. A book on this series is forthcoming. <br /></p></div> <!-- end #slideshowWrap --></div> <!-- end #mainContent --></div> <!-- end #container --></div> </body> </html> CSS HTML Code: @charset "UTF-8"; /* CSS Document */ html, body { height: 100%; } body { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; background-color:#FFFFFF; background-repeat: no-repeat } #container { position: relative; min-height: 100%; height: auto !important; /* For Modern Browsers */ height: 100%; /* For IE */ voice-family: "\"}\""; voice-family: inherit; height: auto; margin:0 auto; margin-left: 10px; margin-top: 10px; width:900px; z-index:20; position:relative; } html, body #container { height: auto; } #header { background: ##FFFFFF; padding: 10px 0 0 22px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } h1 { font-size: 10px; font-weight:normal; color: #cd3226; font-size: 12px; font-style: normal; text-transform: none; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: .75px; } h2 { text-transform:uppercase; font-size:14px; font-style:normal; } h3 { font-size: 9px; font-weight: bold; color: #000000; font-style: normal; text-transform: none; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: .75px; margin-left: 18px; line-height: 15px; } #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: none; /* the background color will be displayed for the length of the content in the column, but no further */ font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 15px; } /* #sidebar1 p { font-size:12px; color: #000000; line-height: 20px; padding: 15px 0px 0px 14px; }*/ .navImg { padding: 0px 0px 0px 15px; margin-top: 15px; } .navImg2 { padding: 15px; display:inline; } #mainContent { margin: 25px 0 0 15px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ } #description { vertical-align:top; width: 200px; } #description p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin-left: 18px; line-height: 15px; color: #666666; } #slideshowWrap { margin-left: 5px; } .worksHeader { color: #cd3226; font-size: 12px; font-style: normal; padding: 0 0 5px 0; text-transform: none; font-family: Verdana, Arial, Helvetica, sans-seri; } .selectedWorksMenu p { color: #acafac; font-size: 12px; font-style: normal; padding: 0 0 2px 0; line-height: 5px; text-transform: none; font-family: Verdana, Arial, Helvetica, sans-seri; } A:link {text-decoration: none; color: #acafac} A:visited {text-decoration: none; color: #acafac} A:active {text-decoration: none} A:hover {text-decoration: none; color: #3d91d1;} HEADER SERVER SIDE INCLUDE HTML Code: <a href="index.shtml"><img src="images/logo_meta2.gif" alt="Nurjahan Akhlaq" border="0" longdesc="images/meta2.gif" width="213" height="29" /></a> MENU SERVER SIDE INCLUDE HTML Code: <div align="left" class="navImg22"><a href="work.shtml" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work','','images/navbar/work_b.jpg',1)"><img src="images/navbar/work.jpg" name="work" width="38" height="18" border="0" id="work" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('commercial','','images/navbar/commercial_b.jpg',1)"><img src="images/navbar/commercial.jpg" name="commercial" width="81" height="18" border="0" id="commercial" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cv','','images/navbar/cv_b.jpg',1)"><img src="images/navbar/cv.jpg" name="cv" width="20" height="18" border="0" id="cv" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/navbar/contact_b.jpg',1)"><img src="images/navbar/contact.jpg" name="contact" width="55" height="18" border="0" id="contact" /></a></div> Hi guys, I'm using a php shopping cart script and having trouble aligning the description text. You can see the page here. http://img18.imageshack.us/img18/6493/cart.jpg Basically, I want the product description to be placed under the product image. Keep in mind, the image you see isn't part of the editable text or html that I can insert to the product page. So when I click to edit the product, all you see is a blank page in which you can enter html or text. I really have no idea of how to do this. I was considering using Code: <br> tags but i'm guessing that would be very sloppy. Any help is appreciated thank you. -Serge Hello Experts, I am trying to display the attached table in my page. the problem I am facing is alignment of column values as Right justified. As you can see in the snap shot, The numbers inside the column arent aligned perfectly... If it possible to align the numbers and right justified (Not talking about right aligned with in the cell.) View problem site here. (A quick establishment of my skills: I learned HTML backwards. I decide what I want to do and learn how to do it, so my understanding of how the different codes interact is basic.) What I want to remedy is the set of horizontal lines extending across the page. Is there any way to have the lines touch the sides (as seen here)? The lines are contained inside a table, since other methods (like z-index) would not allow the horizontal lines to remain aligned with the rest of the layout. I have the table aligned with div layers. Here's the relevant portion of code: HTML Code: <div id="layout" style="top: 0px; margin-left: 0px"> Hopefully I'm not chasing a pink elephant with this. Thank you all for your help in advance. http://pastebin.com/4wByQNZQ How would i get the Ref. number 7.2 aligned with Nuclear Customer Quality Assurance... Also, under the human resources tables, The alignment under Ref. is not aligning properly with Hiring Process. What is the procedure here? Thanks, Rukus ok i am making a car club site and im having problems with my tables . i have a couple tables within tables and i want the table that are within the tables to be aligned at the top. some of the tables are being aligned in the middle instead of the top . how can i fix this so all the tables are aligned at the top? This works in FF but in IE7 the last table is aligned to the left of the next table instead of underneath it? HTML Code: ' <table width="800" border="0"> <tr> <td width="400" align="center" class="style4"> <p> </p> <p class="style3">How can we help? </p></td> <td width="400" align="center" class="style4"> <p> </p> <p class="style3"> Services </p> </td> </tr> </table> <hr color="#000000" /> <table align="left" cellpadding="0"width="400" border="0"> <tr> <td height="472" background="leftservbg.gif"><blockquote> <p align="left"> </p> <p align ="left" fo>Granny's Helping Hands provides competent relief for care givers. We can also help with children and new mothers with baby care. Before we assign a Nureses Aide to you, a representative from our office may visit you to develop a plan of care. This assessment helps us choose the best companion or aide to meet your needs. </p> <p align="left">We offer a variety of billing options to our clients. Most insurances are welcome. We are also a contracted participant of the local Area Agency for the Aging's Waiver and Options programs. In addition we are proud participants of Commcare, OBRA, and Independence Waivers. Our services are avialble from 1 1/2 to 24 hours a day, 7 days a week.</p> <p align="left"> </p> <p align="left"> </p> </td> </tr> </table> <table align="left" cellpadding=""width="400" border="0"> <tr> <td width ="95"></td> <td width="190" height="236" valign="top" background="rgtservbg.gif" > <p class="space"> </p> <p align="center"><strong> Personal Care</strong></p> <blockquote> <p align="left" >Granny's Helping Hands provides competent relief for care givers</p></td> <td width ="95"></td> </tr> </table> <table align="left" cellpadding=""width="400" border="0"> <tr > <td background="rgtservbg.gif" height="236" width="190" > <p> </p> <p>Granny's Helping Hands provides competent relief for care givers</p></td> <td background="rgtservbg.gif" width="190" > <p> </p> <p>Granny's Helping Hands provides competent relief for care givers</p></td> </tr> </table> |