CSS - Safari/css Oddness

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

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.

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

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

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

        }
    }

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

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

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.

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

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