Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Aug 5th, 2006, 2:23 PM   #1
angry_asian
Hobbyist Programmer
 
Join Date: Jun 2006
Location: at my computer desk
Posts: 138
Rep Power: 3 angry_asian is on a distinguished road
tables dont work in firefox; they work in IE
hi guys,
this page (copy paste in notepad save as .htm and open)
(Toggle Plain Text) 
<!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>Sreenath Pillai's Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
    body {
	margin:0;
	padding:0;
	font: bold 11px/1.5em Verdana;
}

h2 {
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0px;
	padding: 0px 0px 0px 15px;
}

	
	
/*- Menu Tabs F--------------------------- */

    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #666;
      }
    #tabsF ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }
	
	

</style>
</head>

<body bgcolor="#cccccc">
<h1 align="center">Sreenath Pillai's Homepage</h1>
<div id="tabsF">
  <ul>
    <li><a href="#" title="Link 1"><span>Home Page</span></a></li>
    <li><a href="#" title="Link 2"><span>Forums</span></a></li>
    <li><a href="#" title="Link 3"><span>Store (coming soon)</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>About me</span></a></li>
    <li><a href="#" title="Link 5"><span>My writings/publications</span></a></li>
    <li><a href="#" title="Link 6"><span>My Current Projects</span></a></li>
    <li><a href="#" title="Link 7"><span>Site News</span></a></li>
    <li><a href="#" title="Link 8"><span>Contact Me</span></a></li>
  </ul>
</div>
<table border="1" width="100%" id="table1">
	<tr height=100%>
		<td width=20%>adsf</td>
		<td width=60%>adsfafa</td>
		<td width=20%>asdfasdf</td>
	</tr>
</table>
</body>
</html>
works in IE but in firefox the table appears to the right instead of below the CSS nav bar. why?
angry_asian is offline   Reply With Quote
Old Aug 5th, 2006, 3:34 PM   #2
AntiNinja
Hobbyist Programmer
 
AntiNinja's Avatar
 
Join Date: Jun 2006
Location: The States
Posts: 101
Rep Power: 3 AntiNinja is on a distinguished road
Send a message via AIM to AntiNinja Send a message via Yahoo to AntiNinja
(Toggle Plain Text) 
...
<div id="tabsF">
  <ul>
    <li><a href="#" title="Link 1"><span>Home Page</span></a></li>
    <li><a href="#" title="Link 2"><span>Forums</span></a></li>
    <li><a href="#" title="Link 3"><span>Store (coming soon)</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>About me</span></a></li>
    <li><a href="#" title="Link 5"><span>My writings/publications</span></a></li>
    <li><a href="#" title="Link 6"><span>My Current Projects</span></a></li>
    <li><a href="#" title="Link 7"><span>Site News</span></a></li>
    <li><a href="#" title="Link 8"><span>Contact Me</span></a></li>
  </ul>
</div>
<script type="text/javascript">
var browser=navigator.appName
if (browser=="Netscape")
  {document.write("<br><br><br><br>")}
</script>
<table border="1" width="100%" id="table1">
	<tr height=100%>
		<td width=20%>adsf</td>
		<td width=60%>adsfafa</td>
		<td width=20%>asdfasdf</td>
	</tr>
</table></body></html>
//edit: fixed it
__________________
Pain is just weakness leaving the body.
Last edited by AntiNinja; Aug 5th, 2006 at 3:53 PM.
AntiNinja is offline   Reply With Quote
Old Aug 5th, 2006, 4:33 PM   #3
Arevos
Programming Guru
 
Arevos's Avatar
 
Join Date: Aug 2005
Location: England
Posts: 1,499
Rep Power: 5 Arevos is on a distinguished road
Uh... With all due respect, AntiNinja, Javascript hacks are not usually the way to solve CSS problems. Your solution also won't help Opera or Safari users. Why not just fix the CSS, instead of applying an arcane hack?

In this case, the problem revolves around all those "float: left;"s. Remove them, and the "display: block;" on "#tabsF a span", add a bit more padding to the enclosing div, and there's your solution.
Arevos is offline   Reply With Quote
Old Aug 5th, 2006, 6:00 PM   #4
angry_asian
Hobbyist Programmer
 
Join Date: Jun 2006
Location: at my computer desk
Posts: 138
Rep Power: 3 angry_asian is on a distinguished road
thanks, i got it
thanks arevos and ninja, but i got it. this is what i did:
(Toggle Plain Text) 
<!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>Sreenath Pillai's Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-family: Verdana;
font-weight:bold;
font-size: 8pt;
background-color:#cccccc;
}
h2 {
font-family: Verdana;
font-weight:bold;
font-size: 14pt;
margin: 0px;
padding: 0px;
height:25px;
}
#HeaderBlock
{
height:90px;
position:absolute;
top:5px;
}
#ContentBlock
{
position:absolute;
top:100px;
}

/*- Menu Tabs F--------------------------- */
#tabsF {
float:left;
width:100%;
height:30px;
background-color:#efefef;
border-bottom:1px solid #666666;
}
#tabsF ul {
margin:0;
padding:9px 10px 0px 50px;

list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
font-size:93%;
border-bottom:1px solid #666666;

}
.normal a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.selected a {
float:left;
background:url("tableftF.gif") no-repeat left top;
background-position:0% -42px;
margin:0;
padding:0px 0 0 4px;
text-decoration:none;
}
.normal a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666666;
}

.selected a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
background-position:100% -42px;
padding:5px 15px 4px 6px;
color:#666666;
}

.normal a:hover span {
color:#FFFFFF;
}
.normal a:hover {
background-position:0% -42px;
}
.normal a:hover span {
background-position:100% -42px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.normal a span {float:none;}
/* End IE5-Mac hack */

</style>
</head>
<body>
<div id="HeaderBlock">
<h1 align="center">Sreenath Pillai's Homepage</h1>
<div id="tabsF">
<ul>
<li class="normal"><a href="#" title="Link 1"><span>Home Page</span></a></li>
<li class="normal"><a href="#" title="Link 2"><span>Forums</span></a></li>
<li class="normal"><a href="#" title="Link 3"><span>Store (coming soon)</span></a></li>
<li class="normal"><a href="#" title="Longer Link Text"><span>About me</span></a></li>
<li class="selected"><a href="#" title="Link 5"><span>My writings/publications</span></a></li>
<li class="normal"><a href="#" title="Link 6"><span>My Current Projects</span></a></li>
<li class="normal"><a href="#" title="Link 7"><span>Site News</span></a></li>
<li class="normal"><a href="#" title="Link 8"><span>Contact Me</span></a></li>
</ul>
</div>
</div>
<br/><br/>
<div id="ContentBlock" style="position:absolute:top:5px;left:0px;">
<table border="1" width="100%" id="table1">
<tr height=100%>
<td width=20%>adsf</td>
<td width=60%>adsfafa</td>
<td width=20%>asdfasdf</td>
</tr>
</table>
</div>
</body>
</html>
angry_asian is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread in Forum | Next Thread in Forum »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
JavaScript and Firefox JPS JavaScript and Client-Side Browser Scripting 2 Mar 30th, 2006 10:34 AM
problems in firefox and opera gemini_shooter HTML / XHTML / CSS 5 Dec 11th, 2005 11:29 AM
firefox vs IE, stats for programming forums big_k105 Coder's Corner Lounge 31 May 21st, 2005 11:04 AM
Using tables with css dmorales HTML / XHTML / CSS 17 Apr 13th, 2005 11:01 PM
40 Things you'd like to say out loud at work big_k105 Coder's Corner Lounge 11 Jan 25th, 2005 2:13 AM


Contact Us - DaniWeb IT Discussion Community - Privacy Statement - Top


DaniWeb IT Discussion Community
All times are GMT -5. The time now is 7:26 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC