Solved

CSS is blocking my button from redirecting to a new website

Posted on 2015-02-05
5
97 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 83

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 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

631 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