CSS - Table With Css - Strange Scrollbar In Firefox

Hi there.

I have a blank space that appears as a link when my animated T-R MENU button is clicked.

Click here to view the problem

It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way.

Opera, Safari and IE view it fine. Just FF3 that's doing it.

Can anyone shed some light on why it's doing this or how to fix it?

Thanks in advance.

Help! I've been holding my head on this one for a couple days.

I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it.

Any help would be greatly appreciated!

www dot sccustomfacade dot com slash site


Thank you!

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 there,

I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it.

This is my css:

PHP Code:
 scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #d4e5ab;
scrollbar-darkshadow-color: #517107;
scrollbar-face-color: #719e07;
scrollbar-highlight-color: #add450; 





Any ideas why that is?

Hi all

I'm working on the following XHTML/CSS2 page:

http://www.josh.ch/files/temp/strange_ff_effect

It's very clean XHTML and CSS2 in my opinion, and it's displayed correctly in Firefox, Opera and Safari.
However, I experience a very strange bug in Firefox2/OSX! When single clicking with the mouse somewhere on the white ground in the header area, all text on the page is selected! Try it! Click on the "Kanton Aargau" logo or anywhere in the same area, and tell me if you experience this, too.

I never had an error like this, and I have no idea what could cause the problem. Any ideas?

Thanks a lot
Josh

Seems like I'm always trying to get something to render correctly in IE but this time it's firefox that is acting ornery.

There's not much to the page I'm working on. The table (#schoolstable) should be centered in the #mainbody div.

Works in ie, fails in firefox.

Here's my css:

Code:

/* = Default Layout
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  	margin: 0;
	padding: 0;
}

/* Remove border around linked images */
img {
	border: 0;
}

body {
	text-align: center;
	min-width: 800px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}



/* = Basic Layout and Typography
-----------------------------------------------------------------------------*/

h1 {
	margin: 8px 0;
}

h2 {
	margin: 8px 0;
}

p {
	margin: 4px 0;
}

ul {
	margin: 8px 0;
}

li {
	font-size:14px;
}

form {
	margin: 8px 0;
}



/* =Advanced Layout and Typography by Area
-----------------------------------------------------------------------------*/

#wrapper {
	width:760px;
	margin: 0 auto;
	text-align: center;
}

#masthead {
	width:760px;
	margin: 0;
	background: url(../images/indexheader.jpg) no-repeat center;
	height: 270px;
}

#mainbody{
	width:760px;
	margin: 0;
	text-align: center;
}



/* = Basic Links
-----------------------------------------------------------------------------*/

a, a:visited {
	color: #000000;
	background-color: #EEEEEE;
	width: 150px;
	line-height: 18px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

a:hover, a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color:#00FF33;
}





/* = Advanced Links
-----------------------------------------------------------------------------*/

.c0000FF a, .c0000FF a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c0000FF a:hover, .c0000FF a:visited:hover {
	color: #FF6600;
	width: 150px;
	text-decoration: none;
	background-color: #0000FF;
}


.c990000 a, .c990000 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c990000 a:hover, .c990000 a:visited:hover {
	color: #FFCC00;
	width: 150px;
	text-decoration: none;
	background-color: #990000;
}


.cCC6600 a, .cCC6600 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.cCC6600 a:hover, .cCC6600 a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: #CC6600;
}


.c3366CC a, .c3366CC a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c3366CC a:hover, .c3366CC a:visited:hover {
	color: #FFCC33;
	width: 150px;
	text-decoration: none;
	background-color: #3366CC;
}


.c333366 a, .c333366 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c333366 a:hover, .c333366 a:visited:hover {
	color: #CCCC99;
	width: 150px;
	text-decoration: none;
	background-color: #333366;
}



/* = Basic Lists
-----------------------------------------------------------------------------*/

ul {
	list-style-position: inside;	
	list-style-type: none;
}

ul li {
}



/* = Advanced Lists
-----------------------------------------------------------------------------*/

.schoollist {
	text-align: center;
}

.schoollist li {
	line-height: 16px;
	padding: 1px 1px;
	width: 150px;
}



/* = Tables
-----------------------------------------------------------------------------*/

table {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
	margin: 8px 0;
}

tr {
	padding: 0;
	margin: 0;
}

td {
	padding: 0;
	margin: 0;
}



/* = Advanced Tables
-----------------------------------------------------------------------------*/

#schoolstable {
}

#schoolstable tr {
}

#schoolstable td {
}



/* = Forms
-----------------------------------------------------------------------------*/

fieldset {
}



/* = Advanced Forms
-----------------------------------------------------------------------------*/

Hi
I have a table which i want to have cellpadding of 6. when i view it in ie it works perfectly, but when i view it in firefox it adds about 12 and makes the padding huge. any ideas whats wrong? i've found that firefox seems to screw alot of css things up.

heres the code im using:
Code:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0" bordercolor="#111111" width="100%" id="AutoNumber1" background="network_bg.jpg">
<tr>
<td width="100%">
<table border="0" cellpadding="6" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber2" align="right" width="947">
<tr>
<td>&nbsp;</td>
<td> 

I noticed that in Firefox, setting the height to 100% in the style tag attribute, does not work.

See code below:
Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
  min-height: 100%;
  max-height: 100%;
  height: auto !important;
  height: 100%;
  overflow: auto;
}
#divider {
	cursor: e-resize;
	width: 8px;;
	background-color: #444444;
	vertical-align: center;
	min-height: 100%;
	max-height: 100%;
	height: auto !important;
  	height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'

//this function gets the original div height
function setPos(e){
	//for handling events in ie vs. w3c
	curevent = (typeof event == 'undefined' ? e:event);
	//sets mouse flag as down
	mouseStatus = 'down';
	//gets position of click
	curPos = curevent.clientX;
	//accepts height of the div
	tempWidth = document.getElementById('leftMenu').style.width;
	//these lines split the width value from the 'px' units
	widthArray = tempWidth.split('px');
	curWidth = parseInt(widthArray[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
	if(mouseStatus=='down'){
		curevent = (typeof event == 'undefined' ? e:event);
		//get new mouse position
		newPos = curevent.clientX;
		//calculate movement in pixels
		var pxMove=parseInt(newPos-curPos);
		//determine new width
		var newWidth = parseInt(curWidth+pxMove);
		//conditional to set minimum width to 5
		newWidth = (newWidth < 10 ? 10:newWidth);
		//set the new width of the div
		document.getElementById('leftMenu').style.width = newWidth+'px';
	}
}

function toggleMenu(e) {
	e.stopPropagation();
	if (document.getElementById('leftMenu').style.display != 'none') {
		document.getElementById('leftMenu').style.display = 'none';
	} else {
		document.getElementById('leftMenu').style.display = '';
	}
}

//-->
</script>
</head>

<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
  <tr valign="top">
    <td id="leftMenu" style="width: 230px;">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </td>
    <td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
    <td id="mainContent">
      <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
        <p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
        <p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
        <p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
        <p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Can anyone suggest a solution?

Hello,
I use the following css code to define the style of some tables.
However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code:

table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
}
.darkRow td{
	background-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow td{
	background-color: #BFACBF;
	color: #4D3D4D;
	padding-left: 4px;
}

I create the tables something like this: Code:

<table class="listings">
<tr class="darkRow"><td>bla</td></tr>
<tr class="lightRow"><td>bla</td></tr>
</table>

Why does it display so much different in those 2 browsers?

Hello,

I was hoping somebody can help me. I have been playing around with the problem, but I can't seem to figure it out. It is regarding my navbar not aligning properly in firefox.

If you view this section of my site . com/musicians/

In IE it looks as it should, however in firefox it's way off on the right. I am using 2 stylesheets for this page;

. com/wp-content/themes/WP-Genius/style-music.css
. com/musicians/skins/Nova/Nova.css

If anybody can provide me some insight on how to fix this, that would be greatly appreciated

Thanks!

Code:

-- HTML

<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>

-- CSS

/*  Dashboard */

#Dashboard {
	border: 1px solid #b5bfbf;
	padding: 2px;
}

/* Overview Table */

#Overview {
	width: 100%;
	border-collapse: collapse;
	height: 50px;
	background-image: url(../images/dashboard/overviewtable_bg.png);
	background-repeat: repeat-x;
}

#Overview td {
	padding-top: 8px;
	padding-left: 5px;
	border: 1px solid #b5bfbf;
	margin: 0;
}
#Overview td.Detail {
	width: 45px;
}
#Overview span {
	font-size: 20px;
	font-weight: bold;
	display: block;
	margin-top: 2px;
}

so there is a DIV with a 2px padding on the inside.

But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right.

I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous.

I am not sure what the issue is?

edit:

screenshot:

http://ricebox.whiteazn.com/tabpadding.png

Hello,

I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear.

http://oharenoise.org/2010_news_releases-2.htm

hi

i have a page that contains a large html table. this table spans many pages (in internet explorer it spans 6 pages). however, when i view the print preview in firefox it only shows 1 of 1 page, and at the bottom of the page, where i would expect a page break to exist, the table continues on and then off the bottom of the page. basically, it seems to be attempting to render the entire table on to one page, even though it won't fit.

has anyone got any ideas how i can make this table print on multiple pages?

i've read somewhere that gecko based browsers have a problem with floated content, but i'm sure i've un-floated everything.

thanks in advance.

dave

Hi and thanks in advance for any of your help.

I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space.

I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen.

Code is below with screenshot attached of what I expect to happen (as in IE).

Code:

<html style="height:100%;">
<body style="height:100%; margin:0;">
<table style="height:100%; width:250px;">
	<tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr>
	<tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr>
</table>
</body>
</html>

Thanks again for any help or pointers as to where I have gone wrong.

my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long.

im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell.

one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image.

does anyone have a solution to either of these 2 problems?


css:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patrick Allard's Very Graphic Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<img src="backgroundfire2.gif" alt="background image" id="bg" />

<table border="1" class="introlayout">
<tr>
<td class="introtitle">

<img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />

</td>
</tr>
<tr>
<td class="skillpics">

<img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
<img src="programmingpic.jpg" alt="background image" id="programmingimg" />

</td>
</tr>
<td class="skilltext">

<img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
<img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />

</td>
</tr>
<td class="menu">

<img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />

</td>
</tr>
</table> 
</body>
</html>

html:

Code:

html, body 
{
height: 100%;
margin: 0;
padding: 0;
}

img#bg 
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}

img#titleimg 
{
width:100%;
}

img#mainmenuimg 
{
text-align:center;
width:30%;
}

img#analogskillsimg 
{
width:40%;
height:60%;
}

img#programmingimg 
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}

img#analogskillstext 
{
vertical-align:bottom;
width:40%;
}

img#programmingtext
{
float:right
width:40%;
}

table.introlayout
{
width:100%;
height:100%;
}

td.introtitle
{
width:100%;
height:10%;
}

td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}

td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}

td.menu
{
text-align:center;
width:100%;
height:10%;
}