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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts

    Form Positioning Issue

    I'm having a problem positioning a search form on my web site. It looks perfect in Firefox but awful in IE. I've been developing the website in Dreamweaver; it was sliced with Photoshop.

    Screenshot: http://i43.tinypic.com/4llf1t.png

    Code:

    Any ideas? Ive been trying to solve this for hours. Thanks in advance.

    Code:
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #slideshow {
        position:relative;
        height:124px;
    	width:198px;
    }
    
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    
    #slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }
    
    #slideshow IMG.last-active {
        z-index:9;
    }
    .search_field    {
        border-width: 0px;
        background-image: url(images/image_10.png);
        background-repeat: no-repeat;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #333333;
        width: 340px;
        height: 31px;
        padding-top: 8px;
        padding-right: 40px;
        padding-bottom: 0px;
        padding-left: 65px; 
    
    }
    </style>
    <style type="text/css">
    <!--
    body {
    	background-image: url(images/bg.png);
    	background-repeat: repeat-x;
    }
    -->
    </style>
    <style type="text/css" media="screen">
    	.fadeThis {
    		position:relative;
    		display:block;
    		height: 96px;
    		width: 255px;
    		background:url(/images/image_05.png) 0 0 no-repeat;
    	}
    	.fadeThis * {
    	  display: none;
    	}
    	
    	.fadeThis span.hover {
    		position: absolute;
    		top: 0;
    		left: 0;
    		display: block;
    		height: 96px;
    		width: 255px;
    		background:url(/images/image_05_hover.png) 0 0 no-repeat;
    	}
    	/* END CSS */
    </style>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.fadeThis').append('<span class="hover"></span>').each(function () {
    	  var $span = $('> span.hover', this).css('opacity', 0);
    	  $(this).hover(function () {
    	    $span.stop().fadeTo(500, 1);
    	  }, function () {
    	    $span.stop().fadeTo(500, 0);
    	  });
    	});
    	
    });
    </script>
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 2000 );
    });
    </script>
    </head>
    <body onLoad="javascript:search.query.focus();" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div align="center">
     <table id="Table_01" width="841" height="1151" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><table width="255" height="23" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_01.jpg"></td>
            </tr>
          </table></td>
    	    <td rowspan="3"><table width="29" height="119" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_02.png"></td>
              </tr>
            </table></td>
    	    <td colspan="7" rowspan="2"><table width="404" height="88" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_03.png"></td>
              </tr>
            </table></td>
    	    <td colspan="4" rowspan="2"><table width="152" height="88" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_04.png"></td>
              </tr>
            </table></td>
    	    <td>
    		    <table width="1" height="23" border="0" cellspacing="0" cellpadding="0"><tr></tr></table></td>
        </tr>
        <tr>
          <td rowspan="2">
    <div class="fadeThis">
    	<p class="hover">This content is hidden</p>
    </div>
    </td>
    	    <td>
    <table width="1" height="65" border="0" cellspacing="0" cellpadding="0"><tr></tr></table></td>
    	  </tr>
        <tr>
          <td>
            <img src="images/image_06.png" width="72" height="31" alt=""></td>
    	    <td><table width="4" height="31" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="4" background="images/image_07.png"></td>
              </tr>
            </table></td>
    	    <td>
    		    <img src="images/image_08.png" width="116" height="31" alt=""></td>
    	    <td><table width="4" height="31" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="4" background="images/image_09.png"></td>
              </tr>
            </table></td>
    	    <td colspan="6">
    		    <table width="340" height="31" border="0" cellspacing="0" cellpadding="0">
                
                <form action="search.php" name="search" method="GET">
                <input type="text" name="query" id="query" class="search_field" action="include/js_suggest/suggest.php" columns="2" autocomplete="off" delay="1500">	
                <input type="hidden" name="search" value="1"> 
                </table>
                
    </td>
    	    <td><table width="20" height="31" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_11.png"></td>
              </tr>
            </table></td>
    	    <td>
                <table width="1" height="31" border="0" cellspacing="0" cellpadding="0"><tr></tr></table>
          </td>
        </tr>
        <tr>
          <td colspan="7" rowspan="5"><table width="542" height="268" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_12.png"></td>
            </tr>
          </table></td>
    	    <td colspan="6"><table width="298" height="56" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_13.png"></td>
              </tr>
            </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="56" alt=""></td>
        </tr>
        <tr>
          <td colspan="4"><table width="198" height="124" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>
              <div id="slideshow" border="0">
        <img src="images/image_14.png" alt="Slideshow Image 1" class="active"/>
        <img src="images/image2.jpg" alt="Slideshow Image 2" />
    </div>
    </td>
            </tr>
          </table></td>
      <td colspan="2" rowspan="4"><table width="100" height="212" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td background="images/image_15.png"></td>
        </tr>
      </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="124" alt=""></td>
        </tr>
        <tr>
          <td colspan="4">
            <table width="198" height="22" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td background="images/image_16.png"></td>
      </tr>
    </table>
    </td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="22" alt=""></td>
        </tr>
        <tr>
          <td><table width="9" height="39" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_17.png"></td>
            </tr>
          </table></td>
    	    <td colspan="2">
    		    <img src="images/image_18.png" width="186" height="39" alt=""></td>
    	    <td rowspan="2">
    		    <table width="3" height="66" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="3" background="/images/image_19.png"></td>
      </tr>
    </table>
    </td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="39" alt=""></td>
        </tr>
        <tr>
          <td colspan="3"><table width="195" height="27" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_20.png"></td>
            </tr>
          </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="27" alt=""></td>
        </tr>
        <tr>
          <td colspan="13"><table width="840" height="701" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td bgcolor="#FFFFFF"><a href="test.html">testt</a></td>
            </tr>
          </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="701" alt=""></td>
    	  </tr>
        <tr>
          <td colspan="13">
            <img src="images/image_22.png" width="840" height="62" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="62" alt=""></td>
    	  </tr>
        <tr>
          <td>
            <img src="images/spacer.gif" width="255" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="29" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="72" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="116" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="62" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="9" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="137" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="49" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="3" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="80" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="20" height="1" alt=""></td>
    	    <td></td>
    	  </tr>
      </table>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Why are you using tables instead of dividors?

    Perhaps if you used dividors then you would have less problems with the layout.

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Doesn't exactly answer my question. I'm sticking with tables.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try adding float:left; your search input element.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Thanks for the reply.

    I tried that, it didn't seem to work too well.

    Here's my domain so you can take a look: http://www.scumlabs.com/

    It looks all weird in IE. I have a feeling something is causing the tables to get all whacked. Does anything stand out? Check it out in both IE and Firefox.

    Please help, this has been a huge headache over the past few days. Thanks.

  • #6
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Without having looked at your code in too much detail, try adding this into your CSS.

    Code:
    * {
    margin:0;
    padding:0;
    }
    (The * is the universal CSS selector.) I think that IE gives tables margins by default, whereas Firefox doesn't. I think that might solve your problem.

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Didn't work. Interesting though, i'll keep that in mind for future css issues.

    Does anybody else have any ideas? I'm pulling my hair out over here =[

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    First of all you need a valid DOCTYPE at the top, otherwise IE will turn to quirks mode.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Just added a doctype and changed a few things, and the problem seems to still be there.

    New code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Scumlabs.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #slideshow {
        position:relative;
        height:124px;
    	width:198px;
    }
    
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    
    #slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }
    
    #slideshow IMG.last-active {
        z-index:9;
    }
    .search_field    {
        border-width: 0px;
        background-image: url(images/image_10.png);
        background-repeat: no-repeat;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #333333;
        width: 340px;
        height: 31px;
        padding-top: 8px;
        padding-right: 40px;
        padding-bottom: 0px;
        padding-left: 65px; 
    }
    
    .fieldHolder
    {
    	width: 340px;
    	height: 31px;
    	float: left;
    }
    
    </style>
    <style type="text/css">
    <!--
    body {
    	background-image: url(images/bg.png);
    	background-repeat: repeat-x;
    }
    -->
    </style>
    <style type="text/css" media="screen">
    	.fadeThis {
    		position:relative;
    		display:block;
    		height: 96px;
    		width: 255px;
    		background:url(/images/image_05.png) 0 0 no-repeat;
    	}
    	.fadeThis * {
    	  display: none;
    	}
    	
    	.fadeThis span.hover {
    		position: absolute;
    		top: 0;
    		left: 0;
    		display: block;
    		height: 96px;
    		width: 255px;
    		background:url(/images/image_05_hover.png) 0 0 no-repeat;
    	}
    	/* END CSS */
    </style>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.fadeThis').append('<span class="hover"></span>').each(function () {
    	  var $span = $('> span.hover', this).css('opacity', 0);
    	  $(this).hover(function () {
    	    $span.stop().fadeTo(500, 1);
    	  }, function () {
    	    $span.stop().fadeTo(500, 0);
    	  });
    	});
    	
    });
    </script>
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 2000 );
    });
    
    </script>
    </head>
    <body onLoad="javascript:search.query.focus();" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div align="center">
     <table id="Table_01" width="841" height="1151" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><table width="255" height="23" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_01.jpg"></td>
            </tr>
          </table></td>
    
    	    <td rowspan="3"><table width="29" height="119" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_02.png"></td>
              </tr>
            </table></td>
    	    <td colspan="7" rowspan="2"><table width="404" height="88" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_03.png"></td>
              </tr>
    
            </table></td>
    	    <td colspan="4" rowspan="2"><table width="152" height="88" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_04.png"></td>
              </tr>
            </table></td>
    	    <td>
    		    <table width="1" height="23" border="0" cellspacing="0" cellpadding="0"><tr></tr></table></td>
        </tr>
    
        <tr>
          <td rowspan="2">
    <div class="fadeThis">
    	<p class="hover">This content is hidden</p>
    </div>
    </td>
    	    <td>
    <table width="1" height="65" border="0" cellspacing="0" cellpadding="0"><tr></tr></table></td>
    	  </tr>
        <tr>
    
          <td>
            <img src="images/image_06.png" width="72" height="31" alt=""></td>
    	    <td><table width="4" height="31" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="4" background="images/image_07.png"></td>
              </tr>
            </table></td>
    	    <td>
    		    <img src="images/image_08.png" width="116" height="31" alt=""></td>
    
    	    <td><table width="4" height="31" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="4" background="images/image_09.png"></td>
              </tr>
            </table></td>
    	    <td colspan="6">
                <form action="search.php" name="search" method="GET">
                <div class="fieldHolder">
                <input type="text" name="query" id="query" class="search_field" style='width:235px;height:23px'>	
                <input type="hidden" name="search" value="1">
    
                </div>
                </form>
    </td>
    	    <td><table width="20" height="31" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_11.png"></td>
              </tr>
            </table></td>
    	    <td>
    
                <table width="1" height="31" border="0" cellspacing="0" cellpadding="0"><tr></tr></table>
          </td>
        </tr>
        <tr>
          <td colspan="7" rowspan="5"><table width="542" height="268" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_12.png"></td>
            </tr>
          </table></td>
    
    	    <td colspan="6"><table width="298" height="56" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/image_13.png"></td>
              </tr>
            </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="56" alt=""></td>
        </tr>
        <tr>
    
          <td colspan="4"><table width="198" height="124" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>
              <div id="slideshow" border="0">
        <img src="images/image_14.png" alt="Slideshow Image 1" class="active"/>
        <img src="images/image2.jpg" alt="Slideshow Image 2" />
    </div>
    </td>
            </tr>
          </table></td>
    
      <td colspan="2" rowspan="4"><table width="100" height="212" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td background="images/image_15.png"></td>
        </tr>
      </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="124" alt=""></td>
        </tr>
        <tr>
    
          <td colspan="4">
            <table width="198" height="22" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td background="images/image_16.png"></td>
      </tr>
    </table>
    </td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="22" alt=""></td>
        </tr>
    
        <tr>
          <td><table width="9" height="39" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_17.png"></td>
            </tr>
          </table></td>
    	    <td colspan="2">
    		    <img src="images/image_18.png" width="186" height="39" alt=""></td>
    	    <td rowspan="2">
    
    		    <table width="3" height="66" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="3" background="/images/image_19.png"></td>
      </tr>
    </table>
    </td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="39" alt=""></td>
        </tr>
        <tr>
    
          <td colspan="3"><table width="195" height="27" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/image_20.png"></td>
            </tr>
          </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="27" alt=""></td>
        </tr>
        <tr>
    
          <td colspan="13"><table width="840" height="701" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td bgcolor="#FFFFFF"><a href="test.html">testt</a></td>
            </tr>
          </table></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="701" alt=""></td>
    	  </tr>
    
        <tr>
          <td colspan="13">
            <img src="images/image_22.png" width="840" height="62" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="1" height="62" alt=""></td>
    	  </tr>
        <tr>
          <td>
            <img src="images/spacer.gif" width="255" height="1" alt=""></td>
    
    	    <td>
    		    <img src="images/spacer.gif" width="29" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="72" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="116" height="1" alt=""></td>
    	    <td>
    
    		    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="62" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="9" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="137" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="49" height="1" alt=""></td>
    
    	    <td>
    		    <img src="images/spacer.gif" width="3" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="80" height="1" alt=""></td>
    	    <td>
    		    <img src="images/spacer.gif" width="20" height="1" alt=""></td>
    	    <td></td>
    	  </tr>
      </table>
    
    </div>
    </body>
    </html>

  • #10
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    I just found out that when I delete jQuery mouseover on the logo, everything lines up perfectly, but there's a little glitch in it's place. I think this is the error that is pushing all of the tables and distorting the design.

    Here's a screenshot of what it looks like when I temporarily remove it: Any ideas?


  •  

    Posting Permissions

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