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.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Indiana
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts

    layout image slice looks good in IE but not Firefox

    I am making this layout with image slicing, and when i put the images together as bg of divs, it all looks good in IE, but when i see the image in firefox, theres a big gap on between the second and last image. I will show a screenshot below with the coding.



    Code:
    <html>
    <head>
    <title></title>
    
    <SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
    <!--
    var popupWindow=null;
    function popup(mypage,myname,w,h,pos,infocus){
    
    if (pos == 'random')
    {LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
    
    }
    else
    {LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
    settings='width='+ w + ',height='+ h + ',top=' + TopPosition + ',left=' + LeftPosition + 
    
    ',scrollbars=yes,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';popupWindow=window.open('',myname,settings);
    if(infocus=='front'){popupWindow.focus();popupWindow.location=mypage;}
    if(infocus=='back'){popupWindow.blur();popupWindow.location=mypage;popupWindow.blur();}
    
    }
    // -->
    </script>
    
    <LINK href="css.css" rel="stylesheet" type="text/css">
    
    </head>
    <body>
    
    <table>
    
    
    <!-- HEADER -->
    
    
    <tr>
    	<td p align="left" valign="bottom">
    		<div id="header">
    
    <!-- MENU -->
    <a href="#">HOME</a>&nbsp;
    <a href="#">WORLD</a>&nbsp;
    <a href="#">US</a>&nbsp;
    <a href="#">TECH</a>&nbsp;
    <a href="#">ART&CUTLURE</a>&nbsp;
    <a href="#">BUSINESS</a>&nbsp;
    <a href="#">SPORTS</a>&nbsp;
    <a href="#">MISCELANEOUS</a>&nbsp;
    <a href="javascript:popup('windowpop.html','windowpop','578','550','center','front');">SUBMIT</a>
    &nbsp;
    <a href="#">CONTACT</a>&nbsp;
    <h2>
    
    
    
    		</div>
    	</td>
    </tr>
    <tr>
    <td p align="center">
    
    <div id="menu">
    <p><br><p>
    
    </div>
    </td>
    </tr>
    <tr>
    <td p align="center">
    <div id="body">
    body
    
    </div>
    </td>
    </tr>
    <!-- FOOTER -->
    <tr>
    	<td p align="center">
    		<div id="footer">
    
    	<h3>&copy; Copyright 2009-'10</h3>
    
    		</div>
    	</td>
    </tr>
    </body>
    </html>
    Code:
    * {
    	cell-padding: 0px;
    	border: 0px;
    	border-spacing: 0px;
    	border-collapse: collapse;
    	} 
    
    
    h1 {
    	color: #cccccc;
    	font-size: 16px;
    	text-decoration: underline overline;
    	font-family: arial;
     	}
    
    
    body {
    	background-color: #cccccc;
    	border: 0px;
    	cell-padding: 0px;
    	border-spacing: 0px;
    	cell-spacing: 0px;
    	border-collapse: collapse;
    	font-family: eurostyle, myraid, tahoma;
    	
       	
    
    	}
    
    table {
    	border: 0px;
    	cell-padding: 0px;
    	border-spacing: 0px;
    	cell-spacing: 0px;
    	border-collapse: collapse;
     	}
    
    tr {
    	border: 0px;
    	padding: 0px;
    	border-spacing: 0px;
    	cell-spacing: 0px;	
    	border-collapse: collapse;
    	}
    	
    
    td {
    	border: 0px; 
    	bgcolor: #ffffff;
    	p align: center; 
    	border-spacing: 0px;
    	padding: 0px;
    	border-collapse: collapse;
     	}
    
    
    #header {
    	background-image: url(SQRL_header.png);
    	width: 1000px;
    	height: 250px;
    	padding: 0px;
    	border-spacing: 0px;
    	border: 10px;
    	margin-left: 0px;
    	margin-bottom: 10px
     	}
    
    #menu {
    	background-image: url(menu.png);
    	height: 60px;
    	padding: 0px;
    	border-spacing: 0px;
    	border: 0px;
    	border-collapse: collapse;
    	}
    
    #body {
    	background-image: url(body.png);
    	height: 200px;
    	border-spacing: 0px;
    	padding: 0px;
    	border: 0px;
    	border-collapse: collapse;
     	}
    	
    
    #footer {
    	background-image: url(footer.png);
    	height: 60px;
    	border-spacing: 0px;
    	padding: 0px;
    	border: 0px;
    	border-collapse: collapse;
    
     	}
    
    h3 {
    	font-size: 12px;
     	}
    
    a:link {
    	color: silver;
     	}
    
    a:hover {
    	color: #000000;
     	}
    
    a:visited {
    	color: silver;
     	}
    
    a:active {
    	color: #ffffff;
     	}

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Link please! This will be super easy to debug in FF if you link us to the page.

    Use the Firebug plugin for FF too while you're at it. You should be able to see where that gap comes from.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The problem, as always, is IE, not FF. Never look at IE as a reference for how things should work. Always use more modern browsers, then look to see when and how IE screws things up.

    You aren't using a doctype. IE will never attempt to perform like other more modern browsers without one. Add this to your first line:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    There may still be an issue with another IE bug in this but let's see what happens after adding thatl.

  • #4
    New Coder
    Join Date
    Mar 2009
    Location
    Indiana
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok, i used a free host to upload the site to. The link is below, again, the gap is seen only in firefox. It is still there, any ideas?

    http://www.freewebs.com/theunlimited...yout/sqrl.html

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Just add
    Code:
    * {
    border:none;
    padding:0;
    margin:0;
    }
    into your CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    abduraooft is correct. That will fix the problem but the problem is IE collapsing margins improperly as I alluded to above. Firefox is performing correctly.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    abduraooft is correct. That will fix the problem but the problem is IE ...
    I suggested that fix after seeing a right DOCTYPE at the top
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Mar 2009
    Location
    Indiana
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Just add
    Code:
    * {
    border:none;
    padding:0;
    margin:0;
    }
    into your CSS
    * {
    cell-padding: 0px;
    border: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    }

    i have that in there. Do you mean actually change border to say none?
    and if that was the problem, would all the images be seperated?

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    i have that in there. Do you mean actually change border to say none?
    and if that was the problem, would all the images be seperated?
    No! margin:0;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    itssawyer (05-18-2009)

  • #10
    New Coder
    Join Date
    Mar 2009
    Location
    Indiana
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    No! margin:0;
    great. thanks, solved the problem. I forgot i had that in there before and removed it haha.

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm having the same problem... but the above is not fixing it. Here's the site www.wildislandresorts.com . The affected image slice is the sign post Nav on the right. Thanks for any help.


  •  

    Tags for this Thread

    Posting Permissions

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