So I am web developer who used to have a kind graphics design person help me out on this sort of browser compatibility hell, but alas he has moved on to greener pastures. The following html looks fine and dandy on chrome, but the table I am using to align my form is sleeping on the job on the bottom in ie and firefox. Should I never use tables? Is the float in the div tags screwing everything up? Any hints or suggestions for improving my html and css would be much appreciated.
Also, the text area text gets a little screwy sometimes in terms of where it is positioned in the box.
Thank you all.
<div style="border-style:solid; border-color:#336699; padding: 5px; margin-left:auto; margin-right:auto; width:600px; height:300px;" id="demoContainer">
<div style="" id="demo">
<div style="" id="demoHeader">
<img src="someimage" />
<span style="font-size:32px;">Demo</span>
</div>
<div style="" id="demoBody">
<form method="get">
<div style="float:left; padding:5px;" id="demoBodyText">
<textarea style="resize:none;" rows="10" cols="30">
Enter demo text here...
</textarea>
</div>
<div style="float:right; padding:5px;" id="demoBodyOptions">
<table style="float:right;">
<tr>
<th>
Option 1:
</th>
<td>
<select style="">
<option>asdf</option>
</select>
</td>
</tr>
<tr>
<th>
Option 2:
</th>
<td>
<select style="align:left;">
<option value="320">Fastest</option>
<option value="260">Faster</option>
<option value="200">Fast</option>
<option value="170" selected="selected">Default</option>
<option value="130">Slow</option>
<option value="110">Slower</option>
<option value="80">Slowest</option>
</select>
</td>
</tr>
<tr>
<th>
Option 3:
</th>
<td>
<select>
<option value="4.2">Highest</option>
<option value="3">Higher</option>
<option value="2">High</option>
<option value="1" selected>Default</option>
<option value="0.8">Low</option>
<option value="0.6">Lower</option>
<option value="0.4">Lowest</option>
</select style="align:left;">
</td>
</tr>
<tr>
<th>
Option 4
</th>
<td>
<select>
<option value="none">None</option>
</select style="align:left;" >
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
</table>
</div>
</form>
</div>
<div style="clear:both;" id="demoFooter">
Footer
</div>
</div>
</div>
EDIT: Added image in how it displays in my firefox version 10.
If you have a float:right after a float:left this seems pretty normal.
Try to switch the order of the two or give the second one also float:left
Or maybe the padding is the problem?
http://jsfiddle.net/HerrSerker/55cXT/
What are the width of your floated divs #demoBodyText and #demoBodyOptions?
See the fiddle - Is this you are looking for?
Fiddle: http://jsfiddle.net/jKtkq/
Demo: http://jsfiddle.net/jKtkq/embedded/result/
Screen shot: http://img39.imageshack.us/img39/7676/tableissue.jpg
Related
Ok, as usual, I come here as a last resort after pulling what's left of my hair out and not finding the solution online.
Have a simple table with one row and three cells. Inside two cells are fieldsets (I like the look) containing a <select> and two buttons. Everything looks as I want it, except that the text for the options are cut off.
I've tried resizing the select, but can't find any reference on resizing the option itself.
What am I doing wrong?
The HTML:
<div id='tabs-1' style='width: 95%;'>
<table style='width: 98%; margin-left: auto; margin-right: auto;'>
<tr>
<td style='width: 33%;text-align: center;'>
<fieldset style='height: 300px;width: 90%;'>
<legend>Manual</legend>
<br>
<div style='text-align: center;'>
<a href="#" onclick='getPage("SheriffManual")' target="_self">
<img src="images/manualIcon.jpg" alt='Manual' height="65">
<br>
Sheriff's Policy and Procedure
</a>
</div>
</fieldset>
</td>
<td style='width: 33%;text-align: center;'>
<fieldset style='height: 300px;width: 90%;'>
<legend>Memorandum</legend>
<br>
<div style='width: 100%;" text-align: center;'>
<select style='width: 90%;' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
<option value='memorandum/MINIMUM APPLICANT STANDARDS FOR DETENTION, PEACE OFFICERS AND TELECOMMUN.pdf'>Minumum Applicant Standards</option>
<option value='memorandum/Memorandum EMPLOYEE SMOKING AREAS.pdf'>Employee Smoking Areas</option>
</select>
<br><br>
<div style='float: left; margin-left: 75px;'>
<button>View</button>
</div>
<div style='float: right; margin-right: 75px;'>
<button>Download</button>
</div>
</div>
</fieldset>
</td>
<td style='width: 33%;text-align: center;'>
<fieldset style='height: 300px;width: 90%;'>
<legend>Directives</legend>
<br>
<select size='8' style='width: 90%' id='selSheriffDirectives' name='selSheriffDirectives' value=''>
<option value='directives/SHERIFFS DIRECTIVE NO 2015-09-01 WORK PLACE VIOLENCE.pdf'>Workplace Violence</option>
<option value='directives/Directive ANNUAL TUBERCULOSIS SCREENING.pdf'>Annual Tuberculosis Screening</option>
<option value='directives/Sheriffs Directive No. 02-03 - Bereavement Leave.pdf'>Bereavement Leave</option>
<option value='directives/SHERIFFS DIRECTIVE Mental Health Pre-Screening and Diversion NO 2015-01.pdf'>Mental Health Pre-Screening</option>
</select>
<br><br>
<div style='float: left; margin-left: 75px;'>
<button>View</button>
</div>
<div style='float: right; margin-right: 75px;'>
<button>Download</button>
</div>
</fieldset>
</td>
</tr>
</table>
</div>
The result:
UPDATE: I took out all the CSS and javascript for the page, and the select renders as expected. After putting everything back in, I realized that it was jquery.ui.js causing the problems -- I'm using jquery's tabs and it's setting the <select> option width the same as the tab widths. Now I just have to find out what/how I need to override jquery.
How about adding a scrollbar to your select elements?
<select style='width: 90%; overflow: scroll' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
...
</select>
Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9):
$('select').append(' ');
Forces the select to be redrawn.
Change the height or padding of <option>
option {
height:8px;
padding:8px;
}
I have divided my layout into divs, and within the div="content" area I have a table and a filter option which need to be positioned. I'm trying to insert some margin between the filter option area and the navigation bar. This looks fine in Chrome but in Mozilla Firefox the filter options appear way below than they should.
This is my code and how it looks at the moment:
http://jsfiddle.net/elmiri/5mXJ7/ if you open this link in Chrome the filter option looks fine however in Mozilla it looks really bad.
Here is all of my code:
<div id="header">
<h1>LOGO</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Test
<li>Test
<li>Test
<li>Activity Feed
<li>Stats
<li>Contact Us
<li>Users
<li>My account
</ul>
</div>
</body>
</html>
<div id="personalised">
<p>Hello, </p>
</div>
<div id="content">
<form id="form1" method="get" action="">
<div id= "filter">
<label for="column">Select client type:</label>
<select name="column" id="column">
<option selected>Key</option>
<option >Norm</option>
<option >Onb</option>
</select>
<input type="submit" name="change" id="change" value="Filter">
<input type="submit" name="Remove" id="Remove" value="Show all">
</div>
<table>
<tr>
<th scope="col">Client name</th>
<th scope="col">Client type</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td>Client2</td>
<td>KEY</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>Client3</td>
<td>KEY</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>client4</td>
<td>NORM</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>client4</td>
<td>ONB</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>client100</td>
<td>Key</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
</table>
</div>
This is the part of the code that positions the filter option:
<div id= "filter">
<label for="column">Select client type:</label>
<select name="column" id="column">
<option <?php if ($col == 'Key') echo 'selected'; ?>>Key</option>
<option <?php if ($col == 'Norm') echo 'selected'; ?>>Norm</option>
<option <?php if ($col == 'Onb') echo 'selected'; ?>>Onb</option>
</select>
<input type="submit" name="change" id="change" value="Filter">
<input type="submit" name="Remove" id="Remove" value="Show all">
</div>
the css code:
#filter {
float:right;
margin-top: 2%;
}
THIS filter div is within the Content div so I'm not sure if that's causing problem. I tried to set margin-top to 20 px and it still did not work in Firefox.
Would be grateful if someone helped me put a gap between the navigation bar and the filter option so that it looks fine both in Chrome and Mozilla.
Thank you
That's because the margin-top if set in a percentage it is proportional to the element's parent width and not height as one would normally expect. Margin on MDN.
I have a jsfiddle below:
http://jsfiddle.net/C95uc/3/
I am having trouble with my css. I want to display both drop down menus on the left above one another and I want to display the text inputs on the right hand side, but how can I do this?
Below is the html code:
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
</div>
<div class='lt-container' >
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
<div id='rt-container' >
<form id='detailsForm'>
<table>
<tr>
<th></th>
<td><input type='hidden' id='idmodule' name='moduleid' value='' /> </td>
</tr>
<tr>
<th>Module ID:</th>
<td><input type='text' id='nomodule' name='moduleno' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Module Name:</th>
<td><input type='text' id='namemodule' name='modulename' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Credits:</th>
<td><input type='text' id='credits' name='creditsname' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='moduleAlert'></div>
</form>
</div>
CSS:
.lt-container, #rt-container {
float: left;
}
#rt-container {
clear: right;
margin-left: 5%;
}
http://jsfiddle.net/C95uc/4/
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
Both <select> go in the same <div class='lt-container'>
The two dropdowns don't stack on top of each other because you have assigned both of them a "float:left" property which makes them go side by side. Instead, wrap them in a div and make that div float left.
<div class="lfloat">
<!-- Both Dropdowns -->
</div>
CSS:
.lfloat {
float:left;
}
Be sure to add a "float:right" property to the form so that it doesn't appear below the two drop downs.
Example: http://jsfiddle.net/C95uc/5/
I have three columns in a table. 1st and 3rd column have plenty of rows. 2nd column has only row, but i want this row to be located in middle of table. I am not getting desired result.
<tr>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
<td colspan="2" align="center" valign="middle">
Move
</td>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
</tr>
Attached the image also. Help me where am I going wrong
Use "vertical-align:" instead of "valign:"
style="vertical-align: middle"
http://www.css4you.de/Texteigenschaften/vertical-align.html
Try to add a div or span tag, and mention the width and height in it.
Consider the following HTML snippet. The desired effect is to have a dropdown be positioned right above a table.
<!-- this is actually in a proper CSS class, not inline-->
<div style="float:left;
min-height:1px;
padding:15px 2% 20px;
position:relative;
width:96%;">
<form method="post">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
The above renders like this:
table and select float right http://www.imagechicken.com/uploads/1253124526051538700.png
Question: How can I write my CSS to achieve positioning like this mockup?
desired http://www.imagechicken.com/uploads/1253124791005327900.png
Add clear: both; to your table's CSS. This will clear the float of the div (with the dropdown) above it.
But why don't you just text-align: right; your div, then you don't have to mess with floats and inline divs. That should work as well.
One way would be to add absolute positioning to both divs.
or
Other way would be to use table. For example:
<table>
<tr><td>
<form method="post">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
</form>
</td></tr>
<tr><td>
<div>
<div style="float:left;
min-height:1px;
padding:15px 2% 20px;
position:relative;
width:96%;">
hello world
</div>
</td></tr>
</table>
or
Add one more div around the div that has float:right. For example:
<form method="post">
<div style="float:left; width:300px">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
<div>
<div style="float:left;
min-height:1px;
padding:15px 2% 20px;
position:relative;
width:96%;">
hello world
</div>
you could make another cell for the table
<table>
<tr>
<td colspan="2">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
</td
</tr>
<tr>
<td>table head</td>
<td>table head</td>
</tr>
<tr>
<td>content1</td>
<td>ontent2</td>
</tr>
<tr>
<td>content3</td>
<td>content4</td>
</tr>
</table>
this should work.. or you could use css. but this is the fastest way to do it:-? at least until you make/find some css. you could use float left on both divs