SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Very Strange Problem when using CSS with a Frameset

    Hi,

    An application I'm working on consists of 2 frames - One down the left for navigation, and then one on the right for content.

    I've created the navigation by using CSS, which also includes drop down sub menus which can be opened & closed using a javascript "display: none; / block;" switcher on mouseclick.

    This page seems to work fine when viewed on its own - but as soon as it is dropped into the frameset, the submenus lose some of their style. This has confused the hell out of me, and so have begun to wonder if there are any porblems associated with using CSS and framesets that I'm unaware of?

    When tesing locally, it all works fine - even in the frameset, but as soon it is uploaded it breaks. Also, another stange problem is that it will suddenly find it's style and work correctly - only for me to come into the office the next day and find it broken again!?

    I'll post the code in case anyone can offer any advice, plus I'll attach a picture of how the submenus look upon losing their style.

    Hopefully somebody can offer some advice

    Code:
    CSS
    
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-image: url(NavBG.gif);
    	background-repeat: repeat-y;
    	background-position: 160px;
    	background-color: #FFFFFF;
    	z-index: 1;
    }
    .header {
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #A5ACB2;
    	background-image: url(logo.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	z-index: 1;
    }
    #borderTop {
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #A5ACB2;
    }
    ul#mainlinks {
     margin: 0px;
     padding: 0px;
     list-style-type: none;
     z-index: 1;
    }
    ul#mainlinks li {
    	width: 152px;
    	padding-left: 0px;
    	z-index: 1;
    }
    ul#mainlinks a:link, ul#mainlinks a:visited {
     color: #55534E;
     text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
    font-weight: bold;
     display: block;
     width: 152px;
     padding-left: 8px;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #A5ACB2;
     line-height: 26px;
     z-index: 1;
    }
    ul#mainlinks a:hover {
     background-color: #D9E7F7;
     color: #55534E;
     z-index: 1;
    }
    ul#submenu {
     margin: 0px;
     padding: 0px;
     list-style-type: none;
     z-index: 1;
    }
    ul#submenu li {
    	width: 152px;
    	padding-left: 0px;
    	z-index: 1;
    }
    ul#subMenu a:link, ul#submenu a:visited {
    	border: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #55534E;
    	background-color: #FFFFFF;
    	text-decoration: none;
    	display: block;
     	width: 140px;
     	padding-left: 20px;
     	border-bottom-width: 1px;
     	border-bottom-style: solid;
     	border-bottom-color: #A5ACB2;
     	line-height: 19px;
    	z-index: 1;
    }
    ul#submenu a:hover {
     background-color: #D9E7F7;
     color: #55534E;
     z-index: 1;
    }
    Code:
    HTML
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <LINK REL='STYLESHEET' HREF="StyleNav.css" TYPE='text/css'>
    
    <script language="JavaScript" type="text/JavaScript">
    function showorhide(id){ 
       if(document.getElementById(id)){    //check the element exists and can be accessed 
           var ele = document.getElementById(id);    //get hold of the element 
           if(ele.style.display=="none"){   //see if display property is set to none, switch classe 
               ele.style.display="block";        
           }else{ 
               ele.style.display="none";      
           } 
       } 
    } 
    </script>
    </head>
    <body>
    <table width="159" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="160" height="81" class="header">&nbsp;</td>
      </tr>
      <tr>
        <td height="271" valign="top">
    
        <ul id="mainlinks">
          <li><a href="#">Link One</a></li>
          <li><a href="#">Link Two</a></li>
          <li><a href="#">Link Three</a></li>
          <li><a href="#">Link Four</a></li>
          <li><a href="#">Link Five</a></li>
          <li onClick="showorhide('sub1')"><a href="#">Link Six</a></li>
        </ul>
    	  
        <div id="sub1" style="display:none;">
          <ul id="submenu">
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
          </ul>
        </div>
    		
        <ul id="mainlinks"><br><br>
          <li id="borderTop"><a href="#">Home</a></li>
        </ul>
    
        </td>
      </tr>
    </table>
    </body>
    </html>

  2. #2
    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)
    Do you have a link to the page in question so we can see if it happens to us.

    Sounds like a server problem or maybe a browser problem. Does it happen on one specific browsers? Have you tried other browsers.

    Have you tried clearing the cache (and history) on your browsers you may have a corrupt file in cache.

    Other than that I can't think what it could be and it serves you right for using frames anyway

    Paul

  3. #3
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I'm afraid it's an online application for which I'm just the webmaster for - so I apologise for the frames, but it's something that can't be changed. Beleive me, I have tried...

    Do you have a link to the page in question so we can see if it happens to us.
    Sorry - but I also can't offer a link to it, as it's held on a secure website for which I don't think I should be offering out Logons!?!

    Sounds like a server problem or maybe a browser problem. Does it happen on one specific browsers? Have you tried other browsers.
    It's only been tested in IE6, but no other browsers require testing as the app currently only supports IE6.

    Have you tried clearing the cache (and history) on your browsers you may have a corrupt file in cache.
    Yup, tried that one but still no joy. It's weird because it doesn't work, but then suddenly acts as though it recognises the rest of the stylesheet and works for the rest of the day.

    I think it must be something to with how this page is being used by the app - I just wanted to make sure there were no obvious issues in using CSS and framesets.

    Thanks for offering your help - if you think of anything please give me a shout!

    P.s - is the CSS navigation code ok? This is the first time I've ever created a navigation menu using CSS and wasn't sure if the problems were somthing to do with that?

  4. #4
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll attach an image in case that's any help?

    This is what's so strange - as the navigation uses only one stylesheet, and the "mainlinks" CSS is recognised. However, it ignores the "submenu" classes, until you refresh the browser enough times...

    Could this be anything related to the submenu being assigned as "display:none;" to begin with?

    (Awaiting Moderator Approval)
    Image Attached
    Attached Images Attached Images

  5. #5
    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)
    is the CSS navigation code ok? This
    The css looks ok. I've just copied it into a frameset locally and it all works as expected so I can't see any problems there.

    Try stripping the page down to a minimum and see what exactly is going wrong. Try changing the submenu styles to be visible on loading and see if the yare styled.

    I think its going to be a matter of trial and error unless somenoe else has a similar experience and can shed some light on it. Problems before where css hasn't been showing up have been related to server problems and settings etc.

    Sorry I can't help with this much

    Paul

  6. #6
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks or looking at it Paul

    I THINK I may have fixed it anyway *fingers crossed*.

    I did as you said and stripped it all down, but still couldn't see anything wrong with it. Then I completely re-wrote the submenu classes from scratch and it all works fine now!?

    Not sure if this has actually fixed it - or whether it'll be broken again come tomorrow, but I guess I'll have to wait and see.

    Thanks again


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
  •