1,105,546 Community Members

css issue

Member Avatar
LogicWeb
Junior Poster
101 posts since Jan 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
EvolutionFallen
Posting Pro
504 posts since Aug 2009
Reputation Points: 107 [?]
Q&As Helped to Solve: 108 [?]
Skill Endorsements: 8 [?]
 
0
 

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.

Member Avatar
LogicWeb
Junior Poster
101 posts since Jan 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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;
}
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article