Welcome to Dream.In.Code
Become an Expert!

Join 149,521 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,388 people online right now. Registration is fast and FREE... Join Now!




Firefox Internet Explorer compatiblity issue

 
Reply to this topicStart new topic

Firefox Internet Explorer compatiblity issue

TMedia
30 May, 2007 - 11:13 AM
Post #1

New D.I.C Head
*

Joined: 30 May, 2007
Posts: 2


My Contributions
if you go to this site

http://www.bridalclassics.ca

and click on any of the categories you will be brought to a spalsh page for the section, this splash page (ie http://www.bridalclassics.ca/BridalClassic...ces/index1.htm)
displays FINE in internet explorer, but for some reason it does not in Firefox, I have tried making tables and cells in percent rather then in pixels.

I know its a simple fix ( relatively ) Can someone tell me why it looks all scattered and how I can fix this please.

here is the code for the above link (but by all means you can view source on the website)

CODE

<body background="../Images/Background/imgBackgroundShowroomSub.jpg">

<div align="center">
    <table border="0" cellspacing="0" width="100%" height="272">
        <tr>
            <td colspan="3" height="43">
            <p align="center">
            <img border="0" src="../Images/Main/imgMarquiseEliteJewellery.gif" width="595" height="42"></td>
        </tr>
        <tr>
                    <td colspan="3" height="35" valign="top">
            <p align="center">
            <a onmouseover="pic1.src='../Images/Buttons/imgHomeGif.gif'" onmouseout="pic1.src='../Images/Buttons/imgHome.jpg'" href="../Canada/showroom.htm">
            <img name="pic1" src="../Images/Buttons/imgHome.jpg" width="69" height="26" border = "0"></a><a onmouseover="pic2.src='../Images/Buttons/imgAboutGif.gif'" onmouseout="pic2.src='../Images/Buttons/imgAbout.jpg'" href="../About/about.htm"><img name="pic2" src="../Images/Buttons/imgAbout.jpg" width="68" height="26" border = "0"></a><a onmouseover="pic3.src='../Images/Buttons/imgStoreLocatorGif.gif'" onmouseout="pic3.src='../Images/Buttons/imgStoreLocator.jpg'" href="../Locate/locate.htm"><img name="pic3" src="../Images/Buttons/imgStoreLocator.jpg" width="129" height="26" border = "0"></a><a onmouseover="pic4.src='../Images/Buttons/imgWholesalersGif.gif'" onmouseout="pic4.src='../Images/Buttons/imgWholesalers.jpg'" href="../Wholesalers/wholesalers.htm"><img name="pic4" src="../Images/Buttons/imgWholesalers.jpg" width="122" height="26" border = "0"></a>
                                
            </td>
        </tr>
        <tr>
            <td colspan="3" height="10">
            <p align="center">
            <img name="nextleft"border="0" src="../Images/Buttons/imgNextLeft.jpg" width="30" height="26">
            <img border="0" src="../Images/Buttons/imgPage1c.gif" width="30" height="26">
            
            <a onmouseover="page2.src='../Images/Buttons/imgPage2b.gif'" onmouseout="page2.src='../Images/Buttons/imgPage2a.gif'" href="../MarquiseEliteJewellery/index2.htm">
            <img name="page2" border="0" src="../Images/Buttons/imgPage2a.gif" width="30" height="26"></a>
            
            
            <a onmouseover="page3.src='../Images/Buttons/imgPage3b.gif'"
            onmouseout="page3.src='../Images/Buttons/imgPage3a.gif'"href="index3.htm">
            <img name="page3" border="0" src="../Images/Buttons/imgPage3a.gif" width="30" height="26"></a>

            <a onmouseover="page4.src='../Images/Buttons/imgPage4b.gif'"
            onmouseout="page4.src='../Images/Buttons/imgPage4a.gif'"href="index4.htm">
            <img name="page4" border="0" src="../Images/Buttons/imgPage4a.gif" width="30" height="26"></a>
            
            <a onmouseover="page5.src='../Images/Buttons/imgPage5b.gif'"
            onmouseout="page5.src='../Images/Buttons/imgPage5a.gif'"href="index5.htm">
            <img name="page5" border="0" src="../Images/Buttons/imgPage5a.gif" width="30" height="26"></a> 
            <a onmouseover="nextRight.src='../Images/Buttons/imgNextRightGif.gif'" onmouseout="nextRight.src='../Images/Buttons/imgNextRight.jpg'" href="../MarquiseEliteJewellery/index2.htm">
            <img name="nextRight"border="0" src="../Images/Buttons/imgNextRight.jpg" width="30" height="26"></a>
        </tr>
        <tr>
            <td height="10" width="2%">
        </tr>
            <td height="10" width="96%" style="border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px">
        </tr>
            <td height="10" width="2%">
        </tr>
        <tr>
            <td width="2%">
             </tr>
            <td width="96%" style="border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px" valign="top">
            <font size="2"> </font>Our Marquise Elite Jewellery is of the
            finest silver plated jewellery you can find on the market today. 
            This entire collection comes packaged in their very own velvet
            lined, hinged jewellery box, which makes traveling or storing safe
            and easy.  All these items are built using genuine Austrian Crystal
            or Cubic Zirconia.  Most of these items also carry a <b><u>Life Time
            Plating Guarantee</u></b>, this means they will never tarnish and
            will be sparkling new for years to come!</tr>
            <td width="2%">
             </tr>
        </table>
</div>
<div align="center">
    <table border="0" cellspacing="0" width="100%">
        <tr>
            <td height="4" width="18%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
            <p align="center">
            



            </a>
            <a target="_blank" href="../Images/Original/marquise_elite_jewellery/me_57.jpg">
            <img border="0" src="../Images/Thumbnails/marquise_elite_jewellery/me_57.gif" width="105" height="110"></a></tr>
            <td height="4" width="1%" align="center">
            <img border="0" src="../Images/Main/imgVerticalSpacer100pixels.gif" width="3" height="100"></tr>
            <td height="4" width="17%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
            <p align="center">
            <a target="_blank" href="../Images/Original/marquise_elite_jewellery/me_53.jpg">
            <img border="0" src="../Images/Thumbnails/marquise_elite_jewellery/me_53.gif" width="105" height="110"></a></tr>
            <td height="4" width="1%" align="center">
            <img border="0" src="../Images/Main/imgVerticalSpacer100pixels.gif" width="3" height="100"></tr>
            <td height="4" width="19%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
            <a target="_blank" href="../Images/Original/marquise_elite_jewellery/me_67_cl_sv.jpg">
            <img border="0" src="../Images/Thumbnails/marquise_elite_jewellery/me_67_cl_sv.gif" width="108" height="110"></a></tr>
            <td height="4" width="1%" align="center">
            <img border="0" src="../Images/Main/imgVerticalSpacer100pixels.gif" width="3" height="100"></tr>
            <td height="4" width="21%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
            <a target="_blank" href="../Images/Original/marquise_elite_jewellery/me_73.jpg">
            <img border="0" src="../Images/Thumbnails/marquise_elite_jewellery/me_73.gif" width="107" height="110"></a></tr>
            <td height="4" width="1%" align="center">
            <img border="0" src="../Images/Main/imgVerticalSpacer100pixels.gif" width="3" height="100"></tr>
            <td height="4" width="14%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
            <a target="_blank" href="../Images/Original/marquise_elite_jewellery/me_42.jpg">
            <img border="0" src="../Images/Thumbnails/marquise_elite_jewellery/me_42.gif" width="107" height="110"></a></tr>
        </tr>
        <tr>
            <td height="4" width="18%" bgcolor="#A5C4FA" align="center">
            <font face="Arial">ME-57</font></tr>
            <td height="4" width="1%" align="center">
        </tr>
            <td height="4" width="17%" bgcolor="#A5C4FA" align="center">
            <font face="Arial">ME-53</font></tr>
            <td height="4" width="1%" align="center">
        </tr>
            <td height="4" width="19%" bgcolor="#A5C4FA" align="center">
            <font face="Arial">ME-67-Cl-Sv</font></tr>
            <td height="4" width="1%" align="center">
        </tr>
            <td height="4" width="21%" bgcolor="#A5C4FA" align="center">
            <font face="Arial">ME-73</font></tr>
            <td height="4" width="1%" align="center">
        </tr>
            <td height="4" width="14%" bgcolor="#A5C4FA" align="center">
            <font face="Arial">ME-42</font></tr>
        </tr>
    </table>
</div>

</body>

User is offlineProfile CardPM
+Quote Post

capty99
RE: Firefox Internet Explorer Compatiblity Issue
30 May, 2007 - 02:26 PM
Post #2

the real kya
Group Icon

Joined: 26 Apr, 2001
Posts: 9,252



Thanked: 16 times
Dream Kudos: 550
My Contributions
that link there gave me a 404. the 2nd one.

its most likely due to the fact tables are outdated , and support cross-browser is vastly different.
User is offlineProfile CardPM
+Quote Post

Oaty
RE: Firefox Internet Explorer Compatiblity Issue
30 May, 2007 - 07:26 PM
Post #3

New D.I.C Head
*

Joined: 10 May, 2007
Posts: 28


My Contributions
Ok TMedia,
After looking at your source and grabbing another beer I'm ready to help.

First off, if you make alot of glaring errors in your HTML IE is more forgiving and tries the best it can to display what it thinks you meant. Firefox is less forgiving, wrong HTML produces a wrong looking webpage.

So lets correct some glaring errors! (Note to others: I'm not going to mention doctypes, css, xhtml or any other "advanced" topics.) I'm also writing this as I debug it so forgive any ramblings.
You Have:
CODE

<div align="center">
     <table border="0" cellspacing="0" width="100%">
        <tr>
           <td height="4" width="18%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
           <p align="center">
    
            <a target="_blank" href="../Images/Original/tiaras/t_827_silver.jpg">
            <img border="0" src="../Images/Thumbnails/tiaras/t_827_silver.gif" width="140" height="67"></a></a></tr>

Do you notice that you are not closing the td tag? Some browsers like IE will let you get away without closing it. BAD HTML tutorials and books say it's optional. Always close your td tags! Second, You have an extra closing anchor tag, get rid of it.

Next you start a new cell but you didn't start a new row! Based on what IE showed me I'm guessing you want the pics beside each other, so above remove the ending tr tag because you probably only wanted to end the column with a close td and not a tr. Also get rid of the p tags within the cell, you're really not using them and they're just one more thing to be misinterpreted.

After looking at the rest of your code I think you biggest problem is you have ending tr tags where you should be having ending td tags. Fix those errors first then come back if you're still having trouble.



User is offlineProfile CardPM
+Quote Post

TMedia
RE: Firefox Internet Explorer Compatiblity Issue
3 Jun, 2007 - 07:22 PM
Post #4

New D.I.C Head
*

Joined: 30 May, 2007
Posts: 2


My Contributions
QUOTE(Oaty @ 30 May, 2007 - 08:26 PM) *

Ok TMedia,
After looking at your source and grabbing another beer I'm ready to help.

First off, if you make alot of glaring errors in your HTML IE is more forgiving and tries the best it can to display what it thinks you meant. Firefox is less forgiving, wrong HTML produces a wrong looking webpage.

So lets correct some glaring errors! (Note to others: I'm not going to mention doctypes, css, xhtml or any other "advanced" topics.) I'm also writing this as I debug it so forgive any ramblings.
You Have:
CODE

<div align="center">
     <table border="0" cellspacing="0" width="100%">
        <tr>
           <td height="4" width="18%" align="center" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
           <p align="center">
    
            <a target="_blank" href="../Images/Original/tiaras/t_827_silver.jpg">
            <img border="0" src="../Images/Thumbnails/tiaras/t_827_silver.gif" width="140" height="67"></a></a></tr>

Do you notice that you are not closing the td tag? Some browsers like IE will let you get away without closing it. BAD HTML tutorials and books say it's optional. Always close your td tags! Second, You have an extra closing anchor tag, get rid of it.

Next you start a new cell but you didn't start a new row! Based on what IE showed me I'm guessing you want the pics beside each other, so above remove the ending tr tag because you probably only wanted to end the column with a close td and not a tr. Also get rid of the p tags within the cell, you're really not using them and they're just one more thing to be misinterpreted.

After looking at the rest of your code I think you biggest problem is you have ending tr tags where you should be having ending td tags. Fix those errors first then come back if you're still having trouble.



Thank you so much for your quick reply I will try this tomorrow for I am hammered right now! THANKS AGAIN!
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 08:30PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month