Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS is blocking my button from redirecting to a new website

Posted on 2015-02-05
5
Medium Priority
?
105 Views
Last Modified: 2015-02-06
the following code is not redirecting me to a different site
...
      <div class="button-wrap left tooltip login-button">
            <a href="http://mail.yahoo.com" class="button dark"><span class="button-icon login"></span>Sign In</a>
      </div>
....

below is the complete header section:

            <div class="header-wrap">
                  <header class="site-header">
                        <div class="row">
                              <div class="site-logo left">
                                    <a href="./js/Academy – Learning Management Theme.html" rel="home">
                                          <img src="./images/oxford-white-logo.png" alt="My Blog">
                                    </a>
                              </div>
                              <!-- /logo -->
                              <div class="header-options right clearfix">                              
                                    <div class="login-options right">
                                                                        
                                          <div class="button-wrap left tooltip login-button">
                                                <a href="http://scenariousa.com/signin/" class="button dark"><span class="button-icon login"></span>Sign In</a>
                                          </div>
                                          
                                    </div>
                                    <!-- /login options -->                                                            
                              <nav class="header-navigation right">
                                    <div class="menu">
                                          <ul>
                                                <li class="page_item page-item-183"><a href="http://scenariousa.com/features/">Home</a></li>
                                                <li class="page_item page-item-2129 current_page_item"><a href="./js/Academy – Learning Management Theme.html">Programs</a></li>
                                                <li class="page_item page-item-2112"><a href="http://scenariousa.com/plans/">Testimonials</a></li>
                                                <li class="page_item page-item-2"><a href="http://scenariousa.com/sample-page/">Why Us</a></li>
                                                <li class="page_item page-item-601"><a href="http://scenariousa.com/contact/">Locations</a></li>
                                          </ul>
                                    </div>
                                    
                                    <div class="select-menu">
                                          <span>Menu</span>
                                          <select name="page_id" id="page_id" style="opacity: 0;">
                                                <option class="level-0" value="183">Home</option>
                                                <option class="level-0" value="2129">Programs</option>
                                                <option class="level-0" value="2112">Testimonials</option>
                                                <option class="level-0" value="2">Why Us</option>
                                                <option class="level-0" value="601">Locations</option>
                                          </select>
                                          
                                    </div>
                                    <!--/ select menu-->
                              </nav>
                              <!-- /navigation -->                                    
                        </div>                  
                  </header>
                  <!-- /header -->
            </div>
style.css
0
Comment
Question by:matthew phung
  • 2
  • 2
5 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 40592811
Shouldn't that <span class="button-icon login"></span> be around the words Sign In ?  If there is no content in the <span>, there is nothing to click on.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40593443
it's wrapped in the a, so it should still work.

you could have an element positioned on 'top' of the link, that is not visible - like a margin - could be obstructing the link. without seeing your page though it's not possible to know exactly what is going on. please post a link to the page.
0
 

Author Comment

by:matthew phung
ID: 40594328
Thank you for the replies...
Dave - I moved the "Sign In" text into the span and it still did not make a difference.

I uploaded the page to http://www.throwbackfestca.com/

Thank you for your help thus far.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1500 total points
ID: 40594380
It's what I thought. Something about the button-wrap element is obscuring the link, I didn't investigate what exactly. However, you can fix it by wrapping the whole thing in a link instead. You might need to adjust some styles...

<a href="http://scenariousa.com/signin/" class="button dark active">
   <div class="button-wrap left tooltip login-button">
     <span class="button-icon login"></span>Sign In
   </div>
</a>

Open in new window

0
 

Author Comment

by:matthew phung
ID: 40594585
Thank you Kyle.... I played around with it and found that the tooltip was the cause. You just beat me to it. I appreciate your help!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question