CSS - Not Centering Correctly In Firefox

http://www.djoj.net/home.html <- Faulty Page
http://www.djoj.net/style.css <- CSS

Hey, for some reason in Internet Explorer my Div will not center and I do not know why. I will try and prvide more detaily when I get home from school.

Thank you,
~Brendan

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

If you go here

company.com layout

It looks correct in IE or Firefox

But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up.

Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration.

body
{
background: #e3edc2; color: #333;
font: .8em, arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

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.

Surprise, surprise.

I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected.

I'm thinking it has something to do with the float but can't seem to figure it out.

Any ideas?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr	{
	background-color: #ccc;
}

.tab	{
	padding: 0px 5px;
	background-color: #666;
	border: 1px solid #000;
	border-bottom: none;
	color: #fff;
	float: left;
}

.tab.active	{
	background-color: #fff;
	color: #000;
	margin: 0px 3px 0px 3px;
}
</style>
</head>

<body>

<div class="hdr">
	<div class="tab active">tab 1</div>
	<div class="tab">tab 2</div>
	<br style="clear: both" />
</div>
</body>
</html>

hello all,
my site is at waxmuseumplus dot ie
css file is on the top level called layout.css

I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again.

there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page.

I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though?

The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors.

Please help I'm tearing my hair out and the site is already live!

Hello Gang!

First off, thank you for taking your time to help a noob.

Here is my problem:

With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section).

Can anyone spot why the pages render 2 different ways?

LINK 1
LINK 2

Thank you for your time.

I can hardly believe my eyes. Maybe I'm doing something wrong...

I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be.

Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF.

Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe...

Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up.

Thanks

I uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/.

I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time??

Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php
Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css

Please help!

<div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div>

When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!!

Hi guys,

I finally re-jigged all my CSS somewhat along with my site laoy, i now have 3 columns, one of which displays under the other two :S

any ideas on what i've done here?

the page in question is:

http://wakefieldfhs.co.uk:8180/uPhoto/signup.jsp

Thanks

Hi There,

Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here?

This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP.

HTML:
Code:

<body>
<div id="mainSiteHold">

	<div id="contentLeft"><p>&nbsp;</p></div>
	
	<div id="contentMid"><p>&nbsp;</p></div>
	
	<div id="contentRight"><p>&nbsp;</p></div>

</div>
</body>

CSS:
Code:

body { margin:0px; padding:0px; background-color:#ffffff; }

#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }

#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }

#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }

#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }

Thanks

I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong.

I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari.

Here is the link:
http://gregsgoods.com/seestore.php

In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it.

Here is the CSS code:
Code:

html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {
color: #005B9C;
}

a:hover {
color: #0B2444
}

img {
border: 0;
}

body {
	background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
	color: #ccc;
	font: normal 62.5% Tahoma,sans-serif;
}

p,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
	color: #005B9C;
	margin: 0 0 7px 0;
}

h2 {
	font: normal 1.3em Tahoma,sans-serif;
	margin-bottom: 1px;
	color: #005B9C;
	margin: 0;
}


.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

.container {
	position: absolute;
	left:50px; 
	top:188px;
	background-color: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 8px 8px;
	width: 780px;
}


.top {
	padding: 8px 8px 0;
}


.header {
	position: absolute;
	left:50px; 
	top:10px;
	background-color: #fff;
	font-size: 1.2em;
	height: 173px;
	margin: 0 auto;
	padding: 8px 8px 5px;
	width: 780px;
}
.header .left, .header .right {
	background-color: #000033;
	color: #fff;
	color: #FFF;
	height: 163px;	

}
.header .left {
	background: transparent url(/img/Top.jpg) top left repeat-x;
	border: 1px solid #7795BD;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 163px;
	width: 777px;
	text-align: left;	
	
}

.header .right div {
	padding-left: 16px;
	padding-top: 16px;
	font: normal 1.6em "Trebuchet MS",sans-serif;
}




.navigation {	
	background: #D9E1E5 url(/img/nav.jpg);
	border: 1px solid #7795BD;
	height: 23px;
}
.navigation a {
	background: transparent url(/img/nav.jpg) left top repeat-x;
	border-right: 1px solid #7795BD;
	color: #fff;
	display: block;
	float: left;
	font-size: 12px;
	font-family: Arial;
	font-weight: bold;
	line-height: 23px;
	text-decoration: none;
	padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom; 
color: #f1f1f1;
}


.main {
	border-top: 8px solid #FFF;
	background: url(/img/bgmain.jpg) repeat-y;
}


.sidenav {
        float: left;
	margin: 5px;
	width: 195px;
}
.sidenav h2 {
	color: #333300;
	font-size: 1em;
	font-weight: bold;
	line-height: 30px;
	margin: 5;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
	font-size: 1.1em;
	color: #333300;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background-color: #ebebeb;
	color: #654;	
}

/* content */
.content {
        float: right;
	margin: 5px;
	padding: 0 16px;
	width: 536px;
}
.content {
	color: #666;
	font-size: 1.0em;
	margin-bottom: 6px;
}


.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}



.footer {
	background: url(/img/bluefooter.jpg) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	line-height: 39px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}

Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks.

The site

Code:

		
<div id="searchbox">
			
<h2 id="searchbox_header">Browse Bus Rates and Amenities</h2>
<p style="padding-left: 5px; ">Search by Bus Type:<br />
<select name="bustype">
<option selected value="">All Bus Types</option>
<option value="1" >Deluxe Motor Coach</option>
				<option value="7" >Double Decker</option>
				<option value="4" >Entertainer</option>
				<option value="5" >Executive</option>
				<option value="9" >Limo Bus</option>
				<option value="2" >Minibus</option>
				<option value="3" >School Bus</option>
				<option value="0" >Tour Operator</option>
				<option value="6" >Trolley</option>
				<option value="8" >Van</option>
				</select></p>
<p style="padding-left: 5px; ">Departure State / Province:<br />
<select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option>
</select></p>
			
<p style="padding-left: 5px; ">Departure City / Metro Area:<br />
			<select name="city">
			<option value="">Entire State</option>
			</select></p>
			<div id="searchboxrightcol">
<p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p>
<p>Browse local rates & inventory. Locate specific bus types</p>
<p><a href="#">Search</a></p>
</div>
<div id="searchbox_footer">
<p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p>
</div>
</div>

CSS:

#searchbox {
width: 400px;
margin: 0;
padding: 0;
border: 1px solid #003366;
background: #CCCCFF;
}

#searchboxrightcol {
padding: 0;
margin: 0;
margin-left: 170px;
padding-left: 5px;
}

#searchboxleftcol {
width: 160px;
float: left;
padding: 0;
vertical-align: top;
border-right: 1px solid black;
}

#searchbox p {
padding-left: 5px;
padding-right: 5px;
width: auto;
height: auto;
}

#searchbox_header {
text-align: center;
color: white;
background: #003366;
padding: 0px;
margin: 0px;
width: auto;
}

#searchbox_footer {
width: 400px;
text-align: center;
color: black;
padding: 0px;
margin: 0px;
}

#searchbox a, #searchbox a:visited {
background: #336699;
text-align: center;
padding: 5px 50px 5px 50px;
border: 2px solid #003366;
color: white;
font-weight: bold;
text-decoration: none;
}

#searchbox a:hover {
background: #FC7400;
text-align: center;
padding: 5px 50px 5px 50px;
border: 2px solid #003366;
text-decoration: none;
font-weight: bold;
}