|
HTML - Firefox, Table Border Displaying Incorrectly
hi 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! Similar TutorialsHi 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. The code I am working with is actually inside of a .xls file. However, I am assuming that my problems are HTML-related. Here is a picture of how it is incorrectly displaying in Firefox: Here's a picture of it in IE, which is how I want it to look in Firefox: Does anyone know what the most likely cause of this is? If you would like to see some code I can post it, I just didn't want it to come off as too overwhelming. It's about 70 lines of code for the whole table. A huge thanks to anyone who can help me out with this. 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 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 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 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 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>
Hi, Im a bit of an amateur and for some reason I cant get an image to display in firefox, but its fine in explorer.... Does anyone know why this might be? Thanks Aly_ve Hi...I am looking to create a vertical solid bar, in an HTML table. But it's not displaying right in Firefox! In IE it's fine...I want the bar to go to 100% of the <td> cell. Here is what I have: <td rowspan="2"> <center> <img src="bluepixel.gif" style="width: 5px; height: 100%;" /> </center> </td> bluepixel.gif is a 1x1 pixel GIF file. Basically I'm creating a vertical colored version of a <hr> tag. Again...in IE it fills out 100% of the height. But Firefox only shows a 5x5 square...no matter how big the browser is resized. Any ideas?? Thanks! Jason Hello all, Im having problems displaying my website in firefox, it displays fine in IE, however its displaying 1/2 way down the page in firefox. Any ideas where im going wrong? www.best-mobile-contracts.co.uk hello, the attached below is a position template for displaying merchandise. in IE the html shows properlly with no internal borders. in FIREFOX (version 1.5.0.9), the cells and tables are all bordered. i have now intentionally put - BORDERCOLOR="FFFFFF' and BORDERWIDTH="0" -wherever i possibly could in order to try and eliminate the borders from showing in firefox - to no avail. any suggestions? weblost here is the link if you prefer to view it. the position is the one marked "test 2" http://cafepanik.com/lobby/3_sneekee...ial/index.html 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? I have created a div which sits on the right hand side. I have created two different size ones as one of my html pages has a lot more content on it. here are in the divs in CSS:
Code: #picstrip{
width:200px;
height:740px;
padding: 10px 10px 20px 10px;
background-color:#8d6cd1;
z-index:999999;
float:right;
}
#picstrip2{
width:200px;
height:1270px;
padding: 10px 10px 20px 10px;
background-color:#8d6cd1;
z-index:999999;
float:right;
}
I want these divs to be touching the footer i have created: Code: #footer{
background-color:#2ba475;
width:800px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}
table.foot{
text-align:center;
}
I am currently able to make it work it just one of the web browsers at a time. The div seems to be shorter in size in IE. is there any way round this problem? I will be so greatful for any help. Thank You I am experiencing frustration due to the website that I've designed is being displayed perfectly in the Explorer browser, but in Firefox its all screwed up. Is it coding issues? My website is at www.wolfdenexpeditions.ca cheers 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? 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> 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 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 a table with a border of 0. i was wondering if it was possible to have only the very outlining border of the table be visible. |
|||||||