CODEWITHSUNDEEP
htmlcssfirefox
Reece Barrett
Reece Barrett

Reputation: 63

Firefox not displaying web page as its supposed to

I have a list of items with prices on a web page I'm building. It all works completely fine in google but not in firefox. The sausage and chips item should be displaying like the ones under it but it doesn't, and I just cant figure it out. Maybe one of you can. Thanks

heres the part of code thats playing up. Heres the full code https://jsfiddle.net/p2L3uxyp/ 

<ul class="menu-items" id="kids-menu-styling">
<li><span>Sausage and Chips</span></li>
<li><span>(Including drink)</span><span>£3.20</span></li>
<li><span>Scampi and Chips</span></li>
<li><span>(Including drink)</span><span>£3.20</span></li>
<li><span>Fish Goujons and Chips</span></li>
<li><span>(Including drink)</span><span>£3.20</span></li>
</ul>

Upvotes: 0

Views: 41

Answers (2)

jock.perkins
jock.perkins

Reputation: 469

I'm not 100% sure what the issue is, but you might find it more useful to set up the page slightly differently. I've thrown a quick jsfiddle together for you to demonstrate what I mean.

https://jsfiddle.net/r4yb53dL/1/

<ul>
  <li>
    <div class="menu-item-title">Sausage and Chips</div>
    <div class="menu-item-details">
      <span class="details">(Including drink)</span>
      <span class="seperator">  ....  </span>
      <span class="price">£3.20</span>
    </div>
  </li>
</ul>

By taking advantage of block elements and inline elements in html, you can use minimal css to achieve what you need.

Edit:

Just wanted to add - thank you for cross browser testing! It's such a shame when a site looks great in one browser, but awful in another.

Edit 2:

Sorry - typo!

Upvotes: 0

Johannes
Johannes

Reputation: 67738

It's a floating problem. Add overflow: auto to .menu-items, this will fix it.

https://jsfiddle.net/uncf0t0b/1/

Upvotes: 2

Related Questions