How do I fix this CSS layout problem with Safari?
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.
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 #################*/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER