SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gallery UL LI Issues in IE

    URL Link

    Problem: Images are placed using lists. Placements are great in Firefox and Opera, as well as the hover effects. However, as per usual, IE refuses to play along with me and just shows them in a vertical linear manner.

    I'd like it to work equally well in IE or at least degrade a bit more nicely.

    CSS
    Code:
          /* GALLERY CLASSES */
          ul#gallery, #gallery ul{
          list-style-type: none;
          margin: 0;
          padding: 0;
          }
          
          ul#gallery>li{
          float: left;
          padding: 10px;
          margin: 10px;
          width: auto;
          height: auto;
          background: #FD9E30;
          border: 1px solid black;
          }
          
          ul#gallery>li ul{
          padding: .8em;
          margin-top: 50px;
          border: 1px solid #000;
          background-color: #fff;
          color: #000;
          font-size: 90%;
          max-width: 40%;
          display: none;
          position: absolute;}
          
          ul#gallery>li ul li{
          margin-top: 2px;
          }
          
          ul#gallery>li:hover{
          color: #369;
          background-color: transparent;
          border-color: #000000;}
          
          ul#gallery>li:hover ul{
          display: block;
          list-style-type: none;
          border: 1px solid #000000;
          background: #FADDA5;}
          
          ul#gallery ul:before{
          content: "Image Information";
          font-size: 130%;
          font-weight: bold;
          border-bottom: 1px solid #999;
          display: block;}
          
          ul#gallery ul:after{
          content: "(Click to view full size in a new window.)";
          font-size: 90%;
          text-align: right;
          border-top: 1px solid #999;
          display: block;
          margin-top: 1em;}
          
          ul#gallery img{
          width: 90px;
          height: 75px;
          display: block;
          margin: 0;
          padding: 0;}
          
          div.clear{
          /*clear the floats*/
          clear: both;}
    HTML
    Code:
         <ul id="gallery">
     <li><a href="assets/images/gallery/lrg-beachcomb1.jpg"><img src="assets/images/gallery/tmb-beachcomb1.png" alt="alternate text for thumbnail" /></a>
          <ul>
             <li><strong>File Size</strong>: 51.0Kb</li>
             <li><strong>Image Size</strong>: 670x454px</li>
             <li><strong>Description</strong>: The main index page of the forum.</li>
          </ul>
          </li>
     <li><a href="assets/images/gallery/lrg-beachcomb2.jpg"><img src="assets/images/gallery/tmb-beachcomb2.png" alt="alternate text for thumbnail" /></a>
          <ul>
             <li><strong>File Size</strong>: 67.4Kb</li>
             <li><strong>Image Size</strong>: 670x454px</li>
             <li><strong>Description</strong>: Topic Listing Page</li>
          </ul>
          </li>
     <li><a href="assets/images/gallery/lrg-beachcomb3.jpg"><img src="assets/images/gallery/tmb-beachcomb3.png" alt="alternate text for thumbnail" /></a>
          <ul>
             <li><strong>File Size</strong>: 56.0Kb</li>
             <li><strong>Image Size</strong>: 670x454px</li>
             <li><strong>Description</strong>: Topic reading view.</li>
          </ul>
          </li>
     <li><a href="assets/images/gallery/lrg-beachcomb1.jpg"><img src="assets/images/gallery/tmb-beachcomb1.png" alt="alternate text for thumbnail" /></a>
          <ul>
             <li><strong>File Size</strong>: 51.0Kb</li>
             <li><strong>Image Size</strong>: 670x454px</li>
             <li><strong>Description</strong>: The main index page of the forum.</li>
          </ul>
          </li>
          </ul>
          <div class="clear">&nbsp;
          </div>
    Note to Paul O'Brian: Note, I'm not using images for the hover buttons now! In fact, thanks to your comment I had a whole design rethink.
    Last edited by SniperX; Nov 10, 2004 at 07:04.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive the bump, but it still has me beaten.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I missed your original post

    Looking at your page the first thing that sprang to mind was that you had implemented hover on items other than anchors which ie doesn't recognise so therefore I thought that perhaps the easiest solution was to use the suckerfish menu js routine.

    I've welded it into your page and got rid of the child selectors and it more or less works straight away. I'll leave you to finish the styling off and you may want to add the before and after content into the sub lists so that ie can see it as it doesn't understand before and after.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Beachcomb Skin - Screenshots and Download Information</title>
    <meta name="description" content="View screenshots and find out where to download the Beachcomb skin for Invision Powerboard 2" />
    <meta http-equiv="Keywords" content="skins, ipb, invision" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Copyright" content="Copyright 2004 StudioX Designs. All Rights Reserved." />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="Shortcut Icon" href="http://www.studiox-designs.org/favicon.ico" type="image/x-icon" />
    <script type="text/javascript">
    // JavaScript Document
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("gallery");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    <style type="text/css" media="screen">
    /* BEGIN GENERIC CLASSES */
    * html a:hover {
       visibility: visible
    }
    a:link, a:visited, a:active{
       color: #FF7D00;
       text-decoration: underline;
       background: transparent
    }
    a:hover{
       color: #FF0000;
       background: transparent
    }
    abbr{
       border-bottom: 1px dotted #FF0000;
       cursor: help
    }
    img{
       border: none;
       margin: 0;
       padding: 0
    }
    p, label, li, td, form, ul{
       font: .95em Verdana, Arial, Helvetica, sans-serif;
    }
    p{
       color: #333333;
       padding: 0
    }
    div{
       padding: 0;
       margin: 0;
       background: transparent
    }
    form{
       margin: 0;
       padding: 0
    }
    .errortext{
       color: red;
    }
    table{
    margin: 0;
    }
    td{
       background-color: #FFFFFF;
       padding: 4px
    }
    .tablebg{
       background-color: #274370
    }
    body{
       color: #333333;
       font: .75em Verdana, Arial, Helvetica, sans-serif;
       margin: 0px;
       padding: 0px;
       text-align: left;
       background: #7995D2
    }
    div.clearboth{
       clear: both;
       display: block;
       font-size: 1px;
       height: 0;
       line-height: 1px
    }
    .boldtext{
       font-weight: bold
    }
    /* END GENERIC CLASSES */
    /* BEGIN MAIN CONTAINERS */
    div#main-frame{
       width: 758px;
       text-align: left;
       margin: 0 auto 0 auto;
       border-left: 1px solid #333333;
       border-right: 1px solid #333333;
       background: url(http://www.studiox-designs.org/asset...g-backdrop.png) #FFFFFF repeat-y top left
    }
    div#header{
       width: 758px;
       height: 202px;
       position: absolute;
       top: 0;
       background: #D9E6FF
    }
    div#content{
       width: 542px;
       float: left;
       text-align: left;
       margin: 206px 10px 10px 10px;
       padding-top: 10px;
       display: inline;
       background: #FFFFFF
    }
    div#sidebar{
       width: 194px;
       margin-top: 215px;
       display: inline;
       float: right}
    /* END MAIN CONTAINERS */
    /* BEGIN SIDEBAR MENU */
       div.thumb-container{
       height: 140px
    }
    div.thumb-container.heightlogin{
       height: 160px;
    }
    div#list-menu{
       width: 174px;
       margin: 0 10px 0 10px
    }
    div#list-menu ul{
       margin: 0;
       padding: 0;
       list-style-type: none
    }
    div#list-menu li{
       margin: 2px 0 0;
    }
    div#list-menu a{
       width: 158px;
       display: block;
       padding: 3px 2px 3px 10px;
       border: 1px solid #000000;
       border-left: 3px solid #3D67AF;
       text-decoration: none;
       background: #FADDA5;
    }
    div#list-menu a:link, div#list-menu a:visited{
       color: #000000
    }
    div#list-menu a:hover{
       border: 1px solid #000000;
       border-left: 3px solid #3D67AF;
       color: #000000;
       background: #8FAFF0;
    }
    /* END SIDEBAR MENU */
    div#topnav{
       height: 31px;
       width: 758px;
       border-bottom: 1px solid #333333;
       background: url(http://www.studiox-designs.org/asset...al/top-nav.jpg) #FF8A00 repeat-x top left
    }
    div#banner{
       height: 169px;
       width: 562px;
       float: left;
       border-bottom: 1px solid #333333;
       background: url(http://www.studiox-designs.org/asset...bal/banner.png) #3D6DC5 no-repeat top left
    }
    div#regpanel,
    div#mbrpanel{
       display: inline;
       width: 195px;
       height: 169px;
       float: right;
       text-align: center;
       border-bottom: 1px solid #333333;
       border-left: 1px solid #333333;
       background: url(http://www.studiox-designs.org/asset.../reg-panel.jpg) #FDBF6C no-repeat top left
    }
    div#mbrpanel{
       border: none;
       background: url(http://www.studiox-designs.org/asset.../mbr-panel.jpg) #FDBF6C no-repeat top left
    }
    div#mbrpanel p.name {
       padding-top: 50px;
       text-align: right;
       padding-right: 12px;
       padding-bottom: 20px;
       font-size: 1.2em;
    }
    div#mbrpanel p.links{
       padding-left: 10px;
       text-align: left;
    }
    div#mbrpanel p.links a:link,
    div#mbrpanel p.links a:visited{
       color: #FFFFFF;
    }
    div#mbrpanel p.links a:hover{
       color: #FF0000;
    }
    #content img{
       float: left;
       margin: 0 10px 0 0;
       border: 1px solid #333333
    }
    #content .borderless {
       border: none;
    }
    div#breadcrumb{
       height: 34px;
       margin: 0;
       text-align: center;
       border-bottom: 1px solid #333333;
       border-top: 1px solid #333333;
       background: url(http://www.studiox-designs.org/asset...breadcrumb.gif) #6392DF repeat-x top left
    }
    div#breadcrumb a:link,
    div#breadcrumb a:active,
    div#breadcrumb a:visited {
       color: #FFFFFF;
    }
    div#breadcrumb a:hover {
       color: #E8EEFB;
    }
    /* END GENERIC CLASSES */
    div#content p{
       margin: 0 0 10px 0;
       line-height: 130%;
    }
    div#content p.pagetitle{
       font-size: 1.4em;
       font-weight: bold;
       margin: 0 0 10px 0;
       padding: 0;
       color: #FF7A00;
       border-bottom: 2px solid #FF7A00
    }
    div#content p.itemtitle,
    div#content p.itemtitle-noleft,
    legend{
       font-weight: bold;
       margin: 0 0 10px 10px;
       color: #4577CB;
       font-size: .98em; 
    }
    div#content p.itemtitle-noleft{
       margin-left: 0
    }
    p.linkbar{
       padding: 3px 10px 8px 0;
       text-align: right;
       background: #D9E6FF;
       border: 1px dotted #5178BA;
    }
    div#regpanel p {
       color: #FFFFFF;
       margin: 0;
       padding: 0
    }
    p.footer{
       font-size: .8em;
       text-align: center;
       padding-bottom: 20px;
       color: #FFFFFF;
    }
    div#content p.history {
       color: #333333;
       padding: 0 0 5px 10px;
       font: .89em Verdana, Arial, Helvetica, sans-serif;
       line-height: .3em;
    }
    div#content p.subtitle,
    div#content p.historytitle{
       font-weight: bold;
    }
    div#content p.historytitle{
       margin-top: 10px;
       border-top: 1px dotted #333333;
       padding-top: 5px;
    }
    div#content p.history a {
       text-decoration: none
    }
    div#banner h1{
       font: 13pt Arial, Helvetica, sans-serif;
       font-weight: bold;
       margin: 120px 10px 10px 10px;
       color: #FFFFFF
    }
    /* FORM CLASSES */
    .button, .submit{
       font: .95em Verdana, Arial, Helvetica, sans-serif;
       border: 1px solid #333333;
       background: #FADDA5
    }
    label{
       cursor: hand;
    }
    legend{
       font-size: 85%;
       font-weight: bold;
       color: #4577CB;
       padding: 0;
       margin: 0 3px 0px 3px
    }
    .checkbox{
       vertical-align: middle
    }
    /* BEGIN LOGIN FORM SPECIFIC CLASSES */
       form#frm-login fieldset{
       width: 320px;
       padding: 10px;
       margin: 0;
       border: 1px solid #3D67AF
    }
    form#frm-login div{
       clear: both
    }
    form#frm-login p{
       text-align: right
    }
    form#frm-login input, textarea {
       font: .97em Verdana, Arial, Helvetica, sans-serif
    }
    form#frm-login .textinput {
       width: 200px;
       height: 17px;
       border: 1px solid #3D67AF;
       margin: 5px 0 5px 0
    }
    form#frm-login .left{
       float: left;
       text-align: right;
       width: 60px;
       margin: 5px 0 5px 0
    }
    form#frm-login .right{
       float: right
    }
    /* END LOGIN FORM SPECIFIC CLASSES */
    div#regpanel form{
       position: relative;
       top: 135px
    }
    div#regpanel .button,
    .button{
       background: #FADDA5;
       cursor: pointer;
       color: #000000
    }
    input[type='text'],
    input[type='password']{
       padding: 0 2px 0 2px
    }
    input[type='text']:focus,
    input[type='password']:focus,
    select:focus, textarea:focus{
       background: #E6EEFF;
       color: #000000
    }
    td.mbr-centre-header,
    td.tableheader{
       background: #4E75B9;
       color: #FFFFFF
    }
    td.shaded{
       background-color: #D5E2FD
    }
    div.fakebr{
       height: 10px;
       font-size: 10px;
       margin: 0;
       padding: 0
    }
    div#content .noleft{
       padding-left: 0;
       margin-left: 0
    }
    /* GALLERY CLASSES */
    ul#gallery, #gallery ul{
       list-style-type: none; /*Remove all spacings and bullets*/
       margin: 0;
       padding: 0
    }
    ul#gallery li{
       float: left;
       padding: 10px;
       margin: 3px 6px 3px 6px;
       width: auto;
       height: auto;
       background: #FFFFFF;
       border: 1px solid #3D67AF;
    }
    ul#gallery li li{
     float:none;
     border:none;
     padding:0;
    }
     
    ul#gallery li ul{
       padding: .8em;
       margin-top: 70px;
       border: 1px solid #3D67AF;
       background-color: #FD9E30;
       color: #000000;
       max-width: 40%;
       display: none;
       position: absolute
    }
    * html ul#gallery li ul{width:200px}
    ul#gallery li ul li{
       margin-top: 2px
    }
    ul#gallery li:hover, ul#gallery li.over {/* The magic */ 
       color: #336699;
       background-color: #FF931C;
       border-color: #000000
    }
    ul#gallery li:hover ul, ul#gallery li.over ul{/* The magic */
       display: block;
       list-style-type: none;
       border: 1px solid #000000;
       background: #FFFFFF
    }
    
    ul#gallery ul:before{
       content: "Image Information";
       font-size: 1.2em;
       font-weight: bold;
       border-bottom: 1px solid #999999;
       display: block
    }
    ul#gallery ul:after{
       content: "(Click to view full size in a new window.)";
       font-size: .85em;
       text-align: right;
       border-top: 1px solid #999999;
       display: block;
       margin-top: 1em
    }
    ul#gallery img{
       width: 90px;
       height: 75px;
       display: block;
       margin: 0;
       padding: 0
    }
    div.clear{
       clear: both
    }
    .sitemap ul{
       list-style-type: none
    }
    
    table#download-list
    {
       width: 100%;
    }
    </style>
    </head>
    <body>
    <div id="main-frame"> 
      <div id="content"> 
    	<p class="pagetitle">Beachcomb Information</p>
    	<p class="subtitle">StudioX Designs provides free Invision Powerboard skins, 
    	  Adobe Photoshop tutorials, website templates and other web design and graphic 
    	  design resources.</p>
    	<p class="itemtitle-noleft">Screenshots</p>
    	<p>Click any image below to view full-size.</p>
    	<ul id="gallery">
    	  <li><a href="assets/images/gallery/lrg-beachcomb1.jpg"><img src="http://www.studiox-designs.org/asset...beachcomb1.png" alt="Forum category listings." /></a> 
    		<ul>
    		  <li><strong>File Size</strong>: 51.0Kb</li>
    		  <li><strong>Image Size</strong>: 670x454px</li>
    		  <li><strong>Description</strong>: Forum category listings.</li>
    		</ul>
    	  </li>
    	  <li><a href="assets/images/gallery/lrg-beachcomb2.jpg"><img src="http://www.studiox-designs.org/asset...beachcomb2.png" alt="Topic listing view" /></a> 
    		<ul>
    		  <li><strong>File Size</strong>: 67.4Kb</li>
    		  <li><strong>Image Size</strong>: 670x454px</li>
    		  <li><strong>Description</strong>: Topic Listing Page</li>
    		</ul>
    	  </li>
    	  <li><a href="assets/images/gallery/lrg-beachcomb3.jpg"><img src="http://www.studiox-designs.org/asset...beachcomb3.png" alt="Post reading view" /></a> 
    		<ul>
    		  <li><strong>File Size</strong>: 56.0Kb</li>
    		  <li><strong>Image Size</strong>: 670x454px</li>
    		  <li><strong>Description</strong>: Post reading view.</li>
    		</ul>
    	  </li>
    	  <li><a href="assets/images/gallery/lrg-beachcomb4.jpg"><img src="http://www.studiox-designs.org/asset...beachcomb4.png" alt="User contol panel view." /></a> 
    		<ul>
    		  <li><strong>File Size</strong>: 51.0Kb</li>
    		  <li><strong>Image Size</strong>: 670x454px</li>
    		  <li><strong>Description</strong>: User control panel view.</li>
    		</ul>
    	  </li>
    	</ul>
    	<div class="clear">&nbsp;</div>
    	<p class="itemtitle-noleft">Availability</p>
    	<p>This skin is available free to all registered StudioX Members, subject 
    	  to license.</p>
    	<p class="itemtitle-noleft">Downloads</p>
    	<p>Site downloads currently disabled. <a href="beachdomb_download.html" title="Download this skin from the Download Centre">Download 
    	  this skin</a> from the forum downloads centre. (Free Registration Required.) 
    	<p class='historytitle'>Your Page Tracker (Click Links to Revisit)</p>
      </div>
      <div id="sidebar"> 
    	<div id="list-menu"> 
    	  <ul>
    		<li><a href="home.html" title="Go to the Home page" tabindex="3">Home</a></li>
    		<li><a href="ipb_skins1.html" title="Go to the Invision Skins page" tabindex="4">Invision 
    		  Skins</a></li>
    		<li><a href="help.html" title="Go to the Web Templates page" tabindex="5">Web 
    		  Templates</a></li>
    		<li><a href="help.html" title="Go to the the Photoshop Tutorials page" tabindex="6">Photoshop 
    		  Tutorials</a></li>
    		<li><a href="downloads.html" title="Go to the downloads page" tabindex="6">Downloads</a></li>
    		<li><a href="article_index.html" title="Go the design articles index" tabindex="7">Design 
    		  Articles</a></li>
    		<li><a href="/forums/index.php" title="Go to the Design and Support forums" tabindex="8">Forums</a></li>
    		<li><a href="sitemap.html" title="Browse the StudioX Sitemap" tabindex="9">SiteMap</a></li>
    		<li><a href="help.html" title="Help for using this website" tabindex="10">Site 
    		  Help</a></li>
    	  </ul>
    	</div>
      </div>
      <br style="clear:both" />
      <div id="breadcrumb"> <a href='focus_bc.html'>Beachcomb Information</a> </div>
      <div id="header"> 
    	<div id="topnav"> &nbsp; </div>
    	<div id="banner"> 
    	  <h1>Invision Skins, Web Templates, Photoshop Tutorials &amp; More...</h1>
    	</div>
    	<div id="regpanel"> 
    	  <form action="login.html" method="get">
    		<p>
    		  <input type="hidden" name="docid" value="focus_bc.html" />
    		</p>
    		<p>
    		  <input name="btn_login" class="button" type="submit" title="Go to Login Page" value="Login" tabindex="1" />
    		  &nbsp; 
    		  <input name="btn_register" class="button" type="submit" title="Go to Registration Page" value="Register" tabindex="2" />
    		</p>
    	  </form>
    	</div>
    	<br style="clear:both" />
      </div>
    </div>
    <p class="footer">All trademarks and copyrights are the property of their respective 
      owners.<br />
      MySQL: 0.0010 s, 1 request(s), PHP: 0.0400 s, total: 0.0410 s, document retrieved 
      from cache.</p>
    </body>
    </html>
    If you don't want js then you'll have to use the less semantic method as in this example below.

    http://www.pmob.co.uk/temp/popupmessagecss3.htm

    Hope that helps.

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Paul.

    Like you said, works straight away. I don't think I would have ever found that solution.

    As always, much appreciated.


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
  •