CSS - Cellspacing Between Firefox And Ie

I am constructing a table (needs to be table) where the first 2 columns of data need to have no spacing in between them. However I want the rest of the columns to have spacing of say 4px. Is this possible?

I cant create a table within a table to solve the problem either because all of the cells in the table are related. I tried setting the table to have no spacing and then applying margins to the cells i want to have margins, but no margins were applied. Any ideas?

Hello all, I am encountering a minor bug working on a page, and it is driving me insane.

Anyway, I have a table organized as such:

<table height="100%" border="0" cellpadding="0" cellspacing="0">
.
.
.
</table>

Now, I wanted to convert this to use CSS so that it would be HTML 4.01 compliant. So, I used a CSS document outlined like so:

.maintable
{
padding: 0px;
border-spacing: 0px;
border: 0px;
height: 100%;
}

and then changed my main code to this:

<table class="maintable">
.
.
.
</table>

Anyway, the height and border seem to be "moving over" fine, but it is clear to me that the padding and spacing are not. In any browsers that I use, I get an output as if padding and spacing were set to default values...

I tried using the collapse method, that failed to.

I usually miss minor things, so what is my stupid error?

Thanks

Hi

I'm sure this is an easy one, but I can't figure out how to create a table style sheet that does exactly what the following html does

Code:

<table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="blue">
	<tr>
		<td bgcolor="yellow"></td>
	</tr>
</table>

I tried many different variations using the table-specific keys documented here but am unable to achieve the above effect.

What's happening is that the yellow background of the "td.outlineCollapsed" style (below) has a 1 pixel inset on all sides from the edges of the "table.outlineBase" style box. With the html, by contrast, the yellow background of the <td> exactly overlaps the blue background of the containing table. The exact overlap is what I'm trying to acheive.

Could someone take a look and tell me what I'm doing wrong?

Thanks

Ken

Here's the css:
Code:

table.outlineBase {
	background-color: #888888;
	width: 100%;
	height: 20px;
	/* 
	tried all of the following in many 
	different combinations. Nothing worked. 
	
	border-style: hidden;
	border-collapse: collapse;
	border-spacing: 0px;
	border: outset 0px;
	border-spacing: 0px;
	border: inset 0px;
	*/
	}

table.outlineBase:hover {
	cursor: pointer;
	}

td.outlineCollapsed {
	background-color: yellow;
	width: 25px;
	height: 20px;
	}

hi, i'm designing my page and i would like my tables to look similarily as Dev Shed Forums table in the "main menu" (the starting page).

i cannot find out how this is done: the first table row uses cellspacing, the second row doesn't use it and the third row uses it again.
(where 1st row is where "Forum,Last Post,Threads,Posts" is written, 2nd with "Programming Languages" and 3rd with "PHP Development")

well, maybe it's not done this way at all (i tried to decode the HTML code but it was too complicated for me), but i would like to ask if it can be done somehow this way (eg: to define a table with cellspacing and then override this setting in one specific row with some CSS rule) or i have to use more tables to achieve this effect?

it came in to my mind when i saw something similar in the Dev Shed Forum's HTML code:
Code:

<td style="padding: 0px;">

is there something similar which influences cellspacing?
thank you

what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css?

i've tried
PHP Code:
 table
{
    border-spacing: 0px;
    padding: 0px;
    border-colapse: colapse;
    border-style: solid;
    border-width: 1px;
}
td
{
    border-style: solid;
    border-width: 1px;
    padding: 2px;
} 





That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well.

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.

I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this?

Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf

PC Firefox Screenshot:


Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text)

Any help is greatly appreciated

Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another.

now i don't like saying things like possible bug because 99/100 it's not a bug, but some kind of user error.

however, i have the following situation and i thought that describing it as a bug may get people interested in it

two tables, both with auto width / height, both the same code. one table is set so that when viewed on screen it has display: none and then when printed it has display: block.

if you do a print preview in internet explorer, the page shows two identicle tables. in mozilla, the table expands to fill the width of the page for the hidden table.

see html attached for example; load in firefox / ie; do a print preview and you'll see what i mean.

any ideas?

I built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong?


Please can someone tell me what I must do to get the code working in both IE and Firefox.

i read the thread posted about this not too long ago, and tried out the DOCTYPE! tag suggested, along with a few others from W3...

however all that did was screw up the page more.

anything you could do to help would be great

Page Link

my css in IE is GREAT and look good. but on firefox, it doesnt show my background and all that. can anyone give me some suggestions.

www.na-magodai.net

I have two divs on a page and the last two are about 10 pixels higher up the screen than the last one. But if I adjust the window size they move back down where they should be.

This only happens on of the pages though which is quite odd. Does anyone know of any firefox bugs that would cause this and any work-arounds?

users.accesscomm.ca/kendemchuk/test/education_tmp.html


preview in firefox and IE.
Lines appear in IE but not firefox
This is related to the display of a text box on mouseover.

why ?? is there a better method ??

Have a page at

www.maxxedmotors.com/damo

There is a div called "container" which is supposed to surround all of the content with a border.

This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header".

Can anyone tell me where i'm being dumb

Any help greatfully appreciated.

My website works fine with all browsers except IE. Can anyone help me with the issue?

www.opennys.com

It uses CSS and xHTML and PHP.

Thanks,
Dennis