CSS - Css Table Display Difference Between Ie And Firefox.

I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there.

li'l help please?

I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox.
Have a look he www.duikeninegypte.nl

The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox?

Cheers for any feedback!
Gurt

PHP Code:
echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> ";
// background image
echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> ";
//start navigation menu
echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> ";
echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> ";
echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> ";
// end navigation

// left panel
echo " <span style=\"position: absolute; left: 20; top: 190;\"> ";
echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> ";
echo " </span> ";

// body panel
echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> ";
echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> ";
echo " </span> ";

echo " </div></center> "; 

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!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

Hi,

In Firefox an odd behaviour occurs when changing the selection in a selectbox. Changing the value in the selectbox makes the footer to disappear. CTRL+F or refresh lets the footer appear again. This behaviour doesnt occur in IE6.

Anyone familiar with this behaviour of Firefox and has a solution?

The page can be found at:

http://users.castel.nl/~kampm01/test/select.html

with regards,

Marc

Hello ppl,

I have a problem about 6 div's which are displayed inline.

Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another

here is the link http://www.immo-land.ro/test/div-inline.html

and below is the code which I wrote for every DIV

Code:

<div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> 
<a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> 
<br> 
Text here 
</div>

any ideea why is all that mess in firefox ?

10x in advance

See ya all

Hi,

I'm having a problem with FF & scrollbar when I center my page.

When the page is smaller then the window, the scrollbar in FF is complete hiden, not disabled like in IE.

Let's say I have two pages, page1 don't need scrolling and page2 does. So, when I jump from page1 (no scrolling) to page2 (scrolling) my page will shift to the left when the scrollbar apears.

Is there a way to always display the scrollbar like in IE --- display but disable, when need it enable.

Thank you!

I've been trying to scrap togther a website and I have buttons that when you rollover them a menu appears for it. It looks fine in IE but when i display it in mozilla it all goes to hell.

Here is the link:
http://bingweb.binghamton.edu/~theta/nu05/new/code1.html

Thanks for the help
-Stooge

Here's a 1st for me. Got a problem in Firefox NOT in IE

Sometimes my floated div displays under div next to it, instead of beside it. If I refresh, then it always will display correctly next to it. Realized this was a much bigger problem when I tested in Firefox on another computer and half the pages did it first time they loaded.

Within my div container I have my div menu floated left with a width of 20%, then my div maincontent also floats left with a width of 78%. (I've verified there is 5-10px extra space. So the two are not stretching the entire width)

Tried floating the #maincontent right, but then my footer completely screwed up and couldn't fix.

Not sure what kinda change I might need to make.

Any insights? Anyone else encounter this in Firefox?

Thanks,
James

Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site.

I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all.

I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me.

I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed...

thanks.

blog.mirana[dot]co[dot]uk

Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help.

Please see the attached html.

Hi guys,

Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine.

My CSS is below. Thankyou in advance




Code:

#navcontainer {
	margin-left: 30px;
}
#navlist{
	list-style: none;
	padding: 0;
	margin: 0;
}
#navlist li {
	display: inline;
	border-right: 1px solid #000;
	padding: 0 0.4em 0 0.4em;
	margin: 0 0.4em 0 -0.4em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #navlist li
{
	display: block;
	float: left;
}
#navlist li a{
	font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif;
	font-size: 200%; /* set the font size for p, scaled from the body declaration */
	text-decoration:none;
}

#navlist a:link,  #navlist a:visited{
	color: #666;
}     /* unvisited link */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
 	color: #000;
	
}

My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it.

Here is the code in the html page:

Code:

<head>
<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
  <h1> Beckin Designs</h1>

Here is the CSS rules in my external CSS sheet:

Code:

.content h1 {
	font-family: "English", sans-serif;
	font-size: 52px;
	font-style: normal;
	/* [disabled]text-transform: uppercase; */
	color: #F7F7F7;
	text-decoration: none;
	width: 930px;
	text-align: center;
	margin: -10px 0 5px 0;
	padding: 0;
}

Thanks!

Hi,

I have just redesigned http://www.harvardbarcourse.com using HTML/CSS and am having two very important Firefox compatibility problems.

1. The links on the left side of the page and in the page body are not clickable. I have no idea why and have tried everything to rearrange divs to no avail. My code looks valid and I'm not sure what Firefox is doing (it works in IE).

2. Not as important: the whole layout is left-aligned in Firefox (instead of centered like in IE). I used Dan Cederholm's tip for CSS certering (http://www.simplebits.com) but it seems not to have worked. Any ideas why?

Any ideas you have would be greatly appreciated. Thanks!

Kristopher

Is there any way to display a style seperately for Firefox than for any other browser?