Why CSS works in Chrome but not Safari?
Observation for PR #521 Safari Chrome After manual add in styles in Safari browser Problem The dropdown button, dropdown box and dropdown list were not wrapped inside a <div></div> <div class="color-background color-background-block dataset-color-background-block"> <p><?= $mainSection->getReleaseDetails()['authors'] ?> (<?=$mainSection->getReleaseDetails()['release_year']?>): <?= $mainSection->getReleaseDetails()['dataset_title'].' '.($mainSection->getReleaseDetails()['publisher'] ?? '<span class="label label-danger">NO PUBLISHER SET</span>').'. '; ?><a href="https://doi.org/10.5524/<?php echo $model->identifier;?>">https://doi.org/10.5524/<?php echo $model->identifier;?></a></p> <p><a class="doi-badge" href="#"><span class="badge">DOI</span><span class="badge">10.5524/<?php echo $model->identifier;?></span></a><button onclick="showCitation()" class="drop-citation-btn" >Cite Dataset<span class="caret"></span></button></p> <div id="citationDropdown" class="citation-content"> <a id="citeText" href='http://data.datacite.org/text/x-bibliography/10.5524/<?php echo $model->identifier;?>' target="_blank">Text</a> <a id="citeRis" href='http://data.datacite.org/application/x-research-info-systems/10.5524/<?php echo $model->identifier;?>' target="_self">RIS</a> <a id="citeBibTeX" href='http://data.datacite.org/application/x-bibtex/10.5524/<?php echo $model->identifier;?>' target="_self">BibTeX</a> </div> </div> Solution Wrap all dropdown stuff inside dataset-block-wrapper <div class="color-background color-background-block dataset-color-background-block"> <p><?= $mainSection->getReleaseDetails()['authors'] ?> (<?=$mainSection->getReleaseDetails()['release_year']?>): <?= $mainSection->getReleaseDetails()['dataset_title'].' '.($mainSection->getReleaseDetails()['publisher'] ?? '<span class="label label-danger">NO PUBLISHER SET</span>').'. '; ?><a href="https://doi.org/10.5524/<?php echo $model->identifier;?>">https://doi.org/10.5524/<?php echo $model->identifier;?></a></p> <div id="dataset-block-wrapper"> <div id="dropdown-div"> <div class="dropdown-box"> <button id="CiteDataset" class="drop-citation-btn dropdown-toggle" type="button" data-toggle="dropdown">Cite Dataset<span class="caret"></span></button> <?php $text = file_get_contents('https://data.datacite.org/text/x-bibliography/10.5524/' . $model->identifier); $clean_text = strip_tags(preg_replace("/&#?[a-z0-9]+;/i", "", $text)); ?> <script> function showText() { var textWindow = window.open(); textWindow.document.write(`<?php echo $clean_text; ?>`); } </script> <ul class="dropdown-menu" aria-labelledby="CiteDataset"> <li><a id="Text" onclick="showText()" target="_blank">Text</a></li> <li><a id="citeRis" href='https://data.datacite.org/application/x-research-info-systems/10.5524/<?php echo $model->identifier;?>' target="_self">RIS</a></li> <li><a id="citeBibTeX" href='https://data.datacite.org/application/x-bibtex/10.5524/<?php echo $model->identifier;?>' target="_self">BibTeX</a></li> </ul> </div> </div> </div> </div> Update the CSS #dropdown-div { margin : 0; float : left ; } .dropdown-box { position: absolute; } .drop-citation-btn { width: 110px; color: white; font-size: 13px; font-weight: normal; border: none; cursor: pointer; background-color: #099242; padding: 5px 10px; border-radius: 4px 4px 4px 4px; display: inline-block; position: relative; text-decoration: none; } .drop-citation-btn:hover { color: white; text-decoration: none; } .drop-citation-btn:focus { outline: none; } #dropdown-div ul { list-style: none; position: relative; float: none; margin-top: 5px; min-width: 100px; border: 1px solid #099242; border-radius: 4px 4px 4px 4px; font-size: 13px; } #dropdown-div li a:hover {background-color: #F3FAF6;} Reference Cross browser testing Handling common HTML and CSS problem ...