|
CSS - Safari Trouble On Iphone
Here's the CSS excerpt:
div#uhgWrapper { width: 320px; height: 268px; } div#uhgWrapper[footerIncluded="false"] { height: 310px; } body[orient="landscape"] div#uhgWrapper { width: 50px; height: 50px; } body[orient="landscape"] div#uhgWrapper[footerIncluded="false"] { height: 50px; } this works great for Safari on the desktop but, the last two elements aren't recognized on Safari on the iPhone. Any suggestions? TIA Similar TutorialsI 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 Hi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! Hello, I have just got round to testing my site on my iPhone for continuity and I have found a weird problem. Here is the situation, on my blog I sometimes need to show blocks of code so I naturally use <pre></pre> tags. Some blocks of code are too wide for my content column so I coded up a little expander box with jQuery. This works fine and I'm really happy with it but the iPhone manages to screw it up. If you can test a page on my blog (rendernaut[dot]com) and navigate to a code block, you can see it is just a simple toggle switch. But when this is done an an iPhone the font inside of the block increases proportional to the width. Its the only browser I've tested which does it, does anyone have any answers to why this is? Thanks Hi, I don't have access to Dreamweaver's tools and was wondering if there was a way to test my designs on iPhones and iPads, without actually having an iPhone or iPad. Thanks! - M OK, the site looks great in all browsers, Mac and PC. But on an iphone, the footer background does not expand the width of the screen. I don't know why. Here is the site here Does anyone know how to make this work on an iphone? thanks Hi all, For some reason, my site (http://www.emineer.com) cuts off a bit when viewed on an iPhone. Here's a screen-capture to show what I mean: You can see that the right edge of the top blue background is getting cut off (it should stretch to the edge of the screen). It even happens on inner pages: As you can see, the right side of my site is cut off a bit. I have width set to 100%, so I'm not sure why this happens. It's not my phone because other sites work just fine. Any reason for this? 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. 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. 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, 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'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 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. 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 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; } |
|||||||