What's Here?
Members: 300,344
Replies: 825,704
Topics: 137,403
Snippets: 4,417
Tutorials: 1,147
Total Online: 1,571
Members: 113
Guests: 1,458
Loading. Please Wait...
Website displays correctly in IE, but not FF or Safari
Website displays correctly in IE, but not FF or Safari
ngoel36
26 Jun, 2009 - 07:35 AM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
So I have recently developed my website for my restaurant using a combination of Microsoft Expression Web and hand HTML coding. It looks PERFECT in all versions of Internet Explorer. However, the design gets completely shifted, resulting in the page looking terrible in Firefox.
The site is
http://www.littlerosiestaqueria.com .
Would any of you have a minute to please check out the code and see if there are any obvious fixes that I may have missed? I am not well versed in the nuances between browsers for developers. Thanks!!
ngoel36
RE: Website Displays Correctly In IE, But Not FF Or Safari 26 Jun, 2009 - 07:46 AM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
So I have recently developed my website for my restaurant using a combination of Microsoft Expression Web and hand HTML coding. It looks PERFECT in all versions of Internet Explorer. However, the design gets completely shifted, resulting in the page looking terrible in Firefox.
The site is
http://www.littlerosiestaqueria.com .
Would any of you have a minute to please check out the code and see if there are any obvious fixes that I may have missed? I am not well versed in the nuances between browsers for developers. Thanks!!
hadi_php
RE: Website Displays Correctly In IE, But Not FF Or Safari 26 Jun, 2009 - 10:40 AM
D.I.C Regular
Joined: 23 Aug, 2008
Posts: 259
Thanked: 5 times
My Contributions
try this code for home page
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <!-- #BeginTemplate "master.dwt" --> <head> <meta name="description" content="Huntsville, AL. Menus, Hours, Catering Form, and Location & Directions. Now serving breakfast from 6:30 AM!"> <meta name="keywords" content="Little Rosie's, Rosie's, Mexican Taqueria, Taqueria, Taqeria, Mexican food, Huntsville, Alabama, Buffalo Wrap, Huntsville Mexican, Tex-Mex, margaritas, southwestern food, queso, chips & queso, burritos, tacos, chips, quesadillas, breakfast tacos, breakfast quesadillas, Mexican breakfast platters"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- #BeginEditable "doctitle" --> <title>Little Rosie's Mexican Taqueria - Honest Handmade Tex-Mex Cusine - Huntsville, Alabama</title> <style type="text/css"> .style8 { border-color: #F1AB3D; border-width: 1px; } .style10 { text-align: center; border: 2px solid #F1AB3D; } .style11 { text-align: left; border: 2px solid #EF8040; } .style12 { text-align: center; border: 5px solid #EF8040; background-color: #000099; } .style16 { text-align: center; border: 2px solid #FF9966; background-color: #008000; } .style17 { color: #F28346; } .style18 { font-family: "Arial Rounded MT Bold"; } .style19 { border-width: 0px; } .style20 { border-color: #F1AB3D; border-width: 1px; margin-top: 130; } #footer { clear: both; width: 740px; height: 30px; background: #458023; line-height: 30px; vertical-align: middle; text-align: right; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } </style> <!-- #EndEditable --> <link rel="stylesheet" type="text/css" title="CSS" href="styles/style1.css" media="screen" /> <style type="text/css"> .style1 { text-align: center; font-family: "Arial Rounded MT Bold"; } .style2 { font-size: large; color: #FFFFFF; text-decoration: underline overline; font-variant: normal; text-transform: uppercase; } .style4 { text-align: center; text-decoration: underline; font-size: 14px; color: #FF9966; font-family: "Arial Rounded MT Bold"; font-weight: normal; } .style5 { text-align: center; text-decoration: underline; font-size: 15px; color: #FF9966; font-family: "Arial Rounded MT Bold"; } .style6 { margin-right: 53px; font-weight: normal; text-transform: none; } .style7 { font-family: "Arial Rounded MT Bold"; font-weight: bold; text-transform: uppercase; font-variant: normal; color: #FF6699; } .style8 { margin-top: 130; } .style9 { text-align: center; } </style> <bgsound src="Music/suerte.mp3" loop="-1" /> </head> <body style="background-color: #BEBEBE"> <!-- Begin Container --> <div id="container" style="width: 764px"> <!-- Begin Masthead --> <div id="masthead" style="width: 752px; height: 233px;" class="style1"> <br /> <br /> <br /> <span class="style7"><a href="index.html">Home</a></span><br /> <a href="Food/food.htm">Food</a><br /> <a href="Location/location.htm">Location</a><br /> <a href="Contact/contactus.htm">Contact Us</a><br /> <br /> </div> <br /> <!-- Begin Page Content --> <div id="page_content"> <!-- Begin Sidebar --> <div id="sidebar" class="style8" style="left: 4px; top: -18px"> <ul> <div class="style1"> <strong><span class="style2">MENU<br /> </span></strong> </div> <div class="style4"> <strong>Breakfast<br /> (6:30-10:30 AM)<br /> </strong></div> <li><a href="Food/Breakfast/softbreakfasttacos.htm">Soft Breakfast Tacos</a></li> <li><a href="Food/Breakfast/breakfastquesadillas.htm">Quesadillas</a></li> <li><a href="Food/Breakfast/mexicanbreakfastplatters.htm">Mexican Breakfast Platters</a></li> <li><a href="Food/Breakfast/sweetsandsides.htm">Sweets & Sides</a></li> <li><a href="Food/Breakfast/beverages.htm">Beverages</a></li> <div class="style5"> <strong><br /> Lunch & Dinner<br /> </strong></div> <a href="Food/LunchandDinner/combos.htm"> <div class="style9"> ~COMBOS~</div> </a><a href="Food/LunchandDinner/plates.htm"> <div class="style9"> ~PLATES~</div> </a> <li><a href="Food/LunchandDinner/tacos.htm">Tacos</a></li> <li><a href="Food/LunchandDinner/burritosandwraps.htm">Burritos & Wraps</a></li> <li><a href="Food/LunchandDinner/quesadillas.htm">Quesadillas</a></li> <li><a href="Food/LunchandDinner/saladsandchalupas.htm">Salads & Chalupas </a></li> <li><a href="Food/LunchandDinner/kidsmeals.htm">Kids Meals</a></li> <li><a href="Food/LunchandDinner/chipssidesanddesserts.htm">Chips, Sides, & Desserts</a></li> <li><a href="Food/LunchandDinner/drinks.htm">Drinks</a></li><br/> <div class="style4"> <strong>Printable Menu<br /> </strong></div> <li><a href="PrintableMenu/printablemenubreakfast.htm">Breakfast</a></li> <li><a href="PrintableMenu/printablemenulunchanddinner.htm">Lunch & Dinner</a></li> <li><a href="PrintableMenu/cateringorderform.htm">Catering Order Form</a></li> </ul> </div> <!-- End Sidebar --> <!-- Begin Content --> <!-- End Content --> <div id="content" style="left: 165px; top: -600px; width: 586px; "> <!-- #BeginEditable "content" --> <table style="width: 100%; height: 143px;" class="style20" id="foodname"> <tr> <td style="height: 28px;" class="style10" colspan="2"> <span class="Header1big2">LITTLE ROSIE'S MEXICAN TAQUERIA</span></td> </tr> <tr> <td class="style11" valign="top" rowspan="2" style="width: 330px"> <span class="style18">Honest Handmade Tex-Mex Cuisine!</span><br /> <br /> <p> <img alt="Little Rosie's Mexican Taqueria Huntsville Alabama" src="building.jpg" width="331" height="218" id="img2" /><br /> <span class="Text2"><br /> Mexican cuisine enjoys a great reputation among all ethnic foods in the world. It has an uncanny charm, and those who try it, find it rich in taste and flavor.<br /> <br /> <span class="style17"> </span> Special recipes were developed with quality and authenticity in mind, influenced by the rich Mexican heritage we love so much. Our hope is that you enjoy these dishes and agree with us that real Mexican foods are some of the most delicious and flavorful in the world. We welcome your comments.</span><br /> <br /> </td> <td class="style12" valign="top"> <a href="Food/food.htm"> <img alt="Walke up to breakfast at Little Rosies. We serve breakfast quesadillas, tacos, and mexican breakfast platters!" src="adbreakfast.jpg" width="224" height="337" class="style19" /></a></td> </tr> <tr> <td class="style16" valign="top"> <a href="PrintableMenu/cateringorderform.htm"> <img alt="We Cater! Click here for a catering menu!" src="adcatering.jpg" width="190" height="190" class="style19" /></a></td> </tr> </table></p> <!-- #EndEditable --></div> </div> <!-- End Page Content --> <!-- Begin Footer --> <div id="footer"> <p>Copyright © 2007 by Little Rosie's Mexican Taqueria. Contact the <a href="mailto:webmaster@littlerosiestaqueria.com?subject=Little Rosie's Webmaster"> Webmaster</a>.<br/>All prices and menu items are subject to change.</p> </div> <!-- End Footer --> <!-- End Container --></div> </body> <!-- #EndTemplate --> </html>
ngoel36
RE: Website Displays Correctly In IE, But Not FF Or Safari 27 Jun, 2009 - 08:23 PM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
QUOTE(hadi_php @ 26 Jun, 2009 - 10:49 AM)
it will look like this...
click me to see Ok well, first of all, what exactly did you alter in the code? Second, will implementing that change make it look just like the IE version?
Thanks!
hadi_php
RE: Website Displays Correctly In IE, But Not FF Or Safari 28 Jun, 2009 - 05:26 AM
D.I.C Regular
Joined: 23 Aug, 2008
Posts: 259
Thanked: 5 times
My Contributions
now use this code it is better than previous
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <!-- #BeginTemplate "master.dwt" --> <head> <meta name="description" content="Huntsville, AL. Menus, Hours, Catering Form, and Location & Directions. Now serving breakfast from 6:30 AM!"> <meta name="keywords" content="Little Rosie's, Rosie's, Mexican Taqueria, Taqueria, Taqeria, Mexican food, Huntsville, Alabama, Buffalo Wrap, Huntsville Mexican, Tex-Mex, margaritas, southwestern food, queso, chips & queso, burritos, tacos, chips, quesadillas, breakfast tacos, breakfast quesadillas, Mexican breakfast platters"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- #BeginEditable "doctitle" --> <title>Little Rosie's Mexican Taqueria - Honest Handmade Tex-Mex Cusine - Huntsville, Alabama</title> <style type="text/css"> .style8 { border-color: #F1AB3D; border-width: 1px; } .style10 { text-align: center; border: 2px solid #F1AB3D; } .style11 { text-align: left; border: 2px solid #EF8040; } .style12 { text-align: center; border: 5px solid #EF8040; background-color: #000099; } .style16 { text-align: center; border: 2px solid #FF9966; background-color: #008000; } .style17 { color: #F28346; } .style18 { font-family: "Arial Rounded MT Bold"; } .style19 { border-width: 0px; } .style20 { border-color: #F1AB3D; border-width: 1px; margin-top: 130; } p {line-height: 20px; padding: 0 10px 10px 10px; color: #FFF;} </style> <!-- #EndEditable --> <link rel="stylesheet" type="text/css" title="CSS" href="styles/style1.css" media="screen" /> <style type="text/css"> .style1 { text-align: center; font-family: "Arial Rounded MT Bold"; } .style2 { font-size: large; color: #FFFFFF; text-decoration: underline overline; font-variant: normal; text-transform: uppercase; } .style4 { text-align: center; text-decoration: underline; font-size: 14px; color: #FF9966; font-family: "Arial Rounded MT Bold"; font-weight: normal; } .style5 { text-align: center; text-decoration: underline; font-size: 15px; color: #FF9966; font-family: "Arial Rounded MT Bold"; } .style6 { margin-right: 53px; font-weight: normal; text-transform: none; } .style7 { font-family: "Arial Rounded MT Bold"; font-weight: bold; text-transform: uppercase; font-variant: normal; color: #FF6699; } .style8 { margin-top: 130; } .style9 { text-align: center; } </style> <bgsound src="Music/suerte.mp3" loop="-1" /> </head> <body style="background-color: #BEBEBE"> <!-- Begin Container --> <div id="container" style="width: 764px" class="style6"> <!-- Begin Masthead --> <div id="masthead" style="width: 752px; height: 233px;" class="style1"> <br /> <br /> <br /> <span class="style7"><a href="index.html">Home</a></span><br /> <a href="Food/food.htm">Food</a><br /> <a href="Location/location.htm">Location</a><br /> <a href="Contact/contactus.htm">Contact Us</a><br /> <br /> </div> <br /> <!-- Begin Page Content --> <div id="page_content"> <!-- Begin Sidebar --> <div id="sidebar" class="style8" style="left: 4px; top: -18px"> <ul> <div class="style1"> <strong><span class="style2">MENU<br /> </span></strong> </div> <div class="style4"> <strong>Breakfast<br /> (6:30-10:30 AM)<br /> </strong></div> <li><a href="Food/Breakfast/softbreakfasttacos.htm">Soft Breakfast Tacos</a></li> <li><a href="Food/Breakfast/breakfastquesadillas.htm">Quesadillas</a></li> <li><a href="Food/Breakfast/mexicanbreakfastplatters.htm">Mexican Breakfast Platters</a></li> <li><a href="Food/Breakfast/sweetsandsides.htm">Sweets & Sides</a></li> <li><a href="Food/Breakfast/beverages.htm">Beverages</a></li> <div class="style5"> <strong><br /> Lunch & Dinner<br /> </strong></div> <a href="Food/LunchandDinner/combos.htm"> <div class="style9"> ~COMBOS~</div> </a><a href="Food/LunchandDinner/plates.htm"> <div class="style9"> ~PLATES~</div> </a> <li><a href="Food/LunchandDinner/tacos.htm">Tacos</a></li> <li><a href="Food/LunchandDinner/burritosandwraps.htm">Burritos & Wraps</a></li> <li><a href="Food/LunchandDinner/quesadillas.htm">Quesadillas</a></li> <li><a href="Food/LunchandDinner/saladsandchalupas.htm">Salads & Chalupas </a></li> <li><a href="Food/LunchandDinner/kidsmeals.htm">Kids Meals</a></li> <li><a href="Food/LunchandDinner/chipssidesanddesserts.htm">Chips, Sides, & Desserts</a></li> <li><a href="Food/LunchandDinner/drinks.htm">Drinks</a></li><br/> <div class="style4"> <strong>Printable Menu<br /> </strong></div> <li><a href="PrintableMenu/printablemenubreakfast.htm">Breakfast</a></li> <li><a href="PrintableMenu/printablemenulunchanddinner.htm">Lunch & Dinner</a></li> <li><a href="PrintableMenu/cateringorderform.htm">Catering Order Form</a></li> </ul> </div> <!-- End Sidebar --> <!-- Begin Content --> <!-- End Content --> <div id="content" style="left: 165px; top: -600px; width: 586px; "> <!-- #BeginEditable "content" --> <table style="width: 100%; height: 143px;" class="style20" id="foodname"> <tr> <td style="height: 28px;" class="style10" colspan="2"> <span class="Header1big2">LITTLE ROSIE'S MEXICAN TAQUERIA</span></td> </tr> <tr> <td class="style11" valign="top" rowspan="2" style="width: 330px"> <span class="style18">Honest Handmade Tex-Mex Cuisine!</span><br /> <br /> <img alt="Little Rosie's Mexican Taqueria Huntsville Alabama" src="building.jpg" width="331" height="218" id="img2" /><br /> <p>Mexican cuisine enjoys a great reputation among all ethnic foods in the world. It has an uncanny charm, and those who try it, find it rich in taste and flavor.</p> <p>Special recipes were developed with quality and authenticity in mind, influenced by the rich Mexican heritage we love so much. Our hope is that you enjoy these dishes and agree with us that real Mexican foods are some of the most delicious and flavorful in the world. <br /> We welcome your comments.</p><br /> <br /> </td> <td class="style12" valign="top"> <a href="Food/food.htm"> <img alt="Walke up to breakfast at Little Rosies. We serve breakfast quesadillas, tacos, and mexican breakfast platters!" src="adbreakfast.jpg" width="224" height="337" class="style19" /></a></td> </tr> <tr> <td class="style16" valign="top"> <a href="PrintableMenu/cateringorderform.htm"> <img alt="We Cater! Click here for a catering menu!" src="adcatering.jpg" width="190" height="190" class="style19" /></a></td> </tr> </table> <!-- #EndEditable --></div> </div> <!-- End Page Content --> <!-- Begin Footer --> <div id="footer" style="width: 765px"> <p style="width: 750px">Copyright © 2007 by Little Rosie's Mexican Taqueria. Contact the <a href="mailto:webmaster@littlerosiestaqueria.com?subject=Little Rosie's Webmaster"> Webmaster</a>.<br/>All prices and menu items are subject to change.</p> </div> <!-- End Footer --></div> <!-- End Container --> </body> <!-- #EndTemplate --> </html>
ngoel36
RE: Website Displays Correctly In IE, But Not FF Or Safari 29 Jun, 2009 - 12:57 PM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
QUOTE(hadi_php @ 28 Jun, 2009 - 05:41 AM)
i see your hole site......all the page contain problem.......i suggest u to rebuild it. coz there are lots of problem in that...... u use css in all the page....and some css code use didnt use.....and some div tag called but there is no sign in sign..... And use thanks button.......
So what do you suggest doing to fix it? Is there a particular part of the code that is causing the problem?
ngoel36
RE: Website Displays Correctly In IE, But Not FF Or Safari 7 Jul, 2009 - 05:15 AM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
QUOTE(neit @ 7 Jul, 2009 - 02:27 AM)
I think you should restart with a standard structure for each page. header section left nav section content section footer. Once you have this structure created and working fine you can then work on putting the content in. At the moment every page appears to have some different issue.
There are two main "issues" that the pages are having, but I think both are from the same problem; how the browser handles the overlapping is just a matter of how long the content is. I believe that that light blue line surrounding the content box (which overlaps with the sidebar) is the issue..some sort of padding/margin..but I can't figure out how to get rid of it.
ngoel36
RE: Website Displays Correctly In IE, But Not FF Or Safari 7 Jul, 2009 - 11:39 AM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
That looks awesome! Thank you very much! I think this not only looks better than what I already have, but the code is much simpler and cleaner, and is much more editable by hand rather than what Expression Web puts out, not to mention, it is usable by all browsers. Thanks again!
ngoel36
RE: Website Displays Correctly In IE, But Not FF Or Safari 7 Jul, 2009 - 12:00 PM
New D.I.C Head
Joined: 12 Jun, 2009
Posts: 15
Did you code all of that by hand or by using a program? If so, which program?
QUOTE(neit @ 7 Jul, 2009 - 09:26 AM)
the content you are putting into the content area is too wide which is why the page is getting pushed down.
I have made up a version for you. It may not be what you are exactly going
for but you will be able to check the structure.
click here to view Did you code all of that by hand or by using a program? If so, which program?