#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    46
    Rep Power
    16

    Div shifting right in Firefox and Safari


    Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots



    I have also included my HTML and CSS below. Thanks for your help!

    Code:
    /* Submenu */
    .submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; }
    
    .submenu a:active,.submenu a:focus{text-decoration:underline;}
    
    .submenu ul{float:left;z-index:19; }
    
    .submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;}
    
    .submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;}
    
    .submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;}
    
    .submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;}
    
    .submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;}
    
    .submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;}
    
    .submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;}
    
    .submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;}
    
    .submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;}
    
    .grid_maindiv
    {
    	position: relative; 
    	border: 1px solid #cbc7b8; 
    	overflow: hidden; 
    	width: 105%; 
    	font-family: verdana,arial;	
    }
    
    .grid_table
    {
    	background-color: white;
    	width: 100%; 
    	font-size: 10pt;
    }
    
    .grid_table_header
    {
    	background-image: url('../media/header.png'); 
    	height: 27px; 
    	color: white; 
    	font-weight: bold; 
    	font-size: 14pt;	
    }
    
    .grid_table_resize_row
    {
    	background-image: url('../media/resize.gif'); 
    	width: 2px; 
    	margin: 0px;	
    }
    
    .grid_table_header_row
    {
    
    	background-color: #EBEADB; 
    	font-weight: bold;
    	cursor:pointer;
    	padding-left: 5px;
    	padding-bottom: 0px;
    	position: relative; 
    	height: 18px; 
    	overflow: hidden; 
    	font-size: 10px;	
    	cursor:pointer;
    	border-bottom:2px solid #cbc7b8;
    	border-top: 1px solid white;
    	border-left: 1px solid white;
    	border-right: 1px solid white;
    	margin-bottom: 0px;
    	background-image: url('../media/column.png'); 
    
    }
    
    .grid_table_header_row_hover
    {
    	font-weight: bold;
    	cursor:pointer;
    	padding-left: 5px;
    	padding-bottom: 0px;
    	position: relative; 
    	height: 18px; 
    	overflow: hidden; 
    	font-size: 10px;	
    	cursor:pointer;
    	border-top: 1px solid white;
    	border-left: 1px solid white;
    	border-right: 1px solid white;
    	margin-bottom: 0px;
    	
    	border-bottom:2px solid #f9b119;
    	background-color: #FAF9F4;
    	background-image:  url('../media/column_on.png'); 
    
    }
    
    .grid_column_resize
    {
    	cursor: e-resize; 
    	width: 2px; 
    	background-color: #cbc7b8;
    	border-bottom:2px solid #cbc7b8;
    	padding-bottom: 0px;
    	margin-bottom: 0px;
    }
    
    .grid_table_row_uneven
    {
    	background-color: #EBEADB; 
    }
    
    .grid_footer
    {
    	background-color: #f9f9f9; 
    	height: 20px; 
    	color: #616161;
    }
    
    .grid_table_cell
    {
    	padding-left: 2px; 
    	position: relative; 
    	border-bottom: 1px solid lightgray;
    	height: 28px;
    	overflow: hidden; 
    	margin: 0px; 
    	font-size: 10px;
    }


    Code:
            <body onmouseup="SetMouseDown(false);" topmargin="2">
    
    <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0"
    CELLPADDING="0">
      <TR>
        <TD WIDTH="50%">
        <FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A>&nbsp;&nbsp;&nbsp;<B>
    <A CLASS="topnav">text</A></B>&nbsp;&nbsp;&nbsp;<A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A>&nbsp;&nbsp;&nbsp;<A
        HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD> 
        <TD WIDTH="50%">
    
        <P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT
         SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> |
        <A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD> 
      </TR>
    </TABLE>
    <HR SIZE=1 COLOR="#000000" WIDTH="100%">
    <a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a>
    <br>
    
    <div class="submenu">
    	<ul>
    
    			<li><a href="view.php">Show All</a>
    </li>
    			<li><a href="view.php?trash=1">View Trash</a>
    </li>
    			<li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a>
    </li>
    			<li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a>
    </li>	
    			<li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li>	<form action="view.php" method="post">
    
    			<li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a>
    </li>	</form>
    
    	</ul>
    </div>
    
                    <div class='grid_maindiv' id="grid" width=100%>
    
    GRID
    
    </div>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    938
    Rep Power
    281
    first thing I always do is use a css reset to make all things the same across all browsers.
    I use the one @ http://meyerweb.com/eric/tools/css/reset/


    The shortcut method is to just use html{margin:0;padding:0;}
    This may help you in your endeavors.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    46
    Rep Power
    16
    Thanks for the help, it worked for FireFox! However, I'm still having the same problem with Safari. Any ideas?

IMN logo majestic logo threadwatch logo seochat tools logo