Simple HTML Difference Between Browsers |
Simple HTML Difference Between Browsers |
ftbadolato |
Mar 13 2018, 10:20 PM
Post
#1
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
The menu on this site does not display correctly in Chrome. In IE 11 it appears to be fine, but for some reason in Chrome the menu categories appear below the gray boxes. I know the code is very old, but the syntax still appears correct to me. Any ideas as to why it is not displaying correctly in Chrome (and likely other browsers)? I have attached a screenshot of what it looks like in Chrome.
http://s725156287.onlinehome.us/Menu/ Thanks! Attached thumbnail(s) |
pandy |
Mar 13 2018, 11:28 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Not HTML, but CSS. This bit to be precise.
CODE .bg td{ background-image:url(/images/bg_grey.gif); background-repeat:repeat-x} You've made the background image tile only horizontally and I guess the image is rather small. Remove the whole background-repeat declaration and all will be well. |
ftbadolato |
Mar 14 2018, 09:50 AM
Post
#3
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
Not HTML, but CSS. This bit to be precise. CODE .bg td{ background-image:url(/images/bg_grey.gif); background-repeat:repeat-x} You've made the background image tile only horizontally and I guess the image is rather small. Remove the whole background-repeat declaration and all will be well. Thank you for your response! I replaced: CODE .bg td{ background-image:url(/images/bg_grey.gif); background-repeat:repeat-x} with CODE .bg td{ background-image:url(/images/bg_grey.gif)} in the style.css file, but I am still seeing the same behavior in Chrome. Any other thoughts? |
pandy |
Mar 14 2018, 10:07 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You do? It worked for me, using my browsers Inspector. But I also see it at the online page and I see that you've updated the CSS there.
OK, I'll think some more. |
pandy |
Mar 14 2018, 10:44 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Now I see. You have a rat's nest of nested tables. Even a whole separate table for each link. I don't know exactly what makes Chrome interpret the nest differently. The easiest would be to rewrite just that bit. Use ONE singe table for all the links, put each link in a td in its own TR, apply the background to those TDs and fix the spacing with border spacing.
You know of course that you don't need to use tables at all, but if that's what you know, maybe the above is the easiest approach. |
ftbadolato |
Mar 14 2018, 04:03 PM
Post
#6
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
OK....I think I've simplified it pretty well, but still not right.
|
pandy |
Mar 14 2018, 06:12 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I still see all the tables.
I meant like this. Replace this lot.... HTML <table cellspacing="0" cellpadding="0" class="bg"> <tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=13">Steak Dinners</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=2">Sandwiches</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=3">Sandwich Combos</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=14">Other Steak House Favorites</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=15">Limited Time Offers</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=5">Salads</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=6">Daily Specials</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=7">Extra Meat</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=8">Side Orders</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=9">Desserts</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr><tr><td style="width:242px; height:22px"><table cellspacing="0" cellpadding="0"><tr><td style="width:160px; height:22px; padding-left:11px"><br style="line-height:2px"><a href="menucat.aspx?menucatid=10">Beverages</a></td><td style="width:36px; height:22px"></td><td style="width:47px; height:22px"><br style="line-height:2px"><!--$25.00--></td></tr></table></td></tr> </table> ...with this HTML. HTML <table id="food"> <tr> <td> <a href="menucat.aspx?menucatid=13">Steak Dinners</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=2">Sandwiches</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=3">Sandwich Combos</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=14">Other Steak House Favorites</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=15">Limited Time Offers</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=5">Salads</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=6">Daily Specials</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=7">Extra Meat</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=8">Side Orders</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=9">Desserts</a> </td> </tr><tr> <td> <a href="menucat.aspx?menucatid=10">Beverages</a> </td> </tr> </table> And add this to your style sheet. CODE #food { border-collapse: separate; border-spacing: 3px; border: none } #food td { background:#dadada; padding: 6px 11px; vertical-align: middle; border: none } Or, ditch the tables altogether and use this HTML... HTML <div id="food2"> <a href="menucat.aspx?menucatid=13">Steak Dinners</a> <a href="menucat.aspx?menucatid=2">Sandwiches</a> <a href="menucat.aspx?menucatid=3">Sandwich Combos</a> <a href="menucat.aspx?menucatid=14">Other Steak House Favorites</a> <a href="menucat.aspx?menucatid=15">Limited Time Offers</a> <a href="menucat.aspx?menucatid=5">Salads</a> <a href="menucat.aspx?menucatid=6">Daily Specials</a> <a href="menucat.aspx?menucatid=7">Extra Meat</a> <a href="menucat.aspx?menucatid=8">Side Orders</a> <a href="menucat.aspx?menucatid=9">Desserts</a> <a href="menucat.aspx?menucatid=10">Beverages</a> </div> ... with this CSS. CODE #food2 { float: left } /*this is a trick to make the DIV shrinkwrap*/ #food2 a { display: block; padding: .6em .6em .6em 1em; margin-bottom: 3px; background:#dadada; } You also need to add this snip of CSS in the HTML (in the style attribute, the rest of the tag is yours). If you don't that text will show up to the right of the menu. HTML <center style="clear: left">We look forward to seeing you in our restaurant!</center> The second example isn't kosher, really. The links should be better separated in the HTML in case the page is viewed without CSS. A list is often used. It was mostly to show you how little is needed. Oh, I left adding a font size to you and you may want to change padding and margin to your liking. One thing more, you use a short doctype without an URL. That will put browsers in Quirks Mode. They will emulate their own worse selves and you'll get the most discrepancies this way. Use the below instead. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
ftbadolato |
Mar 15 2018, 10:46 PM
Post
#8
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
OK, making good progress! The gray bg boxes are still quite a bit bigger than before and the text is aligning to the bottom in Chrome, but not in IE.
|
pandy |
Mar 16 2018, 12:38 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You still have nested tables and other unnecessary HTML and CSS. Get rid of all the BR tags. I've realized at long last it's those that forces the text line down in Chrome. There is no point of using line-height when you only have one line. To space things out you use padding and/or margin.
|
ftbadolato |
Mar 19 2018, 10:30 AM
Post
#10
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
You still have nested tables and other unnecessary HTML and CSS. Get rid of all the BR tags. I've realized at long last it's those that forces the text line down in Chrome. There is no point of using line-height when you only have one line. To space things out you use padding and/or margin. OK, I will see if I can reduce the HTML and CSS on that page for a better result. I also found that the main menu across the top wraps in IE (Contact appears on the second line). The Reviews page also looks goofy. The reviews on the right side are crossing over to the left. See the inserted image: |
pandy |
Mar 20 2018, 01:19 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
OK. But start with those BR tags and stop nesting tables. You only need one table.
BR tags should rarely be used at all and absolutely not for creating space. Typically you only need them to ensure a line is very short when a block level element like P isn't motivated. Like maybe in a poem. |
Lo-Fi Version | Time is now: 29th March 2024 - 08:17 PM |