We help IT Professionals succeed at work.
Get Started

How do I fix this CSS layout problem with Safari?

Donnie Walker
on
742 Views
Last Modified: 2012-05-06
I have a site here: http://www.kellercrescentdigital.com/vicious/ 

that looks like I want in IE 7 and Firefox...but for some reason the to menu bar drops down about 15 pixels in Safari 3 and 4.

I've attached my css.

Any help would be appreciated.
/* ===== TIPS STYLE ========================================================================== */
.expand {padding:0 0 5px 0; margin:0; text-transform:uppercase; font-weight:bold; font-size:10px; color:#336699;}
a.expand {text-transform:uppercase; font-weight:bold; font-size:10px; color:#336699; text-decoration:none;}
a.expand:hover {color:#a00000;}
 
/* ===== TOURNAMENT TEAM =================================================================== */
.wrapper {width:260px;}
.left-element {float:left; width:125px;}
.center-element {float:left; width:110px;}
.right-element {float:right; width:25px; text-align:center;} 
 
/* ===== PRE-LOAD IMAGES =================================================================== */
div#preloaded-images {position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;}
 
/* ===== CONTAINER ========================================================================= */
.clear {clear: both;}
#mainContainer {width: 990px;	margin: 0 auto; /*** Centers the design ***/ min-height: 100%; background:#ae0a1d url(../images/bg_content.gif) repeat-y; /*** This is our faux columns ***/ text-align: left;}
* html #mainContainer {height: 100%;  /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/}
 
/* ===== HEADER ========================================================================== */
#header {height: 80px; width: 100%; background: #101010 url(../images/bg_header.jpg) no-repeat center;}
#vlogo {position:absolute; z-index: 100;}
#nav {width:100%; height:56px; background: url(../images/bg_nav.gif) repeat-x;}
#shadow {width:100%; height:43px; top:0px; left:0px; background: url(../images/top_shadow.jpg) no-repeat;}
 
/* ===== CONTENT AND COLUMNS ===========================================================*/
.outer {padding-left: 180px;}
* html .outer {padding-right: 120px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */}
.inner {width: 800px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/ padding-bottom: 30px;}
* html .inner {width: 100%;}
.float-wrap {float: left; width: 680px; margin-left: -180px; /*** Same length as .outer padding-left but with negative value ***/}
* html .float-wrap {}
 
.splash {width: 470px; padding: 0px; margin: 0px;}
#content {float: right; width: 470px; background: #fff; height: 100%;}
* html #content {position: relative;  /*** IE needs this  ***/}
.contentWrap {width: 430px; padding: 20px;}
 
/*===== LEFT COLUMN =======================================================================*/
#left {
	float: left;
	width: 180px;
	padding: 0px;
}
	* html #left {
	position: relative;  /*** IE needs this  ***/
}
 
 
/*===== RIGHT COLUMN =======================================================================*/
#right {
	float: right; 
	width: 280px;
	padding: 0px;
}
* html #right {
	position: relative;  /*** IE needs this  ***/
	margin-right:-0px; /*** IE gets this margin. ***/
}
/*===== FOOTER ==============================================================================*/
#footer {
	width: 100%;
	height: 45px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
	margin: 0 auto;
	/*** margin-top: -30px; By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
	text-align: center;
	background: #000 url(../images/footer_bg.gif);
}
 
/*===== FORM STYLES =========================================================================*/
#comments {width:400px; text-align:left;}
select {font-size: 13px; color: #4D6A4C; border: #4D6A4C 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; padding-left: 5px;}
input.submit {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:11px; background-color:#a00; color:#fff; font-weight:bold; border: 2px solid; border-color:#003333;}
input.submit:hover {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:11px; background-color:red; color:#fff; font-weight:bold; border: 2px solid; border-color:#333333;}
.flat {font-size: 12px; color: #336699; border: #336699 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; padding-left: 5px;}
input.submitsm {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:8px; background-color:#a00; color:#fff; font-weight:bold; border: 2px solid; border-color:#003333;}
input.submitsm:hover {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:8px; background-color:red; color:#fff; font-weight:bold; border: 2px solid; border-color:#333333;}
 
/* TABLE STYLES ***************************************************/
table.grid {border-collapse: collapse; border-spacing:0; border-color: #000; border-width: 1px; border-style: solid;}
table.grid th {white-space: nowrap; text-transform: uppercase; background:#4D6A4C; padding:4px; font-size: 12px; font-weight: bold; color: #ffffff; border-color: #7E9DB9; border-width: 1px; border-style: solid; padding: 4px;}
table.grid td {font-size: 10px; font-weight: normal; color: #000; border-color: #4D6A4C; border-width: 1px; border-style: solid; padding: 4px; }
 
 
/* ###### CONTENT BOXES ########################*/
 
div.scroll_box_news {
	width:170px;
      height:250px;
	margin:20px 0 0 10px;
      align: center;
	background:url("../images/box_news.gif") no-repeat;
}
 
#scroll2Panel {
      margin-top: 20px;
      background: #fff;
}
 
div.banneritem_box_spotlight {
      width:166px;
      height:226px;
	margin:20px 0 0 10px;
	padding-top: 23px;
      padding-left: 3px;
      align: center;
	background: #fff url("../images/box_spotlight.gif") no-repeat;
}
 
div.banneritem_vproducts {
      float:left;
      padding-right: 5px;
}
 
div.bannergroup_vproducts {}
 
div.banneritem_vdealers {
      float:left;
}
 
div.bannergroup_vdealers {}
 
.box_team {
	width:285px;
	padding:0 0 20px 0;
	margin:0px auto;
	background:url("../images/box_team_bot.gif") bottom left no-repeat;
}
.box_team p {
	margin:0px;
	padding:25px 10px 10px 10px;
	background: #fff url("../images/box_team_top.gif") top left no-repeat;
	border-width:0;
}
.box_team_scroll {
      background: #fff url("../images/box_team_bg.gif") top left no-repeat;
      width:278px;
      height:110px; 
      padding-left:7px;
      overflow:auto;
      font-size:10px;
}
 
/* ##################### MODULE TABLE STYLE  #################*/	
/* Element |Class 			  |Suffix */
/* table   |moduletable      | moduleclass_sfx*/
/* <jdoc:include type="modules" name="left" style="table" /> */
 
/* Table Control */
table.moduletable {}
 
/* Font Control */
 
/* Title Control */
table.moduletable th {}
 
/* Module tbody Control*/
/*table.moduletable tbody{} */
 
/* Module Row Control*/
/*table.moduletable tr {}*/
table.moduletable tr{}
 
/* Module table Data Content Control*/
table.moduletable td {}
 
/* List Control */
table.moduletable ul {}
table.moduletable li {}
 
/* Link Control*/
table.moduletable a:link{}
table.moduletable a:visited {}
table.moduletable a:hover {}
table.moduletable a:active {}
 
 
/* ##################### MODULE TABLE STYLE CUSTOM SUFFIX #################*/
 
/* ##################### MODULE TABLE STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE TABLE STYLE  #################*/
 
 
/* ##################### MODULE XHTML DIV STYLE #################*/	
/* Element 	|Class 			  	|Suffix */
/* div   	|moduletable      | moduleclass_sfx*/
/* h3    	|moduletable      | 
/* <jdoc:include type="modules" name="left" style="xhtml" /> */
 
/* Table Control */
/* Module Content Control*/
div.moduletable {}
 
/* Font Control */
 
/* Title Control */
div.moduletable h3 { }
 
/* List Control */
div.moduletable ul {}
div.moduletable li {}
 
/* Link Control*/
div.moduletable a:link{}
div.moduletable a:visited {}
div.moduletable a:hover {}
div.moduletable a:active {}
 
 
/* ##################### MODULE XHTML STYLE CUSTOM SUFFIX #################*/
/* ##################### MODULE XHTML STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE MODULE XHTML STYLE  #################*/
 
 
/* ##################### MODULE ROUNDED STYLE #################*/
/* Element 	|Class 			  	|Suffix */
/* div   	|module           | moduleclass_sfx*/
/* h3    	|module           | 
/* <jdoc:include type="modules" name="left" style="rounded" /> */
 
/* Module Content Control*/
div.module {}
 
/* Font Control */
 
/* Title Control */
div.module h3 { }
 
/* List Control */
.module ul {}
.module li {}
 
/* Link Control*/
.module a:link{}
.module a:visited {}
.module a:hover {}
.module a:active {}
 
 /* Round Conners example */
.module {background: url(../images/bl_grey.gif) 0 100% no-repeat #dddddd; width: 20em; margin-bottom: 10px;}
.module div {background: url(../images/br_grey.gif) 100% 100% no-repeat}
.module div div {background: url(../images/tl_grey.gif) 0 0 no-repeat}
.module div div div {background: url(../images/tr_grey.gif) 100% 0 no-repeat; padding:10px; padding-top: 0px; padding-bottom: 2px;}
.module div div div div {background: none;}
 
 
/* ##################### MODULE ROUNDED STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE ROUNDED STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE ROUNDED STYLE  #################*/
 
 
/* ##################### MODULE HORZ #################*/	
/* table   |moduletable      | moduleclass_sfx*>*/
/* <jdoc:include type="modules" name="left" style="horz" /> */
/* Its a table module above has most of the control try using a suffix to have more control*/
.nowrap{}
 
/* ##################### MODULE HORZ STYLE CUSTOM SUFFIX #################*/
 
 
 
/* ##################### MODULE BANNERS #################*/
/* mod_banners */
/*
div     |bannergroup      | moduleclass_sfx
div     |bannerheader     | moduleclass_sfx
div     |banneritem       | moduleclass_sfx 
div     |bannerfooter     | moduleclass_sfx*/
 
/* Group */
div.bannergroup {}
 
/* Header  */
div.bannerheader{}
 
/* Text advert style */
div.banneritem {}
 
/* footer */
div.bannerfooter {}
 
/* ##################### MODULE BANNERS STYLE CUSTOM SUFFIX #################*/
/* Group */
div.bannergroup-ban-sfx{}
 
/* Header  */
div.bannerheader-ban-sfx{}
 
/* Text advert style */
div.banneritem-ban-sfx{}
 
/* footer */
div.bannerfooter-ban-sfx{}
/*  ##################### END MODULE BANNERS STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE BANNERS #################*/
 
 
/* ##################### MODULE BREADCRUMBS #################*/
/* mod_breadcrumbs Move to navigation.css*/
 
/* ##################### MODULE BREADCRUMBS #################*/
 
/* ##################### MODULE CUSTOM #################*/
/*  mod_custom No styles at this time */
/* ##################### MODULE CUSTOM #################*/
 
 
/* ##################### MODULE FOOTER #################*/
/* mod_footer No styles at this time */
/* ##################### END MODULE FOOTER #################*/
 
/* ##################### MODULE LATESTNEWS #################*/
/* mod_latestnews */
/* 
ul      |latestnews      | moduleclass_sfx
li      |latestnews      | moduleclass_sfx
a       |latestnews      | moduleclass_sfx */
.latestnews{}
/* List Control */
.latestnews ul {}
.latestnews li {}
 
/* Link Control*/
.latestnews a:link{}
.latestnews a:visited {}
.latestnews a:hover {}
.latestnews a:active {}
/* ##################### END MODULE LATESTNEWS STYLE CUSTOM SUFFIX #################*/
/* mod_latestnews */
/* 
ul      |latestnews      | moduleclass_sfx
li      |latestnews      | moduleclass_sfx
a       |latestnews      | moduleclass_sfx */
.latestnews-news-sfx{}
 
/* ##################### END MODULE LATESTNEWS STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE LATESTNEWS #################*/
 
 
/* ##################### MODULE FEED #################*/
/*mod_feed
Element		| ID		| CLASS				| SUFFIX
table			NA			moduletable			YES
ul				NA			newsfeed				YES
*/
.newsfeed{}
/* ##################### END MODULE FEED #################*/
.newsfeed-feed-sfx{}
/* ##################### MODULE FEED SUFFIX #################*/
 
/* ##################### END MODULE FEED SUFFIX  #################*/
 
 
/* ##################### MODULE MAINMENU #################*/
/* NOTE: see navigation.css */
/* ##################### END MODULE MAINMENU #################*/
 
 
/* ##################### MODULE LOGIN #################*/
/* mod_login */
/* 
NOTE: see forms.css
/* Element 		|ID   				| Class 			  |Suffix 
input-submit 	|NA					| button			  |NO
fieldset			|NA					|input			  |NO
input-text		|modlgn_username	|inputbox		  |NO
input-password	|modlgn_passwd		|inputbox		  |NO
input-checkbox	|modlgn_remember	|inputbox		  |NO
input-submit	|NA					|button			  |NO
*/
/* ##################### END MODULE LOGIN #################*/
form-login{}
 
/* ##################### MODULE MOSTREAD #################*/
/* mod_mostread */
/* 
ul      |mostread      | moduleclass_sfx
li      |mostread      | moduleclass_sfx
a       |mostread      | moduleclass_sfx */
.mostread{}
/* ##################### MODULE MOSTREAD STYLE CUSTOM SUFFIX #################*/
/* ul      |mostread      | moduleclass_sfx
   li      |mostread      | moduleclass_sfx
   a       |mostread      | moduleclass_sfx */
.mostread-read-sfx{}
/* ##################### END MODULE MOSTREAD STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE MOSTREAD #################*/
 
 
/* ##################### MODULE NEWSFLASH #################*/
/* mod_newsflash */
/* 
These are the same as the Componet class but if your add a suffix you can control
with affecting the main Componet class.
table   |moduletable      | moduleclass_sfx
table   |contentpaneopen  | moduleclass_sfx
td      |contentheading   | moduleclass_sfx
a       |contentpagetitle | moduleclass_sfx
span    |article_separator|  */
 
/* ##################### END MODULE NEWSFLASH STYLE CUSTOM SUFFIX #################*/
/*
table   |moduletable      | moduleclass_sfx
table   |contentpaneopen  | moduleclass_sfx
td      |contentheading   | moduleclass_sfx
a       |contentpagetitle | moduleclass_sfx
span    |article_separator|  */
moduletable-news-sfx{}
article_separator-news-sfx{}
contentpaneopen-news-sfx{}
contentheading-news-sfx{}
contentpagetitle-news-sfx{}
contentpaneopen-news-sfx{}
/* ##################### END MODULE NEWSFLASH STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE NEWSFLASH #################*/
 
/* ##################### MODULE POLL #################*/
/* mod_poll */
/* 
this module has a special style sheet in its front page com 
loaction: components\com_poll\assets\poll_bars.css
it calls a Javascript that adds the  class at rendering time of page.
 
table   |pollstableborder   	|
 
See" forms.css
input-submit	|NA	 |button
 
!Theses classes are component class see components.css!
div     |componentheading     | pageclass_sfx
div     |contentpane          | pageclass_sfx
th      |sectiontableheader 	|
tr      |sectiontableentry  	| pageclass_sfx |odd color 0 1
*/
/* Polls Outside Table Border */
.pollstableborder {}
 
/* ##################### MODULE POLL STYLE CUSTOM SUFFIX #################*/
/* NA */
/* ##################### END MODULE POLL STYLE CUSTOM SUFFIX #################*/
 
/* ##################### END MODULE POLL #################*/
 
 
/* ##################### MODULE RANDOM IMAGE #################*/
/* mod_random_image No styles at this time*/
/* ##################### END MODULE RANDOM IMAGE #################*/
 
 
/* ##################### MODULE REALTED ITEMS #################*/
/*mod_related_items*/
/* ul      |relateditems      | moduleclass_sfx */
relateditems{}
/* ##################### MODULE REALTED ITEMS STYLE CUSTOM SUFFIX #################*/
relateditems-related-sfx{}
/* ##################### END MODULE REALTED ITEMS STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE REALTED ITEMS #################*/
 
 
/* ##################### MODULE SEARCH #################*/
/* mod_searc & com_search  */
/* should add form foramtting in the forms.css sheets */
/*Element		| ID								| CLASS		| SUFFIX
input-submit	  mod_search_searchword		 inputbox		YES
input-image		 NA								 button			YES
input-submit	 NA								 button	      YES
div				NA								    search		   YES*/
 
#search {float: right; padding-top: 17px; margin:0;}
 
/* last 2 for search class's are in com_search but added here*/
/* results if not search google */
 
/* End Search Form */
/* ##################### END MODULE SEARCH #################*/
/* ##################### MODULE SEARCH SUFFIX  #################*/
.search-sea-sfx {}
/* last 2 for search class's are in com_search but added here*/
/* results if not search google */
/* ##################### END MODULE SEARCH SUFFIX #################*/
 
 
/* ##################### MODULE SECTIONS #################*/
/* mod_sections */
/*
 ul      |sections      | moduleclass_sfx */
 .sections{}
 /* ##################### END MODULE SECTIONS  #################*/
/* ##################### MODULE SECTIONS SUFFIX  #################*/
.sections-sec-sfx{}
/* ##################### END MODULE SECTIONS SUFFIX #################*/
 
/* ##################### MODULE STATS #################*/
/* mod_stats No styles at this time */
/* ##################### END MODULE MODULE STATS#################*/
 
/* ##################### MODULE SYNDICATE #################*/
/* mod_syndicate No styles at this time */
/* ##################### END MODULE SYNDICATE #################*/
 
/* ##################### MODULE WHOSONLINE #################*/
/* mod_whosonline No styles at this time */
/* ##################### END MODULE SYNDICATE #################*/
 
/* ##################### MODULE WRAPPER #################*/
/* mod_wrapper */
/*Element	|ID	|CLASS	|SUFFIX
  iframe	   |NA	|wrapper	|YES*/
.wrapper{}
/* ##################### MODULE WRAPPER SUFFIX #################*/
/* ##################### END MODULE WRAPPER SUFFIX #################*/

Open in new window

Comment
Watch Question
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE