HTMLHelp Forums > Looks great on chrome! Not so much on Firefox

Full Version: Looks great on chrome! Not so much on Firefox

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

Soggydoughnuts

May 15 2012, 07:18 PM

This is giving me headaches please help me out. I am very novice when it comes to HTML or any web design, I usually just do the graphics.
(Yes it is for a church, ignore the content if it is offensive to you, or you don't agree with it, please just focus on the html)

Website:
http://www.thebridgebiblechurch.com/ministries/jr--high

It looks great on chrome, all aligned etc. Then on Firefox it is all off to the side. Here is the HTML please help me out.

CODE

<table id="Table_01" width="580" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="6" width="580" height="11"> </td>
</tr>
<tr>
<td style="text-align: center;" colspan="6" width="580" height="26"> <a href="#what">What is Axis?</a>  |  <a href="#who">Who can go?</a>  |  <a href="__73__">Events</a>  |  <a href="__115__">Parent Resources</a>  |  <a class="external" title="Axis Summer Calendar 2012" href="http://dl.dropbox.com/u/2332470/axiswebimages/AxisCalendar2012.pdf">Calendar</a>  </td>
</tr>
<tr>
<td rowspan="5" colspan="2" width="277" height="174"> <img src="http://s3.amazonaws.com/churchplantmedia-cms/thebridgebiblechurch/axis-logo-3-2-modified.png" alt="Axis Logo 3-2 Modified" width="250" data-attribute="25" /></td>
<td colspan="4" width="303" height="40"> </td>
</tr>
<tr>
<td rowspan="4" width="40" height="134"> </td>
<td><a href="https://www.facebook.com/Axisbakersfield"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/facebook.png" alt="" width="215" height="42" /></a></td>
<td rowspan="2" colspan="2" width="48" height="64"> </td>
</tr>
<tr>
<td width="215" height="22"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/email.png" alt="" width="216" height="43" /></td>
</tr>
<tr>
<td colspan="2">
<script type="text/javascript" src="http://jotformpro.com/min/g=feedback2">// <![CDATA[
        new JotformFeedback({
        formId:'21357018965963',
        base:'http://jotformpro.com/',
        windowTitle:'Text Blast Sign Up',
        background:'#FFA500',
        fontColor:'#FFFFFF',
        type:false,
        height:500,
        width:700
        });
// ]]></script>
<a class="lightbox-21357018965963" style="cursor: pointer; color: blue; text-decoration: underline;"> <img src="http://dl.dropbox.com/u/2332470/axiswebimages/texts.png" alt="" width="216" height="43" /></a></td>
<td rowspan="2" width="47" height="70"> </td>
</tr>
<tr>
<td colspan="2" width="216" height="27"> </td>
</tr>
<tr>
<td colspan="6" width="580" height="15"><a href="__141__"><img src="http://dl.dropbox.com/u/2332470/BecomingSeriesBox4.png" alt="" /></a><a href="__73__"><img src="http://dl.dropbox.com/u/2332470/upcomingevent.png" alt="" /></a></td>
</tr>
<tr>
<td colspan="2" width="277" height="1"><img src="images/spacer.gif" alt="" width="277" height="1" /></td>
<td colspan="4"><img src="images/AxisWebsite_14.jpg" alt="" width="303" height="1" /></td>
</tr>
<tr>
<td rowspan="3" width="160" height="273"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/Sidebar.jpg" alt="sidebar3" /></td>
<td colspan="5" width="300" height="36"><a id="what" name="what"></a> <img src="http://dl.dropbox.com/u/2332470/axiswebimages/whatis.png" alt="" />
<p>Axis is the Junior High Ministry here at The Bridge Bible Church. We are called Axis because we strive to be constantly revolving around Jesus. We meet on Sunday Nights where we have games, worship, and a lesson straight from God’s Word. </p>
<p>We strongly encourage you to come and meet students your own age and get plugged into our church. During certain times of the year we also offer girls and guys small groups that meet on various nights at different leader’s homes other events over the year include Hume Lake Summer Camp, small groups, beach trips, service projects, and other various fun activites! Please check out our calendar for locations and times of our next meeting! </p>
</td>
</tr>
<tr>
<td colspan="5" width="396" height="39"><a id="who" name="who"></a> <img src="http://dl.dropbox.com/u/2332470/axiswebimages/whocango.png" alt="" />
<p>Axis is a Jr. High ministry so we welcome any student who is currently enrolled in the 7th or 8th grade. We love seeing new faces! Please bring your friends to come be apart of our Axis family.</p>
<h3 style="text-align: left;">FAQ</h3>
<p>Q: School just got out for summer and my student finished 6th grade is he in Jr. High now?</p>
<p>A: Yes! We graduate students at the start of summer. This also means that 8th graders are moved into high school.</p>
<p>Q: Can parents come?</p>
<p>A: Axis is geared towards the students. We encourage our students to meet new people and be themselves. Parents are invited to certain events but not all. If you have more questions please contact the Church office.</p>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="" width="184" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="93" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="40" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="215" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="47" height="1" /></td>
</tr>
</tbody>
</table>

Thank you so much!
Donuts

Darin McGrew

May 15 2012, 08:20 PM

The online tools report markup errors, although they don't look like they could cause this problem:
http://validator.w3.org/check?uri=http%3A%...ine&group=0

Your table uses width="580"

The two td elements in that row use width="160" and width="300"

There are 120 pixels unaccounted for. Different browsers will do different things.

Soggydoughnuts

May 15 2012, 09:51 PM

Thanks so much for your reply. I went through an tried to make sure everything was consistant with 580. This is what I came up with:

CODE

<table id="Table_01" width="580" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="6" width="580" height="11"> </td>
</tr>
<tr>
<td style="text-align: center;" colspan="6" width="580" height="26"> <a href="#what">What is Axis? </a> |  <a href="#who">Who can go?</a>  |  <a href="__73__">Events</a>  |  <a href="__115__">Parent Resources</a>  |  <a class="external" title="Axis Summer Calendar 2012" href="http://dl.dropbox.com/u/2332470/axiswebimages/AxisCalendar2012.pdf">Calendar</a>  </td>
</tr>
<tr>
<td rowspan="5" colspan="2" width="277" height="174"> <img src="http://s3.amazonaws.com/churchplantmedia-cms/thebridgebiblechurch/axis-logo-3-2-modified.png" alt="Axis Logo 3-2 Modified" width="250" data-attribute="25" /></td>
<td colspan="4" width="303" height="40"> </td>
</tr>
<tr>
<td rowspan="4" width="40" height="134"> </td>
<td><a href="https://www.facebook.com/Axisbakersfield"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/facebook.png" alt="" width="215" height="42" /></a></td>
<td rowspan="2" colspan="2" width="48" height="64"> </td>
</tr>
<tr>
<td width="215" height="22"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/email.png" alt="" width="216" height="43" /></td>
</tr>
<tr>
<td colspan="2">
<script type="text/javascript" src="http://jotformpro.com/min/g=feedback2">// <![CDATA[
new JotformFeedback({
formId:'21357018965963',
base:'http://jotformpro.com/',
windowTitle:'Text Blast Sign Up',
background:'#FFA500',
fontColor:'#FFFFFF',
type:false,
height:500,
width:700
});
// ]]></script>
<a class="lightbox-21357018965963" style="cursor: pointer; color: blue; text-decoration: underline;"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/texts.png" alt="" width="216" height="43" /></a></td>
<td rowspan="2" width="47" height="70"> </td>
</tr>
<tr>
<td colspan="2" width="216" height="27"> </td>
</tr>
<tr>
<td colspan="6" width="580" height="138"><a href="__141__"><img src="http://dl.dropbox.com/u/2332470/BecomingSeriesBox4.png" alt="" /></a><a href="__73__"><img src="http://dl.dropbox.com/u/2332470/upcomingevent.png" alt="" /></a></td>
</tr>
<tr>
<td rowspan="2" width="184" height="273"><img src="http://dl.dropbox.com/u/2332470/axiswebimages/Sidebar.jpg" alt="sidebar3" /></td>
<td colspan="5" width="396" height="36"><a name="what"></a> <img src="http://dl.dropbox.com/u/2332470/axiswebimages/whatis.png" alt="" />
<p>Axis is the Junior High Ministry here at The Bridge Bible Church. We are called Axis because we strive to be constantly revolving around Jesus. We meet on Sunday Nights where we have games, worship, and a lesson straight from God’s Word. </p>
<p>We strongly encourage you to come and meet students your own age and get plugged into our church. During certain times of the year we also offer girls and guys small groups that meet on various nights at different leader’s homes other events over the year include Hume Lake Summer Camp, small groups, beach trips, service projects, and other various fun activites! Please check out our calendar for locations and times of our next meeting! </p>
</td>
</tr>
<tr>
<td colspan="5" width="396" height="39"><a name="who"></a> <img src="http://dl.dropbox.com/u/2332470/axiswebimages/whocango.png" alt="" />
<p>Axis is a Jr. High ministry so we welcome any student who is currently enrolled in the 7th or 8th grade. We love seeing new faces! Please bring your friends to come be apart of our Axis family.</p>
<h3 style="text-align: left;">FAQ</h3>
<p>Q: School just got out for summer and my student finished 6th grade is he in Jr. High now?</p>
<p>A: Yes! We graduate students at the start of summer. This also means that 8th graders are moved into high school.</p>
<p>Q: Can parents come?</p>
<p>A: Axis is geared towards the students. We encourage our students to meet new people and be themselves. Parents are invited to certain events but not all. If you have more questions please contact the Church office.</p>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="" width="184" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="93" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="40" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="215" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
<td><img src="images/spacer.gif" alt="" width="47" height="1" /></td>
</tr>
</tbody>
</table>

Unfortunately it did not change the problems seen on Firefox. Any other ideas? Or something I missed?
Also something I noticed on firefox the center navigation text is centered to that weird width. Don't know if that helps.

IPB Image

-Donuts

Darin McGrew

May 16 2012, 01:26 AM

Your layout tables are too complicated for me to sort out without borders turned on, but when I turn on borders, the problem goes away.

Soggydoughnuts

May 16 2012, 01:33 AM

Well that's.... really dumb haha
Temporarily my fix will be adding .1 borders. Off course it still shows up as one in firefox, but doesn't show up in the other browsers.

Is there an easier way to go about laying it out like I have it? All I know how to do is make it in photoshop and have it export then edit from there. I know it's not perfect by any means, in fact it is probably bad.

-Donuts

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.