|
HTML - Cant Center A Table In The Body
this table wont center in IE but its center in firefox can anyone help me with this?
http://lilions.com/contact/ I cant fit the hole code so please view page source to see if something offsetting it somewhere else on the page thanks Code: ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/home">HOME</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/news"><span>NEWS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/lnews">LATEST NEWS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/pnews">PAST NEWS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">CALANDER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/team"><span>TEAM</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/roster">ROSTER</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachingstaff">COACHING STAFF</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontoffice">FRONT OFFICE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/fieldinfo">FIELD INFO</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/gameday"><span>GAMEDAY</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/schedule">SCHEDULE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/standings">STANDINGS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/statistics">STATISTICS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/history">HISTORY</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/fanzone"><span>FANZONE</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/teamstore">TEAM STORE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/gallery">GALLERY</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/tickets">TICKETS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">EVENTS CALANDER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/sponsorship">SPONSORSHIP</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>APPLICATIONS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontofficeapp" target="_blank">FRONT OFFICE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachapp" target="_blank">COACH</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/playerapp" target="_blank">PLAYER</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/dancerapp" target="_blank">DANCER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/contact">CONTACT US</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://fivestarfootballleague.com/" target="_blank">FSFL</a></li>
</ul>
</body>
<br></br><br></br>
<center>
<img src="http://lilions.com/home/images/tpc.jpg"></center><center><img src="http://lilions.com/home/images/cnttp.jpg"></center><table style="border-collapse: collapse;" width=1000 height=450>
<td id="center-mid">
</center><center><font color="#FFFFFF"><table border="3" bordercolor="FFFFFF" width="630" bgcolor="000000"></center></br><td><p><i><b><center><font color="#FFFF00">donbonacorsa@yahoo.com <donbonacorsa@yahoo.com></center></b></i></p></font>
<form action="index.php" method="post"><table width="630" border="0" cellspacing="2" cellpadding="0">
<h4>
<center>
<p>Have questions or comments? Please feel free to fill in the form below to send me an email.</p>
</center>
</h4>
<center></h4><div id="content">
<p><tr align="center"><center>
<td width="29%" class="bodytext">Your Name (required):</td></tr>
</center>
<tr align="center"><center>
<td width="71%"><input name="name" type="text" id="name" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Your Email (required)</td></tr>
</center>
<tr align="center"><center>
<td><input name="email" type="text" id="email" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Subject</td></tr>
</center>
<tr align="center"><center>
<td><input name="subject" type="text" id="subject" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Comment:</td></tr>
</center>
<tr align="center"><center>
<td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext"> </td></tr>
</center>
<tr><center>
<td align="center" valign="top"><input type="submit" name="Submit" value="Send"></td></tr>
</center>
</p></table></tr></td></form></td>
</table>
</div>
</b>
</h3>
</body>
<center>
<img src="http://lilions.com/home/images/cntbtm.jpg"></center>
<br></br>
<center>
<table valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="credit_white1"><font color="#ffffff"><img src="images/spacer.gif" width="30" height="1">Copyright 2011, MajorKillenDesign.com, Inc. All Rights Reserved.</font><br><br></td></center>
</tr>
</table>
<center>
<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2">
<tr>
<td width="800" height="2" bgcolor="#D4D601"></td>
</tr>
</table>
<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="15">
<tr>
<td width="800" height="15" class="subMenu"><p style="margin-left: 25px; margin-right: 0px; margin-top: 3px; margin-bottom: 5px" align="right">
<i> <a href="http://lilions.com/contact/">
Contact The Lions</a> </i>
| <a href="http://majorkillendesign.com/">
Site & Design Sales</a> </p></td>
</tr>
</table>
<script language="JavaScript">
if (document.location.toString().indexOf("home") == -1) {
document.write('<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2"><tr><td width="800" height="2" bgcolor="#D4D601"></td></tr></table>')
}
</script>
</tr>
</table></center>
</html>
Similar TutorialsHi...I'm not new to html but i've come across something i cant get to work. I have created a page with a background image to repeat-x and it look great. Next I want to place a three column table at the top and over this repeated background image. The problem is that the table get placed below the 'background_img.jpg'. So there is a large gap between the top of the page and the table. How do I get the table to be placed over or on top of the repeated background img? Thanks Hi all! I used to use <div align="center"> (see below) and since I've started using XHTML 1.0 Transitional, align="center" has been depreciated. I have tried using css margin: 0 auto; and margin-left: auto; margin-right: auto; and nothing is centering my table on a form. I have to use tables since its required on my project and there are more stuff inside the tables then my example below. But css for the div should work.. any thoughts, helps, would be greatly appreciated. Thanks! s-one <!?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?> <!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> </head> <body> <div align="center"> <table><tr><td><img src="images/photo.png"></td></tr></table> </div> </body> </html> Does anyone know why div align="center" works in firefox only but not ie when centering a table? On my page at http://www.sticksite.com/birds/ the large table with 44 thumbnail pictures, is no longer centered in Firefox, but it is centered in Internet Explorer. I even tried using the <center> tag but that did not center it either. Is there a simple solution? Hello, I have been fighting with this for several months. I am trying to get this to work across the board with IE and FF and was hoping I could get some help that I might be over looking. Please bare with me on this as it is detailed. Ok, this is a page that outputs Christmas displays users submit. Here is a sample page. http://www.mesquitechristmas.com/loc...y.php?id=%2021 Yes this page is XHTML Valid before we even start. Only problem I have in FF is that the Google Map will not center, but in IE6,7 it does. I have a div class assigned to it just to center it. Now I can assign a div align="center" but that will not validate. Code: div.c1 {text-align: center}
Other then that it renders and looks perfect in FF as usual because of it being a superior browser. Now in to my IE problems.... First, in both IE 6,7 if you look at the table that says "About this display..." you will notice a red line dividing each row. In FF this looks fine and works. But in IE if their is not content the line does not show in the entire row. What could be causing this? I would like this line to show regardless if there is content or not like it shows in FF. Lastly in IE6 only Below the "return to list" button their is a HUGE gap that does not show up in IE7 or FF. I have been trying to fix this for months and can not get it right. Any idea why this is happening? I am running out of time and could greatly use the help and suggestions. If you need me to post some code for these isolated problems I would be glad to. Otherwise you can just view source of the code to see it. -Thanks <table> <tr align="center"> <td align="justify" <script src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=510467&cwwidth=300&cwheight=250&cwpnet=1 &cwtagid=41771"></script> </td></tr></table> this can be seen on my site englishtrunkshowco ---click any category on home page, then scroll down and you will see the misalignment of the ad Quote: <table style="height: 196px;" border="0" width="480"> <tbody> <tr> <th><img src="http://img824.imageshack.us/img824/2089/thumb115.jpg" border="0" /> <br /></th> <th><img src="http://img185.imageshack.us/img185/7507/thumb116.jpg" border="0" /> <br /></th> <th><img src="http://img545.imageshack.us/img545/5185/thumb130.jpg" border="o" /> </th> </tr> <tr> <td><strong>Κομπιούτερ Γραφείου</strong></td> <td><strong>Κομπιούτερ Γραφείου</strong></td> <td><strong>Ευρετήριο Τηλεφώνου Mini</strong></td> </tr> <tr> <td>Κωδ: 115</td> <td>Kωδ: 116</td> <td>Κωδ: 130</td> </tr> </tbody> </table> <table style="height: 196px;" border="0" width="480"> <tbody> <tr> <th><img src="http://img580.imageshack.us/img580/7339/thumb132.jpg" border="0" /></th> <th><img src="http://img824.imageshack.us/img824/6352/thumb133.jpg" border="0" /></th> <th><img src="http://img837.imageshack.us/img837/53/thumb141.jpg" border="o" /> </th> </tr> <tr> <td> <p><strong>Κύβος - Organizer </strong></p> <p><strong>γραφείου</strong></p> </td> <td><strong>Βάση ημερολογίου</strong></td> <td><strong>Ημερολόγιο Τοίχου</strong></td> </tr> <tr> <td>Κωδ: 132</td> <td>Kωδ: 133</td> <td>Κωδ: 141</td> </tr> </tbody> </table> <table style="height: 196px;" border="0" width="480"> <tbody> <tr> <th><img src="http://img835.imageshack.us/img835/227/thumb141a.jpg" border="0" /></th> <th><img src="http://img841.imageshack.us/img841/7104/thumb142.jpg" border="0" /></th> <th><img src="http://img295.imageshack.us/img295/4448/thumb189.jpg" border="o" /> </th> </tr> <tr> <td> <p><strong>Ημερολόγιο Τοίχου</strong></p> </td> <td><strong>Επιτραπέζιο Ημερολόγιο</strong></td> <td><strong>Χάρακας Πλαστικός</strong></td> </tr> <tr> <td>Κωδ: 141Α</td> <td>Kωδ: 142</td> <td>Κωδ: 189</td> </tr> </tbody> </table> If you test this text to w3schools you ll see that my rows is not center. Can anybody help me to do that right?? Code: <td class="row5" style="text-align:center;" width="50"> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">2</b> <span style="color:#c9c5be;">topics</span> <br /> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">1</b> <span style="color:#c9c5be;">posts</span><br /><br /> </td> I'm not sure how it's looking in IE, but in Firefox all the text in this table cell is aligned to the right. I can't figure out why. Row5 only adds a background color and nothing else. http://sa.zrkonium.net/ It's visible here ^ The grey topics/posts text is aligned to the right in Firefox rather than in the center where it should be. I can't figure out why it's not aligning right. Any help appreciated. Hi, I can't seem to figure out how to have a centered background image in a table in addition to its background color. Here's the site in question: http://deliciousintlbakery.com/test.htm I want to keep the red background in the table, but I also want an image centered behind the text (the address of the cafe). Here's the code: <table width=70% cellpadding="0" cellspacing="0" border=1 align="center" style="font-family: Arial ; font-size: 9pt;" bordercolor="#FFCC00"> <tr><td> <table width=100% cellpadding="0" cellspacing="0" bgcolor="8D2B25" height="250" border="0" style="font-family: Copperplate Gothic Bold ; font-size: 9pt;"> </td></tr> Thanks! Hi, How to center a html table in a page. I want the table should remain in center even the browser is re-sized. I want to code to work in all browsers.. how can I do this? thanks I apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! I need a three column table in which the center column will have multiple rows, the number will vary. For exampe, this works. I need a third column that will look like the first, just one row corresponding to the seven rows in the second column. Code: <table border=1> <tbody> <tr><td rowspan=8>Dry skin</td></tr> <tr><td>46.0 </td></tr> <tr><td>9.0 </td></tr> <tr><td>35.3 </td></tr> <tr><td>12.5 </td></tr> <tr><td>20.8 </td></tr> <tr><td>27.0 </td></tr> <tr><td>4.0 </td></tr> </tbody> </table> If I do this Code: <table border=1> <tbody> <tr><td rowspan=8>Dry skin</td></tr> <tr><td>46.0 </td></tr> <tr><td>9.0 </td></tr> <tr><td>35.3 </td></tr> <tr><td>12.5 </td></tr> <tr><td>20.8 </td></tr> <tr><td>27.0 </td></tr> <tr><td>4.0 </td></tr> <tr><td>third column, same row? </td></tr> </tbody> </table> another row is started. I just want third column that has one row corresponding, correlated with the seven rows in the second column. I don't know how to do that. Hello to all Forum members. It's my first post here. I have a problem on my site using FF 2.0 and opera. When you open http://review4dummies.com/test/index.php you see it has horizontal alignment = center, but when you click on link About Us the site will move about 10 pixels to the right and of course its centered but... huh not exactly. When you browse and click on link Contact Us its back to normal. Clicking on report-a-bug does not move site too. I was checking whole code and noticed that if i add some paragraphs and blank tables to the about-us.php file everything seems to be ok. This is driving me nuts, any help will be apreciated. PS: in ie6 everyting seems to be ok. PS2: I also noticed this bug on some sites: eg. home.pl when you click on menulink "Praca" it will move horizontaly too. eg2. nazwa.pl when you click on menulink "KONTAKT" it will move too. Anybody? Best Regards! Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. Hi, Yesterday, I wasted a couple hours trying to center the Paypal button inside a form inside a table. You can see it near the bottom of this page: http://www.jesussaidfollowme.org/new...t-theology.htm Do you know how to solve my puzzle? Thank you, Greg 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. I'm new at html and dont understand why you need to use <body> what is the difference between <h1> Title </h1> <p> paragraph </p> and <h1> title </h1> <body <p> paragraph </p> </body> ok i was wondering whats wrong with my background could some1 tell me if thiers something wrong with my code, the problem i have is the background appearing i do everything it says to but it still dosent work <html xmlns="http.thewaywardgamer.com> <head> <title>the way of the gamer</title> </head><body> <html> <body background="image.jpg"> <p align="center"><font size="50"><font color="#cccc80"><b>WELCOME TO GAMERWORLD</b> </font></p> <p> </body> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> <FORM ACTION="../cgi-bin/redirect.pl" METHOD=POST onSubmit="return dropdown(this.gourl)"> <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="http://www.purezc.com" >purezc <OPTION VALUE="http://www.youtube.com" >youtube <OPTION VALUE="http://www.miniclips.com" >miniclips <option VALUE="file:///C:/Documents%20and%20Settings/Owner/Desktop/games.html">bunker </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <p> <p align="left"><font size="4"><font color="#660066">hello all and welcome to the world of gamers.where nintendo is our god.</font></P> <MULTICOL COLS=3> <UL> <lI><A HREF="links.html">Click Here for My Favorite Links</A> <li><A HREF="games.html">Click Here for Flash Game bunker</a> </UL> </MULTICOL> <br> <br> <br> <br> <body> Our address by FAN mail:<P> <ADDRESS> p.o box 183,perkinsvile vermont </ADDRESS> </body> <body> <!-- Begin Google Search --> <input type="hidden" name="cx" value="partner-pub-6155056320102818mfj3qxh2mm" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="google search" /> <!--img src="/acustom/google.gif" border="0" alt="Google" style="vertical-align:top;" /--> <!-- END Google Search --> </html Hi, I noticed that if you insert meta tags into html somewhere in the body tags, the browser still recognizes them. I know its bad practice, but do search engines frown on putting meta tags in the body INSTEAD of the head? Cheers, Doug |
|||||||