CSS - Getting Background Position In Firefox

ok, so this is driving me insane right now. I have a page, all divs, all positions absolute. Everything is working perfectly except two divs, which should line up 157px from the top, do so only in firefox, safari and netscape, and for some reason they are 8 pixels off in IE. If I change the position to 149px, then it lines up perfectly in IE, but 8 pixels too high (and then of course behind other stuff in firefox, etc.).

Here is the SITE, and here is the CSS

If someone could please help me out here, I would be overwhelmingly grateful. Thanks in advance for any help anyone can offer.

Hey Guys!

Trying to add a background position to a div and position it top right. Works in FF and IE7, but IE6 wants to put it top left.

Code:

background: $hexcolor url(/v2/PHP/img/$logo) no-repeat top right;

www.RoundtopRiders.com/v2/videos/

Thank you in advance!

I have the following CSS and HTML:

Code:

<DIV STYLE="width: 50px; height: 10px; line-height: 10px; background-color: #D0D0D0;">
 <DIV STYLE="width: 100%; height: 100%; background: url(/imgs/blog/stars/smallblock.png) -15px 0px no-repeat;">
 </DIV>
</DIV>

In all browsers except Safari the outer div is covered by the inner div except for the very last 15px, hence the -15px to offset it. In Safari the inner div covers all of the outer div. Any way to fix this?

I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu

Based on that I've created a sprite image that is 960x88.

I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing.

Here is my HTML and CSS:

html Code:
Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav>

  
  <nav>
    <ul id="main_nav">
      <li><a href="#" class="home"></a></li>
      <li><a href="#" class="case_studies"></a></li>
      <li><a href="#" class="solutions"></a></li>
      <li><a href="#" class="free_quotes"></a></li>
      <li><a href="#" class="government"></a></li>
      <li><a href="#" class="recycle"></a></li>
      <li><a href="#" class="resources"></a></li>
      <li><a href="#" class="about_us"></a></li>
      <li><a href="#" class="contact_us"></a></li>
      <li><a href="#" class="login"></a></li>
    </ul>
  </nav>

css Code:
Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }

  

  


 #main_nav {


     height: 40px;


 }


 #main_nav li {


     float: left;


 }


 #main_nav li a {


     background:url(../images/main_nav_sprite.png);


     display: block;


     height: 40px;


 }


 .home {


     background-position: 0px 0px;


     width: 60px;


     height: 40px;


 }


 .case_studies {


     background-position: -60px 0px;


     width:120px;


     height:40px


 }


 .solutions {


     background-position: -180px 0px;


     width:100px;


     height:40px


 }


 .free_quotes {


     background-position: -280px 0px;


     width:100px;


     height:40px


 }


 .government {


     background-position: -380px 0px;


     width:120px;


     height:40px


 }


 .recycle {


     background-position: -455px 0px;


     width:75px;


     height:40px


 }


 .resources {


     background-position: -555px 0px;


     width:100px;


     height:40px


 }


 .about_us {


     background-position: -642px 0px;


     width:87px;


     height:40px


 }


 .contact_us {


     background-position: -748px 0px;


     width:106px;


     height:40px


 }


 .login {


     background-position: -822px 0px;


     width:74px;


     height:40px


 } 

hey, i have this code below at the top of my page...the image that is there a a background image i would like to more to the right a bit so that some of the orange background is shown on the left!! can anyone advise how i do this please?? thanks

Code:

#TitleBar {
	margin:0px 0px 10px 0px;
	padding:28px 0px 5px 10px;
	padding-left:10px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #ffffff;
	border-bottom: 1px #ff9900 solid;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#ff9900;
	background-image:url(../images/webmedia72.gif);
	background-position: left;
	background-repeat: no-repeat;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:14px;}

thanks
RF

CSS :
Code:

body{
	margin:0;
	background-image:url(images/pattern1.gif);
	padding-left:5%;
	padding-right:5%;
}
h1{
	background : url(images/logo.gif) no-repeat;
	width:291px;
	height: 127px;
}
#main{
	background : #FFFFFF url(images/back.gif) repeat-x;
	border-left: 8px solid #5D5F60;
	border-right: 8px solid #5D5F60;
}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" title="standard" href="blueDream.css"/>
		<title></title>
	</head>
	<body>
		<div id='main'>
			<h1></h1>
		</div>
	</body>
</html>

There appears to be a very strange gap on the left side
of the heading background which I cannot seem to get rid of.
Any ideas?

Hi:
I'd like to ask you why my image sit in different position from IE and Firefox browser.

my code as following;

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
#image{
position: absolute;
right: 18px;
top: -10px;
padding:0;
border: 2px dashed red;

}

#img1{
position: relative;
padding: 0;
border: 2px dashed #32ed19;
margin:auto;

}
</style>
</head>

<body>
<div id="image">
<img id="img1" src="firstcar.JPG" alt="myfirstcar">
</div>

</body>
</html> 

Im creating a website for somebody and using CSS for positioning.

Ive created a main content container which is a DIV and have several child DIVS which are the content themselves. The problem I am positioning the divs using relevant positioning but in firefox the webpage is still leaving lots of space underneath the positioned divs like they are stacked on top of each other.

Safari isnt giving me this problem and I havent even looked at it in IE so i dont know yet. But could somebody please tell me how I can get firefox to get rid of all the space underneath because my DIVS are not stacked.

http://christopher-ball.com/Craig/

visit that in firefox and you will see what I mean, theres a big chunk of red UNDER the footer that shouldnt be there. If i take out the awards and sponsors DIVS then the block disappears.

Could somone please tell me what is the issue with the navigation on the left hand side on this page. It looks ok in IE but in Firefox it is sticking out into the main page area?

http://www.santarosadentist.com/santa-rosa-dentist.asp

Thanks.

*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work.


Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of

style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;"

I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed.

Thank you for any help. Tom

ahh thanks figures it out

never mind.

I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px.

I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions.

Thanks for your help!

Open in FF to see how it's supposed to work:
Open in IE to see problem.

Here's the HTML

Code:

<div id="Menu">
<div id="nav_header">

   <div id="text">

            
		    Admissions & Financial Aid

            </div>


</div>

<ul id="nav_level_1">

         <li id="submenu"><a href="../index.php">Applying to Union</a></li>

			<ul id="nav_level_2">

               <li id="nav_active"><a href="index.php">Types of Admission</a></li>

			<ul id="nav_level_3">

               <li><a href="Transfer.php">Transferring to Union</a></li>

         <li><a href="Early.php">Early Decission</a></li>


         <li><a href="Regular.php">Regular</a></li>

         <li><a href="international.php">International Admission</a></li>

         <li><a href="aop_heop.php">AOP/HEOP</a></li>

         <li><a href="Medical.php">Eight-year Medical</a></li>

         <li><a href="Law.php">Six-year Law</a></li>

         <li><a href="MBA.php">Five-year MBA</a></li>


         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

			<li><a href="../Applications.php">Apply Online</a></li>

         <li><a href="../Forms/index.php">Download Application Materials</a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

            <li><a href="../../FAQs/index.php">Have a Question?</a></li>


         <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>

         <li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>

         <li><a href="../../interviews.php">Interviews</a></li>

         <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>

         <li><a href="../../About/index.php">Admissions Staff</a></li>


         <li><a href="../../AlumniAdmissions/index.php"></a></li>

         <li><a href="../../Media/index.php"></a></li>

         <li><a href="/union/admissions/Viewbook/index"></a></li>

         <li><a href="/union/admissions/Alumni/index"></a></li>

         <li><a href="../../sample.php"></a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

   

</div>

Here is the pertinent CSS

Code:

/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_2 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_3 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#e5dece;
    line-height:17px;
    word-wrap: break-word;
}
/* End unordered list base styles */

/* To get indented, wrapping, text that's cross browser compatible
   we need to additionally style the unordered lists and line items under each top <ul>
*/

#nav_level_1 li {
    margin-left:20px;
}

#nav_level_1 li ul {
    margin-left:-20px;
}

#nav_level_2 li {
    margin-left: 40px;
}

#nav_level_2 li ul {
    margin-left:-40px;
}

#nav_level_3 li {
    margin-left:60px;
}

#nav_level_1 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 4px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 20px;
}

#nav_level_2 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 24px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 40px;
}

#nav_level_3 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 44px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 60px;
}

#Menu #submenu {
    list-style-type: circle;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#submenu2 {
    list-style-type:circle;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

I'm using background images on a <span> tag.

Code:

.thespan {
  display: -moz-inline-box;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: 2px;
  /* using longhand on purpose, since other classes override bits later */
  background-image: url(../img/iw_ds_sprite.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels.

There is a shell around the span - changing this shell's class makes the internal background-position change, like so:

Code:

.theshell .thespan {
  background-position: 0px -40px;
}

This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px.

I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera!

Any help is greatly appreciated.

Tim

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?