HTML - Layout Will Not Center In Firefox (fine In Ie)

I have a website hosted at discoverybyte.uuuq.com, and it is working great, except that the heading is displayed weird in IE8. It works fine on Firefox 3.5 though.

In IE8 the heading menu is indented when I prefer it not to be.

See the attached images for more help.

Please note that as of this posting the code is on my website shown above.

Any help would be appreciated.

Ok, so i worked very hard for about 4 hours to make my page valid (click). Now, i worked out everything to work in firefox and safari and then installed opera and it looks fine in that, as well as in mobile safari (for iPod Touch). But, believe it or not, when i try it in IE, everything is completely messed up. I am extremely tired of me having to go the extra mile because the idiots behind IE dont know how to make a fricken browser.

Anyways, with the rant out of the way, can anyone help me fix this up? any tips or ideas on what is causing this?

http://Flysinger.com

thanks,
-ajp

my problem is ie and its padding, ie has add a 4px padding at the bottom of the of the image but in safari and firefox there is no padding.

here is the url so u understand what i mean

http://nathanoconnor.co.uk/gilbertelectrical/site/

http://www.yandina.com/JIndex.htm

Open in Firefox, Chrome or Safari - - - that is what it is supposed to look like.

Open in IE and the last table get overlaid on top of the previous table.
What sort of things can cause that?

Additional (unrelated I think) problem, IE is not accessing cookies but others are fine.
What can cause that?

HI all,

Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders.

Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages.

HMTL attached

Any ideas?

Thanks

Hi,

In our header he http://www.weddinginvitationsandfavors.com/, to the
right of the bride and groom, please notice the 2 table cells: one with our guarantee,
and one with credit card and shipping co. logos. These display centered in the old
Firefox and IE browsers, but not the new upgrades. The table data displays in the
new Firefox as justified right, and in the new IE as justified left.

I have tried many things to center them, but have failed. Do you know how to
center them in all browsers? Here is the code...

TABLE#header TD.guarantied {
width: 22%;
font-family: Arial, sans-serif;
font-size: 10pt;
padding: 0px;
margin: 0px;
text-align: center;
vertical-align: center;
}
TABLE#header TD.guarantied IMG {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
}
TABLE#header TD.creditCards {
width: 22%;
border-right: 1px solid #000;
font-family: Arial, sans-serif;
font-size: 10pt;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
vertical-align: center;
}
TABLE#header TD.creditCards IMG {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
vertical-align: center;
}

<tr> <td class="ourphoto"><img src="http://www.weddinginvitationsandfavors.com/images/photo.jpg" alt="" /></td>
<td class="guarantied"><img src="http://www.weddinginvitationsandfavors.com/images/guarantied.jpg" alt="" />
<br />"Feel 100% content with the<br>beauty, quality and delivery<br>time of your invitations, or <br>return them for a full refund"
</td>
<td class="creditCards"><img src="http://www.weddinginvitationsandfavors.com/images/CreditCards.jpg" alt="" vspace="0" />
<img src="../../images/logos-5.jpg" alt="UPS" /><br />Worldwide shipping to U.S.,<br />Europe, Asia, Australia, etc.,<br />delivered in 4-7 business days.
</td>
</tr>
</table>

Thank you for your help,

Greg

Not a major programmer but I needed to make a website.

I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered.

In IE the tables align center on each page.

But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center.

Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem.

Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn.

Pls excuse the amateur question, but can someone please help me with this IE vs Firefox placement issue?

My problem is the vertical positioning of the text and image boxes on the left sidebar in IE (3 groups: 'Calculus 2010', 'Muse 2010', followed by a set of flash image rotations).

The layout is ideal in Firefox but there is too much spacing between the three sets in IE (between the Calculus image link and the Muse text, and between the Muse image link and the flash table). Images and code below (trimmed the code to fit this site posting max) - many thanks to anyone willing to help.

Images:





Code:
HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>


<title>Gordon International Sidebar</title>


<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" charset="iso-8859-1">
<META name="Copyright" content="Gordon_Intl_http://www.gordoninternational.com/">


<link rel="StyleSheet" href="css/common-style.css" type="text/css">
<link rel="StyleSheet" href="css/gray.css" type="text/css">
<link rel="StyleSheet" href="css/gray-menu.css" type="text/css">

<script language="JavaScript" type="text/javascript" src="css/css.js"></script>


<script language="JavaScript" type="text/javascript" src="javascripts.js"></script>
<script language="JavaScript" type="text/javascript" src="scroller/scroll.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
<!--
a:link {
	color: #FFF;
}
a:visited {
	color: #FFF;
}
a:active {
	color: #FFF;
}
-->
</style></head>
<BODY link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" class="sidebar-background2">







<!-- START CONTENT TABLE -->
<TABLE cellpadding="10" cellspacing="0" border="0" width="368" class="sidebartext"><tr>
  <td width="348" align="left" valign="top">




<p><br>
<p>Search Our Site<br>
  <script language="JavaScript" type="text/javascript" src="search.js"></script>
  
  <br>
  <a>
  <p>New Collections!<br>
    <br>
    <br>
    <a href="collection_calculus.htm" target="_parent">Calculus 2010 -</a> </p>
  <table width="93" border="0" align="left" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="picts/swf_crnr_blk_top.jpg" alt="" width="5" height="10" hspace="0" vspace="0" border="0"></td>
    <td><img src="picts/swf_brdr_hrzntl_top.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
    <td><img src="picts/swf_sqr_rght_top.jpg" alt="" width="8" height="10" hspace="0" vspace="0" border="0"></td>
  </tr>
  <tr>
    <td height="87"><img src="picts/swf_brdr_left_blk.jpg" alt="" width="5" height="87" hspace="0" vspace="0" border="0"></td>
    <td height="87" bgcolor="#FFFFFF"><a href="collection_calculus.htm" target="_parent"><img src="picts/price pics/calculus/2010_Calculus_channel_hb_sidebar.jpg" alt="Muse Collection" width="93" height="83" align="absmiddle"></a></td>
    <td height="87"><img src="picts/swf_brdr_rght.jpg" alt="" width="8" height="87" hspace="0" vspace="0" border="0"></td>
  </tr>
  <tr>
    <td><img src="picts/swf_crnr_blk_bottom.jpg" alt="" width="5" height="10" hspace="0" vspace="0"></td>
    <td><img src="picts/swf_brdr_hrzntl_bottom.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
    <td><img src="picts/swf_sqr_rght_bottom.jpg" alt="" width="8" height="10" hspace="0" vspace="0"></td>
  </tr>
</table>
  <p><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </p>
  <p>&nbsp;</p>
  <p><a href="collection_muse.htm" target="_parent">Muse 2010 -</a>
    </p>
  </p>
  <table width="93" border="0" align="left" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="picts/swf_crnr_blk_top.jpg" alt="" width="5" height="10" hspace="0" vspace="0" border="0"></td>
    <td><img src="picts/swf_brdr_hrzntl_top.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
    <td><img src="picts/swf_sqr_rght_top.jpg" alt="" width="8" height="10" hspace="0" vspace="0" border="0"></td>
  </tr>
  <tr>
    <td height="87"><img src="picts/swf_brdr_left_blk.jpg" alt="" width="5" height="87" hspace="0" vspace="0" border="0"></td>
    <td height="87" bgcolor="#FFFFFF"><a href="collection_muse.htm" target="_parent"><img src="picts/price pics/muse/muse_task_arm_sidebar.jpg" alt="Muse Collection" width="93" height="83" align="absmiddle"></a></td>
    <td height="87"><img src="picts/swf_brdr_rght.jpg" alt="" width="8" height="87" hspace="0" vspace="0" border="0"></td>
  </tr>
  <tr>
    <td><img src="picts/swf_crnr_blk_bottom.jpg" alt="" width="5" height="10" hspace="0" vspace="0"></td>
    <td><img src="picts/swf_brdr_hrzntl_bottom.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
    <td><img src="picts/swf_sqr_rght_bottom.jpg" alt="" width="8" height="10" hspace="0" vspace="0"></td>
  </tr>
</table>
  <p><br>
    </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><br>
    <br>
  </p>
    <p>
  <table width="113" height="265" border="0" align="left" cellpadding="0" cellspacing="0">
    <tr bgcolor="#223F83">
      <td width="100" height="10" bgcolor="#274082"><img src="picts/swf_crnr_blk_top.jpg" width="5" height="10"></td>
      <td width="100" height="10" bgcolor="#274082"><img src="picts/swf_brdr_hrzntl_top.jpg" width="100" height="10"></td>
      <td width="100" height="10" bgcolor="#274082"><img src="picts/swf_sqr_rght_top.jpg" alt="" width="8" height="10"></td>
    </tr>
    <tr>
      <td width="100" height="75" bgcolor="#274082"><img src="picts/swf_brdr_left_blk.jpg" width="5" height="75"></td>
      <td width="100" height="75" bgcolor="#274082"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100" height="75" hspace="0" vspace="0" align="middle" class="subtitle" id="FlashID2" title="Projects">
        <param name="movie" value="flash/quick_projects3.swf">
        <param name="quality" value="high">
        <param name="wmode" value="opaque">
        <param name="swfversion" value="6.0.65.0">
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don&rsquo;t want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf">
        <param name="SCALE" value="exactfit">
        <param name="BGCOLOR" value="#223F83">
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object data="flash/quick_projects3.swf" type="application/x-shockwave-flash" width="100" height="75" hspace="0" vspace="0" align="middle">
          <!--<![endif]-->
          <param name="quality" value="high">
          <param name="wmode" value="opaque">
          <param name="swfversion" value="6.0.65.0">
          <param name="expressinstall" value="Scripts/expressInstall.swf">
          <param name="SCALE" value="exactfit">
          <param name="BGCOLOR" value="#223F83">
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object></td>
      <td width="100" height="75" bgcolor="#274082"><img src="picts/swf_brdr_rght.jpg" width="8" height="75"></td>
    </tr>
    <tr bgcolor="#233F80">
      <td width="5" height="10"><img src="picts/swf_crnr_blk.jpg" width="5" height="10"></td>
      <td width="100" height="10" bgcolor="#274082"><img src="picts/swf_brdr_hrzntl.jpg" width="100" height="10"></td>
      <td width="8" height="10" bgcolor="#274082"><img src="picts/swf_sqr_rght.jpg" alt="" width="8" height="10"></td>
    </tr>
    <tr>
      <td width="5" height="75" bgcolor="#274082"><img src="picts/swf_brdr_left_blk.jpg" width="5" height="75"></td>

Hello everyone, The forums here are very helpful and i would like to thank everyone for posting.

My trouble is simply when I was designing the website it was done a firefox browser and everything was perfect and in the right place, When I attempted to visit the website in a IE browser the logo is out of place as well as the side navigation, It appears that the side navigation is always below the content to the right of it.

http://www.blackwidowinc.com

Any help is greatly appreciated.

Hey Guys

I have a problem when viewing my website in firefox. However, It works in opera, safari and Quanta's preview window.

I have unwanted gaps underneath buttons images that have rollovers.

Wrong:


Correct:


The code is:

Code:

 <TABLE border="0" cellpadding="0" cellspacing="0">
               <TR><TD><IMG src="images/sidebar_top.gif"></TD></TR>
               <TR><TD><IMG src="images/sidebar.gif"></TD></TR>
               <TR><TD> <!-- Home Button -->
                 <a href=""
                    onmouseout="document.btn_home.src=btn_home_nm.src"
                    onmouseover="document.btn_home.src=btn_home_hv.src" >
                    <img src="images/btn_home_nm.gif" border="0" name="btn_home">
                </a>
               </TD></TR>
               <TR><TD> <!-- Opening Times Button -->
                 <a href="" 
                    onmouseout="document.btn_opening_times.src=btn_opening_times_nm.src"
                    onmouseover="document.btn_opening_times.src=btn_opening_times_hv.src">
                    <img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times">
                </a>
               </TD></TR>

I don't get these gaps on firefox if I remove the a tag like this:

Code:

 <TABLE border="0" cellpadding="0" cellspacing="0">
               <TR><TD><IMG src="images/sidebar_top.gif"></TD></TR>
               <TR><TD><IMG src="images/sidebar.gif"></TD></TR>
               <TR><TD> <!-- Home Button -->
                 
                    <img src="images/btn_home_nm.gif" border="0" name="btn_home">
 
               </TD></TR>
               <TR><TD> <!-- Opening Times Button -->
                
                    <img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times">

               </TD></TR>

But then I don't have rollovers

Does anyone know why this happens, and why it doesn't happen on opera or safari?

Thank you

Toshi

Hello all,

I use Internet Explorer 7 which is also the browser I preview my layouts on. I've had problems with my layouts looking like they should on Firefox for the longest time and I think it's time I tried correcting the problem.

When I load my blog on Firefox the entry box overlaps with a portion of the image. The entry box's height is also too long on Firefox. I do know that coloured scrollbars don't show up on Firefox so that's not a problem. My main issue is that the basic arrangement of the boxes of my layout is completely messed up on Firefox.

Here's the HTML:

Quote:
<html>
<head>
<title>o.d.c v41: i am more than you will see.</title>

<style type="text/css">

A:link
{ text-decoration: none; font-weight: bold; color: #924146 }
A:visited
{ text-decoration: none; font-weight: bold; color: #924146 }
A:active
{ text-decoration: none; color: #000000 }
A:hover
{ text-decoration: line-through; cursor: default; color: #000000 }


body {background-color: #E6DDD0;
scrollbar-face-color: #E6DDD0;
scrollbar-highlight-color: #E6DDD0;
scrollbar-3dlight-color: #E6DDD0;
scrollbar-shadow-color: #E6DDD0;
scrollbar-arrow-color: #E6DDD0;
scrollbar-track-color: #E6DDD0;
scrollbar-darkshadow-color: #E6DDD0;
font-family: tahoma;
color: #000000;
text-align:justify;
margin: 0px;
font-size: 8pt;}

.entry
{position: absolute; top: 80px; left: 163px; width: 514px; height: 481px; border-left: 1px solid #52191D; border-right: 1px solid #52191D; border-top: 1px solid #52191D; border-bottom: 1px solid #52191D; padding: 10px; letter-spacing: 0pt; line-height: 9pt; overflow:auto; background-color: #D9B8AE;
scrollbar-face-color: #D9B8AE;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #D9B8AE;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #D9B8AE;
scrollbar-track-color: #D9B8AE;
scrollbar-darkshadow-color: #D9B8AE;}

.image
{position: absolute; top: 50px; left: 680px; border-left: 0px solid #52191D; border-right: 0px solid #52191D; border-top: 0px solid #52191D; border-bottom: 0px solid #52191D;}

.links
{position: absolute; top: 50px; left: 163px; width: 514px; height: 10px; border-left: 1px solid #52191D; border-right: 1px solid #52191D; border-top: 1px solid #52191D; border-bottom: 1px solid #52191D; padding: 6px; text-align: center; background-color:#D9B8AE;}

</style>

<script type="text/javascript" src="http://www.haloscan.com/load/tripwires"> </script>

</head>

<body>
<div class="image">
<img src="http://img.photobucket.com/albums/v628/yelen/mewithtext.jpg">
</div>

<div class="entry">
<center><font color=#BC6A6F><b><u>%%short_description%%</u></b></font></center>
<p align="right"><i>written: %%time%% on %%date%%</i></p>



<P>
%%entry%%

<P><P><P><P>
<P align="right">

<font size=1.5><a href="javascript:HaloScan('%%page_name%%');" target="_self"><script type="text/javascript">postCount('%%page_name%%');</script></a></font>
<P><P>
<p align="center"><a href="%%prev%%">previous entry</a> || <a href="%%next%%">next entry</a>

<P><center><hr width=90% noshade color=#000000 HR size="1"></center><P>

<b>
Previously:</b><br>


%%older_entries%%<P>

<br>




<P align="center">
<!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" -->
<script type="text/javascript" language="JavaScript">var site="s13cyelen"</script>
<script type="text/javascript" language="JavaScript1.2" src="http://s13.sitemeter.com/js/counter.js?site=s13cyelen">
</script>
<noscript>
<a href="http://s13.sitemeter.com/stats.asp?site=s13cyelen" target="_top">
<img src="http://s13.sitemeter.com/meter.asp?site=s13cyelen" alt="Site Meter" border=0></a>
</noscript>
<!-- Copyright (c)2002 Site Meter -->
<!--WEBBOT bot="HTMLMarkup" Endspan -->


<!-- Begin Nedstat Basic code -->
<!-- Title: like i could care -->
<!-- URL: http://offence.diaryland.com -->
<script language="JavaScript"
src="http://m1.nedstatbasic.net/basic.js">
</script>
<script language="JavaScript">
<!--
nedstatbasic("ABZB6g7C7XYY5+UwEEa7SkNbtBHg", 0);
// -->
</script>
<noscript>
<a target="_blank"
href="http://v1.nedstatbasic.net/stats?ABZB6g7C7XYY5+UwEEa7SkNbtBHg"><img
src="http://m1.nedstatbasic.net/n?id=ABZB6g7C7XYY5+UwEEa7SkNbtBHg"
border="0" nosave width="18" height="18"></a>
</noscript>
<!-- End Nedstat Basic code --><P>
</div>

<div class="links">
<a href="http://offence.diaryland.com/index.html">new</a>
<a href="http://offence.diaryland.com/older.html">old</a>
<a href="http://offence.diaryland.com/bio.html">bio</a>
<a href="http://offence.diaryland.com/omake.html">extras</a>
<a href="http://offence.diaryland.com/layout.html">layout</a>
<a href="http://members.diaryland.com/edit/notes.phtml?user=offence">notes</a>
<a href="mailto:yelen.dean14[at]gmail.com">email</a>
<a href="http://offence.diaryland.com/poetry.html">poetry</a>
<a href="http://www.fanfiction.net/~hisashilovesyelen" target="_blank">fanfiction</a>
<a href="http://www.fictionpress.com/~hisashilovesyelen" target="_blank">originals</a>
<a href="http://offence.diaryland.com/faveentries.html">favourites</a>
<a href="http://www.diaryland.com">host</a>
</div>

</body>
</html>

Here's the link to my blog: http://offence.diaryland.com

I have VERY basic knowledge of HTML, as I'm sure is obvious. Any help is, therefore, greatly appreciated.

hey guys,

i am working for a few hours on my website project (design part), but still don't get it work correctly.

This is what it should look like: http://www.jarisch.net/faz/img/4_5.png

And this is the current version: http://www.jarisch.net/faz

how can i prevent firefox and opera from making spaces between some images as well as from making spaces between the outer images and the borders (top and bottom)?

thanks a lot..

amoun

Hi I am very new to website design and html code therefore I cannot spot what may be a very simple error in my webpage code.

The page in question is http://www.stephanieholmes.co.uk/videos.html

I have made the page in dreamweaver. The content is layed out in a table 7x8 with the two outer column's rows merged to contain the left and right floral border. However, in Firefox the centre columns are displaced vertically, but this problem does not occur in IE which confuses me. Please help!

Hey all,

I'm new here and I have a website i designed.
The page appears fine when i go to IE but it's all messed up when I view it using Mozilla.
I'm stumped.

This is my website:
www.secondhandoffroad.com


Thanks,