Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image slice not showing correctly in Firefox

    www.wildislandresorts.com ... signpost navigation slice shows fine in IE but not in Firefox. Can't figure out why.

  • #2
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    what do you mean? i see exactly the same in IE and ff
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Why not use proper CSS as it was intended to create the rollover menu? Tables, many images, image spacers and JS rollovers is probably a technique that would have been used a decade ago but now it's more common to seperate presentation and content using CSS...

    e.g your HTML for the menu should look more like this:

    Code:
    <ul id="menu">
    	<li class="home"><a href="index_abaco_rentals.html">Home</a></li>
        <li class="location"><a href="abaco_bahamas_rental_locations.html">Locations</a></li>
        <li class="area"><a href="abaco_bahamas_area.html">Area Info</a></li>
        <li class="romantic"><a href="romantic_bahamas_wedding_honeymoon_occasions.html">Romantic Get-a-Ways</a></li>
    </ul>
    Which is a lot cleaner, more accessible and more meaningful to search engines. Then you'd just use CSS to style the menu as you want, and you could save the whole menu as one image slice and just use CSS background positioning.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In FF the post is not staight , it's disjointed at each sign, and the yellow grass at the base of the post ... a peice of this is showing outside of the graphic- in the sand background. Do you not see this in your FF?

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Scriptet, this is the way Dreamweaver did it for me. Can I fix what I have, or do I need to learn another way?

  • #6
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    i see it now... maybe insted of using a table you can use a single image inside a div... the image should be your post signs?? (sorry for my english) and maybe using a map image you could locate your links on that image...

    here's an example

    tables are the worst you can use for layout, always keep that in mind =)
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #7
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    and the link highlight you can use css, the property a:hover should work

    or keep the code you have
    Last edited by rakasv; 06-09-2010 at 06:48 PM. Reason: bad redaction
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Well I don't know enough about tables and how it works cross-browser i'm sure there'd be a hacky way to amend it.

    Otherwise if you can provide a link to a single image of the menu I can show you another method of doing it.

  • #9
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://www.wildislandresorts.com/Images/post_sign_2.gif thank you... would like to learn a better way.

  • #10
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    programs like photoshop can be useful when it's about locating the exact coordinate...
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    rakasv,

    you mean for the maps? So to find the coordinates I would do this in PhotoShop... starting to make since now.

  • #12
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    let me go and eat something and i'll help you out with the map
    =)
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #13
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    This is not a map-based way as rakasav will be posting, i've not really messed around with maps too often!

    The HTML for the menu would be:

    Code:
    <ul id="menu">
    	<li class="home"><a href="index_abaco_rentals.html">Home</a></li>
        <li class="location"><a href="abaco_bahamas_rental_locations.html">Locations</a></li>
        <li class="area"><a href="abaco_bahamas_area.html">Area Info</a></li>
        <li class="romantic"><a href="romantic_bahamas_wedding_honeymoon_occasions.html">Romantic Get-a-Ways</a></li>
    </ul>
    and the CSS for this menu would be:

    Code:
    #menu{
    	overflow:auto;
    	list-style:none;
    	width:200px;
    	height:300px;
    	margin:0; padding:0;
    	background:url('http://www.wildislandresorts.com/Images/post_sign_2.gif');
    }
    #menu li{
    	margin:0; padding:0;
    }
    #menu li a{
    	display:block;
    	text-indent:-999em;
    	background:url('http://www.wildislandresorts.com/Images/post_sign_2.gif');
    }
    #menu li.home a{
    	background-position:0 -17px;
    	margin-top:17px;
    	height:37px;
    }
    #menu li.home a:hover{background-position:right -17px;}
    #menu li.location a{
    	background-position:0 -57px;
    	margin-top:3px;
    	height:34px;
    }
    #menu li.location a:hover{background-position:right -57px;}
    #menu li.area a{
    	background-position:0 -96px;
    	margin-top:5px;
    	height:36px;
    }
    #menu li.area a:hover{background-position:right -96px;}
    #menu li.romantic a{
    	background-position:0 -143px;
    	margin-top:11px;
    	height:40px;
    }
    #menu li.romantic a:hover{background-position:right -143px;}
    Note: You need to change the background image picture so that the "hover" version of it appears directly next to it, so it's still one picture but showing two menus next to each other one the hover version and the other normal...

    If you would like the technique explaining further let me know!

  • #14
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    here it is
    Code:
    <img src="post_sign_2.gif" width="200" height="300" alt="postsign" usemap="#postsign" border="0"/>
    
    <map name="postsign">
    <area shape="poly" coords="13,19,194,31,194,53,10,39" href="#" alt="home" onmouseover="MM_swapImage('About_roll','','Images/sign/images/About_us_btn_over.gif',1)" onmouseout="MM_swapImgRestore()" 
    href="index_abaco_rentals.html"/>
    <area shape="poly" coords="6,67,162,60,159,87,11,88" href="#" alt="locations" />
    <area shape="poly" coords="32,104,180,95,180,125,32,133" href="#" alt="areainfo" />
    <area shape="poly" coords="43,143,175,145,171,179,36,178" href="#" alt="romantic" />
    </map>
    just add the other mouse events to the rest of the tags

    let me know if it worked=)
    Last edited by rakasv; 06-09-2010 at 09:07 PM. Reason: code mistake
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #15
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    rakasv,

    What I have below is not working... trying to get the "home" to work before adding mouse events to others. While in Dreamweaver "live mode" home does not switch out with the: Images/sign/images/About_us_btn_over.gif . " <area shape="poly" coords="13,19,194,31,194,53,10,39" href="#" alt="home" onmouseover="MM_swapImage('About_roll','','Images/sign/images/About_us_btn_over.gif',1)" onmouseout="MM_swapImgRestore()"
    href="index_abaco_rentals.html"/> " is grayed out as if Dreamweaver thinks something is wrong.



    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>

    </head>

    <body>
    <img src="Images/post_sign_2.gif" width="200" height="300" alt="postsign" usemap="#postsign" border="0"/>

    <map name="postsign">
    <area shape="poly" coords="13,19,194,31,194,53,10,39" href="#" alt="home" onmouseover="MM_swapImage('About_roll','','Images/sign/images/About_us_btn_over.gif',1)" onmouseout="MM_swapImgRestore()"
    href="index_abaco_rentals.html"/>
    <area shape="poly" coords="6,67,162,60,159,87,11,88" href="#" alt="locations" />
    <area shape="poly" coords="32,104,180,95,180,125,32,133" href="#" alt="areainfo" />
    <area shape="poly" coords="43,143,175,145,171,179,36,178" href="#" alt="romantic" />
    </map>
    </body>
    </html>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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