safari won't respond to css commands, even tho...

[rorshackles]

the other 3 browsers - FF, IE and Opera - respond perfectly. Help!

Yesterday, I posted a request for help and a member named Daniel, chided me for my subject heading ("please hlpe"). Okay, I'm posting with a more specific subject heading. My post yesterday basically said....

...that I am a total beginner: For the last two weeks, I have putting in 16 to 18 hours-a-day trying to repair the work a programmer did for me for my website. I'm at the end of my rope. My nerves are totally shattered.

The problem is a css file for my mouse-over menu system. The programmer is no longer available - I think he was in over his head. Anyway, Ive learned as much as I can learn to fix his coding - and I fixed almost all of his problems----except for one.

The problem is specific to Safari ( all versions including the latest). If someone out there can suggest coding to fix my problem, I'd be really really grateful.

Here is my site: www.petersolon.com

The problem has to do with the last tab (see attached screenshot). The text - inside that tab - doesn't center on Safari. It centers on all other browsers - Opera, FF, IE. (This problem relates to former problems (already resolved) related to aligning that last tab to the right.) I've included an attachment showing what safari does - and another attachment showing what is supposed to happen (and does happen on all other browsers.)

I placed the css file for my site in the body of this e mail (this site won't let me include it as an attachment). And below the css file, I placed the html file(here again, this site won't let me include it as an attachment). Thank you so much for any help you can give me.

FULL CSS FILE


@charset "UTF-8";

body {
background:black;
color:white;
}
#container {
height:70px;
}

#subnav {
width:632px;
}

#maintabs_table {
background: url(images/purpledot.gif) bottom repeat-x;
}

#maintabs td {
padding:0px 4.5px;
white-space:nowrap;
}
td#lastmaintabtd {
padding-right:0px;
padding-left:1px;
text-align:right;
}
div#lastmaintab {
padding-top:11px;
padding-left:2px;
padding-right:1px;
padding-bottom:3px;
text-align:right;
}
td#tilde {
padding-right:0px;
padding-top:5px;
padding-left:0px;
}
.maintab div div {
padding-top:11px;
padding-left:10px;
padding-right:10px;
padding-bottom:3px;
text-transform:uppercase;
font-family:Arial-BoldMT, Arial, sans-serif;
font-weight:bold;
cursor:pointer;
font-size:10px;
text-align:center;
height:12px;
}
.amaintab div div:hover {
font-size:11px!important;
letter-spacing:0.10em!important;
}
#subnav {
display:none;
background: url(images/nav-mid.gif) top repeat-x;
margin-bottom:2px;
padding-bottom:10px;
margin-left:-3px;
margin-right:0px;
}
#subnav-left {
background: url(images/nav-left.gif) no-repeat top left;
}
#subnav-right {
background: url(images/nav-right.gif) no-repeat top right;
}
#subtabs {
height:24px;
}

.subtab a, .subtab a:hover, .subtab a:visited {
padding:0px 15px 0px 15px;
font-family:Arial-BoldMT, Arial, sans-serif;
font-weight:bold;
letter-spacing:0px;
font-size:9px;
text-transform:uppercase;
color:black;
text-decoration:none;
line-height:24px;
vertical-align:middle;
}
.reg {
font-family:Arial-BoldMT, Arial, sans-serif!important;
font-size:103%;
font-size:11px!important;
}

.italics {
font-family:Verdana, Arial, Helvetica, sans-serif!important;
font-style:italic;
font-size:11px!important;
}

.italics2 {
font-family:Arial-BoldMT, Arial, sans-serif!important;
font-style:italic;
font-size:10px!important;
}
/* Home */
#maintab1 div div {width:35px}
/* Intro */
#maintab2 div div {width:35px}
/* Writings */
#maintab3 div div {width:60px}
/* Practice */
#maintab4 div div {width:60px}
/* Coolstuff */
#maintab5 div div {width:80px}
/* Events */
#maintab6 div div {width:45px}
/* Buy the Course */
#maintab7 div div {width:110px}

/* Home */

#subtab1 {
text-align:left;
padding-left:25px;
}
/* Intro */

#subtab2 {
text-align:center;
/* padding-left:30px;
}
#subtab2 a {
padding:0px 25px;
}
/* Writings */

#subtab3 {
text-align:left;
padding-left:6px;
}
#subtab3 a {
padding-right:9px;
padding-left:9px;
}
/* Practice */

#subtab4 {
text-align:center;
padding-right:60px;
}
/* Cool Stuff */
#subtab5 {
text-align:right; /* with text-align:right you align the submenus to the right */
padding-right:60px; /* with padding-right:xx px you set the padding */
}
/* Events */

#subtab6 {
text-align:right;
padding-right:120px;
}

/* Buy The Course */

#subtab7 {
text-align:right;
padding-right:40px;
}
/* Possible future subtabs */

#subtab8 {
text-align:right;
padding-right:20px;
}

FULL HTML FILE



<div id="container"> <div style="position:absolute;left:-1000px"> <img src="menu/images/tab-left.gif" alt="a" /> <img src="menu/images/tab-mid.gif" alt="a" /> <img src="menu/images/tab-right.gif" alt="a" /> </div> <script type="text/javascript" src="menu/topmenu.js"> </script> <link rel="stylesheet" href="menu/topmenu.css" type="text/css" /> <div id="maintabs"> <table id="maintabs_table" cellpadding="0" cellspacing="0px" border="0" > <tr onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <td id="tilde"><img src="menu/images/tilde.png" alt="Tilde" /></td> <td> <div id="maintab1" class="maintab" onmouseover="showsubtab('subtab1',this)"> <div> <div>Home</div> </div> </div> </td> <!-- This is the code for one main-tab --> <td> <!-- Following line is important at onmouseover="xxx" you write the ID of the submenu to show (e.g. subtab1, subtab2) --> <div id="maintab2" class="maintab" onmouseover="showsubtab('subtab2',this)"> <div> <div>Intro</div> </div> </div> </td> <!-- It ends here --> <td> <div id="maintab3" class="maintab" onmouseover="showsubtab('subtab3',this)"> <div> <div>Writings</div> </div> </div> </td> <td> <div id="maintab4" class="maintab" onmouseover="showsubtab('subtab4',this)"> <div> <div>Practice</div> </div> </div> </td> <td> <div id="maintab5" class="maintab" onmouseover="showsubtab('subtab5',this)"> <div> <div>Cool Stuff</div> </div> </div> </td> <td> <div id="maintab6" class="maintab" onmouseover="showsubtab('subtab6',this)"> <div> <div>Events</div> </div> </div> </td> <td id="lastmaintabtd"> <div id="maintab7" class="maintab" onmouseover="showsubtab('subtab7',this)"> <div> <div id="lastmaintab">Buy The Course</div> </div> </div> </td> </tr> </table> </div> <div id="subnav" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <div id="subnav-left"> <div id="subnav-right"> <div id="subtabs"> <!-- Here a subtab starts --> <!-- Notive the attribute 'id' it tells the id of the submenu, the main menus refere to that id --> <div class="subtab" id="subtab1"> <a href="Home2.html" title="Home">Return Home</a> </div> <!-- Here it ends --> <div class="subtab" id="subtab2"> <!--Put any links for the first subtab here --> <a href="Overview.html">Overview</a> <a href="PointOfView.html">Point of View</a> <a href="Mission.html">Mission</a> <a href="Questions.html">Questions</a> <a href="Bio.html">Bio</a> <a href="Bio.html">Contact</a> </div> <div class="subtab" id="subtab3"> <a href="Basics1.html" >The Basics</a> <a href="History.html" >History</a> <a href="OtherTraditions.html" >The Course &amp; Other Traditions</a> <!-- Note the 'class' attribute, setting this with the value 'italics' makes the text italic and font:Verdana --> <a href="link.html" >The Healing Component</a> <a href="WRITINGS.html" class="italics">COMPLETE LIST HERE</a> </div> <div class="subtab" id="subtab4"> <!-- Note the attribute target, it makes the link open in a new window --> <a target="_BLANK" href="http://www.hiddenpractices.com/Home.html" >Go to our sister site: hidden-practices.com</a> </div> <div class="subtab" id="subtab5"> <a href="http://www.petersolon.com/NakedtruthUNDERCON.html" >Naked Truth</a> <a href="Solon2.html" >Be a light unto yourself</a> <a href="Prather.html" >What is the course</a> <a href="COOLSTUFF.html" class="italics">More</a> </div> <div class="subtab" id="subtab6"> <a href="EVENTS.html" >Lectures, Workshops &amp; Retreats: Check Our Schedule Here</a> </div> <div class="subtab" id="subtab7"> <a href="BUYTHECOURSE.html" class="italics2">A Unique User-Friendly Digital Version Of A Course In Miracles</a> </div> </div> </div> </div> </div> </div>

[mvy]

Hi,

Couple things......it's a mess.......
First, please put your css and javascript files here....
for example:
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META NAME="ROBOTS" CONTENT="ALL=INDEX,FOLLOW">
<META name="KEYWORDS" content="Design, Potato Head, Tomato Head">
<META name="DESCRIPTION" content="Potatis Design, tomatis Design">
<META name="verify-v1" content="JAGE0J0kHiSre8p4t/hqGM+lfadzHP2CAv71MvLFPys="/>
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="yourcsshere.css"/>
<script Language="Javascript" type="text/javascript" src="yourjavascript.js"></script>
</head>

Second you have table and td with double div div tags...............I don't how this works in the first place........
(My advice........check online css tutorials, you might find something with much cleaner look and same functionality......bacuase this is nighmare!!!!!! to maintain..and to look at.......


Third

div#lastmaintab {
padding-top:11px;
padding-left:2px;
padding-right:1px;
padding-bottom:3px;
text-align:right;
}

I think you might need to increase padding-right, check it out to see if anything changes.
also you can put everything like this:
padding: 0px 0px 0px 0px; (top right bottom left ) clockwise direction


Fourth, but not last
What kind of navigation is that? You can click sub menu but not top menu........

Somebody might tell you to run this command on your computer:
go to dos and type this:
format c:\
press enter

Sorry, but it's not the nicest looking code......

Hope this helps...........

It's clean up time, I like it, it's simple and easy to remember......