CSS - Div Position Different In Ie And Firefox

The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left.

Know why?

Hi,

I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes.

www.binaryshopper.com

The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong!

I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!!

Can someone please help me here before I start shooting Firefox developers?

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

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.

Hello,
I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like



So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this?

How to make div stick to top of a page and align center

Hei ppl.

i am begenning of designing in css but i have a problem..

i have my website www.zyxep.net/byensguf/

i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border..

and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything..

here is my css code:

Code:

body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
	margin: 0px auto;
	left:150px;
	top:0px;
	width:760px;
	height:420px;
	z-index:1;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#header {
	margin: 0px auto;
	left:0px;
	top:0px;
	width:760px;
	height:200px;
	z-index:2;
	background-image: url(images/logo.jpg);
	border-bottom: 1px solid black;
}
#menu {
	margin: 0px auto;
	left:0px;
	top:200px;
	width:760px;
	height:20px;
	z-index:3;
	border-bottom: 1px solid black;
}
#content {
	margin: 0px auto;
	left:0px;
	top:220px;
	width:760px;
	height:180px;
	z-index:4;
	border-bottom: 1px solid black;
}
#footer {
	margin: 0px auto;
	left:0px;
	top:400px;
	width:760px;
	height:20px;
	z-index:5;
}
#login {
	margin: 0px auto;
	left:760px;
	top:15px;
	width:400px;
	height:50px;
	z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}

and my index.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ByensGuf.dk - Byens bedste guf</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="zyxep">
<META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio">
<META NAME="Description" CONTENT="zyxep.net - portfolio">
<meta name="REVISIT-AFTER" content="1 DAYS">
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<div id="login">
<form action="login.php" method="post">
<div>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="login" id="loginsubmit">
</div>
</form></div>
</div>
</body>
</html>

plz help me.. i am so confused

My site is RegionalCreations.com if you want to see the issue for yourself. I actually haven't encountered this issue before with the countless sites I've made. I used the basic layout of an already made wordpress theme and redesigned it for my site, I didn't change the menu position however, so I think the issue is with the original theme.
Here is an image showing the problem:
Well apparently I can't post an image so go to my site and then add /images/IE-CSS-bug.jpg on to see it, thanks.
As you can see my image across the top is off center in IE even though it looks fine in Firefox. My menu is also spaced down in IE when it shouldn't be.
Here are the locations of my stylesheets, the second 1 loads after the main 1 if you view the page in IE. (I can't post the url so go to my site and add the rest of the url on.)
Stylesheet: /main/wp-content/themes/cleanmachine/style.css
IE additional style: /main/wp-content/themes/cleanmachine/ie-win.css

If anyone can look at my stylesheets and tell me the problem that would be great. Thanks.

Hi I have just read this

Quote:
Using CSS to position text and graphics absolutly, relatively and overlapping
elements such as text and images. Includes the best way of overlapping text



Can some one tell me therefore if it is possible to explicitly specify the position to place an animated gif on top of an existing image with an image map; almost as a marker.

Thanks for your help

Rob

I have been give the challenge of converting everything to use CSS. The original website is at (URL address blocked: See forum rules)

And my css version at (URL address blocked: See forum rules)

The header and footer I am happy with. The main content section is a content, left, and right DIV. I would like this section to be always aligned centrally with each having a fixed width. What will happen is that the main section (content,left,right) will be more narrow than the header and footer.

I cannot get the content section to go alongside the left calendar type bar.

Any help would be appreciated.

Many thanks
Martin

The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?"

Is the answer "it will be measured from the top left"?

I am working on a website for a friend aamcokc.com and the Nav Bar is sitting right where it's supposed to in FF, Chrome, and Safari on the mac. However, the PC platform seems to make it sit to the left on some of the different browsers, but not all. Is there some kind of code fix I can put in the css to adjust for this? Sorry, this is my first attempt at CSS, so it may be a bit of a mess!

Once I fix this issue the site is done, so the sooner the better!! I really appreciate any help anyone can offer!!