CSS - Css Issue In Safari

Hi,

I am trying to use rounded corners for the top left and right of a div in safari, but i cannot work it out.

This is my code:

PHP Code:
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius:  5px 5px 0px 0px; 





the corners are fine in other browsers, but they appear square in safari. If I change this line to:

-webkit-border-radius: 5px;

then the corners are rounded. But how can I get just the top left and top right corners to be rounded?

Any ideas would be great.

Thanks

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

Background info:
- I have validated the page and CSS, no problems there
- Site is working properly in Firefox and IE, seems to be a margin issue in Safari
-This margin issue is not the common Safari bug with a negative margin being applied to a floated element
-I am using Safari in a windows environment, I do not have a Mac

The problem:
-in Safari the top margin on the content either is either not being applied at all or is being interpreted differently
-it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari?

The website:
http://www.lisa-noble.com/test/redo.html

The HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>Site Test</title>
  <link rel="stylesheet" type="text/css" href="redo.css" />
   <!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>

<body>

<div id="top_filler">
</div>

  <div id="left_filler">
</div>

<div id="right_filler">
</div>

<div id="top_left">
</div>

<div id="header">
</div>

<div id="top_right">
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   

<p>Etc, etc, etc....</p>
</div>

<div id="bottom_filler">
</div>

<div id="bottom_left">
</div>

<div id="bottom_right">
</div>

</body>
</html>

The CSS
Code:

* {
   margin: 0;
   padding: 0;
}

body {
   background: #fdd9e9;
}

div#top_filler {
   background: url(images/bg_slice_sm.png) repeat-x;
   width: 100%;
   height: 164px;
   position: fixed;
   top: 0px;
   z-index: 5;
}

div#left_filler {
   background: url(images/left_slice_sm.png) repeat-y;
   width: 174px;
   height: 100%;
   position:fixed;
   left:0px;
   z-index: 5;
   
}

div#right_filler {
   background: url(images/right_slice_sm.png) repeat-y;
   width: 161px;
   height: 100%;
   position:fixed;
   right: 0px;
   z-index:5;
}

div#bottom_filler {
   background: url(images/bottom_slice_sm.png) repeat-x;
   width: 100%;
   height: 76px;
   position: fixed;
   bottom: 0px;
   z-index: 5;
}

div#header {
   position: fixed;
   top: 0px;
   left: 37%;
   height: 125px;
   width: 316px;
   margin: 0 auto;
   background: url(pink_logo2.png) no-repeat;
   z-index: 25;
}

ul.NoBulletNoIndent {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px
}

div#top_left {
   height: 314px;
   width: 221px;
   background: url(images/left_top_corner_sm.png) no-repeat;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 5;
}

div#bottom_left {
   height: 175px;
   width: 176px;
   background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
   position: fixed;
   bottom: 0px;
   left: 0px;
   z-index: 5;
   
}

div#top_right{
   height:174px;
   width:174px;
   background: url(images/right_top_corner_sm.png) top no-repeat;
   position: fixed;
   top:0px;
   right: 0px;
   z-index:5
}

div#bottom_right{
   height: 602px;
   width:198px;
   background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
   position: fixed;
   bottom: 0px;
   right: 0px;
   z-index: 5
}

div#content {
   margin: 40px 164px 0px 180px;
   position: relative;
   z-index: 1;
}

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

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

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

Hi all,
Is there some trick to achieving a nice gradient background in Safari? I have a nice 150x400 red to dark red gradient JPG, and I'm using this code in the body tag of my CSS file:

background: url(../images/page_back.jpg) repeat-x #670000;

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.

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