HTML working in firefox and IE but not in chrome

Question

Hi I have designed a website but unfortunately it is not working in chrome and perfectly fine in Firefox and IE. I am a beginner at HTML programming. Below is the code. Please do assist if possible.

The issue is a button that i have placed in the code is not being displayed in the required location in chrome.

 $j(document).ready(function() { if (_jive_effective_user_id == -1) { // anonymous or not logged in user $j("#getStartedLink").attr("href", "link1"); $j("#getStartedLink1").attr("href", "link2"); $j("#getStartedLink2").attr("href", "/login.jspa?fromMP=3193&clickedOnDownload=sd"); $j("#getStartedLink3").attr("href", "/login.jspa?fromMP=3193&clickedOnDownload=sd"); } else { // logged in user $j("#getStartedLink").attr("href", "link3"); $j("#getStartedLink1").attr("href", "link4"); $j("#getStartedLink2").attr("href", "link5"); $j("#getStartedLink3").attr("href", "link6"); } });

 .contents { <!--margin: auto auto auto -22px; --> width: 103.6%; background: none repeat scroll 0 0 #000; } .shadow { padding-top: 0; background: none repeat scroll 0 0 #000; min-height: 340px; } body { font-size: 20px; font-family: 'FuturaStd-Light'; line-height: 1.231; } #jive-body-main { width: 100%; } #jive-widget-content { padding: 0 0px; } #footer .footer-tab-contents .contents { background: transparent; } .gradient2 { display: none; } .gradient { display: block; } .webcast_list li { list-style-image: none; } .container_12 .grid_7 { width: 90%; } .tab-inner-devPortal p { font-family: 'FuturaStd-Light'; } .jive-widget-body .jive-html-text-widget ul li { list-style-type: disc; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-inner" style="background-color: white; margin-bottom: 1px; border-bottom:1px solid rgb(210,210,210);"> <div class="wrap"> <div class="container_12"> <div class="grid_6 text-center" style="margin-top:103px;"> <img src="IMAGE" alt="" style="width:450px; margin-top: -78px;"> </div> <div class="grid_6 box suffix_05" style="padding-right:0px;"> <p class="" style="font-size:150%; margin-top:-50px;"><strong style="margin-left: -350px;">TEXT</strong> </p> <p class="lh190" style="font-size:15px;">The <a href="link" target="_new">Text:</a> </div> <div style="float: left"> <ul class="webcast_list" style="margin-top: -135px; font-size:15px; margin-left: 510px; list-style-image: none;"> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> </ul> </div> </div> <div class="text-center"> <a href="HTML form" class="btn-more" style="margin-bottom: -3px; margin-left: -35px; margin-top: 85px; text-transform:none;">Button</a> </div> <div class="clearfix"></div> </div> </div>

Answer 1

Please write clean code. I can't understand what did you want to do! You have 4 solution:

1. Margins don't work properly on inline level elements. The <a> element is an inline element. You should change the display property of <a> to block.

   <a href="HTML form" style="display: block; margin-bottom: -3px; margin-left: -35px; margin-top: 85px; text-transform:none;">Button</a>

2. Relative positioning

3. Absolute positioning

4. You can style the first parent div element of a.