CSS - Css For Iphone Not Getting Used In Safari

Hi, Is it possible to make 3 different sites depending on the client browser medium? I have a flash site, that needs to be presented non-flash for the iphone, and another non-Flash site for the ipad.

Is there a way CSS can detect these 3 different browser mediums?

If so, then how?

thanks
-

Hello!

I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this?

Here is the css I used to center the site:

#wrapper {
width:850px;
height:650px;

position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-425px;
}

And here is the site:
(URL address blocked: google Maid Marian Muffins)

I need the result to be fully functional i.e. zoom & pinching functions must still work.

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

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.

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

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 cannot see a margin when I test this page in safari from dreamweaver. Basically I am trying for a centered container which will hold all the content and have some space from the top margin and be centered. With the CSS I have the container shows up with a margin when I test it in the firefox browser and even when using live view, but not in Safari. The latest version of Safari.

What do I need to change to get the top margin to show correctly in Safari? Is something overriding something else?

Code

@charset "UTF-8";
/* CSS Document */

body {

color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;

}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;

}

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}

.menu a:hover {
color: #990000;
text-decoration: none;
}

.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */

}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}

Hi,

I've made a nav menu using nested ULs, Javascript and CSS.

Ive made javascript to open and close submenus by changing the CSS display attribute of the submenu between the values 'block' and 'none'

Everything works fine until I tested the system in Safari. This is quite a vital part of the site so I could do with some help on getting what seems to be a fine, valid bit of code / functionality ro work in the Mac browser.

any ideas?

cheers,

NK

Apologies for posting this in 2 thread - im not sure if this is a javascript or a CSS problem...

my html is:
Code:

    <ul class="nav_list"><li><a id="Accessories" href="/store/page3.asp?sup_type=1&t=3&sub_type=3">Accessories</a></li>
        <li><a id="Books" href="/store/page3.asp?sup_type=1&t=2&sub_type=2">Books</a></li>
        <li><a id="CD/Vinyl" href="#" onclick="toggle('CD/Vinyl','m_cd/vinyl'); return false;">CD/Vinyl</a>
            <ul class="sub_nav_list" id="m_cd/vinyl"><li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=15">CD Albums</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=9">CD Singles</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=10">Vinyl Albums</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=16">Vinyl Singles</a></li></ul>
        </li>
        <li><a id="DVD/Video" href="#" onclick="toggle('DVD/Video','m_dvd/video'); return false;">DVD/Video</a>
            <ul class="sub_nav_list" id="m_dvd/video"><li><a href="/store/page3.asp?sup_type=1&t=5&sub_type=17">DVD</a></li>
            <li><a href="/store/page3.asp?sup_type=1&t=5&sub_type=18">VHS</a></li></ul>
        </li>
        <li><a id="Downloads" href="#" onclick="toggle('Downloads','m_downloads'); return false;">Downloads</a>
            <ul class="sub_nav_list" id="m_downloads"><li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=6">Digital Albums</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=12">Digital Tracks</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=24">Digital Videos</a></li></ul>
        </li>
        <li><a id="Memorabilia" href="/store/page3.asp?sup_type=1&t=7&sub_type=7">Memorabilia</a></li>
        <li><a id="Wearables" href="#" onclick="toggle('Wearables','m_wearables'); return false;">Wearables</a>
            <ul class="sub_nav_list" id="m_wearables">
                
                <li><a href="/store/page3.asp?sup_type=1&t=8&sub_type=20">Tour Favourites</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=8&sub_type=13">Greatest Hits</a></li></ul>
        </li></ul>

my CSS is:
Code:

/*

NAVIGATION MENU CODE

*/


#nav_wrapper
{
	padding:0;
	margin:0;
	/*line-height:0.5em;*/
	border-top:solid 1px #333;
}

#nav_wrapper a
{
	color:#fff;
	font-weight:normal;
	display:block;
	margin:0;
	padding:3px 6px;
	background:url(/images/list_arrow.gif) no-repeat right top  transparent;
}

.a_alt
{
	color:#fff;
	font-weight:normal;
	display:block;
	margin:0;
	padding:3px 6px;
	background:url(/images/list_arrow_down.gif) no-repeat right top  transparent;
}

#nav_wrapper a:hover
{
	text-decoration:underline;
	background-color:#BF8F21;
}

.nav_list, .nav_list_alt, .sub_nav_list
{
	list-style-type:none;
	padding:0;
	margin:0;
	
	border-bottom:solid 1px #333;
	border-right:solid 1px #333;
}

#nav_wrapper li
{
	width:100%;
	margin:0;
	padding:0;
	display:block;
}

.nav_list
{
	background-color:#818181;
}

.nav_list_alt
{
	background-color:#A0A0A0;	
}

.sub_nav_list
{
	display:none;
	background-color:#C49B1F;
	border:none;
	
}

my javascript is:
Code:

    function toggle(menuLink, menu){
        //alert(menu + '\n' + menuLink); 
        thisMenu = document.getElementById(menu);
        thisMenuLink = document.getElementById(menuLink);

        if (menuLink!=null && menuLink!=''){            
            
            if(menuLink!=activeMenuLink){
            // replace active submenu, make this one visible
            
                
                // sort out header colour
                thisMenuLink.style.backgroundColor ='#BF8F21';
                
                //sort out the menu   
                if(menu!=''){
                    thisMenu.style.display='block';
                    thisMenuLink.style.backgroundImage = 'url(/images/list_arrow_down.gif)';
                    
                    if(activeMenu!=''){
                        document.getElementById(activeMenu).style.display='none';
                    }
                    activeMenu = menu;
                }
                            
                //hide and replace active
                if(activeMenuLink!=''){
                    document.getElementById(activeMenuLink).style.backgroundColor ='#818181';
                    document.getElementById(activeMenuLink).style.backgroundImage='url(/images/list_arrow.gif)';
                }
                activeMenuLink = menuLink;
                
                        
            } else {
            // hide this submenu, make active vars = ''
            
                // sort out header colour
                thisMenuLink.style.backgroundColor ='#818181';           
            
                //sort out the menu
                if(menu!=''){
                    thisMenu.style.display='none';
                    thisMenuLink.style.backgroundImage = 'url(/images/list_arrow.gif)';
                    
                    //document.getElementById(activeMenu).style.display='none';
                    activeMenu = '';
                }
            
                activeMenuLink = '';
            
            }

        }
    }

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

Is it possible to designate a width in CSS just for Safari on a Mac?

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.