Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS is blocking my button from redirecting to a new website

Posted on 2015-02-05
5
Medium Priority
?
101 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 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

721 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