works in IE (of course) but not FF.

[Corinne]

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,

 

Corinne

[jlhaslip]

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.

Edited April 22, 2009 by jlhaslip

[newseed]

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:

 

dl

 

p.info

 

p.head

 

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 April 22, 2009 by newseed

[Corinne]

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,

 

corinne

[Andrea]

Technically...

 

Item ....... Qty .............Price

 

that's a table to me

[Corinne]

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,

 

Corinne

[newseed]

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 April 23, 2009 by newseed

[LSW]

There is a dotted and dashed line in CSS. You could place the images in Divs and give it a border on one side that is dotted... but that is off the hip as I am not sure what you are doing.

[jlhaslip]

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.

[jlhaslip]

Check this :

 

http://jlhaslip.trap17.com/sm/dotted.html

 

Seems to work fine. Try it out.

[Corinne]

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,

 

Corinne