CSS - Jellomold And Safari Problem

Hi -

I'm relatively new to using CSS, so please bear with me.

I've attempted to put an imagemap on my homepage using CSS. There is a main background image and there are a bunch of tiny images that are hidden, but then appear over the top of the main image when you move the mouse over them.

You can view the page online - it's the main homepage of my website:
www (dot) midwood (dot) net
(It's the page w/ the mountain background, etc).

This HTML and CSS are both valid according to W3.org.

The code works fine (as expected) on both IE6 and Firefox. If you want to see the effect I'm looking for, use one of those browsers and you'll get the idea.

The problem I'm running into is that it doesn't work in Safari. The tiny images do show up in the right place when you roll over the correct spot, but they are not initially hidden (as they are in IE or FF).

I'd appreciate it if somebody with more CSS knowledge than me took a look at my code for the homepage . Is there anything obvious I'm doing wrong that is causing it not to work in Safari? Or is it just a Safari rendering bug?

If it is a bug in Safari's rendering, is there a workaround so that I can get the desired effect on all three browsers?

Thanks.

Hi guys..

I have a script that spits out a series of divs..
The first 'wrapper' Div is position:relative, and I have placed other divs inside it, positioning them using position: absolute; left: 20px, etc...
It renders perfectly on all my tested browsers, and yet when I make the script repeat, so that each div-set is loaded from the database, they just stack on top of each other on the page, rather than underneath each other..
All I am really doing is stacking divs, I thought that whatever went on in the 'child' divs didnt affect the parents ??
Like so:
Code:

<div style="position: relative;">
     <div style="position: absolute; left: 20px; top: 40px;">
      some content
     </div>
     <div style="position: absolute; left: 150px; top: 40px;">
      other content
     </div>
</div>

Ive tried setting things like display: block;, clear: both, etc, but the sets of divs just 'pile' on top of each other...

Any ideas :/

Many thanks,

Mike.

hi all,

having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE.

have a look: http://www.offsitedbs.com

the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE.

code for the divs:

<div class='bottomDiv'>
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div>
<p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p>
<p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div>
<p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p>
<p class='bottomText'>We take ... its optimal level.<br></p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div>
<p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p>
<p class='bottomText'>Network technologies ... from snoops.<br></p>
</div>

and the css for the 'bottomdiv's:

.bottomDiv {
background-color: #F0F0F0;
height: 262px;
width: 193px;
float: left;
border-left: solid 1px #FFF;
border-bottom: solid 1px #FFF;
background-image:url(../IMAGES/bottomBG.gif);
background-repeat:repeat-x;
background-position:bottom;
border-top: solid 1px #FFF;
padding: 0px;
vertical-align: top;
}

any & all help is very appreciated!

thanks,

nunzio

So, here's what I've got:

http://www.anthonycarboni.com

The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari.

Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS:

Code:

body {
    color: #FFFFFF;
	background-color: #000000;
    font-family: 'ArialMT', 'Arial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 19px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
    min-width: 800px;
}

.main{
		background-color: #202020;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
}

.header{
		height: 50px;
		background-image: url('images/header.jpg');
		background-repeat: repeat;
}

p.headline {
		font-size: 32px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.8em;
		vertical-align: middle;
}

And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated.

Thanks!

I am trying to get a 2 column layout to work across all browsers and I ran into a strange problem with center in Safari (or what Safari looks like according to the screenshot at http://www.snugtech.com/safaritest/)

The page aligns correctly in my version of IE and Firefox.

What I want to happen is for the table to center in the content div "image_block." In Safari the table is centering inside the container div "container" and sometimes behind the float right div "thumb_block."

you can see it live at link

here is the code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>images</title>
<BASE href="http://jasonhalac.com/picture_gallery/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/imagerollover.css" rel="stylesheet" type="text/css">
<link href="images.css" rel="stylesheet" type="text/css">



</head>
<body">

<div id="top_image">
</div>

<div align="left" id="list_tabs">header content</div>

<div id="container">

<div id="thumb_block">
thumb block float right fixed width
thumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width</div>

<div id="image_block">
  <p>image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block</p>
  <table width="200" border="1" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>test</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <p>
  image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage block</p>
</div>
</div>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>
</html>

and css
Code:

#container{
	margin: 0px;
	border: 0px;
	height: 600px;
	width: 915px;
}
#thumb_block{
	width: 310px;
	margin: 0px;
	padding: 0px;
	float: right;
	
}
#image_block{
	margin: 0px;
	padding: 15px 0px 0px 0px;	
}

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

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>

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

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

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.