I have this problem specifically on phones and tablets is that the misaligned blue search icon on the top left. Not sure how to fix this.

www.talkjesus.com is where it happens. Works on desktop, but not phone or tablet.

screenshot
http://i48.tinypic.com/a3o1l1.jpg

Recommended Answers

All 2 Replies

I'm not seeing that page when I view on mobile. The design is totally different on my phone.
Based on the screenshot, however, my assumption would be that the div wrapping the form either needs more width or less padding, or maybe both.

Hi Evo,

You need to click "full site" to view the desktop version.

The html code is:

<div id="top_header">


        <div id="globalsearch" class="globalsearch">
            <form action="http://www.talkjesus.com/search.php?do=process" method="post" id="navbar_search" class="navbar_search">

                <input type="hidden" name="securitytoken" value="1359502826-a71dd9515a376ecb67442ea0d819805025d16ed5">
                <input type="hidden" name="do" value="process">
                <input type="text" value="" name="query" class="textbox" tabindex="99">
                <input type="submit" class="searchbutton" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100">
            </form>
        </div>       
        <ul class="advanced_search">
                <li><a href="http://www.talkjesus.com/search.php" accesskey="4">Advanced Search</a></li>    
        </ul>        


    <div id="toplinks" class="toplinks">

            <ul class="isuser">
                <li><a rel="nofollow" href="http://www.talkjesus.com/login.php?do=logout&logouthash=" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></li>

                <li><a href="http://www.talkjesus.com/usercp.php">Settings</a></li>

                <li class="popupmenu nonotifications" id="nonotifications">
                    <a class="popupctrl" href="http://www.talkjesus.com/usercp.php" id="yui-gen1">Notifications</a>
                    <ul class="popupbody" id="yui-gen0">
                        <li id="no-new-message">No new messages</li>
                        <li><a href="http://www.talkjesus.com/private.php">Inbox</a></li>
                    </ul>
                </li>

                <li class="welcomelink">Hi <a href="http://www.talkjesus.com/members/chad.html">Chad</a></li>

                    <li id="fb_headerbox">

    <a onclick="_gaq.push(['_trackEvent', 'Outgoing', 'www.facebook.com', '/profile.php?id=']);" rel="nofollow" id="fb_link" href="http://www.facebook.com/profile.php?id=">
        <img id="fb_squarepic" width="16" height="16" alt="The Facebook Platform" src="https://graph.facebook.com/783340042/picture" title="The Facebook Platform">
        <img id="fb_icon" width="14" height="14" alt="The Facebook Platform" src="images/metro/blue/misc/facebook.gif" title="The Facebook Platform">
    </a>

</li>


            </ul>



    </div>


</div>

CSS is

#top_header {
height: 36px;
padding-top: 12px;
}

#top_header .globalsearch {
border: solid 1px #e4e4e4;
background-color: #ffffff;
height: 30px;
}
.globalsearch {
width: 254px;
float: left;
text-align: left;
line-height: 1.0em;
}

.navbar_search {
width: 250px;
height: 28px;
padding: 2px;
}

.advanced_search {
float: left;
font-size: 12px;
line-height: 32px;
padding-left: 8px;
}

.toplinks {
color: ;
font: ;
font-size: 14px;
text-align: right;
background: none;
float: right;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.