CSS - Css Form Background Safari

Hi all

I really like the standard form styles in Safari, and until v2 (I guess) Safari didn't react on any custom CSS styling yet.

But now with Safari 3 it begins to interpret some of the custom stuff, e.g. background color etc.
I really don't like that because I think it's ugly - Mac has cool forms design, and I'd like my websites to have the standard Aqua look.

But what's the easiest way to prevent Safari from using my custom CSS (which is quite cool in browsers like IE and FF, but not in Safari)?

I'd like best to have some sort of @import rule or conditional comment for Safari that is not interpreted ONLY by safari... Not too much dirty hacks, please. ;-)

Thanks for help
Josh

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

Hi all,

I'm working on styling a form button at the moment. I've got it styled perfectly to how I want it, with the correct mouseover and mouseout colours (mouseOver = light grey, mouseOut = white). However when the page is loaded initially, the background colour is set to something I haven't manually chosen - darker grey. Once I put the cursor over it and off it, the desired colours appear; however it's just this initial-colour problem that I can't seem to root out.

Here's the link.
Button.html

I believe this initial colour is the background colour of a standard button, but I can't seem to fix it so that it doesn't appear.

Anyone know how to fix this?

Thanks
Jaiyan

Code:

<html>
<head><title></title>

<style type="text/css">

  INPUT.formButton {
		color: Gray;
		font: 11px Arial,Helvetica,sans-serif;
		text-decoration: none;
                background-color: white
		border: 1px solid #708090;
		text-align: center;
		display: block;
		width: 150px;
		padding: 3px 5px;
		/*margin: 7px;*/
	}

  </style>

</head>
<body>

<form action="/expense_attach.phtml" method="post">
<input type="submit" name="which" class="formButton" onmouseover="this.style.background='#DADADA'; return true" onmouseout="this.style.background='#FFFFFF';" value="Investigator">
</form>

</body>
</html>

Hi,

I need a class, that if I apply to a DIV tag (which has login form), It makes the background of that div a dull colored.

Also I want to know if I need to force the user to first close that div before any other action outside the div. I hope this make sense.

I am not sure if it can be done only with CSS or it also needs javascript.

Is there a simple way of applying a CSS style to only the form fields that are empty?

I searched online and found this but doesn't seem to work.

Code:

input[value=""] {
     background-color: #FFFF66;
}

any other ideas?

I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image.

You can see what I'm talking about here.

Here is the xhtml:

Code:

<div class="contact">
	<form action="sendmail.php" method="post" id="contactform">
		<ul>
		        <li>
                                <label for="name"><img class="label" src="images/name.png" alt="" /></label>
				<input class="inputbox" type="text" name="name" value="" id="name" />
			</li>
			<li>
				<label for="email"><img class="label" src="images/email.png" alt="" /></label>
				<input class="inputbox" type="text" name="email" value="" id="email" />
			</li>
			<li>
				<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
				<input class="inputbox" type="text" name="tele" value="" id="tele" />

			</li>
			<li class="special">
				<label for="last">Don't fill this in:</label>
				<input type="text" name="last" value="" id="last" />
			</li>
			<li>
				<label for="message"><img class="label" src="images/message.png" alt="" /></label>
				<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>

			</li>
			<li class="submitbutton">
				<input type="submit" value="" class="formbutton" />
			</li>
		</ul>
	</form>
</div>

and here is the relevant css:

Code:

.inputbox {
	height: 39px;
	width: 246px;
	border: none;
	padding: 10px 10px 0 10px;
	background: url("../images/inputbox.png") no-repeat 0 0;
	font: bold italic 1.25em/1.1em Lucida, sans;
	color: #3d2d06;
}

I'm sure this is an easy one but I can't really figure it out and googling has not produced any results.

Thanks in advance.

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!

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

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

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.