CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxbutton
user1341851
user1341851

Reputation: 3

Multiline styled text within a button element

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/

Upvotes: 0

Views: 1632

Answers (3)

Ryan B
Ryan B

Reputation: 3392

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.

Upvotes: 0

Furqan Safdar
Furqan Safdar

Reputation: 16698

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>

Upvotes: 1

Mike
Mike

Reputation: 1544

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

Upvotes: 0

Related Questions