4

My Code :

<div>
    <center><pre style="
    margin-bottom: 0px;
    font-size: 15px;
    color: #166fb0;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom-width: 0px;
    border-top-width: 0px;">
<b><th>QUICK LINKS -> </th></b>&nbsp;&nbsp;&nbsp;&nbsp;<b>
<th><a href="abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"> MULTI-PURPOSE RACK </a></th></b>&nbsp;&nbsp;&nbsp;&nbsp;<b>
<th><a href="abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'"   style="color: #166fb0;"   >PUJA LAMPS</a></th></b>&nbsp;&nbsp;&nbsp;&nbsp;<b>
<th><a href= "abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"> RETURN GIFTS </a></th></b>&nbsp;&nbsp;&nbsp;&nbsp;<b>
<th><a href= "abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"> SPECIAL POOJA PACKS </a></th></b>&nbsp;&nbsp;&nbsp;&nbsp;<b>
<th><a href= "abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"> GYA </a></th></b>
</pre>
</center>
</div>

Android Output:

enter image description here

iPhone Output:

enter image description here

How can i solve this UI Error?

6
  • Slider appearing or not?
    – Ramesh S
    Commented Dec 11, 2017 at 12:49
  • 1
    @RameshS No, see above iphone screen shot
    – zus
    Commented Dec 11, 2017 at 13:28
  • One of the issues is that none of the HTML is valid. The <center> tag has been obsolete for almost 20 years (since 1998) and <th> tags can only be used within <table> tags (th stands for table heading) Commented Dec 16, 2017 at 0:38
  • @AndrewNoble so what i need to do?
    – zus
    Commented Dec 16, 2017 at 5:30
  • @zus I've provided updated HTML and CSS in my answer below, as well as tested it on both iOS and Android. Commented Dec 16, 2017 at 23:28

2 Answers 2

1
+50

I've made some changes and cleaned up your code a bit.

Instead of putting the CSS inline, I've moved it into its own <style> tag and changed it to work on both Android and iOS.

Rather than using javascript for the hover effect (which is unnecessary) I've added CSS to do it instead .quick-links li a:hover.

Lastly, instead of using &nbsp;&nbsp;&nbsp;&nbsp; for spacing I've added a right margin to each list item.

You might still want to tweak the CSS slightly (spacing, margins etc.), but I've tested that the slider works on both an iPhone 5s, as well as a Nexus 6.

<div class="quick-links">
    <ul>
        <li>QUICK LINKS -></li>
        <li><a href="abc.net/">MULTI-PURPOSE RACK</a></li>
        <li><a href="abc.net/">PUJA LAMPS</a></li>
        <li><a href="abc.net/">RETURN GIFTS</a></li>
        <li><a href="abc.net/">SPECIAL POOJA PACKS</a></li>
        <li><a href="abc.net/">GYA</a></li>
    </ul>
</div>
<style>
    .quick-links {
        margin: 0;
        font-size: 15px;
        color: #166fb0;
        padding: 5px 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .quick-links::after {
        content: ' ';
        display: block;
        clear: both;
        height: 0;
        width: 0;
    }

    .quick-links ul {
        padding: 0;
        margin: 0;
        white-space: nowrap;
    }

    .quick-links li {
        display: inline-block;
        list-style: none;
        padding: 0;
        margin: 0 25px 0 0;
    }

    .quick-links li:last-child {
        margin-right: 0;
    }

    .quick-links li a {
        color: #166fb0;
        text-decoration: none;
    }

    .quick-links li a:hover {
        color: #54b016;
    }
</style>
1

Please give a try to below code if it helps:

<div style="
text-align: center;
margin-bottom: 0px;
font-size: 15px;
color: #166fb0;
padding-bottom: 5px;
padding-top: 5px;
border-bottom-width: 0px;
border-top-width: 0px;">
<th><b>QUICK LINKS -> </b></th>&nbsp;&nbsp;&nbsp;&nbsp;
<th><a href="abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"> <b>MULTI-PURPOSE RACK </b></a></th>&nbsp;&nbsp;&nbsp;&nbsp;
<th><a href="abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'"   style="color: #166fb0;"   ><b>PUJA LAMPS</b></a></th>&nbsp;&nbsp;&nbsp;&nbsp;
<th><a href= "abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"><b> RETURN GIFTS </b></a></th>&nbsp;&nbsp;&nbsp;&nbsp;
<th><a href= "abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"><b> SPECIAL POOJA PACKS</b> </a></th>&nbsp;&nbsp;&nbsp;&nbsp;
<th><a href= "abc.net/" onMouseOver="this.style.color='#54b016'" onMouseOut="this.style.color='#166fb0'" style="color: #166fb0;"><b>GYA </b></a></th>
</div>
1
  • it's not working, an android view also getting an error.
    – zus
    Commented Dec 16, 2017 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.