CSS - Firefox Table Align Problem

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hi all - can anyone tell me why the table in the first <li> will not / is not aligning with the top? It seems to be starting at line 2 within the <li> and I can't figure out why!?!?!??

Code:

<ol style="border: 1px solid green;">
	<li>
		<table cellpadding="0" cellspacing="0" border="1" style="width: 100%; border: 1px solid red; height: 10px;">
			<tr>
				<td style="width: 70%;">
				
				</td>
				<td style="width: 30%;">
				
				</td>
			</tr>
		</table>
	</li>
	<li>Second row of text.</li>
	<li>Third row of text.</li>
</ol>

regan

Hello Dev Shed,

I am having a problem aligning my tables inside thier respective column div's to the center. Here is the css sheet in question.

Code:

body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    background:#FFF;
	margin:0;
	padding:0;
}

td {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}



#container {
	margin-top:0px;
	padding-top:0px;
	width:1024px;
	margin-left:auto;
	margin-right:auto;
	background:#FFF;

}

#header {
	width:1024px;
	height:100px;
	background:url(../images/headerbg.jpg);
	text-align:right;
	color:#bce9c3;
	font-weight:bold;
	
}

#header h1 {
	color:#FFF;
	margin:0;
	padding:0;
	font-size:xx-large;
	padding-top:10px;
	padding-right:5px;
}


#header p { 
	margin:0;
	padding:0;
	padding-right:5px;
}


#content {
	width:1024px;
	background:#a3e1ad;
}

#leftcol { 
	padding-top:10px;
	float:left;
	width:512px;
	background-color:#a3e1ad;
	text-align:center;
}

#rightcol { 
	padding-top:10px;
	float:left;
	width:512px;
	background-color:#a3e1ad;
	text-align:center;
}

#content table { 
	border-width:4px;
	border-spacing:0px;
	border-style:solid;
	border-color:#168cf7;
	border-collapse:collapse;
}

#content td.title { 
	background-color:#FFF;
}

#content td.title p {
	color:#168cf7;
	font-weight:Bold;
	text-align:Center;
}

Even though both leftcol and rightcol have text-align set to center, they're still both aligning to the left. Any help would greatly be apprieciated. Thanks in advance.

I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work.

For example, this does not work:
Code:

td.centercell {
  text-align: center;
}

<table>
  <tr>
    <td class="centercell">Hi!</td>
  <tr>
</table>

But this does:
Code:

<table>
  <tr>
    <td style="text-align:center;">Hi!</td>
  <tr>
</table>

I'd rather not have to put inline styles on every single cell I need centered, as this is most of them.

What's going on?

Is it not possible to do the following? What is the correct way of aligning a cell if not?

PHP Code:
 TD.theader {
    background-color: #D0D0D0;
    border: 1px solid #000000;
    padding:5px;
    horizontal-align: right;
} 

how do i center align table on page with CSS?

What is the equivalent of <table align="center"> in CSS. I'm moving my page from HTML 4.01 to XHTML 1.0 and the ALIGN attribute of TABLE is not supported in XHTML 1.0.

Any help is greatly appreciated.

I have a css layout I'm working, that is all divs (my first time doing this without tables).

My page consists of all divs, and then the body is a table for displaying date from a database.

My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down.

If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table.

I hope that makes sense.

CSS Tags -- Just a portion of them:

Code:

body {
  margin: 0px 0px 0px 0px;
  background-color: #E7F1FD;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {  
  background-color: #E7F1FD;
  border: 2px solid #FFF;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 165px;
}
/*Footer */
#left_footer {
  background-image:url(images/bar_header2.jpg);
  width:100%;
  height:36px;
  position:absolute;
  bottom: 0px;
}

My DIVS (partial):

Code:

<!-- START BODY -->
<div id="pwdb_body">
<table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1>
<tr>
  <td>...table data...</td>
</tr>
</table>
</div>
<div id="left_footer"><img src="images/index_02.gif"/></div>

I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow.

Hi all,
We have a table layout we're experiencing some issues with on users that have smaller screens. Below is a simple 1 row example of elements contained in our div tables

Code:

<div class="tracks-result-page" style="">
  <div class="track-element">
      <input class="track-select-checkbox" type="checkbox"><h4 class="track-name">Track</h4><span class="created-date">23-Jul-2008 17:13</span><span class="duration">47m</span><a href="#" class="view-button">view</a><a href="/viewtrack" class="edit-button">edit</a><a href="#" class="details-button">show details</a><input value="d5f173a2-b35e-4489-b468-33a05b1e4997" class="track-id" type="hidden">
  </div>
  <div class="track-element">
  ....more elements
  </div>
</div>

Basically, I have 800 px to fit this data in from our site template. What's happening is on smaller resolutions, the 3 anchor tags aren't fitting in 800 px due to large font size vs table width, and the anchor elements are wrapping around. I have a lot of white space after the description, and currently have a fixed width on that div. What I need is to right align everything from the "created-date" class to the end of the element, then left align the "track-select-checkbox" and the "track-name" elements. I'm having a really tough time doing this for some reason. I can't use "float:right;" on the elements that need right aligned. If I do, they all appear in reverse order! Any help would be greatly appreciated.

thanks,
Todd

hi,

i have been trying to align the 3 divs in this page in center of the page, but i m having no success at all.please let me know what to do and how to correct this problem.i m quite new to web design field.thanks.the code is given below.

Code:

<html>

<head>

<title>
Welcome friends..................
</title>

<style type="text/css">

.banner
{

POSITION:ABSOLUTE; TOP:50PX; 
WIDTH:700PX; HEIGHT:40PX; OVERFLOW:AUTO;

FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:24PX; TEXT-ALIGN:LEFT;COLOR:BLUE;
BACKGROUND-COLOR:WHITE;

}


.navigation
{
POSITION:ABSOLUTE; TOP:90PX; WIDTH:700PX; 
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;
BACKGROUND-COLOR:WHITE;
}



.textarea
{
POSITION:ABSOLUTE; TOP:180PX; WIDTH:700PX; 
BORDER-LEFT: 2PX SOLID #454545;
BORDER-TOP: 2PX SOLID #454545;
BORDER-BOTTOM:2PX SOLID #454545;
BORDER-RIGHT: 2PX SOLID #454545;
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX; TEXT-ALIGN:JUSTIFY;
BACKGROUND-COLOR:WHITE;
}



</style>

</head>

<body bgcolor="#f3f3f3">

<div align="center" class="banner">

<a href="home.html" class="bannerlink">Mysite.com</a>


</div>

<div align="center" class="navigation">

&nbsp; &nbsp; &nbsp;&nbsp;
<a href="home.html">HOME</a>&nbsp; &nbsp; &nbsp;&nbsp;
<a href="aboutus.html">ABOUT US</a>&nbsp; &nbsp; &nbsp;
<a href="contact.html">CONTACT US</a><br>

</div>

<div align="center" class="textarea">

The main text should be here...............

</div>

</body>

</html>

i just started improving my css knowledge (till now i only knew how to use it for text, tables and a few more stuff).currently i am working on a full css based website.i ran into a little problem, googled for solutions but no luck till now.i hope u guys can help me with this.

this is what i have now:
http://img381.imageshack.us/img381/6791/nowzd9.jpg

this is what i want to have (photoshop screenshot):
http://img381.imageshack.us/img381/191/wishmq0.jpg

i want those 3 "boxes" with images&text to be all aligned on the same row.

this is the html code:
Code:

    <div id="main">
		<img src="images/0.home_revived_10.jpg" alt="x" width="532" height="236" />
        <br /><br /><br />
        <div id="boxes">
        	
            <div align="left" id="box">
            	<span class="box-title">Business Consulting</span><br />
            	<span class="box-subtitle">short clarifying text</span><br /><br />
            	<img src="images/0.home_revived_03.jpg" width="129" height="45" /><br />
            	<span class="box-text">Morbi aliquet mi non massa. In a urna. Nam pulvina</span>
            </div>
            
            <div align="left" id="box">
            	<span class="box-title">IT anaysis</span><br />
            	<span class="box-subtitle">short clarifying text</span><br /><br />
            	<img src="images/0.home_revived_05.jpg" width="129" height="45" /><br />
            	<span class="box-text">Morbi aliquet mi non massa. In a urna. Nam pulvina</span>
            </div>
            
            <div align="left" id="box">
            	<span class="box-title">Business Applications</span><br />
            	<span class="box-subtitle">short clarifying text</span><br /><br />
            	<img src="images/0.home_revived_07.jpg" width="129" height="45" /><br />
            	<span class="box-text">Morbi aliquet mi non massa. In a urna. Nam pulvina</span>
            </div>
            
        </div>
    </div>

and css:
Code:

#main {
	background-color:#FFFFFF;
	margin-left:184px;
}
#boxes {
	
}
#box {
	margin:0;
	padding:0;
	width:129px;
}
.box-title {
	font-family:Tahoma;
	color:#5080b2;
	font-size:12px;
	font-weight:bold;
}
.box-subtitle {
	font-family:Tahoma;
	color:#b7b3b3;
	font-size:11px;
}
.box-text {
	font-family:Tahoma;
	color:#000000;
	font-size:11px;
}

thx.

hi..
I have created a site. I want to put all the content in the center of the screen.
so I have written the code:
<body>
<table align="center">
<tr>
<td align="center">
Here goes all the content + menu+ logo+ banner
</td>
</tr>
</table>
</body>

It is working fine for some pages like home ,aboutus
but for every other page content is not in the center.
please help me on this.
Sorry i can't paste the code for each page so i am giving the link of website renukainstitute.com

Hi

when i use this in my css file

Code:

div.head {
 width: 100%;
 border: 1px dotted black;
 align: center;
}

and place an image within the div using head class. it doesn't put the image in the center of the div.

however if on the page i use

Code:

<div class=head align=center><img src='pic.gif'></div>

it does work.

can anybody guide me please why the align attribute doesn't take affect from css file?

thank you

Hi.

So I'm trying to get the image div to vertical-align against the text div, within a wrapper div.
It currently works fine in Firefox and IE8, but in IE7 and below it displays wrong.

I tried to make it work on IE using some workarounds I found but I managed to make it worse.

Can anyone help me adapt this code so it works on both firefox AND IE6+ ?

Much appreciated! Thanks!

Code (since I can't link to it...):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
      div {
        border: solid 1px black;
      }
      .wrapper {
        padding: 10px;
        display: table;
      }
      .image {
        width: 100px;
        vertical-align: middle;
        display: table-cell;
      }
      .text {
        margin-left: 100px;
        padding-left: 10px;
        display: table-cell;
      }
    </style>
  </head>

  <body>
  
    <div class="wrapper">
      
      <div class="image">
        <img src="" alt="Test Image">
      </div>
      
      <div class="text">
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
      </div>
      
    </div>
  </body>
</html>

Hi guys,

I've got a table cell in which I want to display two pieces of text - one aligned top left, one aligned bottom right. Now, I can't for the life of me get the one to align to the bottom right. I can align the first bit of text to the top left fine, just not the second to to the bottom right.

At the moment I've got this code:

Code:

<html>

<head>

</head>

<body>
<table width="350" height="112" cellspacing="0" cellpadding="0">
  <tr>
	<td style="vertical-align: top" background="templates/<?=$templatedir?>/images/domain_box_05.gif" width="350" height="112">

	<div style="height: 56px; padding: 10px 0px 0px 20px; border: 1px; border-style: solid">
	test1
	</div>

	<div style="height: 56px; border: 1px; border-style: solid">
	[<a href="pricing.php" target="_blank" onClick='window.open("/pricing.php","pricing","width=475,height=415,status=yes,scrollbars=1,resizable=1");return false;'>
	test2</a>]
	</div>

	</form>

	</td>
  </tr>
</table>


</body>

</html>

I've just got the borders on there at the moment to see exactly where the div's are for debug purposes. I've tried using vertical-align: bottom, but it just doesn't do anything.

Any help would be greatly appreciated, thanks