Jump to content

works in IE (of course) but not FF.


Recommended Posts

I know i am doing something wrong (banging head again....getting lots of holes in my walls).


htt p://w ww.tristark9.com/simo ntontest/menu.php


I am doing a restaurant menu and I had originally did it in photo shop as a jpg. And now i am redoing in in css and html.


It looks ok in IE but it is all jumbled in FF.


Do you have any suggestions to correct this and maybe what I could do to make it look better. I was trying to do dots......from the item to the price but could not get it to work so it looked even, so I took them out.


Thanks in advance,



Link to comment
Share on other sites

Short answer:

Not clearing your floats is causing the main Headings to be misplaced. Floats are removed from the normal flow of the document, so the 'headings' are displaying not in conjunction with the floated items. Clearing the floats will help that.

Place each 'group' inside its own

tag to structure the page better. ie: Burgers should be within its own
, Sandwiches in another. And clear each div.

Also, the 'headings' should be tags, not paragraphs. That will give the page a more semantic mark-up and better SEO.


Check this page as a starting point. It might contain an idea of what you need, although you have used

structure instead of the
  • in the sample, it might suggest an approach you could work with.


    i would suggest that you create a new page with only the Menu list as its content and once you have the structure defined, place the structured code into the real site page.


    I might be able to find a sample page of the .......... dots for you as well. I'll have a look at some archived pages on a zip drive. but that will be later tonight, after the Hockey game... sorry... priorities happen. :P

Edited by jlhaslip
Link to comment
Share on other sites

You should be coding for Firefox because it's a standard compliant browser whereas IE is not. If you get it right in Firefox then chances are IE will render it very close the same.


The dirty fix is to add clear: both; to the following css:








Using dl (dt, dd) is a bit tricky but you don't have to use it. Since your menu is displaying data it's ok to use tables instead of dl's.

Edited by newseed
Link to comment
Share on other sites

I do understand that if it is not working in FF then I have coded something wrong or in my case alot of things.


Thanks for all your help....................So I can do this in a table and I won't get my hand slaped:D




I am going to try to fix what I have with css and if all else fails I will do it with a table.



Thank you,



Link to comment
Share on other sites

Hi Thelma...Thanks for all the help you always give me!!



I did get it to work, I think.


But still need to figure out how to get some dots to go across to the prices. I think it would look better that way.


Thanks again for all your help....my mind has so much of this coding stuff in it that i can't find anything:P


I don't know how you guys...and gals remember all this stuff.


Thanks a million,



Link to comment
Share on other sites

But still need to figure out how to get some dots to go across to the prices. I think it would look better that way.

What you can do is use an image that has a few dots and have it repeated using the css background.


Create the image.

Add it to the dl selector in the css. Example: background: transparent url('image-filename.jpg) repeat-x;


You will probably need to postion it from the top so that it aligns with the bottom of the text of the food item.


Example: background: transparent url('image-filename.jpg) 0 10px repeat-x;


10px will move it down from the top.


Next you will need to add a background color to dt and to dd so that matches the same tannish/brown background color you have.


Otherwise, tables will work nicely.


Update: I have made some edits to this post that shorten and improved this method.

Edited by newseed
Link to comment
Share on other sites

Found the links I was looking for... finally... http://www.codingforums.com/showthread.php?t=108909


A good discussion going on there from some quite knowledgeable people. The sample around post #12 by coothead works. And so do the other layouts. Might need to adapt their CSS for a dl/dt/dd layout.

Some of the others discuss div's versus tables and might be useful as well. Some require an image for the dots as a background image.


A 'highlighted row layout' looks good: http://infinity3design.com/specdemo.htm


Also, if you decide to go for a Table-based layout, Google 'tablecloth' for a javascript method to highlight the hovered row (or columns). Quite effective and cross-browser, too.

Link to comment
Share on other sites

Thank you jlhaslip,


I really appreciate you taking the time to look this stuff up for me, I looked and looked last night.


I will read up on all you recommended.


I hope I can be on the giving end eventually also. I really can't believe how willing and helpful you all are, willing to take time to help others is really cool!!!


Thanks again,



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...