CSS issue in Google Chrome

HTML & CSS
1

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:

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

.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:


 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

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.

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

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;
}
3

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

Do you have an example of what its doing as I tested the code live in Chrome on your site and it worked fine.

5

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

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.