|
CSS - Safari Browser Chokes On Code ...
Hi ... I'm trying to get final testing completed for a site that utilizes a certain menubar/navigation that involves layers/divs (css) and some javascript as well. Reference the menubar (top right of page) via the link provided ...
http://www.brainjar.com/dhtml/menubar/demo3.html Safari chokes on the code ... apparently the mousing over works until the mouse scrolls downward to "retrieve" or just scroll into the drop-down menu. If that makes sense? Basically once the mouse mouses-off of the parent navigation - the menu(s) disappear below instead of staying visible and resident for selection. Does anyone have thoughts or experience in lending a hand to something that I might be easily overlooking? Thanks in advance for all or anything you can offer! Des email - deltatan...@hotmail.com IM - aol: deltatango5 IM - yahoo: deltatango5 IM - msn: deltatan...@hotmail.com Similar TutorialsI have tried firefox and IE, lastest versions and all works ok, but in Safari the top left and top right of the rounded purple border is not rounded like the other radius borders on the page which show correctly. The attached image is what the left and right rounded purple border looks like, but can not figure out why it shows ok in Firefox but not Safari. Can anyone see where I might be going wrong in trying to get this to work like other browsers show it ? Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; height: 100%; }
div { padding: 0em; margin: 0em; }
div.bodyContainer, div.header, div.footer { width: 60em; }
div.header { text-align: center; }
div.bodyContainer { text-align: center; margin: 0 auto; }
div.left, div.right { width: 10em; border-bottom: 0.0625em dashed #CF8DEB;}
div.middle { width: 40em; margin: 0 auto; padding-left: 0.41em; border-bottom: 0.0625em dashed #CF8DEB;}
div.footer { text-align: center; }
div.bodyContainer, div.outer, div.left, div.right { background-color: #56D1AC; /* green */ }
div.bodyContainer, div.header, div.middle { border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
div.outer { display: block; }
div.left, div.middle, div.right { display: table-cell; }
div.middle { border-top: 0.3em solid purple; border-right: 0.6em solid purple; border-left: 0.6em solid purple; }
div.bodyContainer { /*background-color: pink;*/ }
div.middle { background-color: lightblue; }
div.footer { background-color: #ddd; }
.clearfloat { clear: both; }
.menu { background: #6384DE; margin: 0em; text-align: center; font-size: 0.965em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.5em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; } /* 3F65CC */
--></style>
</head>
<body onload="disableUpdateSubmit();">
<div class="bodyContainer">
<div class="header">
<!-- menu start -->
<div class="menu"></div>
<div class="clearfloat"></div>
<!-- menu end -->
</div>
<div class="outer">
<div class="left"><br></div>
<div class="middle"><br>middle</div>
<!-- middle end -->
<div class="right">
<!-- start of specials -->
<div class="specials">SPECIAL OFFERS</div>
<!-- end of specials -->
<br class="clearfloat">
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
I've got this page here and for some reason, it works fine in Internet Explorer, but in Safari, everything is aligned to the left!? Which is strange, because the Glish tutorial I'm using works just fine in both IE and Safari. What have I done wrong in my code?? I have that annoying problem that code like this: PHP Code: <img src="images/worsleytop.jpg" width="750" height="175" /> <div id="navigation"> <ul id="nav"> <li> Causes a gap between the image and the navigation div of a couple of pixels. I know why it is happening. And I know that changing it to PHP Code: <img src="images/worsleytop.jpg" width="750" height="175" /><div id="navigation"> <ul id="nav"> <li> fixes the problem in IE, but not in firefox. How do I sort it out universally? I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} 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 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 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 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. Is it possible to designate a width in CSS just for Safari on a Mac? 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've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine. here be the code: Code: .mainBody {
color: #000;
font-family: helvetica, arial, "sans serif";
font-size: 12px;
text-align: justify;
padding-left: 35px;
padding-right: 35px;
}
.mainBody:link, .mainBody:visited {
color: #600;
text-decoration: underline;
}
.mainBody:active, .mainBody:hover {
color: #996600;
text-decoration: none;
}
.pageLinks {
color: black;
font-family: helvetica, arial;
font-size: 14px;
text-align: center;
}
.pageLinks:link, .pageLinks:visited {
color: #960;
text-decoration: underline;
font-size: 14px;
}
.pageLinks:active, .pageLinks:hover {
color: #960;
text-decoration: none;
font-size: 14px;
}
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; } 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 Hello, Is there a hack for Safari 3. I found this hack : @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } The problem with this hack is that he is valid for all verison of Safari. My need is a hack only for Safari 3. Thank you in advance for your help. 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? 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 = '';
}
}
}
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 am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them. EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing When I do this, it is centered on Firefox: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#encapsule {
margin-left: auto;
margin-right: auto;
}
#centered
{
text-align: center;
}
#centered table
{
margin: 0 auto;
text-align: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table> </div>
When I do the following, it centers it on Safari: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
}
#encase {
position: relative;
margin-left: auto;
margin-right: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks! EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing |
|||||||