0

I am trying to put 2 buttons on a web page, one floated to the left and the other to the right. Both command buttons have multiline styled text within them. Below is my latest attempt. It seems to work on in Firefox, but not even close in IE 8. Any ideas how I can get this to work in both environments? thanks.

CSS:

body {
    background-color: green;
}

.idxQuestion {
    font-size: 36;
    text-align: center;
}

.idxButtons {
    margin-top:60px;
    margin-left: auto;
    margin-right:auto;
    width:350px;
}

.buttonchoice1,.buttonchoice2
           {
    text-align: center;
    background:white;
    padding: 5px;
}

.buttonchoice1 {
    float:left; 
    border:5px solid red;
}

.buttonchoice2 {
    float:right;
    border:5px solid blue;
}   

.spanchoice1 {
    font-size: 30px;             
}

.spanchoice2 {
    font-size: 10px;             
}   

HTML:

<div class="idxQuestion">
    <h1>Big Question?</h1>
</div>
<div class="idxButtons">
    <h:button class="buttonchoice1" onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
            <span class="spanchoice1">No</span><br />  
            <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
    </h:button> 

    <h:button class="buttonchoice2" onclick="option2?faces-redirect=true" >
        <h:outputText>
            <span class="spanchoice1">Yes</span><br />  
            <span class="spanchoice2">additional info 2</span> 
        </h:outputText>
    </h:button> 

</div>   

Fiddle : http://jsfiddle.net/MF23L/

5
  • 1
    Where is the "h" tag coming from?
    – chipcullen
    Oct 1, 2012 at 18:00
  • 1
    I guess he's pasting ASP.NET code directly to html page..and as we know how IE is, it is rendering incorrectly, just remove all h: from your markup
    – Mr. Alien
    Oct 1, 2012 at 18:01
  • 1
    For sometime I thought i am the only one in CSS who doesnt know H tag. hehe
    – Mr_Green
    Oct 1, 2012 at 18:02
  • 1
    @Mr_Green CSS 3 Reloaded..LOL
    – Mr. Alien
    Oct 1, 2012 at 18:03
  • Sorry, I am using JSF and that is where the h: is coming from Oct 1, 2012 at 19:19

3 Answers 3

1

Replace your code with this piece of code:

<div class="idxButtons">
    <button class="buttonchoice1" onclick="option1?faces-redirect=true">
        <outputText escape=false>
           <span class="spanchoice1">No</span><br />  
           <span class="spanchoice2">additional info 1</span> 
        </outputText>
     </button>
    <button class="buttonchoice2" onclick="option2?faces-redirect=true">
        <outputText>
           <span class="spanchoice1">Yes</span><br />  
           <span class="spanchoice2">additional info 2</span> 
        </outputText>
     </button>
</div>
1
  • I just realized if I float the button to the left or right, the button is floated out or normal flow, but not the outputText, so the text is outside the button. Oct 9, 2012 at 17:29
0

IE isn't recognizing your h:button tag, which you've applied a "buttonchoice1" class to and is the basis of your layout. If you were to wrap those "h:button"s with a div (for example), and move the class from the h:button to the new containing div, it should work. Like this:

<div class="idxButtons">
    <div class="buttonchoice1">
        <h:button onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
        <span class="spanchoice1">No</span><br />  
        <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
        </h:button> 
    </div>
....
1
  • Yes, removing the h: fixed it. Thanks. Oct 1, 2012 at 19:34
0

Why not make images and use <input type="image" alt="No, additional info 1" src="..." /> so it would look the same? I am don't think button is supposed to be fancy.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.