HTML - Table Border In Firefox
Hi guys
Attached is an image of the problem I'm having where in Firefox my table borders are not displaying correctly. I've coded using standard html as follows: Code: <table width=100% cellspacing="0" cellpadding="5" bgcolor="ffffff" border="1px" bordercolor="C0CFE2"> Any Ideas? The one on the left is the Firefox version. Similar Tutorialshi guys. I am trying to get rounded edges to appear around my tables when displayed in Firefox. However, while it does display rounded edges, it also displays an angular border, which takes whatever colour the text has. here is the code. Quote: <!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" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <style type="text/css"> <!-- #MainCell { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; width: 800px; background-color: #FFF; height: 1000px; } .whitebackground { } #LogoCell { background-color: #006; height: 15px; } #LinksCell { background-color: transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; width: 77%; } #ContentCells { text-align: center; } #BottomLinksCell { } table { -moz-border-radius: 30px; border: #cc2800; } body { background-color: #006; color: #0F0; border: transparent; } .TableBackground { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } --> </style> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link rel="stylesheet" href="../ajxmenu.css" type="text/css" /> <script src="../ajxmenu.js" type="text/javascript"></script> </head> <body> <table width="100%" border="1" align="center" id="MainCell"> <tr> <th scope="row"><table width="100%" border="1" id="LogoCell"> <tr> <th class="whitebackground" scope="row">LogoCell - I'll see if my guy will do something for you or if you can get a mate to, if not I'd go to a professional</th> </tr> </table> <table width="78%" border="1" align="center" id="LinksCell"> <tr> <th scope="row"><div class="AJXCSSMenueDFaTFD"><!-- AJXFILE:../ajxmenu.css --> <div class="ajxmw1"> <div class="ajxmw2"> <ul> <li><a href="#"><b>Home</b></a></li> <li><a class="ajxsub" href="#"><b>Gallery</b></a> <ul> <li class="sfirst slast"><a href="#">Slideshow</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>Corporate Work</b></a> <ul> <li class="sfirst slast"><a href="#">Testimonials</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>About Us</b></a> <ul> <li class="sfirst"><a href="#">Qualifications</a></li> <li class="slast"><a href="#">Business Associates</a></li> </ul> </li> <li class="tlast"><a href="#"><b>Contact Us</b></a></li> </ul> </div> </div> <br /> </div> </th> </tr> </table> <!-- TemplateBeginEditable name="ContentRegion" --> <table width="68%" border="1" align="center" id="ContentCells"> <tr> <th width="50%" height="113" scope="row"><p> </p></th> <td width="50%"> </td> </tr> <tr> <th height="135" scope="row"> </th> <td> </td> </tr> </table> <!-- TemplateEndEditable --> <table width="100%" border="1" id="BottomLinksCell"> <tr> <th scope="row">BottomLinksCell</th> </tr> </table> </th> </tr> </table> </body> </html> Can anyone tell me how I can get rid of the angular border, and just be left with the rounded one? Thanks! For some reason my site looks just fine in Internet Explorer, but in Firefox the border colors are off. Here is my site: www.allformommies.com You can see the first table has the correct color border (light purple) but the others all appear in black. I know this is a goof on my part, but can't for the life of me figure it out. If anyone could help me figure out how to get all of the table borders light purple, I'd be very appreciative. Thanks! Hi, I'm having an issue with Firefox 3 that is stumping me. My site has a SWF centered in the middle of my page which is embedded with swfobject v2.1. When the page loads my SWF overlaps the right-sided border of the div I've setup in Firefox, and from what I can tell, Firefox sets the border property on the inside of the div, whereas all the other browsers set the border property on the outside of the div. I've read up on the box model problem, but seeing as how every other browser(IE, Opera, Safari, Chrome etc.) displays the page properly, I'm hitting the wall here. I don't know if swfojbect is causing the problem, or if it's something in my code, because up until I embedded the flash, I'm pretty sure everything was aligned. Anyways, any help would be greatly appreciated... http://www.lakeviewchurch.com/new Hi guys Just joined and hoping someone can offer some advice on an issue. I want a black border around images which show up jsut fine in IE but some reason the border does not appear in FF. The below is an example of what i am doing. <IMG STYLE="position:absolute; TOP:110px; LEFT:610px; WIDTH:180px; HEIGHT:190px" src="Optimized-027edited.jpg" style="border-style: solid; border-color: black;"/> Does anyone have any advice on where what I can do to make the border show up in both browsers? Any help appreciated. Cheers In a website i'm designing, there is a slideshow I created, and instead of using flash I used Windows Media Player. For some reason the html border attribute on both the <embed> and <object> tags, when viewed in Firefox, do not work. Page with border problems here is the code, if you want it: Code: <center> <object id="MediaPlayer" width="800" height="650" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" title="Pete's Mountain Road Slideshow" border="3"> <param name="filename" value="http://www.petesmountainroad.com/PetesMountain.wmv" /> <param name="Showcontrols" value="True" /> <param name="autoStart" value="False" /> <param name="wmode" value="transparent" /> <embed type="application/x-mplayer2" src=http://www.petesmountainroad.com/PetesMountain.wmv" name="MediaPlayer" autoStart="False" wmode="transparent" width="800" height="650" title="Pete's Mountain Road Slideshow" /> </object> <br /> <p class="main">If you do not have Windows Media Player, you can view the video by following <a class="Link" href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx" target="_blank" title="Download Windows Media Player 11">this link</a> to download the program to your computer, then try to play it again.</p> </center> </body> </html> I have a problem with Firefox. Although I am using set no border on a href and img tags I still get a border. Other browsers don't have this. This is my code, I've set the link border and image border to orange and pink dotted lines to show the black solid line. When I set these to no border the black line remains. Quote: <html> <head> <style> A:link, A:visited, A:active, A:hover { outline: none; background:none; border:5px dotted orange; padding: 0;text-decoration:none} img { border:5px dotted pink; display:block; margin:0; padding;0; } </style> </head> <body> <a href="/" > <img src="./img/bretzy-wht.gif" > text </a> </body> </html> You can see it live he http://tetsuo.gol.ad.jp/bretzy/new.html Thanks in anticipation. Brett hello, i am getting the results in two columns after using the following code... import_request_variables('p','p_'); $connect=mysql_connect('localhost','gkkilaru','gkkilaru') or die('could not open:'. mysql_error()); mysql_select_db('gkkilaru_db'); $result=mysql_query("SELECT * FROM human WHERE $p_Searchtype='$p_Search'"); function returnResultsInColumns( $mysqlResult ) { $queryResults = NULL; if( mysql_num_rows($mysqlResult) > 0 ) { while($resultRow = mysql_fetch_array($mysqlResult)) { for ($intPos = 0; $intPos < mysql_num_fields($mysqlResult); $intPos++) { $fieldName = mysql_field_name($mysqlResult, $intPos); $currentArrayPos = ( isset( $queryResults[$fieldName] ) ? count( $queryResults[$fieldName] ) : 0); $queryResults[$fieldName][$currentArrayPos] = $resultRow[$fieldName]; } } $htmlTable = "<table>"; foreach( $queryResults as $field => $results ) { $htmlTable.= "<tr>"; $htmlTable.= "<td>" . $field . "</td><td>" . implode( ", ", $results ) . "</td>"; $htmlTable.= "</tr>"; } $htmlTable.= "</table>"; return $htmlTable; } else { return "The query returned no results."; } } // Pass the result of the MySQL query into the function. $tableLayout = returnResultsInColumns($result); echo $tableLayout; can anyone let me know the code for how to place a border or table for the result obtained? Hey! I was making a navigation bar that goes to the left of the content (there is a main nav at the top and a subnavigation for the page to the left). Here's the layout |----banner------| ==========main nav ll content ll content ll content the vertical equal signs (aka L's ) on the left are the things that are troubling me. I don't want there to be a border but the page for some reason keeps coming up with a small space between the left, bottom, and top of the subnav. Here's my code for the subnav and the content: Code: <table width="100%" cellpadding="0px" style="height: 100%; align: left; background-color: #ffffff; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 0px;" cellspacing="0px"> <tr><td> <table cellpadding="0px" cellspacing="0px" width="130px" style="height: 100%; align: center; valign: middle; background-color: #FF7F00; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 5px solid #ff0000;"> <tr><td align="center">A Brief History</td></tr><tr><td align="center">Who We Serve</td></tr><tr><td align="center">The Difference</td></tr></table></td> <td> <table cellspacing="0px" cellpadding="5px"><tr><td><b>About Us</b></td></tr></table> <blockquote> content </blockquote> <blockquote><p>content</p></blockquote> </td></tr></table> For this page on my site: http://www.monkeygambling.com/new%20...ingindex.shtml I am having trouble with the borders on the central part. I have created an external css file with these commands table.border { border-top:1px outset "gray"; border-right:1px outset "gray"; border-bottom:1px outset "gray"; border-left:1px outset "gray"; } td.border { border-top:0px inset "gray"; border-right:1px inset "gray"; border-bottom:0px inset "gray"; border-left:1px inset "gray"; } I want a border with one px width like a normal table, but I don't want the cells to have horizontal borders where the <hr> are. I have got the table to have a border around it, but I want the double line with highlighted edges like in a normal table. If that makes sense could anyone help me? thanks I have (for my sins - should have read up on css earlier) a table-based site, essentially with header, footer, left and right cells and the main piece in the middle. I have used different background colours, but am wanting to highlight the middle bit. I have used a border, but that seems to centre on the edge of the cell - ie half the specified border size is inside the cell and half outside. The effect of this is that my two side pieces have whitespace before they start. Is there any way to specify a 'border' which stays totally within its relevant cell ? Thanks. Within the <table> tag, there is an attribute called frame. Can someone list for me the different values for the frame attribute. I know there is <table frame = rhs | lhs but I don't know what else there is other than rhs and lhs. Thanks Ok... I'm looking to create a border on the left and right of a table I have. I already have the image, but I'm curious as to how to impliment it, just on the left and right side.. Basically it'll make a drop shadow to the background of the page. The code for index.php is this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Web Hosting, Reseller Hosting, Dedicated Servers, Web Design - Blitzkrieg Computer Technologies</title> <meta name="description" content="Blitzkrieg Computer Technologies offers Reseller Website Hosting, Dedicated Server Hosting, Shared Website Hosting, Domain Name Registration, and Web Design at affordable prices with 24/7 support and industry-known service."> <meta name="keywords" content="web hosting, domain names, cheap web hosting, website hosting, web page hosting, web design, ecommerce web hosting, internet access provider, web hosting provider, web hosting services, internet web hosting,dedicated web hosting, award winning web hosting, domain hosting, domain registration, registrar, cheap domains, cheap registrar, cheap domain registration, website name, dedicated hosting, dedicated server, dedicated servers, dedicated web hosting, dedicated,cheap dedicated, cheap dedicated hosting, cheap dedicated servers, cheap servers, cheap dedicated linux hosting, cheap dedicated windows hosting, dedicated windows hosting, dedicated linux hosting, dedicated red hat hosting, dedicated centos hosting,dedicated windows server hosting,dedicated windows server 2003 hosting, managed dedicated hosting,managed colo, managed colocation"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> a:link {color: #D2D2D2;} a:visited {color: #D2D2D2;} a:active {color: #D2D2D2;} a {text-decoration: none;} </style> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body background="images/bgtex.jpg"><font size="2"> <table cellpadding="0" cellspacing="0" border="0" style="width:75% " align="center" valign="top"> <tr> <td valign="top" style="width:100%; background:url(images/top.gif) " height="144" > <table cellpadding="0" cellspacing="0" border="0" style="width:100% " align="center"> <tr> <td valign="top" style="width:50% " height="144"></td> <td valign="top" width="766" height="144"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="140"> <div style="margin-top:10px "><a href="?page=home"><img src="images/m1.gif" alt="" border="0"></a><a href="?page=sharedhosting"><img src="images/m2.gif" alt="" border="0"></a><a href="?page=resellerhosting"><img src="images/m3.gif" alt="" border="0"></a><a href="?page=dedicated"><img src="images/m4.gif" alt="" border="0"></a><a href="?page=vps"><img src="images/m5.gif" alt="" border="0"></a><a href="?page=design"><img src="images/m6.gif" alt="" border="0"></a><a href="?page=contact"><img src="images/m7.gif" alt="" border="0"></a></div> <div style=" margin-left:21px; margin-top:24px "><img src="images/logo.jpg" alt="" border="0"><img src="images/p1.jpg" style="margin-left:249px " alt="" border="0"></div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="144"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" > </td> </tr> <tr><td background="images/8_w1.gif"><font size="2" color="#D2D2D2"> <center> <a href="?page=about">About Us</a> | <a href="?page=contact">Contact Us</a> | <a href="?page=login">Customer Login</a> | <a href="?page=aup">Acceptable Use Policy</a> | <a href="?page=tos">Terms of Service</a> </center></font></td></tr> <tr><td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" ></td></tr> <tr> <td valign="top" style="width:100%; background-color:#686868" height="410"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766" > <tr> <td valign="top" style="width:50% " height="410"></td> <td valign="top" width="766" height="410"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="410"> <div style=" margin-left:13px; margin-top:22px; margin-right:0px; line-height:15px " class="s"> <font color="#D2D2D2" size="3"> <?php if (isset($_GET['page'])) { switch ($_GET['page']) { case "home": include ('home.php'); break; case "thanks": include ('thanks.php'); break; case "sharedhosting": include ('sharedhosting.php'); break; case "hosting": include ('hosting.php'); break; case "ip": include ('ip.php'); break; case "domain": include ('domain.php'); break; case "resellerhosting": include ('resellerhosting.php'); break; case "domain": include ('domain.php'); break; case "custom": include ('custom.php'); break; case "design": include ('design.php'); break; case "speedtest": include ('speedtest.php'); break; case "vps": include ('vps.php'); break; case "about": include ('about.php'); break; case "construction": include ('construction.php'); break; case "cpanel": include ('cpanel.php'); break; case "tos": include ('tos.php'); break; case "contact": include ('contact.php'); break; case "login": include ('login.php'); break; case "testimonials": include ('testimonials.php'); break; case "quote": include ('quote.php'); break; case "emailhosting": include ('emailhosting.php'); break; case "dedicated": include ('dedicated.php'); break; case "entrydedicated": include ('entrydedicated.php'); break; case "smallbizdedi": include ('smallbizdedi.php'); break; case "enterprisededi": include ('enterprisededi.php'); break; case "aup": include ('aup.php'); break; case "customdedicated": include ('customdedicated.php'); break; default : include 'home.php'; break; } } else { include 'home.php'; } ?></font><br><br><br> </div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="410"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/bg2.gif) repeat-x top " bgcolor="#FFFFFF" height="17"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766"> <tr> <td valign="top" style="width:50% " height="17"></td> <td valign="top" width="766" height="17"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="17" style="background:url(images/7_p1.jpg) no-repeat top right "> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="17"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/bottom.gif) " height="65"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766"> <tr> <td valign="top" style="width:50% " height="65"></td> <td valign="top" width="766" height="65"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="65"> <div style=" margin-left:16px; margin-top:25px "><font size="2" color="#696969"><center> Copyright © 2003-2009 Blitzkrieg Computer Technologies. All Rights Reserved.<br></center></div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="65"></td> </tr> </table> </td> </tr> </table> </font> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-3505975-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> I have a problem on my forum, in the home page, the forum list is made up of a grid, but the spacing inbetween each spot is too big and therefore it looks kind of stupid. Any ideas? Heres the site http://techoftheweekpodcast.com/index.php Hi, I'm trying to make a border with a 50x50px image repeated around it this is the code I have so far; <html> <head> <title>div test</title> <style type="text/css"> #outer { background-image: url(http://i890.photobucket.com/albums/a...oxBorder.jpg); background-repeat: repeat; background-color: #cccccc; width:100%; padding: 3em; } #inner { background-color:#ffffff; padding: 2em; } p {margin: 0px;} </style> </head> <body> <div id="outer"> <div id="inner"> <p> Blah blah blah </p> </div> </div> </body> </html> I want the image around the border to be showing the same as it does at the top, at the bottom. And i want the size of the table to be increased when new text is added into it each time. Can somebody please help me? Thankkksss. Hello, I'm having trouble with the bold line in the code below: Code: <html> <head> <title>H&R Properties</title> <style type="text/css"> table.master { height: 100%; } td.banner { height: 100px; text-align: center; } span.banner { font-size: 24pt; } td.news { width: 200px; padding-top: 10px; text-align: center; } iframe.news { width: 100%; height: 100%; } td.menuandcontent { width: 530px; } table.menuandcontent { width: 100%; height: 100%; } td.menu { height: 50px; background: url('menu_bg.jpg'); text-align: center; } td.content { text-align: center; } iframe.content { width: 100%; height: 100%; } </style> </head> <body> <table class="master" cellspacing=0 cellpadding=0 border=1> <tr><td colspan=2 class="banner"> <span class="banner"> <img src="H&R banner.jpg" border=0></span></td></tr> <tr> <td class="news"> <iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe> </td> <td class="menuandcontent"> <table class="menuandcontent" cellspacing=0 cellpadding=0 border=0> <tr> <td class="menu"> <table cellspacing=0 cellpadding=0 border=0> <tr> <td><img src="home.jpg" border=0></td> <td><img src="properties.jpg" border=0></td> <td><img src="about.jpg" border=0></td> <td><img src="contact.jpg" border=0></td> </tr> </table> </td></tr> <tr> <td class="content"> <iframe class="content" src="content.html" srollable=yes frameborder=0></iframe> </td> </tr> </table> </td> </tr> </table> </body> </html> This code produced this: http://www.shahspace.com/border1/ But if I do something as simple as set border to 0 in the bolded line above, I get this: http://www.shahspace.com/border0/ The banner is all of a sudden shifted to the right by about 20 pixels. Why is this? I am building an adwords landing page. The URL is he http://www.amanochocolate.com/adwords/dark-chocolate If you notice, I have put a text block on the right that is all black. I wanted it to have rounded corners so I used some graphics to achieve that. However, for some reason, the table cell color is showing up around the border even though I have no borders set for the table. (I.,e., border:0pt) Also, the border I don't want on the bottom is thicker for some odd reason. I've seen this before but have never figured out what causes this. I would simply like my table borders to be really clean (and gone). Any ideas? -Art I'm trying to create a table border that is not continuous and leaves space for header/footer text. This is the only way I can describe it, and also see image: http://img691.imageshack.us/img691/747/tablefo.jpg Now, that was a custom vbulletin theme, which is php, obviously. Is this possible with tables and HTML, with a bit of CSS perhaps? Hey guys! I have created a table with images in it and for some reason the table doesn't exactly fit (in height) the images, it has like a little 5px border at the bottom and I can't figure out why. I have attached a picture showing the problem. In the image, the gray border is supposed to be there, and is part of the images and background image. But I want the table to end directly at the bottom of the gray bar, and for some reason it has a little lip at the bottom in which the background image begins to repeat again. My code is as follows: 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> <title>QuickID | Setup Your Account</title> <style type="text/css"> <!-- a:link { color: #777676; text-decoration: none; font: verdana} a:visited { color: #777676; text-decoration: none; font: verdana} a:hover { color: #3366CC; text-decoration: underline; font: verdana} a:active { color: #777676; text-decoration: none; font: verdana} --> </style> </head> <body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 background="images/bg.gif"> <table cellpadding=0 cellspacing=0 width=100% border=0 align=center background="images/top_bar_bg.jpg"> <tr> <td> <table width=980 cellpadding=0 cellspacing=0 align=center style="white-space: nowrap;" height=38> <tr> <td align=left> <img src="images/top_bar_logo.jpg" border=0 height=38 ALT="logo"> <img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider"> </td> <td align=left width=750> hello! </td> <td align=right> <img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider"> </td> <td align=right> <img src="images/top_bar_settings.jpg" border=0 height=38 ALT="settings"> </td> <td align=right> <img src="images/top_bar_logout.jpg" border=0 height=38 ALT="logout"> </td> </tr> </table> </td> </tr> </table> </body> I think I've totally given up on this, but thought I still pick all of your brains. I'm working with a CMS that has hardcoded tables so that even when you have border="0", a border still shows up on the live page. It's absolutely driving me nuts. Here's what I'm aiming at: I want to place 5 photos going down the right-hand side of the page. The only way I have figured out how to do this is through a table, but the border shows and makes the entire page look like crap. Any other ideas on how I can accomplish this? Thanks! |