|
CSS - Problem With Png Background In Safari
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. Similar TutorialsHi, 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 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, 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! 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 Was hoping someone could help me with a problem I'm having with margins on this site robertehowarddirectory.com/viewcat.php?category=Art In safari, the margins between each of the "featured" listings is 30px when it should be 8 (4 on the top of each listing, and 4 on the bottom). This jacks up the layout of the site, pushing the featured listings too low, as you can see. IN IE 7, 8 and Firefox, I have no problems, and the site displays fine. Would appreciate any help on this issue, as I've been trying to solve the problem but have not found a solution. Thank you. Hi everyone, I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet. I would post a link but can't because i'm too new. I'm new to this, so be kind on my coding The code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
div#container
{
width: 100%;
background-color: #EAFBFF;
width:760px;
height:220px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #0066FF;
border-bottom-color: #0066FF;
border-left-color: #0066FF;
}
div#container2
{
width: 760px;
background-color: #ddd;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 15px;
padding-bottom: 15px;
}
div#container3
{
width: 760px;
background-color: #666666;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 13px;
padding-bottom: 10px;
}
#container {
}
#Layer1 {
position:absolute;
width:760px;
height:115px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container2 {
}
#Layer2 {
position:relative;
width:760px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container4 {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
font-size: 14px;
font-style: normal;
color: #DDDDDD;
text-decoration: none;
text-align: left;
margin-right: 110px;
margin-left: 125px;
background-color: #999999;
border: thin solid #999999;
padding-left: 15px;
}
#Layer3 {
position:relative;
width:200px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #666666;
margin: 0px;
padding: 0px;
height: 20px;
}
#navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
#navbar li {
float: left;
text-align: center;
background-color: #666666;
position: relative;
width: 130px;
}
#navbar li ul{
position: absolute;
display: none;
text-align: center;
line-height: 25px;
padding-top: 7px;
}
#navbar li > ul {
top: auto;
left: auto;
}
#navbar li:hover ul {
display:block;
text-align: center;
text-indent: 0;
}
#content {
clear: left;
}
#mainphoto {
padding: 0px;
float: right;
border: 1px solid #0066FF;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
#container6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding-right: 30px;
padding-left: 30px;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
a {
font-size: 12px;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CC6600;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
</style>
</head>
<body>
<div id="container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
<param name="movie" value="(URL address blocked: See forum rules)">
<param name="quality" value="high">
<embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
</object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
<li><a href="(URL address blocked: See forum rules)">Home</a></li>
<li>About the Office
<ul>
<li><a href="">Meet Dr. Toolson
</a></li>
<li><a href="">Meet the Team</a></li>
<li><a href="">Office Tour</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li>About Orthodontics
<ul>
<li><a href="">Adults</a></li>
<li><a href="">Children</a></li>
</ul>
</li>
<li>Life with Braces</li>
<li>Contact Us
<ul>
<li><a href="">Contact Information</a></li>
<li><a href="">Request Appointment</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container2">
<div id="container4">
<p class="style3">Contact Information Form</p>
<form action="(URL address blocked: See forum rules)" method="post" class="style4">
<span class="style1">
<label>Name
<br>
<input type="text" name="Name">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Email
<br>
<input type="text" name="Email Address">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Phone Number
<br>
<input type="text" name="Phone Number">
</label>
</span>
<span class="style5">
<br>
<br>
<label><span class="style4">Description (if neccessary)</span> </label>
</span>
<span class="style4">
</span>
<label><br>
<textarea name="Description" rows="5"></textarea>
</label>
<label>
<br><br>
<input name="Submit" type="submit" class="style1" value="Submit">
</label>
<label>
<input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
</label>
<input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
<input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">
</form>
</div>
</div>
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p> </p>
</body>
</html>
Hi - I'm relatively new to using CSS, so please bear with me. I've attempted to put an imagemap on my homepage using CSS. There is a main background image and there are a bunch of tiny images that are hidden, but then appear over the top of the main image when you move the mouse over them. You can view the page online - it's the main homepage of my website: www (dot) midwood (dot) net (It's the page w/ the mountain background, etc). This HTML and CSS are both valid according to W3.org. The code works fine (as expected) on both IE6 and Firefox. If you want to see the effect I'm looking for, use one of those browsers and you'll get the idea. The problem I'm running into is that it doesn't work in Safari. The tiny images do show up in the right place when you roll over the correct spot, but they are not initially hidden (as they are in IE or FF). I'd appreciate it if somebody with more CSS knowledge than me took a look at my code for the homepage . Is there anything obvious I'm doing wrong that is causing it not to work in Safari? Or is it just a Safari rendering bug? If it is a bug in Safari's rendering, is there a workaround so that I can get the desired effect on all three browsers? Thanks. Currently my site, http://www.kasiaozga.com , works correctly in Firefox on mac and Windows and in ie for mac and Windows. However, in Safari, the mid section of the navigation bar on the main page (index.html) appears incorrectly on the page. I would really appreciate it if any Safari users could take a look at the page and recommend a solution to enable the page to display correctly. Thanks! -Kasia I have a table which has three rows of one cell each. I have specified the height of each cell by a class referring to an external stylesheet. There are two other classes which may be relevant, one in an internal stylesheet, and one referring to the same external stylesheet. In Firefox and Internet Explorer 5.2 (the latest available for the Mac, as far as I know), these cells are displayed correctly, but in Safari, they cut off at the bottom of the text in the box, and are therefore not the correct height. Can anyone help me correct this, please? This is the code: Code: <STYLE TYPE="text/css" MEDIA=screen>
<!-- .rbc { color: white; background-color: maroon; } -->
</STYLE>
<tr class="rb2">
<td class="rbc">
<div class="squash">some text<br /></div>
<div class="squash">some more text<br /></div>
<div class="squash">yet more text<br /></div>
<div class="squash">guess what? some more text!<br /></div>
</td>
</tr>
This is the CSS: Code:
.rb2 {
height: 133px;
vertical-align: top;
}
.squash {
line-height: 85%;
}
There are other differences, all with Internet Explorer not behaving properly, but I'll do one question at a time, or it'll get confusing! Thanks in advance. Howdy! I'm using the Jello mold layout from P.I.E. and I have it working GREAT on a couple other projects with no real issues (with Safari or anything else for that matter), but I do have a problem in this one project. take a look he http://pnlab.soundwebdev.com/changetheme-xSixteen.phtml Now - there are a few other issues, but the one I am focussing on here is that Safari is basically completely non-functional on the main (right) column. I can't click the links, I can't select the text - its like there is a transparent layer over the top of everything on the right - but only in safari. This (oddly enough) works great in IE and even firefox! Obviously, there is only one way for you see the issue and that is to view the page in Safari (I'm using 2.0 - 412.2, btw). So, screenshots or visiting the page from any other browser won't help. Thanks in advance if you can help! So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh Hi guys.. I have a script that spits out a series of divs.. The first 'wrapper' Div is position:relative, and I have placed other divs inside it, positioning them using position: absolute; left: 20px, etc... It renders perfectly on all my tested browsers, and yet when I make the script repeat, so that each div-set is loaded from the database, they just stack on top of each other on the page, rather than underneath each other.. All I am really doing is stacking divs, I thought that whatever went on in the 'child' divs didnt affect the parents ?? Like so: Code: <div style="position: relative;">
<div style="position: absolute; left: 20px; top: 40px;">
some content
</div>
<div style="position: absolute; left: 150px; top: 40px;">
other content
</div>
</div>
Ive tried setting things like display: block;, clear: both, etc, but the sets of divs just 'pile' on top of each other... Any ideas :/ Many thanks, Mike. hi all, having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE. have a look: http://www.offsitedbs.com the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE. code for the divs: <div class='bottomDiv'> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div> <p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p> <p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p> </div> <div class="bottomDiv"> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div> <p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p> <p class='bottomText'>We take ... its optimal level.<br></p> </div> <div class="bottomDiv"> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div> <p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p> <p class='bottomText'>Network technologies ... from snoops.<br></p> </div> and the css for the 'bottomdiv's: .bottomDiv { background-color: #F0F0F0; height: 262px; width: 193px; float: left; border-left: solid 1px #FFF; border-bottom: solid 1px #FFF; background-image:url(../IMAGES/bottomBG.gif); background-repeat:repeat-x; background-position:bottom; border-top: solid 1px #FFF; padding: 0px; vertical-align: top; } any & all help is very appreciated! thanks, nunzio I am trying to get a 2 column layout to work across all browsers and I ran into a strange problem with center in Safari (or what Safari looks like according to the screenshot at http://www.snugtech.com/safaritest/) The page aligns correctly in my version of IE and Firefox. What I want to happen is for the table to center in the content div "image_block." In Safari the table is centering inside the container div "container" and sometimes behind the float right div "thumb_block." you can see it live at link here is the code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>images</title>
<BASE href="http://jasonhalac.com/picture_gallery/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/imagerollover.css" rel="stylesheet" type="text/css">
<link href="images.css" rel="stylesheet" type="text/css">
</head>
<body">
<div id="top_image">
</div>
<div align="left" id="list_tabs">header content</div>
<div id="container">
<div id="thumb_block">
thumb block float right fixed width
thumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width</div>
<div id="image_block">
<p>image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block</p>
<table width="200" border="1" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>test</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p>
image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage block</p>
</div>
</div>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>
</html>
and css Code:
#container{
margin: 0px;
border: 0px;
height: 600px;
width: 915px;
}
#thumb_block{
width: 310px;
margin: 0px;
padding: 0px;
float: right;
}
#image_block{
margin: 0px;
padding: 15px 0px 0px 0px;
}
So, here's what I've got: http://www.anthonycarboni.com The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari. Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS: Code: body {
color: #FFFFFF;
background-color: #000000;
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-transform: none;
min-width: 800px;
}
.main{
background-color: #202020;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header{
height: 50px;
background-image: url('images/header.jpg');
background-repeat: repeat;
}
p.headline {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.8em;
vertical-align: middle;
}
And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated. Thanks! Ok I have a two column layout, because of limitations set on the structure of the pages html (don't ask) the only way I could figure out of making the two columns both (visually) the same height (as their content will vary dynamically) is to do the following fudge - to put the background column images as the background to a container div which then I put the columns into: Code:
#container {
width: 620px;
background: scroll url(<cfoutput>#path#</cfoutput>two_cols_bg.gif) repeat-y 2px 0px;
}
#left-column {
padding-left: 2px;
width: 178px;
float: left;
}
#right-column {
width: 440px;
float: right;
}
<!-- two main column container box -->
<div id="container" name="container">
<!-- start left (search) column -->
<div id="left-column" name="left-column">
content
</div>
<div id="right-column" name="right-column">
content
</div>
</div>
This works fine in IE (5.5 at least anyway) but netscape the background doesn't show through (even if I set the left & right column backgrounds manually to their default of transparent). However the background does show up if I put some content directly into the container div, but only for the lines where content is there - it still doesn't show up behind either of the column divs. Any ideas? Also I'm using the name="" attribute as I'm sure I remember reading that some versions of NS don't like the id="" attribute and use name="" instead, but I can't find clarification on this. Thanks in advance. -D Hi mates. Can someone please give me some support on how to fix this. http://www.caprelations.com/cap.htm That is the site im working on. The white in the back is a div, and I have applied width and height properties to it, but it seems not to follow that. You see I dont want the white to exceed down that far, I want it to stop right underneath where it says click here for brochure. Any idea on how to fix this? Hey Guys, as you see I'm new here and it would be quite cool if someone here can help me. i need this problem to be solved.. finally^^ So here's the problem: I'm on starting a new website and the guy for the graphics sent me his design. Looks quite cool but there's one problem: There's a background which needs to be separated into three parts. To make my problem clear i made a short sketch, see he As you see, Part I is always in the top left corner, ok that shouldn't be the problem. But here is where it gets tricky: No matter which screen resolution there is, Part II should show up in the top right corner. And the next Problem is: Part III should always be on the bottom, and these two things are a problem^^ Anyone got an idea? Would be quite yool if someone knows what to do.. Lukas I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right. Hi All, I need someone's eye to find mistake in my simple code which is not responding in FF. I have one main div and 2 sub divs under that main div. The main div contains Background-color: white which, FF is not showing. It is working in IE but FF is not showing it. I don't know if I am missing something here but I am not able to figure out what is the problem here? Can some one please point out any error from the below code. I will be greatful to you. Thank you. PHP Code: <html> <head> <title>Untitled 2</title> <style> #Navigation { width: 779px; height: 25px; background-color: #CCCC33; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #222; text-align: left; padding-top:2px;} #ContentMain { width: 779px; background-color: #fff;} #ContentBody { width: 579px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:yellow; text-align: left;} #ContentRight { width: 200px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:green;} </style> </head> <body bgcolor="red"> <center> <div id="Navigation"><span style="padding: 10px;">Home | SiteMap | Contac Us</span></div> <div id="ContentMain"> <div id="ContentBody">A<br>B<br>A<br>B<br>A<br>B<br></div> <div id="ContentRight">A<br>B</div> </div> </center> </body> </html> |
|||||||