|
CSS - Background-position Issues With Opera 9.62
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 Similar TutorialsI 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;
}
Hey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern. The stylesheet is as follows Code:
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0px none;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
body {
background: #ECF4F7;
text-align: center;
font: 11px verdana, arial, sans-serif;
color: #695F4C;
padding-bottom: 10px;
}
/** layout **/
#wrapper {
text-align: left;
margin: 37px auto;
width: 839px;
background: #ffffff;
position: relative;
padding: 0;
}
#header {
background: #D9D1BC url('images/logo.jpg') no-repeat;
height: 192px
}
#nav {
background: #4B5360;
position: absolute;
top: 153px;
left: 339px;
width: 499px;
height: 20px;
padding: 9px 0px;
text-align: center;
margin: 0;
}
#nav li {
list-style: none;
display: inline;
color: #fff;
}
#nav a {
text-decoration: none;
color: #fff;
}
#body {
background-color:#FFF;
}
#postheadb {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 500px;
background: #2dbaa7;
}
#postheadb .inner {
padding: 6px 12px;
width/**/:/**/ 501px;
Height/**/:/**/ 10px;
}
#postheadab p {
margin: 0.9em 0;
}
#posthead {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#posthead .inner {
padding: 6px 12px;
}
#posthead p {
margin: 0.9em 0;
}
#contentb{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
background: #40789d;
}
#contentb .inner {
padding: 6px 12px;
width/**/:/**/ 476px;
Height/**/:/**/ 52px;
}
#contentb p {
margin: 0.9em 0;
}
#content{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
width: 839px;
background: #40789d;
}
#content .inner {
padding: 12px 12px;
}
#content p {
margin: 0.9em 0;
}
#copyright {
text-align: center;
background: #030303;
font-size: 9px;
padding: 2px;
width/**/:/**/ 92.8em;
Height/**/:/**/ 3em;
}
input
{
color: #FFFAF0;
background: #40789d;
vertical-align: middle;
}
.email input
{
position:absolute;
left: 40px;
top: 20px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#sidebar
{
margin-bottom:0;
float: left;
background: #D3D3D3;
padding: 395px 169px;
Height/**/:/**/ 70px;
}
.videobar {
position:absolute;
left: 20px;
top: 200px;
height: 600px;
width: 300px;
float: right;
padding: 10px;
}
.password input
{
position:absolute;
left: 40px;
top: 60px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#login{
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#searchTerm{
width: 125px;
height: 15px;
}
#submitsearch{
height: 22px;
}
#login .inner {
padding: 90px 12px;
}
#login p {
margin: 0.9em 0;
}
.submit input{
position:absolute;
left: 40px;
top: 90px;
width: 55px;
height: 22px;
padding: 0;
}
fieldset {
border: 1px solid #781351;
position: absolute;
left: 300px;
height: 130px;
top: 215px;
width: 300px;
}
legend {
background-color: #ffa20c;
border: 1px solid #781351;
line-height: 1.5em;
position: relative;
top: -0.75em;
}
The website displayed in Firefox can be seen here Firefox and Opera here Opera many thanks, Doug Hey everyone, The site in question is roadmasterusa.com We've got a site developed that looks acceptable in most browsers, with the exception of Opera and IE8 (though we were able to put in the modify header to roll back to IE7 rendering). The problem is the positioning of the navigation, and some of the other page elements. Now I have been unsuccessful in finding any way about this other than to not support Opera, but we don't want to miss out on that 1% of visitors. I've spent quite some time trying to figure out how to get this site to render right; now I need some expert help. I look forward to anything you suggest. -Troy Oltmanns here is the site http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. My little attempt to create a totally horizontal layout crashed against that crap Opera. Here's the page, and some piece of code: Code:
body
{
height: 400px;
width: 2000px;
border-bottom: solid 1px #000;
background: #fff url(img/bg_body.jpg) no-repeat top right;
margin: 0px;
}
As you can see, in Opera the background image is not displayed at the top right of the body.. any ideas? I've tried the html width 100% trick but no luck. Please have a look here with Opera. As you can see, the background image is pushed to the top and all you can see it's a little part of the image. Here's part of the css code: Code:
body
{
background: #FFF url(img/bg_body.jpg) no-repeat bottom right;
}
How could I solve it? I can't set a fixed height because in lower res the layout goes bye bye. Hi all, I've got a jpg background image using CSS and it's not displaying in Opera, but it is in absolutely every other browser back to IE 5.0. If I change the image to a gif, it displays fine. Is there any reason why the jpg wouldn't display in Opera? 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 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? 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 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? 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'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 }
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 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>
*** 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. |
|||||||