0

I designed the UI like the below.

<div class="rightbadger">
    <span id="filterRecords">
        Number of Results Per Page
        <%:Html.DropDownList(
            "filterByPageNumber", 
            Model.ResultPerPage,
            null,
            new { onchange = "GetResultsPerPage()" }
        )
        %>
    </span>
</div>

CSS: 

.rightbadger { margin-left: 600px;}

But span and dropdown list are not aligned properly in same line.in some browsers are looking good but some of the browsers showing like the below. below is the screen shot of the image

user3106578
  • 177
  • 1
  • 2
  • 12
  • 2
    inside span? post your css for that div and select – Sridhar R Dec 24 '13 at 10:47
  • please let me know clearly.if any sample can you provide – user3106578 Dec 24 '13 at 10:48
  • 1
    select element should be seperate one not a inside of span – Sridhar R Dec 24 '13 at 10:49
  • I think Sridhar R is right. Also, if it helps, take a look at this question: [How to align checkboxes and their labels consistently cross-browsers](http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers?rq=1) – Arkana Dec 24 '13 at 10:52
  • The span should also be a label with a for attribute (with the id of the select). This is makes your page more accessible for blind users, and is the correct html :) . – Martyn0627 Dec 24 '13 at 10:55

3 Answers3

0

Just put the CSS

.filterRecords select{
    display:block;
}
Mehmood
  • 933
  • 5
  • 17
0

If you want to align them vertically you probably should put the text into a separate element, like so:

<div class="rightbadger">
    <div id="filterRecords">
        <span>Number of Results Per Page</span>
        <%:Html.DropDownList(
            "filterByPageNumber", 
            Model.ResultPerPage,
            null,
            new { onchange = "GetResultsPerPage()" }
        )
        %>
    </div>
</div>

Then vertical align the 2 element as you want them to be:

#filterRecords span,
#filterRecords select{ /*or just '#filterRecords *' */
    vertical-align: bottom; /*or middle; or top; */
}
AVAVT
  • 7,058
  • 2
  • 21
  • 44
0

You must to set for span and dropdown:

float:left;
width:300px;
display:block;
Saeed
  • 3,415
  • 3
  • 24
  • 41