CSS - Safari Input Fields

Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this?

Thanks

I am having a heck of a time dealing with IE7 and how it handles z-index tags on SELECT elements and DIV's. This problem only exists in IE7 and does not manifest in IE6, Firefox (Mac/Win) or Safari (Mac/Win).

I've posted a concise example of my problem on one of my servers to better illustrate my problem: Sample Problem Page. Check it out using IE6 and then using IE7. Or if you don't have IE6, I've posted a screenshot of what it looks like.

I would appreciate any help solving this problem for IE7. Feel free to copy the source code and play with it and even keep the combo-box drop down code for your own use (if you help me get it working of course, ha ha).

Hi,

Please see
http://lbclibrary.org/addtoinquiry.php
(scroll down a bit to see the form)

What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..."

the form fields in the OTHER cell should become readonly (i.e. should not allow input).

Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey?

Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly.

Thanks a lot!

This afternoon I could finaly continue working of a menu bar.

First I did use Table's but after reading a CSS guide ( E. Meyer ), I could change that with a ul/li and CSS.

I have floating on the left side: / spacer / two icons / spacer / ... / set of centered links / ... / and floating on the right side / spacer / form fields /

Here my CSS

Code:

#footer {
clear: both;
padding: 2px 0px 10px 0px;
font: 11px arial, helvetica, sans-serif;
width: 100%;
overflow: auto;
text-align: center;
border: 1px solid;
/*min-height: 23px;
max-height: 32px;*/
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
}

#footer li.img {
padding-left: 4px;
padding-right: 4px;
float: left;
}

#footer li.spacer {
min-width: 6px;
float: left;
}

#footer li#spacerLeft {
margin-left: 8px;
float: left;
border-left: 2px #ddd dotted;
}

#footer li#spacerRight {
border-right: 2px #ddd dotted;
margin-right: 8px;
float: right;
}

#footer li#txtSelector {
margin-right: 10px;
float: right;
}

#footer a {
clear: both;  margin: 0 0 ; height: auto; 
}

#footer ul {
text-align: center; margin: 0 0 ; padding: 0; list-style-type: none;
}

#footer li {
padding-left: 3px;
padding-right: 3px;
display: inline;
min-height: 23px;
width: auto;
 }

#footer input {
font-family: Verdana; color: #333333; font-size: 7pt;
width: 80px;
}

This with my HTML
Code:

<div id="menu_container">
			<div id="footer">
				<ul>
					<!-- spacer -->
					<li class="spacer">
					<!-- icons -->
					<li class="img"><img src="comment.gif">
					<li class="img"><img src="feedicon.gif">
					<li id="spacerLeft" class="spacer">
					<!-- links -->
					<li class="link"><a href="/">Inline test</a>
					<li class="link"><a href="/">home</a>
					<li class="link"><a href="/">web</a>
					<li class="link"><a href="/">Simple more links</a>
					<li class="link"><a href="/">Simple, even more links</a>
					<!-- input search field -->
					<li id="txtSelector">
						<form action="search.php" method="post">
							<input type="text" name="search" value="Search Here" size="20" >;
						</form>
					<!-- spacer -->
					<li id="spacerRight" class="spacer">
				</ul>
			</div><!-- footer -->
		</div><!-- footer container -->

I am close, with what I want. But If I use this in Safari, it crashes when I make my window small.
On FireFox the input field is not in line with the other items.

If I the window is to small to show them all, I would love to have the middle li items wraps under them selfs.

like:
link link link link
one two three four

and not
link one link two link three link
four

This did work in my table test, but not here. I did have it one time, but I think it was by accident.

Does someone have any clue?

Thanks

I get this error from XML-CSS validation.

The element type "input" must be terminated by the matching end-tag "</input>".

I'd like to know where it goes.

It is this form:

<form action="send_survey_results.php" method="POST">
Name: <input type="text" name="user" SIZE="30"><br>
e-Mail: <input type="text" name="email" size="30"><br>
Interests:<br>
<input type="checkbox" name="intere<input type="submit" value="Register">
------------additional boxes here------------------
<input type="reset" value="Clear Form">
</form>
</div>sts[]" value="clothes">Clothes

Thank you,
Ed

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

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

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>

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

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

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.

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