SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27

Hybrid View

  1. #1
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doesnt Work in IE

    Ok,
    This code works fine in Firefox, but not in IE, any idea why, here is the CSS.

    div.menuMainItemNormal
    {
    width: 166px;
    height: 24px;
    background-image: url('../images/main_menu_empty_normal.gif');
    background-repeat: no-repeat;
    font-weight: bold;
    font-color: #FFFFFF;
    font-size: 10px;
    text-align: left;
    }
    div.menuMainItemNormal:Hover
    {
    width: 166px;
    height: 24px;
    background-image: url('../images/menu_rollover.gif');
    background-repeat: no-repeat;
    font-weight: bold;
    color: #000000;
    font-size: 10px;
    text-align: left;
    }
    You can see the site here, it applies to the navigation.

    But if you look at the site if firefox, there is a white box at the bottom left above the search box, anyone any clue why this is here, but not in IE?

    Weird problems
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  2. #2
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    where can we see the site? 'here'? doesn't works, make sure you create a proper hyperlink for label 'here'

  3. #3
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DOH,
    I just forgot to add the link thats all !!!
    www.sers.org.uk/index.php

    sorry about that.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  4. #4
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    You might try tweaking your !DOCTYPE to actually state what 'flavor' of xhtml you're using:

    Current -
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    Poss. Choice -
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    That may help the display issues...
    El

  5. #5
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for pointing that out, we took on a new lad to do the template for the CMS and I hadnt spotted that. It doesnt help with on hover not showing in IE though.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    IE only supports hover on anchors and in the code above you are applying it to the div only.

    Make the anchor display:block and apply the style to the anchor instead.

    paul

  7. #7
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul

    I think it might be the time here and the fact im CSS'ed out, I just cant get my head round this sometimes. Can you point out what you mean.
    Shall I just create another style and assign that to the link somehow?
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    Just apply it to the anchor like so:

    Code:
    .menuMainItemNormal a
    {
     
     width: 166px;
     height: 24px;  
    	 background-image: url('http://www.sers.org.uk/templates/sers/images/main_menu_empty_normal.gif'); 
     background-repeat: no-repeat;   
     font-weight: bold;
     font-color: #FFFFFF;
     font-size: 10px;
     text-align: left; 
    	display: block; 
    }
    .menuMainItemNormal a:hover
    {
    	background:url('http://www.sers.org.uk/templates/sers/images/menu_rollover.gif') no-repeat left top; 
     color: #000000;
    }
    You don't really need to surround each of those anchors in a class, you could have just wrapped them all up in one div with a class to cover all of them. Then the anchors wouldn't need to be wrapped up in individual divs. However a list structure would be more semantically correct.

    Also remember thats id's are supposed to be unique on the page and you have used some more than once which is not allowed.

    Hope that helps.

    Paul

  9. #9
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I redone a whole load of the section to make it more friendly.
    The CSS is now thus.
    #navigation {
    color: #ffffff;
    font-weight: bold;
    }

    #navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    border: none;
    }

    #navigation li {
    margin: 0;
    padding-left: 1;
    }

    a.menu-link
    {
    width: 166px;
    height: 24px;
    background-image: url('../images/main_menu_empty_normal.gif');
    background-repeat: no-repeat;
    font-weight: bold;
    font-color: #FFFFFF;
    font-size: 10px;
    text-align: left;
    display: block;
    }

    html>body a.menu-link {
    width: auto;
    }

    a.menu-link:hover
    {
    width: 166px;
    height: 24px;
    background-image: url('../images/menu_rollover.gif');
    background-repeat: no-repeat;
    font-weight: bold;
    color: #000000;
    font-size: 10px;
    text-align: left;
    }
    The code displayed is thus
    Code:
      <div id="inline2">
           <div id="menu"><div class="module">
     		<div id="navigation">
     <ul>
     <li><a class="menu-link" href="index.php?option=content&amp;task=section&amp;id=2&amp;Itemid=25">tutorials</a></li>
     <li><a class="menu-link" href="index.php?option=content&amp;task=section&amp;id=1&amp;Itemid=2">News</a></li>
     <li><a class="menu-link"  href="index.php?option=com_weblinks&amp;Itemid=4">The Web Links</a></li>
     <li><a class="menu-link"  href="index.php?option=com_contact&amp;Itemid=3">Contact Us</a></li>
     <li><a class="menu-link" href="index.php?option=content&amp;task=blogcategory&amp;id=7&amp;Itemid=26">blog</a></li>
     <li><a class="menu-link" href="index.php?option=content&amp;task=view&amp;id=5&amp;Itemid=27">Testing for one</a></li>
     </ul></div>   </div>
    So this is almost there, its a lot closer and the markup is cleaner, however I do still have a few issues i cant clean up I want a small margin on the left but when i try the whole thing goes flying to the middle. I also want all the links Black, but that doesnt seem to work either.

    Im going to look at replacing the images with pure css for the rollover too.

    The only problem I am having at the moment is getting a background image to show up and repeat in firefox, it works fine in IE,
    this is the css
    #inline2 {
    background-image:url(../images/content_bg.gif);
    background-repeat:repeat-y;
    }
    Any idea why nothing shows up in firefox for this?
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you have a link to the page as the code looks like it should work. Of course I can't see what #menu and #module are doing because you didn't supply the code. If they are floated then you need to clear the floats before the closing tag of #inline2.

    I note you have missed the 2 closing divs from the end but I assumed thats just a cut and paste error.

    You have also missed the unit off here:
    Code:
    #navigation li {
    margin: 0;
    padding-left: 1;
    }
    should be 1px.

    Paul

  11. #11
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a link
    http://www.sers.org.uk/new_site/index.php

    I have it nearly all working in both IE and firefox now, i found the missing unit and that helped. Yes the closing tags are just cut and paste errors.

    ok the css for menu is, module doesnt appear to exist!!
    #menu {
    width:169px;
    text-align:left;
    display:block;
    float:left;
    background:inherit;
    background-image:url(../images/bg_menu.gif);
    background-repeat:repeat-y;
    }
    interestingly this must overlay the background image as they both provide the yellow background down the left. Which I didnt realise. As i said above we had a new lad code this up as a test of his skills and im still finding some of his errors. My skill is sales not coding as you might guess.
    T
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    You need to add a clearing div to allow the background to extend in mozilla as mentioned above .

    Code:
     
    .clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    Code:
    		 </div>
    		</div>
    	 </div>
    	 <div id="menu_b"></div>
    	 <div class="clearer"></div>
    	</div>
    </div>
    <div id="search"> 
    	<form class="searchform" action='http://www.sers.org.uk/new_site/index.php' method='post'>
    Paul

  13. #13
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for your help
    That seems to have cleared the problem up yippeee.

    Just a weird problem on the contact us now page, which I dont how its happening never rains but it pours
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    The problem on the contact page is that you have 2 divs in the wrong place.

    Make the code look like this:
    Code:
    		  </form>
    		</div>
    	  </div>
    	</div>
    		<div id="menu_b"></div>
    	 <div class="clearer"></div>
    </div>
      <div id="search">
    The position must be exact as above or it all goes astray

    Paul

  15. #15
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, Ok I notice in your code that you moved one of the Divs from below the two you have highlighte to the one above it. Im not sure why but this is something to do with teh CMS i am running.

    Ok the template looks like this
    Code:
        <div id="content"><?php include_once ("mainbody.php"); ?></div>
                       <div id="menu_b"></div>
              <div class="clearer"></div>
         </div>
          </div>
          <div id="search">
    The area mainbody.php always pulls in the content, in this case the contact form.
    Here is the HTML that is outputted using the above code. I have bold the same div as above, the div=id is not included as its at the top of the page
    Code:
        </form>
       </div>
               </div>
                                <div id="menu_b"></div>
                       <div class="clearer"></div>
           </div>
         </div>
         <div id="search">
    As you can see the first from and div tags are part of the contact page, however
    the div you moved is part of the template and so cannot be added to the contact page because its needed for the whole template.
    Does that make sense? Or did i miss what you were telling me !
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  16. #16
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohh im so stupid, I just moved the div id=menu and id=clearer below the /div tag which was below them and that worked

    My other problem i dont think is CSS based, if you click on Tutorials in the menu, a small sub menu should appear underneath it with a pointing arrow, instead you get two huge lines missing.

    DOH
    Thanks Paul.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    My other problem i dont think is CSS based, i
    The link above doesn't work anymore so I couldn't look anyway

    Paul

  18. #18
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah I moved the site to the main folder.
    www.sers.org.uk/index.php

    thnx
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    I'm not sure whats going on there as you just have two images in the code. One blank png and the arrow and they are just placed on the next line with a break which gives you the 2 lines space.

    I could't see any implementation of a sub menu. However I was in a hurry as my main computer died on me and I'm busy getting this one to work as I want

    Paul

  20. #20
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you click tutorials a new menu item called 'testing for one' appears. It should be next to the little arrow and indented, but instead it appears as a new menu item below the arrow. Maybe because of the block element?
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    I see what you mean now.

    You are right its because the link is display block and will take up the whole line. You will need to devise some new classes to the sublist as you want and to style the tutorial heading as you probably won't want it to rollover but have the sub mneu rollover instead.

    Innstead of using breaks you should structure with sublists as follows.

    Code:
    		  <div id="navigation"> 
    			<ul>
    			  <li><a class="menu-link"  href="http://www.sers.org.uk/component/option,com_frontpage/Itemid,1/">Home</a></li>
    			  <li id="active-link"><a href="http://www.sers.org.uk/content/section/2/25/">tutorials</a> 
    				<ul>
    				  <li ><img src="http://www.sers.org.uk/images/M_images/blank.png" alt="" height="12" width="4" /> 
    					<img src="http://www.sers.org.uk/images/M_images/indent1.png" alt="" />&nbsp;<a href="http://www.sers.org.uk/content/view/6/28/">Testing 
    					for one</a> </li>
    				</ul>
    			  </li>
    			  <li><a class="menu-link"  href="http://www.sers.org.uk/content/section/1/2/">News</a></li>
    This will display the sublist as you intended I think However as mentioned above you now need to apply styles directly to that sublist to display as you want.

    You can use the active-link id that you have in place and target the ul and its anchor by specifity if you don't want to add classes. (e.g. li#active-link ul li a)

    Hope that helps.

    Paul

  22. #22
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey we are getting there
    I have set up the sub menus so it uses proper sub-lists and is more 'correct'.

    I have this CSS class
    Code:
    li#active-link li a {
     		color: #ffffff;
     }
    As a test class to try and get it working, but it doesnt, its still inheriting the main 'menu-link' class
    What I want is it slightly indented and a different colour although I havent worked out what yet
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try making the style more specific and see if that helps.

    e.g.
    Code:
    #navigation ul li#active-link ul li a {
     		color: #ffffff;
     }
    Otherwise post the code ( or link) and I'll look later tomorrow (or is it today now).

    Paul

  24. #24
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah dont work either, thanks for trying though

    Here is the CSS code.
    Code:
     /* MENU SETTINGS */
     
     #navigation {
     	color: #ffffff;
     	font-weight: bold;
     	}
     	
     #navigation ul {
     		list-style: none;
     		margin: 0;
     		padding-left: 0;
     		border: none;
     		}
     		
     #navigation li {
     		margin: 0;
     		padding-left:0;
     				padding-right 1px;
     		}
     		
     a.menu-link
     {
     	width: 160px;
     	height: 24px;		
     	background: #FCB915; 	
     	font-weight: bold;
     	color: #000000;
     	font-size: 10px;
     	text-align: left;	
     		display: block;	
     }
     
     html>body a.menu-link {
     		width: auto;
     		}
     		
     a.menu-link:hover{
     	width: 166px;
     	height: 23px;		
     	background: #FFCC00;
     	border-top: 1px solid #000000; 
     	border-right: 5px solid #009966;
     	font-weight: bold;
     	color: #009966;
     	font-size: 10px;
     	text-align: left;		
     }
     
     
     #navigation ul li#active-link ul li a {
     		 color: #ffffff;
      }
    Here is the html code that is outputted now
    Code:
     <ul>
    <li><a class="menu-link"  href="component/option,com_frontpage/Itemid,1/">Home</a></li>
    <li><a class="menu-link" id="active-link" href="content/section/2/25/">tutorials</a>
     <ul>
    <li><a class="menu-link"  href="content/view/6/28/">Testing for one</a></li>
    </ul></li>
    <li><a class="menu-link"  href="content/section/1/2/">News</a></li>
    <li><a class="menu-link"  href="component/option,com_weblinks/Itemid,4/">The Web Links</a></li>
    The URL is the same as above.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

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

    Haven't had time to look at this but just noticed you had the id in the wrong place here:
    Code:
    <li><a class="menu-link" id="active-link" href="content/section/2/25/">tutorials</a>
    <ul>
    In the css the id is in the list item
    Code:
    #navigation ul li#active-link ul li a {
    		 color: #ffffff;
    }
    So the html should be:
    Code:
    <li id="active-link" ><a class="menu-link" href="content/section/2/25/">tutorials</a>
    <ul>
    Haven't had time to test yet but try the above first.

    Paul
    Last edited by Paul O'B; Sep 11, 2004 at 07:03.


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
  •