1. Home
  2. Forums Index
  3. Browser Side / CSS 12:34 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Div issue with firefox o.O?

         

Menekali

6:23 pm on Mar 10, 2005 (gmt 0)

10+ Year Member



Hello all! Im having a big issue with my div layer for my main content in the middle of my page. Basically in IE, it looks fine, but in FireFox, it's off a few pixels on the right. Im having a real hard time finding any solution anywhere online could ANYONE help me PLEASE?!?!?!

Heres the full code below since i can't post pics or links (my last post about this was first beign 'reviewed' then just got lost).

<HTML>
<HEAD>
<TITLE>sliced</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
body {
background: url(images/bg.gif);
}
#menu_main {
height: 0px;
width: 0%;
padding: 0 0 0 0px;
}
#menu_main li {
float: left;
margin: 0 0 0 0;
padding: 0 0 0px;
list-style-type: none;
border: none;
border-left: solid #BABABA 0px;
height: 20px;
text-decoration: none;
}

#menu_main a:link, #menu_main a:visited {
color: #000000;
float: left;
font-face: tahoma;
font-family: tahoma;
font-size: 11px;
margin: 0px;
padding: 4 10 0 10px;
line-height: 20px;
font-weight: bold;
text-decoration: none;
}

#menu_main a:link.active, #menu_main a:visited.active, #menu_main a:hover {
color: #000000;
border-bottom: 3px solid #680a3e;
}
#submenu_links a {
color: #00000;
}
#submenu_links a:hover {
color: #00000;
}
</style>
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (sliced.psd) -->
<div align="center"><br><br>
<TABLE WIDTH=763 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/sliced_01.jpg" WIDTH=763 HEIGHT=102 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=102 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/sliced_02.gif" WIDTH=763 HEIGHT=7 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4 background="images/sliced_03.jpg" WIDTH=763 HEIGHT=44>
<div style="height: 38px; padding: 2 2 2 18px; overflow: none;">
<Table>
<tr>
<td id="menu_main">
<li><a href="index.php?">Main</a></li>
<li><a href="index.php?">About</a></li>
<li><a href="index.php?">Services</a></li>

<li><a href="index.php?">Hosting</a></li>
<li><a href="index.php?">Store</a></li>
<li><a href="index.php?">Contact</a></li>
<li></li>
</tr>
</td>
</table>
</div>
</TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/sliced_04.gif" WIDTH=514 HEIGHT=9 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/sliced_05.gif" WIDTH=249 HEIGHT=16 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=9 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=5 background="images/sliced_06.jpg" WIDTH=502 HEIGHT=561>

<div style="height: 508px;margin: 0 0 0 20px; overflow: auto;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus at dolor. Proin neque. In tellus enim, hendrerit eu, imperdiet at, dictum a, magna. Fusce malesuada. Fusce facilisis sagittis ligula. Donec erat erat, pharetra sed, placerat nec, consequat ut, elit. Nam aliquet. Nunc lectus. Maecenas posuere. Donec tincidunt. Ut sagittis malesuada lorem. Curabitur ut nunc a quam nonummy dapibus. Proin interdum urna. Integer ac nunc ut dolor varius auctor. Donec dolor ante, posuere in, porttitor sed, convallis vel, mauris. Donec porttitor, sem sit amet tincidunt porta, magna wisi placerat leo, non tristique arcu sapien nec felis.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas semper tincidunt pede. Vivamus dui. Proin sit amet metus hendrerit pede congue tristique. Sed tellus diam, accumsan quis, viverra vel, commodo at, eros. Donec arcu. Maecenas porttitor imperdiet leo. Aliquam bibendum viverra ante. Donec a risus vel massa vulputate blandit. Aenean gravida fringilla elit. Aenean convallis odio id leo. Pellentesque est leo, hendrerit non, blandit vel, pretium et, augue. Duis tempor. Cras id turpis. Fusce fringilla, libero sed iaculis dignissim, felis ipsum feugiat pede, ut lobortis eros nulla at purus. Maecenas commodo.
<br><br>

Pellentesque pellentesque mollis mi. Nunc imperdiet. Donec sit amet arcu ut quam hendrerit ullamcorper. Mauris vitae eros sit amet lectus facilisis sodales. Quisque aliquam. In turpis wisi, molestie sit amet, ultricies ut, ultrices eget, ligula. Nam eget mauris nec metus blandit tristique. Integer eget tellus id lacus vestibulum egestas. Sed et purus. Fusce pretium velit sed odio. Nam sagittis.
<br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In rhoncus sapien a ipsum. Nunc ultricies semper quam. Aenean faucibus eleifend dui. Ut et orci. Aliquam arcu. Quisque tempor volutpat enim. In tempus laoreet mauris. Etiam at sem. Praesent non arcu. Nulla varius. Mauris arcu libero, mattis ut, condimentum sed, porttitor vitae, tortor. Sed in elit. Fusce porttitor nisl nec elit.
<br><br>

Mauris adipiscing neque vel sapien hendrerit malesuada. Nulla ac leo. Phasellus sit amet elit eu est tincidunt posuere. Proin sit amet eros at neque molestie volutpat. Sed dictum sapien a tortor. In congue. Praesent tincidunt. Proin malesuada lectus quis ipsum. Sed faucibus. Aenean et diam. Aliquam eu lacus. Aliquam elit neque, hendrerit non, fermentum sit amet, molestie molestie, erat. Morbi vitae tortor vitae enim facilisis tristique. Aenean risus arcu, euismod quis, bibendum eu, sodales sed, libero. Etiam sagittis, leo ac placerat venenatis, augue sapien tempor sem, eu porttitor mi risus nec nibh. Aliquam orci massa, dignissim sed, lobortis a, interdum sed, tortor. Proin et neque ut quam facilisis iaculis. Fusce eros dui, molestie sed, aliquet et, ullamcorper vitae, eros. Donec dignissim rutrum orci.
Generated 5 paragraphs, 428 words, 2857 bytes of Lorem Ips

</div>
</TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/sliced_07.gif" WIDTH=159 HEIGHT=63 ALT=""></TD>
<TD>
<IMG SRC="images/sliced_08.jpg" WIDTH=90 HEIGHT=63 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=63 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/sliced_09.gif" WIDTH=20 HEIGHT=491 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="images/sliced_10.jpg" WIDTH=229 HEIGHT=263 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=263 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/sliced_11.gif" WIDTH=229 HEIGHT=9 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=9 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2 background="images/sliced_12.jpg" WIDTH=215 HEIGHT=219>

<div style="height: 180px; padding: 10 5 10 10px; overflow: auto;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus at dolor. Proin neque. In tellus enim, hendrerit eu, imperdiet at, dictum a, magna. Fusce malesuada. Fusce facilisis sagittis ligula. Donec erat erat, pharetra sed, placerat nec, consequat ut, elit. Nam aliquet. Nunc lectus. Maecenas posuere. Donec tincidunt. Ut sagittis malesuada lorem. Curabitur ut nunc a quam nonummy dapibus. Proin interdum urna. Integer ac nunc ut dolor varius auctor. Donec dolor ante, posuere in, porttitor sed, convallis vel, mauris. Donec porttitor, sem sit amet tincidunt porta, magna wisi placerat leo, non tristique arcu sapien nec felis.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas semper tincidunt pede. Vivamus dui. Proin sit amet metus hendrerit pede congue tristique. Sed tellus diam, accumsan quis, viverra vel, commodo at, eros. Donec arcu. Maecenas porttitor imperdiet leo. Aliquam bibendum viverra ante. Donec a risus vel massa vulputate blandit. Aenean gravida fringilla elit. Aenean convallis odio id leo. Pellentesque est leo, hendrerit non, blandit vel, pretium et, augue. Duis tempor. Cras id turpis. Fusce fringilla, libero sed iaculis dignissim, felis ipsum feugiat pede, ut lobortis eros nulla at purus. Maecenas commodo.
<br><br>
</div>

</TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=219 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/sliced_13.gif" WIDTH=763 HEIGHT=7 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/sliced_14.jpg" WIDTH=763 HEIGHT=64 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=64 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=514 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=139 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=90 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

zollerwagner

7:35 pm on Mar 10, 2005 (gmt 0)

10+ Year Member



Sounds like you've run into the IE 3px jog bug. Search on that in the forum. Suzy has written about it. The problem is probably actually in IE and not Firefox.

It's usually a good idea to design using Firefox to test, and then check with IE and add bug fixes.

If you're going for a pixel perfect design, you'll have more trouble, but there are workarounds.

Good luck!

zollerwagner

7:39 pm on Mar 10, 2005 (gmt 0)

10+ Year Member



Hmm. Reading your message a little more carefully, I see that you've got positioning and tables. I don't konw what the relationship will be between divs and tables, but I'd guess that it'd be impossible to get all browsers to treat the layout exactly the same.

Couldn't you eliminate the tables and use a background image? I can't see what your intentions are, but that sliced image might be old school design.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:34 am May 2, 2026