|
CSS - Safari Hates Me
I think i have some overlapping style because safari is displaying white space over my images. any help would be greatly appreciated!
http://lonepineprairiepillows.com/cart/Results.cfm?category=2 Similar TutorialsTitle: PLZ HLP! IE/PC hates my CSS!?! Why?? Oh man... why did god ever invent Internet Explorer? Anyway, my site CSS layout works fine on every major browser (mac/pc) except for all versions of IE on PC! Grr, I do not understand why... all of my code is valid XHTML 1.0 trans... and my style sheets are valid... Could someone/GURU/anyone please check my code and give me some feedback? Here is link to test template page (Using same code as below): http://www.ambiguism.com/test/ And here is the source code for above test template: 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>
<title>CSS TEST TEMPLATE DOC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
font-smooth: never;
background-color: #111111;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 60%;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
color: #666666;
text-decoration: none;
text-transform: none;
letter-spacing: 2px;
line-height: 1.5em;
background-attachment: scroll;
background-image: url(bkgrnd.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}
#container {
width: 850px;
padding: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#flash_banner {
padding: 0px;
height: 250px;
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #000000;
border-right-width: 50px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-style: none;
border-bottom-width: 0px;
border-bottom-color: #000000;
border-left-width: 0px;
border-left-style: none;
border-left-color: #000000;
}
#banner {
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 250px;
background-color: #000000;
background-attachment: scroll;
background-image: url(rounded_crnr.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#shadow_banner {
margin: 0px;
background-attachment: scroll;
background-image: url(tp_grndt.gif);
background-repeat: no-repeat;
background-position: left top;
padding: 0px;
height: 11px;
}
#innercontentwrap {
width:99.9%;
float:left;
}
#content {
margin-left: 257px;
margin-right: 50px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#sidebar-a {
float: left;
width: 200px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
}
#footer {
clear: both;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 250px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
img {
border:0;
}
p {
margin: 0;
}
div.thumbs65 {
float:left;
width: 99.9%;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.l_fl {
float:left;
display: block;
border:0;
padding-right: 10px;
}
.under_p6 {
margin-top: 6px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.img_border {
border: 1px solid #000000;
}
.sub_page {
font-size: xx-small;
text-align: right;
}
/*
Links have to be in this order in your stylesheet:
a:link
a:visited
a:hover
a:active
*/
a:link {
color: #999900;
text-decoration: none;
}
a:visited {
color: #999900;
text-decoration: none;
}
a:hover {
color: #CCCC00;
text-decoration: none;
}
a:active {
color: #FFFF00;
text-decoration: none;
}
a.current {
color: #666600;
text-decoration: none;
}
a.current:hover {
color: #CCCC00;
text-decoration: none;
}
-->
</style>
</head>
<body>
<!-- BEGIN DIV "CONTAINER" /////////////// -->
<div id="container">
<!-- BEGIN DIV "FLASH_BANNER" /////////////// -->
<div id="flash_banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="250" hspace="0" vspace="0">
<param name="movie" value="6.swf" />
<param name="quality" value="high" /><param name="BGCOLOR" value="#666666" />
<embed src="6.swf" width="800" height="250" hspace="0" vspace="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#666666"></embed>
</object>
</div>
<!-- END DIV "FLASH_BANNER" /////////////// -->
<!-- BEGIN DIV "BANNER" /////////////// -->
<div id="banner">
<a href="#" title="[Home]">Home</a>
<a href="#" title="[News]">News</a>
<a href="#" class="current" title="[Folio]">Folio</a>
<a href="#" title="[Resume]">Resume</a>
<a href="#" title="[Code]">Code</a>
<a href="#" title="[Forum]">Forum</a>
<a href="#" title="[Contact]">Contact</a>
<a href="#" title="[Links]">Links</a>
</div>
<!-- END DIV "BANNER" /////////////// -->
<!-- BEGIN DIV "SHADOW_BANNER" /////////////// -->
<div id="shadow_banner">
</div>
<!-- END DIV "SHADOW_BANNER" /////////////// -->
<!-- BEGIN DIV "SIDEBAR-A" /////////////// -->
<div id="sidebar-a">
<a href="#" title="[3D]">3D</a><br />
<a href="#" title="[Art]">Art</a><br />
<a href="#" title="[Audio]">Audio</a><br />
<a href="#" title="[Bitmap]">Bitmap</a><br />
<a href="#" title="[Experimental]">Experimental</a><br />
<a href="#" title="[Fontography]">Fontography</a><br />
<a href="#" title="[Interactive]">Interactive</a><br />
<a href="#" title="[Logotypes]">Logotypes</a><br />
<a href="#" title="[Misculaneous]">Misculaneous</a><br />
<a href="#" title="[Photography]">Photography</a><br />
<a href="#" title="[Print]">Print</a><br />
<a href="#" title="[Vector]">Vector</a><br />
<a href="#" title="[Videography]">Videography</a><br />
<a href="#" title="[Websites]">Websites</a><br />
</div>
<!-- END DIV "SIDEBAR-A" /////////////// -->
<!-- BEGIN DIV "CONTENT" /////////////// -->
<div id="content">
<!-- BEGIN DIV "INNERCONTENTWRAP" /////////////// -->
<div id="innercontentwrap">
<p>This is a test layout for my site template.</p>
<br />
<p>Here is how I want it to look: <a href="test_screen_grab.jpg" target="_blank">test_screen_grab.jpg</a></p>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sed elit. Sed ante eros, imperdiet tincidunt, interdum id, consequat ut, massa. In sodales quam id enim. Morbi lacinia aliquet enim. In eget mauris. Curabitur vehicula leo. In malesuada mollis metus. Nulla facilisi. Suspendisse potenti. Integer dui metus, pellentesque sit amet, fringilla at, consectetuer eget, lacus. Pellentesque odio odio, commodo vitae, venenatis a, aliquet sed, tellus.</p>
<br />
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="javascript:MM_openBrWindow('#','','width=600,height=636')">
<img src="tn_gm_ps_08.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_08.jpg" /></a></p>
<p><a href="#" onmousedown="javascript:MM_openBrWindow('#','','width=600,height=636')">
Title goes here.</a></p>
<p class="under_p6">Description: Description goes here.</p>
<p>Mo More info here.</p>
</div>
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="javascript:MM_openBrWindow('#','','width=600,height=636')">
<img src="tn_gm_ps_08.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_08.jpg" /></a></p>
<p><a href="#" onmousedown="javascript:MM_openBrWindow('#','','width=600,height=636')">
Title goes here.</a></p>
<p class="under_p6">Description: Description goes here.</p>
<p>Mo More info here.</p>
</div>
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="javascript:MM_openBrWindow('#','','width=600,height=636')">
<img src="tn_gm_ps_08.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_08.jpg" /></a></p>
<p><a href="#" onmousedown="javascript:MM_openBrWindow('#','','width=600,height=636')">
Title goes here.</a></p>
<p class="under_p6">Description: Description goes here.</p>
<p>Mo More info here.</p>
</div>
</div>
<!-- END DIV "INNERCONTENTWRAP" /////////////// -->
</div>
<!-- END DIV "CONTENT" /////////////// -->
<!-- BEGIN DIV "FOOTER" /////////////// -->
<div id="footer">
<a href="sitemap.php" title="[Sitemap]">Sitemap</a>
<a href="dotcoms.php" title="[Dotcoms]">Dotcoms</a>
<a href="#" title="check css">CSS</a>
<a href="#" title="check xhtml">XHTML</a>
</div>
<!-- END DIV "FOOTER" /////////////// -->
</div>
<!-- END DIV "CONTAINER" /////////////// -->
</body>
</html>
I would love some help... ugh, why does IE have to be such a pain in the ****? Many many thanks in advance... Cheers Micky Greetings Well, I hope I'm not the only one who has struggled with trying to get a page to validate AFTER you have finaly got it working like you'd like it to. I've fixed most of the problems, but this one I'm either too daft or too tired to come up with something. First, here is the current page: http://www.freshrod.com/maryville/maryvillemo_mod.html ...and here is where I'm trying to validate it: http://validator.w3.org/ The problem is that I'm trying to apply css to an <h2> and <p> tag, within an <a> tag. It doesn't like that. However, if you see what I'm trying to have it do on the bottom with those box div's I really can't think of a better way. When I try using <span> to format the text I can't get it to respond right either, but this could just be my poor coding. Any suggestions Hi there, I used to use tables to format my websites. I want to use css now for formatting my site but I have a small problem... When I am on my Windows XP computer with IE6 My Site looks just fine. But when I turn on my Mac and I open the page in Safari it ****s up a little bit. And of course I want my site viewable to al users with al browsers on any platform. This is some of the code I used: Code:
body {
background-color: #fff;
margin: 100px 0px 0px 0px;
}
.leftside {
width: 500px;
float: left;
border-right: 1px dashed #999;
padding: 0px 0px 0px 100px;
}
.rightside {
width: 150;
padding: 10px
}
this is the url of my testpage: www.headradio.net/template/index.php Just take a look how it looks in safari (or firefox) and how it looks in IE6 Thanks Daan I have my webpage coded in HTML 4 and CSS, and everything is valid. It displays perfectly in all browsers, with one exception. In Safari 1.2, the menu background positioning is screwed up. It is supposed to display the b&w image first, then rollover to the color image. Instead, it is displaying the color image, and not repositioning the image so it displays correctly. It works fine in other browsers. any suggestions?? (PS) i'm judging the Safari support by BrowserCam.com, I don't actually have a Mac to test with. And yes, I do need it to work in Safari since this is a class website and we are provided with apple laptops to use. Hi, so far I have my website look the same on IE7, (maybe IE6), FireFox, and Opera. Now there is another browser called Safari for Mac! How can I test my website on Safari if I only have a PC? also should I worry on this!? or if my website works on FireFox then it means it will work on Safari as well? regards, Sim085 I am using the <pre> tag in my application and it works for IE, Firefox, etc... except for Safari. This is what I am using in my css Code:
<STYLE TYPE="text/css">
#Pre tags with word wrapping for Mozilla, etc...
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
_white-space: pre;
font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
pre {
word-wrap: break-word; /* IE 5.5+ */
white-space: normal; font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<![endif]-->
This is how I am using the pre tag in my perl cgi application Code:
my $id = $FORM{'id'};
my $query = "Select title, news_story, begin_date, author from su_archives where news_id = '$id'";
$sth = $dbh->prepare($query);
$sth->execute();
my ($title, $news_story, $begin_date, $author) = $sth->fetchrow_array;
@begin = split(' ',$begin_date);
@date = split('-',$begin[0]);
$startDate = $date[1].'/'.$date[2].'/'.$date[0];
print "<br><b>$title</b><br><br>";
print "<p><i>$startDate</i><br></p>";
print "<PRE WIDTH=55px style=\"font-family: verdana, arial, helvetica, geneva, swiss, sans-serif;\">$news_story</pre>";
Any Suggestions on how this should be revised for Safari? Thanks in Advance I am having trouble trying to work out why on an iphone my css file never gets used. when a user arrives at my site with a screen size <= 1024 i apply a different style sheet using this function - http://www.kelvinluck.com/2006/05/s...ts-with-jquery/. i know this isnt a way of doing it for an iphone as you use user.agent but i am doing it for smaller screens at the same time. Code: <link href="index.css" rel="stylesheet" title="screen" type="text/css" media="screen" />
<link href="css/mobile.css" title="mobile" rel="alternate stylesheet" type="text/css" />
that is how i order my stylesheets in my html. on opera on the iphone the css works fine but its just safari. on android the site works fine. any help would be really grateful thanks in advance I'm a developer of a PHP forum software, and I've made a CSS emoticons system which has been working fine for several months now. But only recently I've found out that the emoticons don't display at all in Safari. Here's an example of the code I use: http://homepage.ntlworld.com/andy_black/andy/forum/emoticon.htm In Safari only the bottom 3 display, and the images don't animate. The only difference between them all is that the top one has a space on both sides of the emoticon's HTML, while the lower 3 either have only one or no spaces. I've made a fix for the forum which uses this workaround (by replacing one of the surrounding spaces with an character), but this has been met with mixed success (works sometimes, but still doesn't display at all other times), and I'd like a more "elegant" solution if possible. I don't have Safari myself so it's difficult for me to bug test. Can anyone offer any suggestions? I'm using the "first-letter" feature with CSS which shows up fine in IE, but is totally off in Mac's Safari. Any suggestions on a workaround? The following is what I have currently: In main.css file: p.initial:first-letter { font-size: 300%; float: left} In actual page: <p class="initial">Welcome! Hi there, currently, my site uses CSS and it works perfectly in FF and IE. But when it comes to Safari, it doesnt seem to pull the CSS up properly, if at all. (www.nsma.com/store) Just wondering if anyone can help/shed light on this. the css file is at store/stylesheet.css. Im offerin payment if u can help. paypal is best for me, let me know Many thanks in advance Hi. I just discovered that my site has issues in Safari. Everything is fine in FF. Take a look in safari: bestplaceon.net. 1. Gallery thumbnails are all over the layout. 2.Right upper corner Google Plus is gone. 3.Text size is to big for Safari I have tried different ways to fix this problem but without success. Every help would be nice. Thank you! I cannot see a margin when I test this page in safari from dreamweaver. Basically I am trying for a centered container which will hold all the content and have some space from the top margin and be centered. With the CSS I have the container shows up with a margin when I test it in the firefox browser and even when using live view, but not in Safari. The latest version of Safari. What do I need to change to get the top margin to show correctly in Safari? Is something overriding something else? Code @charset "UTF-8"; /* CSS Document */ body { color: #000000; /*This sets all text to Black*/ /*background-color: #FFFFFF; /*This sets the bacground to white*/ margin: 100px auto; /*This sets the margin to zero*/ padding:0; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; } .redtext { color: #FF0000; } a { color: #009900; } a:link { color: #000099; text-decoration: underline; } a:visited { color: #666666; text-decoration: none; } a:hover { text-decoration: none; background-color: #CCCCCC; } a:active { text-decoration: none; } .menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } .menu a:link { color: #336600; text-decoration: none; } .menu a:visited { color: #666666; text-decoration: none; } .menu a:hover { color: #990000; text-decoration: none; } .menu a:active { color: #666666; text-decoration: none; } div#container { width: 960px; height:760; /*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ } div#outer { margin-left: auto; margin-right: auto; width: 960px; } div#header { position:relative; text-align: center; width: auto; } div#nav { width: auto; padding: 10px; margin-top: 1px; position:relative; } div#main { position:relative; width: auto; } div#footer { position:relative; width:auto; padding: 15px; margin: 0px; }#nav { position: relative; padding:20px; width: auto; } Hi, I've made a nav menu using nested ULs, Javascript and CSS. Ive made javascript to open and close submenus by changing the CSS display attribute of the submenu between the values 'block' and 'none' Everything works fine until I tested the system in Safari. This is quite a vital part of the site so I could do with some help on getting what seems to be a fine, valid bit of code / functionality ro work in the Mac browser. any ideas? cheers, NK Apologies for posting this in 2 thread - im not sure if this is a javascript or a CSS problem... my html is: Code: <ul class="nav_list"><li><a id="Accessories" href="/store/page3.asp?sup_type=1&t=3&sub_type=3">Accessories</a></li>
<li><a id="Books" href="/store/page3.asp?sup_type=1&t=2&sub_type=2">Books</a></li>
<li><a id="CD/Vinyl" href="#" onclick="toggle('CD/Vinyl','m_cd/vinyl'); return false;">CD/Vinyl</a>
<ul class="sub_nav_list" id="m_cd/vinyl"><li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=15">CD Albums</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=9">CD Singles</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=10">Vinyl Albums</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=16">Vinyl Singles</a></li></ul>
</li>
<li><a id="DVD/Video" href="#" onclick="toggle('DVD/Video','m_dvd/video'); return false;">DVD/Video</a>
<ul class="sub_nav_list" id="m_dvd/video"><li><a href="/store/page3.asp?sup_type=1&t=5&sub_type=17">DVD</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=5&sub_type=18">VHS</a></li></ul>
</li>
<li><a id="Downloads" href="#" onclick="toggle('Downloads','m_downloads'); return false;">Downloads</a>
<ul class="sub_nav_list" id="m_downloads"><li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=6">Digital Albums</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=12">Digital Tracks</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=24">Digital Videos</a></li></ul>
</li>
<li><a id="Memorabilia" href="/store/page3.asp?sup_type=1&t=7&sub_type=7">Memorabilia</a></li>
<li><a id="Wearables" href="#" onclick="toggle('Wearables','m_wearables'); return false;">Wearables</a>
<ul class="sub_nav_list" id="m_wearables">
<li><a href="/store/page3.asp?sup_type=1&t=8&sub_type=20">Tour Favourites</a></li>
<li><a href="/store/page3.asp?sup_type=1&t=8&sub_type=13">Greatest Hits</a></li></ul>
</li></ul>
my CSS is: Code:
/*
NAVIGATION MENU CODE
*/
#nav_wrapper
{
padding:0;
margin:0;
/*line-height:0.5em;*/
border-top:solid 1px #333;
}
#nav_wrapper a
{
color:#fff;
font-weight:normal;
display:block;
margin:0;
padding:3px 6px;
background:url(/images/list_arrow.gif) no-repeat right top transparent;
}
.a_alt
{
color:#fff;
font-weight:normal;
display:block;
margin:0;
padding:3px 6px;
background:url(/images/list_arrow_down.gif) no-repeat right top transparent;
}
#nav_wrapper a:hover
{
text-decoration:underline;
background-color:#BF8F21;
}
.nav_list, .nav_list_alt, .sub_nav_list
{
list-style-type:none;
padding:0;
margin:0;
border-bottom:solid 1px #333;
border-right:solid 1px #333;
}
#nav_wrapper li
{
width:100%;
margin:0;
padding:0;
display:block;
}
.nav_list
{
background-color:#818181;
}
.nav_list_alt
{
background-color:#A0A0A0;
}
.sub_nav_list
{
display:none;
background-color:#C49B1F;
border:none;
}
my javascript is: Code: function toggle(menuLink, menu){
//alert(menu + '\n' + menuLink);
thisMenu = document.getElementById(menu);
thisMenuLink = document.getElementById(menuLink);
if (menuLink!=null && menuLink!=''){
if(menuLink!=activeMenuLink){
// replace active submenu, make this one visible
// sort out header colour
thisMenuLink.style.backgroundColor ='#BF8F21';
//sort out the menu
if(menu!=''){
thisMenu.style.display='block';
thisMenuLink.style.backgroundImage = 'url(/images/list_arrow_down.gif)';
if(activeMenu!=''){
document.getElementById(activeMenu).style.display='none';
}
activeMenu = menu;
}
//hide and replace active
if(activeMenuLink!=''){
document.getElementById(activeMenuLink).style.backgroundColor ='#818181';
document.getElementById(activeMenuLink).style.backgroundImage='url(/images/list_arrow.gif)';
}
activeMenuLink = menuLink;
} else {
// hide this submenu, make active vars = ''
// sort out header colour
thisMenuLink.style.backgroundColor ='#818181';
//sort out the menu
if(menu!=''){
thisMenu.style.display='none';
thisMenuLink.style.backgroundImage = 'url(/images/list_arrow.gif)';
//document.getElementById(activeMenu).style.display='none';
activeMenu = '';
}
activeMenuLink = '';
}
}
}
The site in question is HERE I discovered why Safari won't call the css but if I fix it then IE 7 won't call the css. My solution...(The only solution that actually gets IE7 to call the css BTW and since I could get no help on it, I could find no other alternatives)...is this: Code: <head> <!--[IF IE]> <link rel="alternate stylesheet" type="text/css" href=" mystyles_ie.css "> <style type="text/css">@import "mystyles_ie.css";</style> <!--[end if]> <link href="mystyles.css" rel="stylesheet" type="text/css"> <style type="text/css">@import "mystyles.css";</style> </head> This causes parsing errors with the validater but works in IE 7 and FF 2.0. Does anyone have any clue what other hacks I could add to get Safari to render my page correctly? OR is there a real solution that would allow me to omit the first hack and get my page to render properly cross browser? PS- I am really close to just putting a link to FF 2.0 on my page and tell people that if the tables are all jumbled and out of line then they need to get a REAL browser. lol I have a new site at www.sdgolflessons.com. Looks fine in all browsers, including Safari, until I changed the doc type to strict (from the default loose in my Dreamweaver), and now Safari has odd gaps. I don't have much CSS for formatting, so I can't figure out what's going on. I've tried to force heights, make sure paddings are 0, etc., to no avail. I'd appreciate someone checking it out. I have Safari on a PC, though I'm not sure if that matters. Hi all, Is there some trick to achieving a nice gradient background in Safari? I have a nice 150x400 red to dark red gradient JPG, and I'm using this code in the body tag of my CSS file: background: url(../images/page_back.jpg) repeat-x #670000; My site displays correctly in Firefox and IE (which was hassle enough) but when I view it in Safari on my Macbook, the last nav menu item is pushed down below the rest of the menu instead of in line with the rest of the menu. I just got my macbook, and I'm not very in touch with al of Safari's quirks yet, but I was under the impression that it was more reliable than FF or IE. Does anyone have any idea what's causing this, and how I can fix it? http://www.wwu.edu/~swing http://www.mbsnyder.com/index2.shtml On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it. These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance. |
|||||||