SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS issue in Google Chrome

    Hi all,
    I am working on a site:

    http://www.philau.edu/library/singlebullet/

    I am having some CSS issues, in Google Chrome.(the site looks awful in IE--but, that's okay for this project).

    There is the set of navigation:

    HTML Code:
     <section class="cr-container">	
       
      
                	
    				<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" />
    				<label for="select-img-1" class="cr-label-img-1"><span>Introduction</span></label>
    	  
    <br />
            		<br />
            		<br />    
    	
            		
       				 <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    				 <label for="select-img-2" class="cr-label-img-2"><span>Assassination</span></label>
    			
    <br />
           			<br />
           			<br />     
                	
      				<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    				<label for="select-img-3" class="cr-label-img-3">Warren Commission <span>Appointment</span></label>
                
                
    <br />
          			 <br />
          			 <br />      
                
     				 <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    				<label for="select-img-4" class="cr-label-img-4">Warren Commission <span>Investigation</span></label>
                    
                    
    <br />
        			 <br />
         			 <br />          
        
                
          			<input id="select-img-5" name="radio-set-1" type="radio" class="cr-selector-img-5" />
    				<label for="select-img-5" class="cr-label-img-5" style="width:200px;">About Specter & Continuing <span>Questions</span></label>
    I am using CSS to make the transitions happen with the panels, so the CSS classes target that transition.

    Because of the theme, it's important that the redline below the navigation extend beyond the navigation text. To achieve this, here is what I did. I added a red bottom border:

    Code:
    .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1 span,
    .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2 span,
    .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3 span,
    .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 span,
    .cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5 span
    
    {
    	 
    		
    		border-bottom:2px solid #c75753;
    		
    		
    		
    }
    The intention is that when a navigational element is selected, the red line will appear. To extend the red line, I'm doing this:

    Code:
     label span { padding-right: 130px; }
    This targets the underline to be on the last word of the navigation text, which is what I want...however, in Chrome, when you select a navigational element, the whole text disappears...I know it's an issue with how I am doing the label span above; if I turn that off in Firebug, the issue goes away.

    Any ideas why this is happening in Chrome, and what I can do to correct the issue?

    Thanks so much,

    Michael

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    My question is why are you applying the border to a child element instead of the label itself? You can easily achieve the same effect by adding padding to the label and setting a width which will wrap the text and allow the bottom border to span 100% of the element.

    See the below which I tested live on your website.

    Code HTML4Strict:
    <section class="cr-container">
        <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1">
        <label for="select-img-1" class="cr-label-img-1">
            Introduction
        </label>
     
     
        <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2">
        <label for="select-img-2" class="cr-label-img-2">
            Assassination
        </label>
     
     
        <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3">
        <label for="select-img-3" class="cr-label-img-3">
            Warren Commission Appointment
        </label>
     
     
        <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4">
        <label for="select-img-4" class="cr-label-img-4">
            Warren Commission Investigation
        </label>
     
     
        <input id="select-img-5" name="radio-set-1" type="radio" class="cr-selector-img-5">
        <label for="select-img-5" class="cr-label-img-5">
            About Specter &amp; Continuing Questions
        </label>
    </section>

    Code CSS:
    label span {
        /* No styles here */
    }
     
     
    .cr-container label {
        border-bottom: 2px solid rgba(0,0,0, 0);
        color: #B2A58A;
        cursor: pointer;
        display: block;
        margin-top: 350px;
        padding: 0 23px 2px 0;
        position: relative;
        z-index: 1000;
        width: 232px;
    }
     
     
    .cr-container span {
        /* No styles here */
    }
     
     
    .cr-container input:checked + label {
        border-bottom-color: #C75753;
    }
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    That almost works!

    That code places an underline on every line...I just want a bottom border below the navigational element; picky, but I am working with graphic designers and I want to follow their design as closely as possible. The red line represents a bullet trajectory, so having multiple lines kind of looses that feel or representation.

    The former code did that, but does something a bit off in Chrome.

    Thanks for the help.

    Michael

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Do you have an example of what its doing as I tested the code live in Chrome on your site and it worked fine.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I was able to build off of your code to achieve what I want to.

    http://www.philau.edu/library/singlebullet/

    I'm having a minor issue with positioning the image slices and the white panel that appears...differences in Firefox and Chrome...and my CSS transitions are a bit slow/choppy...not sure if that is the browser or how I have the CSS.

    Thanks for your help!

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    They appear to be working the same in both Firefox and Chrome for more, depending on how fast your PC is the animations can appear choppy if you have other tabs open etc.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •