CSS - Navigation Alignment In Safari
Hi All,
When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC. When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds to. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home." The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here. When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide. Any idea why either of these issues are occurring? Thanks. Similar TutorialsHi All, When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC. When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds too. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home." The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here . When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide. Any idea why these issues are occurring? Thanks. 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 there, I'm haing a problem getting my navigation to appear correctly in Mac IE 5.2 and Safari 2.0.1. The dates on the right are supposed to pop you down to the date in the central box. It works correctly on a PC, all browsers. I replaced NAME with ID. Thanks for any help or suggestions! http://www.cofc.edu/~finchj/timeline_not_template.html http://www.cofc.edu/~finchj/style_timeline.css Jannette If you go to the example site: devbum.com/coded/audven/ The top navigation seems to be pushed upwards in Windows Safari and Google Chrome and not centered like in FF, IE6, IE7, and Opera. I'm not sure why it's doing this though... does it also render differently on Mac Safari? Hi All, I am building a site that has the following structure for the navigation; Code: <div id="navigation"> <ul id="navlist"> <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li> <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li> <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a> <ul> <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li> <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li> <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li> <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li> <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li> </ul> </li> <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li> <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li> </ul> </div> The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! 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 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 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. 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; } 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. 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 There's some really strange bug that only happens in Safari If you visit this, and click on any of the links in the left column or even the link to the page itself then the main content of the page get's shifted down. It doesn't make any sense, the document is exactly the same. Could someone enlighten me? Thank you! 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! I have some hidden divs that on click they slide down under the link that was clicked. It works fine in firefox and ie, but in safari if you click it the first time it looks good, but when you click and close it and open it again the hidden div is off to the right i cant figure out why this is happening only in safari. this is the good one http://brendanperkinsDOTcom/ryangood.jpg this is the bad one http://brendanperkins.DOT/pic3.jpg this is the css im using Code: /* Individual page divs (also in left column) */ .hidden-divs { position: relative; display: none; width: 387px; height: auto; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; font-size: 11px; line-height: 1.5em; padding-top: 10px; padding-bottom: 10px; } .hidden-divs a:link, .hidden-divs a:visited { color: #4d4d4d; font-size: 14px; } and this is my html for the nav and hidden divs Code: <div id="main-nav"> <ul id="nav-higher" class="nav nav-higher"> <!-- HOME --> <li><a class="trigger" rel="#header-6" onclick="return toggle_div('home-video', 'ryan_1');" href="#">Home</a></li> <li><div id="home-video" class="hidden-divs"> <a href="readmore_home.htm" class="ceebox" rel="800 100 ajax">Why you are here</a> </div> </li> <!-- MEET RYAN --> <li><a class="trigger" rel="#header-5" onclick="return toggle_div('meet-ryan', 'ryan_2'); " href="#">Meet Ryan</a></li> <li><div id="meet-ryan" class="hidden-divs"> <a href="readmore_meetryan.htm" class="ceebox" rel="800 220 ajax">BIO</a> </div> </li><!-- END OF MEET RYAN --> <!-- PROGRAMS --> <li><a class="trigger" rel="#header-4" onclick="return toggle_div('programs', 'ryan_3'); " href="#">Programs</a></li> <li><div id="programs" class="hidden-divs"> <a href="readmore_programs.htm" class="ceebox" rel="800 400 ajax">Make Your Own Lunch™</a> </div> </li><!-- END OF PROGRAMS --> <!-- BLOG --> <li><a rel="external" href="http://makeyourownlunch.com/">Blog</a><br /></li><!-- END OF BLOG --> <!-- REVIEWS --> <li><a class="trigger" rel="#header-3" onclick="return toggle_div('reviews', 'ryan_4');" href="#">Reviews</a></li> <li><div id="reviews" class="hidden-divs"> <div class="blurbwrap" id="review1"> <p class="blurb">“UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/Molly.jpg" alt="Review" /> <p class="img_id"><strong>Molly Somerville</strong><br />Idaho Business Professionals of America</p> <div class="blurbwrap" id="review2"> <p class="blurb">“...In a nutshell Ryan blew those kids away”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/mell.jpg" alt="Review" /> <p class="img_id"><strong>Misty Elliott</strong><br />Michigan Association of Student Councils and Honor Societies</p> <p><a onclick="return toggle_div2('review_section2');" href="#">more..</a></p> <div id="review_section2" style="display: none;"> <div class="blurbwrap" id="review3"> <p class="blurb">“I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/my.jpg" alt="Review" /> <p class="img_id"><strong>Sara Gutowski</strong><br />Director of Programming, Michigan Youth Leadership</p> <div class="blurbwrap" id="review4"> <p class="blurb">“I have never had anyone make that much of an impression of me in only an hour!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/loyalist.jpg" alt="Review" /> <p class="img_id"><strong>T.G.</strong><br />Loyalist College</p> <div class="blurbwrap" id="review5"> <p class="blurb">“Ryan gives inspiration on how you can chase your dreams and make them real!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/ffa.jpg" alt="Review" /> <p class="img_id"><strong>M.W.</strong><br />Wisconsin FFA</p> </div><!-- review section 2 --> </div><!-- reviews --> </li><!-- END OF REVIEWS --> <!-- MEDIA --> <li><a class="trigger" rel="#header-2" onclick="return toggle_div('media', 'ryan_5');" href="#">Media</a></li> <li><div id="media" class="hidden-divs"> <h3>Client Resources<br /><br /></h3> <p>Click <a href="html/av-checklist.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's A/V requirements and event checklist<br /><br /></p> <p>Click <a href="html/speaker-intro.htm" class="ceebox" rel="800 380 ajax">here</a> for Ryan's speaker introduction<br /><br /></p> <p>Click <a href="html/bio.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's bio (to be used in your program, website, blog, newspaper, magazines etc.)<br /><br /><br /></p> <h3>Media Appearances<br /><br /></h3> <p>Ryan on the radio If the player does not work, click <a href="pdf/Radio_Interview.mp3">here</a><br /><br /></p> <p id="radio"><embed flashvars="valid_sample_rate=true&external_url=http://www.ryanspeaks.com/Radio_Interview.mp3" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" quality="high" src="http://www.odeo.com/flash/audio_player_standard_gray.swf"/><br /><br /></p> <h3>Photo Gallery <br /></h3> <p>Click images to enlarge..<br /><br /></p> <p id="zip"><a href="images/images-download.zip">Click here to download images..</a></p> <span><a href="images/ryan1_media.jpg" class="ceebox"><img src="images/ryan1_media_thumb.jpg" alt="Video Tag" /></a> </span> <span><a href="images/ryan2_media.jpg" class="ceebox"><img src="images/ryan2_media_thumb.jpg" alt="Video Tag" /></a><br /><br /></span> <span><a href="images/ryan3_media.jpg" class="ceebox"><img src="images/ryan3_media_thumb.jpg" alt="Video Tag" /></a> </span> <span><a href="images/ryan4_media.jpg" class="ceebox"><img src="images/ryan4_media_thumb.jpg" alt="Video Tag" /></a></span> </div> </li><!-- END OF MEDIA --> <!-- CONTACT --> <li><a href="html/contact-form.php" class="trigger ceebox" rel="800 500 ajax" onclick="return toggle_div2('ryan_5');">Contact</a></li> <li><a href="http://vimeo.com/1239140" rel="550 360" class="ceebox">Video</a></li><!-- END OF CONTACT --> <!-- LOGO, FOOTER --> <li> <img id="main_logo" src="images/logo.png" alt="Ryan Speaks Logo" /> <div id="footer_content"> <form id="mailing_list" method="post" action="http://www.emailmeform.com/fid.php?formid=177854" enctype="multipart/form-data" accept-charset="UTF-8"> <p id="click_to_join">Click JOIN to receive Ryan's inspiring monthly newsletter</p> <p><input type="text" name="FieldData0" value="" maxlength="100" size="30" /></p> <p><input id="mailinglist_submit" type="submit" class="btn" value="Join" name="Submit" /></p> </form> <p>or email us at <a href="mailto:info@ryanspeaks.com"><strong>info@ryanspeaks.com</strong></a></p> <p><a rel="external" href="http://www.facebook.com/ryanspeaks"><em>Facebook</em><!--<img src="images/facebook.gif" alt="Facebook" />--></a><em> .+ </em><a rel="external" href="http://twitter.com/lunch_buddy"><em>Twitter</em><!--<img src="images/twitter.png" alt="Twitter" />--></a></p> <p>RyanSpeaks.com. All Rights Reserved.<a rel="external" href="http://designpilotonline.com"><strong>Website - Design Pilot</strong></a></p> </div><!-- Footer Content --> </li><!-- END OF LOGO FOOTER --> </ul> Hey-- Working on a new site, I've got 99.9% of it finished and working, but a menu is displaying one pixel higher in Safari (Mac and PC) than any other browser. www.inkyfever.com/customer/animotion/ The menu is in the orange bar at the top. It's created with an unordered list. You can view source to check the code. HELP! EDIT: Okay, I've got it to mostly work by changing some padding, but hovering over any other orange links, the hover color doesn't quite fill the space vertially. ONE pixel short at the bottom. Ideas? :grimey 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 http://www.alexwait.com/Nortonville...ester/main.html When I load the page in Safari, Opportunities has a border around it that is messing up the whole bar. It stinks. What should I use with CSS to get that to go away? EDIT: Fixed title. 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. |