SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Son of suckerfish IE 7 problem..

    I have a problem with the son of suckerfish menu, it works great except in IE 7 when the focus is in the input box.. Does anybody know why this could be ?

    edit* Ok i have located that the problem exists in the css, but where can this give a conflict and why only in IE & ??
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <link rel="shortcut icon" href="_images/favicon.ico" type=
        "image/x-icon" />
        <title>
          Title
        </title>
        <meta http-equiv="content-type" content=
        "text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="nl" />
        <meta name="desciption" content="" />
    
        <meta name="keywords" content=
        "keywords, keyword, sleutelwoord" />
        <link rel="stylesheet" href="_style/design.css" type="text/css"
        media="screen" />
        <style type="text/css">
        /* lists and navigation */
    ul#nav {
        background-image:url(_images/bg_menu.jpg);
        background-repeat:repeat-x;
        height:38px;
    }
    #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100&#37;;
    }
    .opera #nav ul {
        margin-top:14px;
    }
    #nav li a {
        line-height:36px;
        text-decoration:none;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        font-weight:bold;
        color:#727272;
        text-align:center;
        display:block;
        padding:0px 10px 0px 10px;    
    }
    #nav li a:hover {
        color:#ED1C24;
    }
    #nav li {
        float: left;
        display:block;
        background-image:url(_images/bg_li.jpg);
        background-repeat:no-repeat;
        position:relative;
    }
    ul#nav ul li {
        background-image:none;
        background-color:#FFFFFF;
        padding:0px;
        width:166px;
    }
    ul#nav ul li a {
        height:19px;
        border:1px solid #9FA0A0;
        border-top:0px;
        line-height:18px;
        text-indent:20px;
        background-image:url(_images/red_arrow.gif);
        background-repeat:no-repeat;
        background-position:5px 7px;
        display:block;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:9px;
        color:#696969;
        text-decoration:none;
        background-color:#FFFFFF;
        text-align:left;
        padding:1px 17px 1px 0px;
        width:100%;
        cursor:pointer;
    }
    ul#nav ul li a:hover {
        background-color:#DFDFDF;
        background-image:url(_images/arrow_over.gif);
        background-repeat:no-repeat;
        background-position:5px 7px;
    }
    #nav li ul {
        position: absolute;
        width: 10em;
        left: -999em;
    }
    #nav li:hover ul {
        left: auto;
    }
    #nav li:hover ul, #nav li.sfhover ul {
        left: auto;
    }
    ul#nav ul {
        background-image:none;
    }
    
        </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    
        </head>
      <body>
                <ul class="main" id="nav">
                  <li id="thuisfront" class="active">
                    <a href="page/view/name/1-test" class=
                    "active">Thuisfront</a>
                  </li>
    
                  <li id="onze-diensten" class="active">
                    <a href="page/view/name/30-diensten" class=
                    "active">Onze diensten</a>
                    <ul class="submain">
                      <li id="vormgeving-en-advertenties" class=
                      "active">
                        <a href=
                        "page/view/name/13-vormgeving-en-advertenties"
                        class="active">Vormgeving en advertenties</a>
                      </li>
                      <li id="wat-we-doen" class="active">
                        <a href="page/view/name/4-wat-we-doen" class=
                        "active">Wat we doen</a>
                      </li>
                      <li id="grafimedia-projecten" class="active">
                        <a href=
                        "page/view/name/15-grafimedia-projecten" class=
                        "active">Grafimedia projecten</a>
                      </li>
                      <li id="creatie-huistijl" class="active">
                        <a href="page/view/name/14-creatie-huistijl"
                        class="active">Creatie huistijl</a>
                      </li>
                      <li id="brochures" class="active">
    
                        <a href="page/view/name/24-brochures" class=
                        "active">Brochures</a>
                      </li>
                      <li id="internetsites" class="active">
                        <a href="page/view/name/25-internetsites"
                        class="active">Internetsites</a>
                      </li>
                      <li id="online-marketing" class="active">
                        <a href="page/view/name/26-online-marketing"
                        class="active">Online marketing</a>
    
                      </li>
                      <li id="online-comercials" class="active">
                        <a href="page/view/name/27-online-comercials"
                        class="active">Online comercials</a>
                      </li>
                      <li id="yvet" class="active">
                        <a href="page/view/name/28-yvet" class=
                        "active">YVET</a>
                      </li>
                      <li id="mediaplanning" class="active">
    
                        <a href="page/view/name/8-mediaplanning" class=
                        "active">Mediaplanning</a>
                      </li>
                      <li id="media-inkoop-en-ordering" class="active">
                        <a href=
                        "page/view/name/7-media-inkoop-en-ordering"
                        class="active">Media-inkoop en ordering</a>
                      </li>
                    </ul>
                  </li>
                  <li id="ons-portfolio" class="active">
    
                    <a href="page/view/name/5-portfolio" class=
                    "active">Ons portfolio</a>
                  </li>
                  <li id="over-me" class="active">
                    <a href="page/view/name/2-over-ons" class=
                    "active">Over ons</a>
                    <ul class="submain">
                      <li id="medewerkers" class="active">
                        <a href="page/view/name/21-medewerkers" class=
                        "active">Medewerkers</a>
    
                      </li>
                      <li id="klanten" class="active">
                        <a href="page/view/name/20-klanten" class=
                        "active">Klanten</a>
                      </li>
                      <li id="werken-bij-ons" class="active">
                        <a href="page/view/name/33-werken-bij-ons"
                        class="active">Werken bij ons</a>
                      </li>
                      <li id="stages" class="active">
    
                        <a href="page/view/name/37-stages" class=
                        "active">Stages</a>
                      </li>
                      <li id="erkenning" class="active">
                        <a href="page/view/name/19-erkenning" class=
                        "active">Erkenning</a>
                      </li>
                      <li id="uitgevers-en-exploitanten" class=
                      "active">
                        <a href=
                        "page/view/name/31-uitgevers-en-exploitanten"
                        class="active">Uitgevers en exploitanten</a>
    
                      </li>
                      <li id="contactgegevens" class="active">
                        <a href="page/view/name/22-contactgegevens"
                        class="active">Contactgegevens</a>
                      </li>
                      <li id="reageren" class="active">
                        <a href="page/view/name/6-reageren" class=
                        "active">Reageren</a>
                      </li>
    
                    </ul>
                  </li>
                </ul>
    
                <div class="searchForm">
    
        <h2 class="titleRight">Zoeken</h2>
        <form name="search" class="form" method="post" action="/mainwebsite/public_html//search/quick">
        <input type="hidden" name="max" value="" />
        <input type="hidden" name="limit" value="20" />
                <input type="hidden" name="module_id" value="1" />
            
                <input type="text" name="q" value="" class="searchInput" />
                <input type="submit" name="zoeken" class="searchButton" value="zoeken" />
        </form>
    
    </div>    
      </body>
    </html>

    CSS

    HTML Code:
    /* design & code (c) ABOVO Media */
    html, body {
        padding : 0px;
        margin : 0px;
        background: #6C6C6C;
        background-image:url(../_images/bg.jpg);
    }
    #body {
        margin : 0 auto;
        padding : 0px 0px 15px 0px;
        width : 900px;
        height : auto;
    }
    p {
        line-height : 19px;
        margin : 0 0 12px 0;
    }
    a img {
        border:none;
    }
    #main {
        float : left;
        width : 100%;
        height : auto;
    }
    #content {
        height:100%;
    }
    #content {
        float : left;
        width : 900px;
        min-height : 300px;
        padding : 0px 7px;
        background : url('../_images/content_background.gif') repeat-y top left;
    }
    * html #content {
        height : 300px;
    }
    #wrapper {
        background-image:url(../_images/bg_right.gif);
        background-color:#000000;
    }
    #top {
        float : left;
        width : 100%;
        height : 47px;
        padding : 0px;
        text-align : left;
    }
    #top #menu {
        margin : 35px 0 0 0;
        height : 46px;
        text-align : center;
    }
    #header {
        float : left;
        width : 100%;
    }
    #left {
        float : left;
        width : 580px;
        height : auto;
        padding : 4px 10px 0 10px;
    }
    #center {
        float : left;
        padding:5px 10px 5px 10px;
        width:870px;
    }
    #left #info {
        float : left;
        width : 100%;
        height : auto;
        border-top : 1px solid #D9D9D9;
        margin-top : 10px;
        padding-top : 5px;
        background : url('../_images/info_background.gif') repeat-y top left;
    }
    #left #info #box1 {
        float : left;
        width : 270px;
        height : auto;
        padding : 10px 15px 0 0;
    }
    #left #info #box2 {
        float : left;
        width : 270px;
        height : auto;
        padding : 10px 0 0 15px;
    }
    #right {
        float: left;
        width: 294px;
        padding: 0px;
        background-color:#f0f0f0;
        background-image:url(../_images/right_h1.gif);
        background-repeat:no-repeat;    
    }
    #right #laatstenieuws {
        background-color:#f0f0f0;
        background-image:url(../_images/right_h1.gif);
        background-repeat:no-repeat;
        padding: 10px 10px;
        min-height:195px;
        height:auto !important;
        height:195px;
    }
    #laatstenieuws div.clearLatestNews {
        clear:both;
    }
    #footer {
        float : left;
        width : 863px;
        height : 26px;
        padding : 12px 13px 0 13px;
        border-top : 5px solid #fff;
        background-color : #393939;
        color : #fff;
        font-size : 10px;
        margin : 0px 5px;
    }
    ul#footernav {
        float:right;
        margin:0px;
        padding:0px;
    }
    ul#footernav li {
        float:left;
        list-style:none;
        display:block;
        margin:0px 4px 0px 0px;
        padding:0px 8px 0px 4px;
        background-image:url(../_images/divider.gif);
        background-position:right 2px;
        background-repeat:no-repeat;
    }
    ul#footernav li a:link, ul#footernav li a:visited, ul#footernav li a:active {
        color:#D6D6D6;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
    }
    ul#footernav li a:hover {
        color:#ED1C24;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
    }
    ul#footernav li.last {
        background-image:none;
    }
    span.copyright {
        display:block;
        float:left;
        color:#CECECE;
        font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    .copyright a:link, .copyright a:visited, .copyright a:active {
        color:#ED1D25;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
    }
    .copyright a:hover {
        color:#ED1D25;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
    }
    .disclaimer {
        float:right;
        display:block;
    }
    .disclaimer a:link, .disclaimer a:visited, .disclaimer a:active {
        color:#D6D6D6;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
    }
    .disclaimer a:hover {
        color:#ED1C24;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
    }
    #bottom {
        float : left;
        width : 100%;
        height : 12px;
    }
    /* paragraph and link styles */
    
        #left p {
        line-height : 19px;
        margin : 0 0 12px 0;
    }
    #right p {
        line-height : 19px;
        margin : 0 0 12px 0;
    }
    a {
        color : #EC1D25;
        text-decoration : underline;
    }
    #footer a:hover {
        color : #EC1D25;
    }
    /* lists and navigation */
    ul#nav {
        background-image:url(../_images/bg_menu.jpg);
        background-repeat:repeat-x;
        height:38px;
    }
    #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
    }
    .opera #nav ul {
        margin-top:14px;
    }
    #nav li a {
        line-height:36px;
        text-decoration:none;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        font-weight:bold;
        color:#727272;
        text-align:center;
        display:block;
        padding:0px 10px 0px 10px;    
    }
    #nav li a:hover {
        color:#ED1C24;
    }
    #nav li {
        float: left;
        display:block;
        background-image:url(../_images/bg_li.jpg);
        background-repeat:no-repeat;
        position:relative;
    }
    ul#nav ul li {
        background-image:none;
        background-color:#FFFFFF;
        padding:0px;
        width:166px;
    }
    ul#nav ul li a {
        height:19px;
        border:1px solid #9FA0A0;
        border-top:0px;
        line-height:18px;
        text-indent:20px;
        background-image:url(../_images/red_arrow.gif);
        background-repeat:no-repeat;
        background-position:5px 7px;
        display:block;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:9px;
        color:#696969;
        text-decoration:none;
        background-color:#FFFFFF;
        text-align:left;
        padding:1px 17px 1px 0px;
        width:100%;
        cursor:pointer;
    }
    ul#nav ul li a:hover {
        background-color:#DFDFDF;
        background-image:url(../_images/arrow_over.gif);
        background-repeat:no-repeat;
        background-position:5px 7px;
    }
    #nav li ul {
        position: absolute;
        width: 10em;
        left: -999em;
    }
    #nav li:hover ul {
        left: auto;
    }
    #nav li:hover ul, #nav li.sfhover ul {
        left: auto;
    }
    ul#nav ul {
        background-image:none;
    }
    /* forms */
    
    
    
    /* rest */
    div.hr {
        height : 15px;
        background : url('../_images/dot.gif') repeat-x top;
    }
    .red {
        color:#ED1C24;
    }
    .clear {
        clear:both;
        margin:0px;
        padding:0px;
    }
    input, textarea, select {
        border:1px solid #696969;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        margin:2px;
    }
    #logo {
        position:absolute;
        top:24px;
        margin-left:15px;
    }
    #projecten {
        width : 293px;
        background-image:url(../_images/projects_bg.jpg);
        background-repeat:no-repeat;
        margin:0px;
        padding-top:10px;
        height:226px;
    }
    #projecten h2.titleRight2 {
        font-size: 19px;
        margin:0px 0px 0px 35px;
        text-indent:10px;
        padding:0px;
    }
    .latestProject {
        float:left;
        width:130px;
        color:#FFFFFF;
        margin:0px 4px 0px 5px; 
        padding:0px;
    }
    .latestProjectsContainer {
        margin:37px 0px 0px 10px;
    }
    div.latestProject h2 a:link, div.latestProject h2 a:visited {
        color:#FFFFFF;
        text-decoration:none;
    }
    div.latestProject h2 a:hover {
        color:#F3E3E3;
        text-decoration: underline;
    }
    h2.portfolioCatTitle {
        font-size:16px;
        font-weight:bold;
        color:#696969;    
    }
    div.portfolioCategory {
        float: left; 
        margin: 0 7px 10px 0; 
        text-align: center; 
        cursor: pointer;
    }
    #headerImg {
        margin-left:0px;
    }
    p.verticalHeight {
        margin:0px;
        padding:0px;
    }
    .moduleRight {
        padding:10px 7px 5px 21px;
    }
    .categoryTitle {
        background-image:url(../_images/portfolio_arrow.gif);
        background-position:0px 5px;
        background-repeat:no-repeat;
        display:block;
        text-indent:13px;
        font-size:13px;
    }
    a.categoryLinks:link, a.categoryLinks:visited, a.categoryLinks:active {
        font-size:10px;
        color:#696969;
        margin-left:20px;
        background-image:url(../_images/arrow_small.gif);
        background-repeat:no-repeat;
        background-position:0px 4px;
        text-indent:12px;
        display:block;
        text-decoration:none;
        margin-top:6px;
    }
    a.categoryLinks:hover {
        font-size:10px;
        color:#DF1A21;
    }
    img.portfolio {
        margin-bottom:5px;
    }
    a.portfolioLink:link, a.portfolioLink:visited, a.portfolioLink:active {
        text-decoration:none;
        font-size:10px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#727272;
        font-weight:bold;
    }
    a.portfolioLink:hover {
        color:#DF1B25;
    }
    .portfolioSubCategory {
        float:left;
        margin:5px;
        text-align:center;
    }
    .portfolioSubCategory a:link, .portfolioSubCategory a:visited {
        color:#888888;
    }
    .portfolioSubCategory a:hover {
        color:#EC1D27;
    }
    h2.portfolioCatTitle {
        font-size:16px;
        font-weight:bold;
        color:#696969;
    }
    span.newsItem {
        font-size:15px;
    }
    span.newsDate {
        font-size:9px;
        display:block;
        margin:6px 0px 6px 0px;
    }
    span.createDate {
        font-size:9px;
    }
    span.modifyDate {
        font-size:9px;
    }
    div.newsItem {
        background-image:url(../_images/newsItem_bg.jpg);
        background-repeat:repeat-x;
        padding:5px;
        margin-top:5px;
        width:100%;
    }
    div.newsItem h2 {
        margin-top:0px;
    }
    div.newsItem h2 span.newsItem a:link, div.newsItem h2 span.newsItem a:visited {
        text-decoration:none;
    }
    div.newsItem h2 span.newsItem a:hover {
        color:#FA3940;
    }
    div.newsItem p {
        margin:0px;
        padding:0px;
    }
    div.newsItem a.readMore:link, div.newsItem a.readMore:visited {
        color:#EC1D25;
    }
    div.newsItem a.readMore:hover {
        color:#6C6C6C;
    }
    img.imgLatestNews {
        float:left;
        margin:0px 5px 0px 0px;
    }
    div.latestNewsItem {
        background-image:url('../_images/dot.gif');
        background-repeat:repeat-x;
        background-position:bottom;
        margin-bottom:3px;
        padding-bottom:5px;
    }
    span.totalPages {
        float:right;
        margin:-15px 10px 0px 0px;
        display:block;
    }
    .pagination {
        text-align:center;
    }
    .pageDivider {
        margin:0 auto;
    }
    .pageDivider td {
        padding:2px;
    }
    div.portfolioDescription {
        margin-top:10px;
    }
    div.hr2 {
        background-image:url(../_images/portfolio_dots.gif);
        background-repeat:repeat-x;
        border:none;
        color:#FFFFFF;
        height:1px;
        width:100%;
    }
    /** Search module **/
    .searchForm {
        width : 273px;
        background-color:#f0f0f0;
        background-image:url(../_images/right_h1.gif);
        background-repeat:no-repeat;
        padding: 10px 10px;    
    }
    .searchButton {
        background-image:url(../_images/button_bg.jpg);
        background-position:bottom;
        background-repeat:repeat-x;
        background-color:#FBFBFB;
        border:1px solid #8B8B8B;
        color:#727272;
        font-weight:bold;
        padding:1px 5px 1px 5px;
        margin:3px 0px 0px 5px;
        cursor:pointer;
    }
    .searchInput {
        background-image:url(../_images/form_bg.jpg);
        background-repeat:repeat-x;
        background-color:#FFFFFF;
        border:1px solid #8B8B8B;
        width:180px;
        height:16px;
        margin:0px;
        padding:2px;
    }
    .form {
        margin:0px;
    }
    .breadcrumbs {
        margin:5px 0px 0px 0px;
        font-weight:bold;
        font-size:11px;
    }
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  2. #2
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm nope it's something in the script the original has it too when i add a input:

    http://www.htmldog.com/articles/suck...le/bones1.html
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  3. #3
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go visit my site :-D you know you want to ;-)
    www.mech7.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •