|
CSS - Navigation Background-position Not Working In Ie
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;
}
Similar TutorialsHey 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! *** 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 The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? Hi devshed, First post here so I hope someone wouldn't mind giving me some help with a layout problem I'm having which I think is probably CSS related. The navbar div should be at the top of the maincontent div and to the right of the sidebar div with no gaps. I can get the desired results in FF but in IE there is a whitespace gap between the top of maincontent and navbar divs. Unfortunately I don't have it online yet to show you because I need to upgrade my hosting package first. If anyone can spare a few minutes and make any suggestions I would be very grateful. Many Thanks Jez HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mseis</title>
<link href="includes/layout.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColHybLtHdr">
<div id="container">
<div id="header">
<?php include("includes/header.php"); ?>
<!-- end #header --></div>
<div id="sidebar1" align="center">
<?php include("includes/menu.php"); ?>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<div id="navbar">
This is the navbar
</div>
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer">
<?php include("includes/footer.php"); ?>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
CSS: Code:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #633C91;
}
.twoColHybLtHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
min-width: 800px;
}
.twoColHybLtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.twoColHybLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width.
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule.
*/
.twoColHybLtHdr #sidebar1 {
float: left;
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLtHdr #mainContent {
margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
.twoColHybLtHdr #navbar {
background: #AAAAAA;
margin: 0px -20px 0 -20px;
padding: 1px 20px 1px 20px;
}
.twoColHybLtHdr #navbar a a:link a:visited {
color:#FF0000;
text-decoration:none;
font-size: small;
}
.twoColHybLtHdr #navbar a:hover a:active {
color:#FF0000;
text-decoration:underline;
font-size: small;
}
.twoColHybLtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.twoColHybLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
/* Custom CSS */
.msgreen {
color: #BEDA57;
}
.msblue {
color: #81C4E2;
}
.mspurple {
color: #633C91;
}
.failed {
color: #FF0000;
}
h1 {
color: #BEDA57;
}
h2 {
color: #81C4E2;
}
fieldset {
margin: 1.5em 0 0 0;
padding: 0;
background-color: #81C4E2;
}
legend {
margin-left: 1em;
color: #633C91;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
background-color: transparent;
}
label {
display: block;
color: #633C91;
}
input.btn {
border: 1px solid;
background-color: #81C4E2;
color: #633C91;
font: bold 80%;
}
input.btnhov{
border-color: #FF0000;
}
Please look at this page in IE, http://www.atramember.com then in Firefox. THe navigation up at the top is all messed up and I can't figure out why (messed up in FF). Thanks. Tom Hi, My side navigation seems to be moving down when main content is added to a page for some reason, any ideas why and how i can fix this: Thanks, Mike ------- Thanks fixed! In IE7 on this page http://hometown.tmhdesign.com the background image position for my #main div is being ignored Code:
#main {
width: 990px;
margin: 0 auto;
min-height: 300px;
background: red url(images/style1/main1_div_bg.gif) 0 427px !important;
text-align: left;
}
Hi all, I am having a problem with Firefox and Opera when it comes to background image positioning. It works fine in IE 5-7 and Netscape but... Opera places the image in the top left and Firefox places it at the lowest point of the body e.g. The Div tag and not the bottom of the page. I have uploaded the site for people to get the idea. click here the CSS code is as follows: Code:
body
{
font-size:62.5%;
font-family: Tahoma, Verdana, Arial;
margin:0px;
border:0px;
background-color:#C98531;
background-image :url(../images/background.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
Thanks in advance. Tom Hi all, I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/ I have a horizontal navigation towards the top. Here are my queries: I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change. OR Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS? Please help!!! Thanks! Janusz Hi, I have to get background position of image from a css class in a javascript function. [CODE] abc.button { width: 47px; background-image: url(../bt/save.gif); background-position: 0 -123px; } [CODE] I am able to get it in IE using backgroundPositionX and backgroundPositionY [CODE} var x = document.getElementById('abc').currentStyle.backgroundPositionX; var y = document.getElementById('abc').currentStyle.backgroundPositionY; [CODE} But I am not able to get the background position in FireFox. Is there a way to get background position of image in Firefox. Thanks 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 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 }
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? 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? Hi, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this? Here is my code - Code: @import url('layout.css');
body {
background-image: /images/skyBACK.gif;
background-repeat: repeat-y;
background-attachment: scroll;
background: url('images/skyBACK.gif');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#container {
width: 1020px;
margin: 10px auto;
}
#masthead {
text-align: center;
width: 698px;
height: 140px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fafaff;
}
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#content {
float: left;
width: 518px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#footer {
text-align: center;
clear: both;
width: 698px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
color: #3d6c87;
}
#masthead h3 {
color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a {
color: #0033ff;
text-decoration: none;
display: block;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a:hover {
color: #fff;
text-decoration: none;
border: 1px solid #5f8ea9;
background-color: #5f8ea9;
}
/* Content Styles */
h6 {
color: #000000;
}
h5 {
color: #000000;
}
h4 {
color: #000000;
}
h3 {
color: #000000;
}
h2 {
color: #000000;
}
#content h1 {
color: #000000;
}
#content img {
padding: 1px;
border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
color: #808080;
margin-top: 5px;
}
#footer a {
color: #5f8ea9;
text-decoration: underline;
}
#footer a:hover {
color: #33627d;
text-decoration: none;
}
a {
color: #0033ff;
text-decoration: underline;
}
a:hover {
color: #33627d;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
This is very strange to me any help would be greatly appreciated. I am going to heck right now trying to get this navigation to work. Here is what it is A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise? 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 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>
ahh thanks figures it out never mind. |
|||||||