CSS - Anchors Don't Work In Safari

Hello all, Newbie here.

I shall demonstrate how much of a Newbie I am by posing a question which is so basic to all of you, but escapes me altogether.

What styles apply to what element? That is, what element gets a background and determines size of a menu? Or put a different way, do I have to style a UL element, or just style the LI? Why is it that I don't have to set a color attribute for a LI element if I set it for an anchor element?

As you can tell I am a very confused person. I managed to fake my way through a website, but would like to add (Suckerfish) dropdowns to the horizontal nav bar. But, I cannot for the life of me get the dropdown list items to space as I would like. That is because I don't understand the basics of a list!

If it helps the site in question is www.lif-tech.com/dropdown.html. The CSS which drops the nested items is he

Code:

@charset "utf-8";

/*Over-ride browser*/
* {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
}

/* This div contains website*/
#wrapper {
	margin-right: auto;
	margin-left: auto;
	background-color: #4D4D4D;
	width: 760px;
	border: 1px solid #000;
	text-align: left;
}
/*Header*/
#mastHead      {
	width: 720px;
	background-color: #4D4D4D;
	text-align: center;
	padding-right: 40px;
}

/*Div to hold logo. "Same Day Service" in HRML beneath*/
#mastHeadL	{
	height:110px;
	width:190px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

/*Used for positioning - could probably go*/
#mastHeadR	{
	height:95px;
	width:355px;
	float: right;
	padding-top: 10px;
}

/*Hor Nav div*/
#hNav     {
	font-size: large;
	font-weight: bold;
	text-align:center;
	line-height:40px;
	color: #FFFFFF;
	height: 40px;
	background-color: #000;
	background-repeat: repeat-x;
	background-image: url(../images/header.jpg);
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #666666;
	position: relative;
	clear:both;
}

/*Position 1/2 way left...*/
#hNav       ul     {
	clear: left;
	float: left;
	border:0 0 0;
	list-style: none;
	position: relative;
	left: 50%;
	text-align: center;
}
/*so li can be positioned 1/2 that distance right to center menu*/
#hNav li	{
	display:block;
	width: 105px;
	height: 40px;
	float: left;
	list-style: none;
	position: relative;
	right: 50%;
}

/*style Hor Nav anchors*/
#hNav a {
	display: block;
	width:105px;
	height: 40px;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #DA251C;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 20px;
}

/*Insert first red separator line*/
#hNav a.first {
	border-left-width: 1px; 
	border-left-style: dotted;
	border-left-color: #DA251C; 
}






/*Suckerfish...*/
#hNav ul ul	li	{
	height: 2em;
	text-align: center;
	line-height:1em;
	background-color: #4D4D4D;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #666666;
	left:-1999px;

}

#hNav ul ul a	{
	height:auto;
	line-height:1em;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #666666;
	font-size:12px;

}


#hNav a:visited {
	color:#DA251C;
	display: block;
	outline: none;
	width:105px;
	text-decoration: none;
	font-size: large;
}

#hNav ul ul a:visited	{
	color:#DA251C;
	display: block;
	outline: none;
	width:105px;
	text-decoration: none;
	font-size: small;
}

/*Make button black for sunken affect*/
#hNav a:hover	{
	background-color: #000;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #666;
	border-right-style: solid;
	border-right-color: #333;
}

#hNav a:visited ul li	{
	border:0
}

#hNav li:hover ul li	{
	left: auto;
}

/*Create Vert Nav column*/
#vNav    {
	float: left;
	width: 130px;
	margin-top: 40px;
	overflow: hidden;
	clear: left;
}

#vNav ul {
	margin-right: -42px;
	text-align: center;
	padding: 0px;
	width: 127px;
	list-style-type: none;
	background-color: #4D4D4D;
	border: 1px;
	border-style:solid;
	border-color:#4D4D4D;
}

#vNav a:hover	{
	background-color: #000000;
	outline: none;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #333333;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #666666;
}


#hNav a:visited .vNav ul a{
	color:#DA251C;
	display: block;
	text-decoration: none;
	font-size: large;
}

#vNav a {
	display:block;
	color:#99FF00;
	text-decoration:none;
	font-size: .75em;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 0.75em;
	padding-right: 1em;
	padding-bottom: 0.75em;
	padding-left: 1em;
	line-height: 1.5em;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #4D4D4D;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #4D4D4D;

}

#vNav a:visited {
	color:#DA251C;
}

/*Content is white only from Vert Nav right*/
#content   {
	background-color: #FFFFFF;
	float: left;
	width: 590px;
	padding: 20px;
}
/*Style the font to be bolder than regular text*/
#content p	{
	font-size: medium;
	font-weight: bold;
}

#contentImg	{
	float:right;
	padding-left:1em;

}

/*Footer clears all floats*/
#footer  {
	clear: both;
	height: 80px;
	width: 758px;
	background-color: #000000;
	background-image: url(../images/footer.jpg);
	background-repeat: repeat-x;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #666666;
	border-left-color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	text-align:center;
	line-height: 5em;
}

#footer a	{
	text-decoration:none;
	color: #FFFFFF;
}

#footer a:visited {
	color:#DA251C;
}
	
/*Inside pages at bottom - big and bold, and centered*/
#phone	{
	text-align:center;
	color: #FF0000;
	font-size: 2em;
	font-weight:bold;
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

/*This div contains "View Printer Friendly versions*/
#print	{
	width:50%;
	float: right;
	font-size:10pt;
}

#print img	{
	float:right;
	border: none;
}

/*Center address below phone*/
#address	{
	color:#000; 
	font-size:.4em; 
	font-weight:normal; 
	line-height:1.5em;
}

/*Remove border from images*/
#wrapper img	{	
	border:none;
}

/*Remove border from visited boxes*/
#wrapper img a	{
	text-decoration:none;
}

/*Display page User is on as black*/
#homepage #home, #billofrights #bor, #warranty #war,
#guarantee #mbg, #rental #rental, #service #service,
#products #products, #contact #contact, #techtalk #tf,
#faq #faq, #parts #parts, 
#ot #ot, #pm #pm
{color:#000} 

I want the dropdowns list items to vertically space as the Vertical Nav Bar does. I think the problem is I styled the lists differently - LI (and A) for the Horizontal and UL and A for the Vertical Nav...

Sorry for the lenghty code, the unneeded styling, and the blatant stupidity. This is why I am a mechanic and not a website designer!

Thanks,
-John

Hi, I have a realy strange problem that I'm hoping someone can shed some light on.

I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor.

<a href=""><h2>Some text</h2></a>

Using firebug I saw that the html gets duplicated like so:

<a href=""></a>

<h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places!

<a href=""></a>

and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>.

In the stylesheet the anchor has display:block;

Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before!

Thanks.

I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple:
PHP Code:
 h3 {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
p {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
a {
    text-decoration: none;
}
a:hover {
    color:#636500;
}
a:visited {
    color:#cecf9c;
}
a:link {
    color:#cecf9c;
} 





searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore.

I think it may be affected by the a:visited style, but how do I make a:hover work all the time?

Thanks for helping.

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 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 am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them.

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

When I do this, it is centered on Firefox:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#encapsule {
	margin-left: auto;
	margin-right: auto;
	}

#centered
{
text-align: center;
}

#centered table
{
margin: 0 auto;
text-align: auto;
}


#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table> </div>

When I do the following, it centers it on Safari:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
}
#encase {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks!

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

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.

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

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!

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

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

http://www.mbsnyder.com/index2.shtml

On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it.

These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance.

My site displays correctly in Firefox and IE (which was hassle enough) but when I view it in Safari on my Macbook, the last nav menu item is pushed down below the rest of the menu instead of in line with the rest of the menu. I just got my macbook, and I'm not very in touch with al of Safari's quirks yet, but I was under the impression that it was more reliable than FF or IE. Does anyone have any idea what's causing this, and how I can fix it?

http://www.wwu.edu/~swing