|
CSS - Image Does Not Position Correctly In Safari 4
I 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 Similar TutorialsI tried to find this answer by doing a search, but maybe I'm asking the search engine wrong. I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari. Here is the link: http://gregsgoods.com/seestore.php In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it. Here is the CSS code: Code: html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {
color: #005B9C;
}
a:hover {
color: #0B2444
}
img {
border: 0;
}
body {
background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
color: #ccc;
font: normal 62.5% Tahoma,sans-serif;
}
p,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
h2 {
font: normal 1.3em Tahoma,sans-serif;
margin-bottom: 1px;
color: #005B9C;
margin: 0;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
.container {
position: absolute;
left:50px;
top:188px;
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 8px 8px;
width: 780px;
}
.top {
padding: 8px 8px 0;
}
.header {
position: absolute;
left:50px;
top:10px;
background-color: #fff;
font-size: 1.2em;
height: 173px;
margin: 0 auto;
padding: 8px 8px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #000033;
color: #fff;
color: #FFF;
height: 163px;
}
.header .left {
background: transparent url(/img/Top.jpg) top left repeat-x;
border: 1px solid #7795BD;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 163px;
width: 777px;
text-align: left;
}
.header .right div {
padding-left: 16px;
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
.navigation {
background: #D9E1E5 url(/img/nav.jpg);
border: 1px solid #7795BD;
height: 23px;
}
.navigation a {
background: transparent url(/img/nav.jpg) left top repeat-x;
border-right: 1px solid #7795BD;
color: #fff;
display: block;
float: left;
font-size: 12px;
font-family: Arial;
font-weight: bold;
line-height: 23px;
text-decoration: none;
padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom;
color: #f1f1f1;
}
.main {
border-top: 8px solid #FFF;
background: url(/img/bgmain.jpg) repeat-y;
}
.sidenav {
float: left;
margin: 5px;
width: 195px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
font-weight: bold;
line-height: 30px;
margin: 5;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}
/* content */
.content {
float: right;
margin: 5px;
padding: 0 16px;
width: 536px;
}
.content {
color: #666;
font-size: 1.0em;
margin-bottom: 6px;
}
.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}
.footer {
background: url(/img/bluefooter.jpg) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE. Here is my site: Well I guess I can not link my site, but hopefully someone can still help me. Here is my code: Quote: /* Tabs ==================== */ #homepagetabs { border-bottom: none; margin-bottom: 10px; padding-left:170px; height:51px; background:transparent url } #homepagetabs li { display: inline; list-style-type: none; margin-top: 14px; border: none; border-bottom: none; float: center; line-height: 14px; margin-right: 8px; text-decoration: none; cursor: pointer; color:#fff; background: none; font-weight:bold; font-size:12px; } #homepagetabs li.currenttab { margin-top: 14px; background: none; border: none; border-bottom: none; font-weight:bold; color:#fff; font-size:12px; text-decoration:underline; } #options_69 th { font-size: 100%; } Hi -- I am viewing on FF, Safari, and IE 5.2 - all for Mac. I have 3 buttons I am trying to line up and size and they look fine in FF and Safari at this point, but IE is showing them as all the same size (as opposed to being the length of the text plus padding) and is not right aligning them in the cell. I did add a table in this code just to see if I could get it to work, but it isn't anyway. If anyone can help me, I'd appreciate it. my button css: div.button{ float:right; } div.button a { display:block; position:relative; border-width:2px 0; border-color:#ccc; border-style:solid; color:#990033; text-decoration:none; margin:11px 4px; background-image: url(site_images/bgbutton.gif); background-repeat: repeat-x; background-position: left center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:100; letter-spacing:0px; text-align:center; } div.button a span { display:block; position:relative; margin:0 -1px; border-width:0 2px; border-color:#aaa; border-style:solid; padding:4px 16px; } div.button a:hover { border-color:#A57C8A; color:#333; } div.button a:hover span { border-color:#A57C8A; } /*table added*/ #buttontable td { width:250px; font-family: Verdana,Sans-Serif,Arial; vertical-align: top; font-size: 12px; height: 16px; align: right; } the page code: <tr> <td colspan="2"><br /><br /> <div id="buttontable" align="right"> <table><tr><td> <P></P> <div class="button"> <p><a href="#"><span> Add To Bag</span></a></p> </div><br/><br/> <div class="button"> <a href="#"><span> CONTINUE SHOPPING </span></a> </div> <P> </P><br/> <div class="button"> <a href="#"><span>Add To Wish List</span></a> </div></td></tr></table> </td> </tr> any help you can give me as to how to get the same result in IE would be appreciated. I'd also appreciate knowing how it is looking on browsers on a pc. Thanks!! I want to have one main div that is horizontally centered on the page. Inside of it I want two nested divs, located right next to each other. It seems that the top property of the second nested div is being ignored, as it is being placed directly below the first nested div. Here is a sample that demonstrates what is happening. Am I doing something wrong or is what I'm trying to do fundamentally the wrong way to do it? Code: <html>
<head>
<style type="text/css">
#a
{
width: 800px;
height: 800px;
margin: 0 auto;
text-align: center;
background-color: #ff0000;
}
#b
{
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: #0000ff;
}
#c
{
position: relative;
top: 50px;
left: 350px;
width: 300px;
height: 300px;
background-color: #00ff00;
}
</style>
</head>
<body>
<div id=a>
<div id=b>test</div>
<div id=c>test</div>
</div>
</body>
</html>
Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none... If everything is square in the top-left corner there is _NO_ problem, everything looks fine. However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place? Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer? 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 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 I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. <div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div> When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!! An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options: Option 1: One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image. You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html example Code:
/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;
/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Option2: I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE. example Code:
/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}
I would really appreciate some insight. I am pulling my hair out. Thanks Hello, My home page works fine on all browsers and platforms except safari. http://www.caillouette.com/EoLtest/ The two buttons below the main nav should be above the big blue "Request Information" button. Can anyone help? thanks -S 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 have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is. The file validates (with some minor color warnings). I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg Another issue with the url for the page is that I can't seem to get the width of the right pane smaller. Any help would be appreciated. Thanks/Hal www . myspace . com / newsoundproduction I cant get the background image to sit at the bottom of the page... already tried millions of things and im still getting the same error... Code:
<style>
body {
background-color:FFFFFF;
background-image: url('http://copydential.net/gus/newwall5.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom center;
}
table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
background-color:FFFFFF;
filter:alpha(opacity=90); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
}
table table table table td {filter:none;}
table table table {
border-width:3px;
border-color:FFFFFF;
border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:000000 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:000000 !important;}
a {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
.r{;}
.navbar {visibility:visible;} .navbar font {visibility:hidden;}
a.text, table div font a {display:none;}
table div div {visibility:hidden;}
table table div div {visibility:visible;}
a img {filter:alpha(opacity=100); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
img {border:0px;}
table table table {width:300px;}
table table td.text table, table table td.text table td {width:100%;}
</style>
<style>
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url("http://copydential.net/gus/newcontact.jpg");
background-attachment:scroll; background-position:center center;background-repeat:no-repeat;
background-color:transparent;}
.contactTable table, table.contactTable td {
padding:0px !important;border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style>
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
</style>
|
|||||||