CSS - Safari Won't Call The Css

Hi, so i dont know how else to explain this with out giving you the link ocixx.com/index1.html

the three buttons on the right Facebook myspace twitter, everything is perfect with them, except when you click them nothing happens, i am using css file and scripts i found on the net, cause i cant program the source to the css file is in the source to the page, i dont know what to do

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.

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;
}

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 &nbsp; 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?

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,

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 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

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.

ListInventory.com

It looks all "squished" on the iPad.
Been tasked with finding out why.
Worked fine until adding the featured product block on the right yesterday.

What did I screw up? It doesn't do this in Safari for Windows.

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;

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

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 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&trade;</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">&ldquo;UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!&rdquo;</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">&ldquo;...In a nutshell Ryan blew those kids away&rdquo;</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">&ldquo;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!&rdquo;</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">&ldquo;I have never had anyone make that much of an impression of me in only an hour!&rdquo;</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">&ldquo;Ryan gives inspiration on how you can chase your dreams and make them real!&rdquo;</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>&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;</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>&nbsp;.+&nbsp;</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>