Learn VBA & Macros in 1 Week!

CSS - Tables With Firefox

Full Excel VBA Course - Beginner to Expert

Tables With Firefox	View Content

th tags in the tables are messed up when viewed with firefox. I tried display:block and float:left but did not fix it.

http://refinethetaste.com/html/basket.htm

Full Excel VBA Course - Beginner to Expert

Ie Vs. Firefox With Spans And Tables

Similar Tutorials

View Content

Hallo, i have a problem with CSS and tables defining the styles by automatically builded <spans>. The problem occurs at the time, if the table is broken by the span, e.g:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>
<head><link href="layout.css" rel="stylesheet" type="text/css"></head>
<body>

<span class="CONTENTLIST">
<table width="75%" border="1">

<tr><td>CONTENTLIST</td></tr>

<span class="CONTENTLIST_ROW">
<tr><td>CONTENTLIST_ROW</td></tr>
</span>

</table>
</span>

</body>
</html>

I use the following style-sheet:

.CONTENTLIST
{ font-weight: bold; }

.CONTENTLIST_ROW
{ background-color: #999999; }

All texts are formatted bold, but the CONTENTLIST_ROW has no background color. If i use the following

.CONTENTLIST_ROW *
{ background-color: #999999; }

... it works, but only in IE, not in Mozilla Firefox.

Does anyone know a solution to inherit all style definitions defined by a span (and the spans that enclose this span) that are enclosed by this span?

THX4help

Problem In Viewing Tables In Firefox 1.5.0.1

Similar Tutorials

View Content

Hi,

I am facing a problem while viewing tables in Firefox 1.5.0.1. Everything is fine till the number of rows are less than the table height. As soon as it increases the height, the scroll bard donesn't appear. Instead, it overlaps with the rest of the area. It worked fine in the older versions in IE, Mozilla and Firefox. But now it depending on the height, it hides the rest of the user area as it overlaps it. Can anyone help ?

Thanks

Issues With Tables In Absolute Divs In Ie / Firefox

Similar Tutorials

View Content

The objective:
Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes.

I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it.

I am using a short javascript to change the z-index of the divs in order to produce the tab effect.

The problem:
The whole thing works fine, except for:
- If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll.
- If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox
- Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well.

The question:
Is this a known bug? If so, what is the work-around?
Have I done something dumb? If so, what?

The source:
source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only.

the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem.
the javascript file - the function is at the bottom, 'layer_z_lift'.
the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs.

any questions, post and I shall answer.
Jz.

Strangest Css Problem I've Seen... Firefox Bug? Tables, Scrollbars, Overflow

Similar Tutorials

View Content

Hi,

Please use Firefox and look at:
https://67.18.220.222/~duoboots/secure/test_start.php

Only on Firefox do I see scrollbars on the right white box. The white box is fixed width, and is supposed to expand vertically with the content.

However, the white box does not expand as much as I'd like to. Eventually, as the content gets bigger, Firefox displays unwanted scroll bars.

Then, if I simply press 'Refresh'... the scroll bars disappear, and Firefox displays the page exactly how I want it!

Its really wierd because I can't test this properly. Once the page is refreshed, there are no scroll bars. But, a general user won't press Refresh..and will end up at that page eventually, to find unwanted scroll bars.

I've tried it on Opera, and a friend said its definitely a Firefox bug. I am sure the <table> is causing the problem - because all other pages display fine. The scroll bars are only appearing on this particular page, with a <table>.

Note : if you do not see scrollbars... then thats not a surprise, because Firefox is acting strange on this one.... I mainly see the scroll bars after signing in and accessing the actual PHP page that is dynamically generated. The above link is just a static version whose code I copied and pasted.

Anyway, if anyone has had any similar problems with tables and overflow-scrollbars.. please could you let me know what you did about it?

Some CSS:

Code:

	table.oa_results {
		border: 1px solid #C9AA90;
		border-collapse: collapse;
		width: 310px;
	}

	table.oa_results td {	
		border: 1px inset #C9AA90;
		padding: 2px 2px 2px 4px;
	}

	table.oa_results th {	
		border: 1px inset #C9AA90;
		padding: 2px 4px;
		font-weight: bold;
		text-align: left;
	}

	.whitebox_general_oa {
		width: 387px;
		background: #FFFFFF;
		line-height: 18px;
		overflow:visible;
		display: block;
		clear: both;
	}

Thanks very much!

Mixing Css And Tables, But Tables Won't Behave!

Similar Tutorials

View Content

I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too.

I want a layout with two tables next to each at the top and then another below.

The two at the top are working fine, but the one below keeps jumping back up to the top.

I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution.

The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why.

Here is my code for my page and CSS.

If anyone can help I'd be most grateful.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
	document.getElementById("nav" + num).style.paddingTop = '0px'
	document.getElementById("nav" + num).style.paddingBottom = '0px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '10px';
	document.getElementById("nav" + num).style.borderBottomWidth = '10px';
	
}

function navoff(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
	document.getElementById("nav" + num).style.paddingTop = '8px'
	document.getElementById("nav" + num).style.paddingBottom = '8px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '2px';
	document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>

</head>

<body>
<div class="main">

<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>

<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	padding-right: 4%;
	padding-left: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #EEEEEE;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.main {
	background:#FFFFFF;
	border: 10px solid #36393D;
	width: 89%;
	padding: 5%;
}
.nav {
	padding: 8px;
	background-color: #C3D9FF;
	vertical-align: middle;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #36393D;
	cursor:pointer;
	border: 2px solid #36393D;
}

Absolute Positioning Within A Relative Table Not Working With Firefox. Firefox Bug!?

Similar Tutorials

View Content

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>

For some reason the following HTML & CSS code do not render the same result as the code listed below it:

CSS - Attached Style sheet
Code:

td.style1{
  background-color: #FFFFFF;
  border-top: 1px solid #AAAAAA;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #AAAAAA;
}

HTML Code
Code:

<table>
  <tr>
    <td class="style1">Some content to display</td>
  </tr>
</table>

HTML (Intended display)
Code:

<table>
  <tr>
    <td bgcolor="#FFFFFF" style="border-top: 1px solid #AAAAAA; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #AAAAAA;">Some content to display</td>
  </tr>
</table>

Why wouldn't any browser follow the CSS in the stylesheet?

Css Tables

Similar Tutorials

View Content

I am looking for advice on replacing a table layout (for form layout) with a CSS design. The purpose is to put together a PHP class that auto-generates forms so that the structure of the forms, is under control of an admin interface though an API. The problem is, that many of the clients that I do work for are very particular about the layout. In other words city, state and zip code must all be on one line, but phone number must have a row to itself, etc., etc.. The form must look exactly like the paper version.

Generating a good looking form through an API using a table layout where i have to worry about column spans and so forth, is not something I am looking forward to. I would like to use a CSS layout instead. What is the best way to coax divs to work in the same way table cells and rows do and still deal with any goofy IE CSS quirks?

What Are Tables Really For?

Similar Tutorials

View Content

After discovering Css and finally understand it...(still need to get better) I have to ask, when is it good to use a table? what are their main function ? is there things you can do with a table that cannot be done with css? thanks.