# possible bug with button

**URL:** <https://talk.observablehq.com/t/possible-bug-with-button/1982>\
**Category:** Help\
**Created:** [May 16, 2019, 12:42pm UTC](https://talk.observablehq.com/t/possible-bug-with-button/1982 "2019-05-16T12:42:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bgits](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgits/32/1707_2.png) [@bgits](https://talk.observablehq.com/u/bgits)\
**Post date:** [May 16, 2019, 12:42pm UTC](https://talk.observablehq.com/t/possible-bug-with-button/1982/1 "2019-05-16T12:42:03Z")

</div>

I have created a save as csv button in this notebook: [https://observablehq.com/@bgits/crypto-networks-exploration-with-data-export](https://observablehq.com/@bgits/crypto-networks-exploration-with-data-export)

using the same download as csv approach shown here: [https://observablehq.com/@palewire/saving-csv](https://observablehq.com/@palewire/saving-csv)

Why is the button in my notebook right aligned and has broken styling?

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [May 16, 2019, 1:23pm UTC](https://talk.observablehq.com/t/possible-bug-with-button/1982/2 "2019-05-16T13:23:55Z")

</div>

The [“table” import](https://observablehq.com/@gampleman/table#table) is setting the style on all download buttons, not just its own - see the part that begins with this:

```css
a[download] {
	position: absolute;
	...

```

To fix the positioning, you can set an inline style on the download button like this:

```auto
{
  const button = DOM.download([1,2,3,4,5], null, "Download Price Data as CSV");
  button.style.position = 'relative';
  // similarly, override other styles here
  return button;
}

```

A better long-term solution might be to fork the table notebook and change its `table` cell so that its styles are more specific, e.g. by adding named classes to everything.

Here’s a word on how to debug this sort of thing:

If you open your browser’s dev tools, there should be a button that lets you select an element on the page and inspect its style (here’s what it looks like in Chrome):  
 ![11](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e2f5cf696d151f640ad19718ced9f8936a6e7b24.png)

If you click on the `<button>` tag itself, nothing seems too suspicious, but if you go to its containing `<a download>` tag, you see the offending style above:  
 ![20](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/6ededa0125f52c18e2fb1d83a8bbb59dfa87d914.png)

If you the click on `<style>...</style>`, the DOM inspector will then highlight the `<style>` tags which insert that snippet of CSS, and it’s clear then that this is coming from the imported `table` cell.

---

<div class="post-metadata">

**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\
**Post date:** [May 16, 2019, 5:00pm UTC](https://talk.observablehq.com/t/possible-bug-with-button/1982/3 "2019-05-16T17:00:09Z")

</div>

Alternatively, you can use the new built-in download-as-CSV functionality:

> [@Downloadable Cells](https://talk.observablehq.com/t/downloadable-cells/1849):
>
> Hello all, We’ve just pushed out an update that makes cells conveniently downloadable from the cell menu — in the style of Mike’s useful [Saving SVG](https://observablehq.com/@mbostock/saving-svg) notebook. Here’s a quick example: [https://user-images.githubusercontent.com/4732/55582171-a94d1480-56d3-11e9-9df7-288878fbeb16.gif(image larger than 4096KB)](https://user-images.githubusercontent.com/4732/55582171-a94d1480-56d3-11e9-9df7-288878fbeb16.gif) Data cells should be downloadable as CSV (if CSV-shaped), and in all cases as JSON. SVG cells should be downloadable as SVG or PNG. Canvas cells should be downloadable as PNG. Please let u…