HELP! HTML Maro in Confluence Page
Asked by Prithvi Tharun:

I've been playing around with HTML Macro in Confluence for a while now.   

In the preview, the code is returning the intended output.

![preview_html_macro.png](/t5/image/serverpage/image-id/58050i6B3F39F55FCB339F/image-size/large?v=v2&px=999 "preview_html_macro.png")

<br />

But when I save it, none of the CSS are working.  

![save_html_macro.png](/t5/image/serverpage/image-id/58051i99FE760ACB2A1B7E/image-size/large?v=v2&px=999 "save_html_macro.png")

Am I doing something wrong here?


Answers:
author: Aleksandr Zuevich
body: Hi,

Could you share your HTML and CSS with us?

comments: author: Prithvi Tharun
body: [@Aleksandr Zuevich](/t5/user/viewprofilepage/user-id/671242) Sure.

```
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}

body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}


.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}


.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}


.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}


.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #4EBCD4;
top: 15px;
border-radius: 50%;
z-index: 1;
}


.left {
left: 0;
}


.right {
left: 50%;
}


.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}


.right::after {
left: -16px;
}


.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}


@media screen and (max-width: 600px) {

.timeline::after {
left: 31px;
}

.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}

.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}


.left::after, .right::after {
left: 15px;
}

.right {
left: 0%;
}
}
</style>
</head>
<body>

<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum dolor sit amet, quo edignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2015</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2012</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2011</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2007</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
</div>

</body>
</html>
```


Tags: confluence-server

server