|
CSS - Safari Css Workaround?
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! Similar TutorialsHello, I am trying to have make a 'facebook' style toolbar fixed to the bottom of the screen. This works on desktop browsers except Mobile Safari on the iPhone (due to the 'viewport' way of rendering the page). Is their a workaround for this? I have seen doctyper's method but can't get it to work. Thanks I believe I may have found a CSS bug in Safari, but wanted to run this by some experts for advice, and a possible workaround - I haven't been able to find one yet. What I'm trying to do is position an iframe directly to the right of a table, and have it ALWAYS be to the right, even if it causes the page to horizontally scroll. I was able to achieve this in Mozilla, Opera, and (even) IE [have not tested IE/Mac] by making the iframe absolutely positioned, but inside a relatively-positioned span element immediately after the table, like so: Code:
<html> <head>
<style>
.maintab {float: left;}
.framediv1 {position: absolute;}
</style>
</head>
<body>
<p><table border=1 class="maintab">
<tr><td>Col 1, a short column</td><td>Col 2, which is longer than Col 1</td>
<td>Col 3: an even longer column that isn't fixed-width</td></tr>
</table>
<span style="position:relative">
<iframe class=framediv1 name=framediv width=250 height=200 frameborder="0" src="http://www.yahoo.com"></iframe>
</span>
</body> </html>
As I mentioned, this has the desired effect in Moz, IE, Opera. However, in Safari, it's positioning the iframe relative to the left margin, rather than the right-edge of the table, where the <span> is expected to be. I'm about 90% confident this is a Safari bug, because the position:absolute should be using the last non-staticly positioned parent container (the span) to determine where to put it. Anyone care to confirm? Better still, anybody have a workaround (other than using a table inside a table - blech!) Thanks, Keith I have found out that if you don't define a width for an element in CSS and you set the left and right margins to auto to accomplish centering... it doesn't work. I would like to make this element to be easy to add to, but right now I have to resort to making sure the width is just right... And that stinks. Any way around? I kind of understand why... CSS doesn't know what to make the margins when it is declared unless the width is defined because the HTML has beenr rendered yet.. but gosh! Thanks for any advice. CSS 1, Netscape 4.x and background+width issue need workaround: I am working on a website template and converting it to CSS. I have seperated my CSS1 from my CSS 2 sheet and am currently trying to get NN 4.x to do what I have read it won't do and have no idea how to make it do what I want. BTW:Please do not advise me to drop NN 4.x, unfortunately it is not within my power to do so. What I need to do is put a background color on an H1 header that will be only as wide as the table cell (column) it is in. (3 column plus header and footer layout). BTW: I cannot drop the table either. My problem is that when I get the background to work (instead of just surrounding the text) I cannot get it to be liquid and remain inside its cell. When I set the width to %'s it just pushes the other 2 columns out of the way even when the % is not the width of the column. Unfortunately, pixels are not flexible enough for this layout. So, how do I get a background color on an H1 tag that fully expands to the width of the column (not just the text) using CSS 1 and NN 4.x while not destroying the table layout? Thank you for your help- Schach PS: This is not an issue of my code, but an issue of the NN 4.x CSS support. So I do not need to have the code debugged, but instead I need a hack or method to outsmart the browser, so I can duplicate a site in CSS. This site is currently heavily reliant on tables, something we want to change, but can't unless we can reproduce the site in NN 4.x. (You can email me if you would like to do that) I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as Code:
<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...
This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated. Hi, I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! 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 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 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 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'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? 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 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 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>
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. |
|||||||