|
CSS - Background Position In Safari
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? Similar TutorialsI have a site that I have created in WordPress using a pre-designed theme that I heavily customized. http://www.newlivingwaygreenville.org/blog/ The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x. The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others. The image is using inline styles to overcome the limitations of this particular WordPress theme. Code: style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;" Any ideas why this doesn't work right in Safari and what I can do to fix it? Thanks! ks I believe I may have found a CSS bug in Safari, but wanted to run this by some experts for advice, and a possible workaround - I haven't been able to find one yet. What I'm trying to do is position an iframe directly to the right of a table, and have it ALWAYS be to the right, even if it causes the page to horizontally scroll. I was able to achieve this in Mozilla, Opera, and (even) IE [have not tested IE/Mac] by making the iframe absolutely positioned, but inside a relatively-positioned span element immediately after the table, like so: Code:
<html> <head>
<style>
.maintab {float: left;}
.framediv1 {position: absolute;}
</style>
</head>
<body>
<p><table border=1 class="maintab">
<tr><td>Col 1, a short column</td><td>Col 2, which is longer than Col 1</td>
<td>Col 3: an even longer column that isn't fixed-width</td></tr>
</table>
<span style="position:relative">
<iframe class=framediv1 name=framediv width=250 height=200 frameborder="0" src="http://www.yahoo.com"></iframe>
</span>
</body> </html>
As I mentioned, this has the desired effect in Moz, IE, Opera. However, in Safari, it's positioning the iframe relative to the left margin, rather than the right-edge of the table, where the <span> is expected to be. I'm about 90% confident this is a Safari bug, because the position:absolute should be using the last non-staticly positioned parent container (the span) to determine where to put it. Anyone care to confirm? Better still, anybody have a workaround (other than using a table inside a table - blech!) Thanks, Keith Hello, I am trying to have make a 'facebook' style toolbar fixed to the bottom of the screen. This works on desktop browsers except Mobile Safari on the iPhone (due to the 'viewport' way of rendering the page). Is their a workaround for this? I have seen doctyper's method but can't get it to work. Thanks Hi, Is anyone aware of why the background color of my forms won't work in Safari? Here's the CSS code: Code:
input {
background: #010101;
border: none;
color: #FEFEFE;
font: 9px Georgia, Arial, Helvetica, san-serif;
letter-spacing: 0px;
line-height: 12px;
margin: 0px 0px 0px 4px;
}
The background in Safari is white instead of black. Help please! Viggo Hey everyone, I have a site I'm working on for a charity hosted he apoctrack . com/craftsforacause I'm using Dreamweaver and the included Spry framework to render the tabs, and everything seems to be working fine in Firefox, but the background won't render correctly in Safari. Help!? The stylesheet is he url above with /index.css An older version of the site worked fine in both Safari and Firefox, and I've compared the code but found nothing... The old site is he url above /index_classic.html and /index_classic.css Any help would be appreciated! Thx in advance... Well... sorry about the poorly formatted url but the anti-spam rules seem to mean I must post 5 useless posts in order to post anything of substance (with a url). So yeah. I did a diff on the stylesheets but that's hard to post here, so I can try if it'd be useful. Prolly easier to run it urself it it'd be helpful. Nothing useful came up when I tried it. Same for the html pages themselves. 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 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;
}
Hey, If you take a look at the site below - within Apples Safari web browser - you will see how the image on the home page is splintering. ANy ideas? Thanks 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 }
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 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 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 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! Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this? Thanks 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'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 *** 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 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>
|
|||||||