# Notebook displays in browsers differently

**URL:** <https://talk.observablehq.com/t/notebook-displays-in-browsers-differently/3491>\
**Category:** Help\
**Created:** [June 23, 2020, 10:15pm UTC](https://talk.observablehq.com/t/notebook-displays-in-browsers-differently/3491 "2020-06-23T22:15:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![irenatfh](https://avatars.discourse-cdn.com/v4/letter/i/9dc877/32.png) [@irenatfh](https://talk.observablehq.com/u/irenatfh)\
**Post date:** [June 23, 2020, 10:15pm UTC](https://talk.observablehq.com/t/notebook-displays-in-browsers-differently/3491/1 "2020-06-23T22:15:43Z")

</div>

Hi all, Observable newbie here! I made my first D3 [project](https://observablehq.com/@irenatfh/comm-277t-bart-transit-frequencies) in an Observable notebook, but realize that it looks pretty different in different browsers. I was coding in Firefox, so it shows up beautifully there. Here’s a screenshot for how it should look:

 ![Screen Shot 2020-06-23 at 3.08.50 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/aa7250c027bec35068c8b76054e26570f70a10ab.png)  
Conversely, it looks very sad in Safari and Chrome. I appreciate any ideas on how I might make my code more robust to display properly in different browsers. Thanks in advance!

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [June 24, 2020, 12:50am UTC](https://talk.observablehq.com/t/notebook-displays-in-browsers-differently/3491/2 "2020-06-24T00:50:57Z")

</div>

I think there are some [known differences](https://github.com/philipwalton/flexbugs) between Firefox and Chrome in how they treat Flex layouts. I forked your notebook to use a simpler display using `block` and `inline-block` and it seems to work. Check it out here:

> **[COMM 277T BART Transit Frequencies](https://observablehq.com/d/43f04e1843bdafa2)**
>
> An Observable notebook by Mark McClure.

Just look at the `style` cell.

---

<div class="post-metadata">

**Author:** ![irenatfh](https://avatars.discourse-cdn.com/v4/letter/i/9dc877/32.png) [@irenatfh](https://talk.observablehq.com/u/irenatfh)\
**Post date:** [June 24, 2020, 1:12am UTC](https://talk.observablehq.com/t/notebook-displays-in-browsers-differently/3491/3 "2020-06-24T01:12:35Z")

</div>

Aha! Thank you Mark, that worked a treat. And thanks also for the reference to the known differences, that repo is a great reference.