hidden browse button is messing up my table - html

I am trying to make a floating menu that sticks to the top of the screen and has a few icons you can click, most of which will submit a form. As it stands though, the filechoosebutton is hidden via css, but even though it is not rendering, it still causes my download button to disappear offscreen. How can I fix this?
Thanks for any clues
Here is the html for the menu
<div id='floating_menu'>
<table >
<tr>
<td >
<form action='' method='post' id='trash1' >
<img src='http://s27.postimg.org/jua3mu9q9/trash.jpg' width="35" height="45" alt='delete' />
</form>
</td>
<td >
<img id='storagebutton' src='http://i60.tinypic.com/2igya9d.jpg' width="35" height="45" alt='storage' />
</td>
<td >
<form id="uploadtsvform" enctype="multipart/form-data" method="post" action="">
<input id="filechoosebutton" name="uploadFile" type="file" onchange="this.form.submit()" />
<img id='uploadbutton' onClick='chooseFile()' src='http://oi59.tinypic.com/2lm0yky.jpg' width="35" height="45" alt='upload tsv' />
</form>
</td>
<td >
<img id='downloadbutton' src='http://i62.tinypic.com/zu4n03.jpg' width="35" height="45" alt='download tsv' />
</td>
</tr>
</table>
</div>
Here is the css that creates the floating menu
#floating_menu {
background:white;
width:250px;
height:25px;
position:fixed;
top:10px;
right:0;
}
Here is the css that hides the usual Browse upload button
#filechoosebutton {
height:0px;
width:0px;
overflow:hidden;
}
Here is a Fiddle

You form is eating up the space of the download button. Try adding
#uploadtsvform {
display: inline-block;
width: 50px;
}

Related

How to make button appear on hover when you hover over a whole table row?

I'm running into a problem in my HTML code. I am trying to display a button when you hover over a row in a table. Right now the button only displays when you hover near it but I need it to show when you hover over anywhere on that row. Can anyone help explain how to do this?
.button {
opacity: 0;
}
.button:hover {
display: inline-block;
opacity: 1;
}
<table>
<tr>
<div class="button">
</div>
<td><img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<img src="/app/images/master/actions_btn.svg" />
</div>
</td>
</tr>
</table>
Right now, a button will only show when you over it directly. In order to show a button when its table row is hovered, set your CSS definition to target buttons that are inside of hovered rows:
tr:hover .button { ... }
Also:
<div> elements that are inside <tr> but not <td> are invalid, per the permitted content of <tr> elements. I have removed them, but you could wrap them in <td> elements if you need them.
I took the liberty of putting the .button images inside their <a> elements, although I'm not sure that's what you intended.
I noticed that the hover effect doesn't work over spaces between cells, which causes gaps in the hover area. So I set border-collapse:collapse; and padding the cells individually.
table {
border-collapse: collapse;
}
td {
padding: 5px;
}
.button {
opacity: 0;
}
tr:hover .button {
opacity: 1;
}
<table>
<tr>
<td><img src="//lorempixel.com/20/20/abstract/1/" width="20" height="20" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<a href="#">
<img src="//lorempixel.com/20/20/abstract/1/" width="20" height="20" />
</a>
</div>
</td>
</tr>
<tr>
<td><img src="//lorempixel.com/20/20/abstract/2/" width="20" height="20" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<a href="#">
<img src="//lorempixel.com/20/20/abstract/2/" width="20" height="20" />
</a>
</div>
</td>
</tr>
</table>
It's my understanding that from explanation
I am trying to display a button
that initially it is hidden? If so, just trigger hover over a button with jQuery.
So, lets say wee add ID to : <tr id="myrow"> and in <div class="button"> we also add ID: <div class="button" id="mybtn">
Then in jQuery we have:
$("#myrow").mouseover(function() {
$("#mybtn").show() // if it was hidden show it
$("#mybtn").trigger("mouseover"); // trigger as if mybtn was mouseovered
});

Align date to right side

Trying To Align date next to the hyper link .Even though added align="right" it still shows in left
<tr>
<td>
<img src="images/page_white_acrobat_small.png" style="margin-right: 0.3rem;" align="absbottom" />
<a style="font-size: 12px" href = "" onclick="Popup.open({url:'PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN <label tal:content="string: ${pertiDate}" style="margin-right: 0.3rem;" align="right" >
</label>
</a>
</td>
</tr>
Add a class to your CSS called pull-right..
.pull-right {
float: right;
}
...and then add that class to your element.
class="pull-right"
Try changing your style tag to style="margin-right: 0.3rem; display:block; float: right;"

Unable to get element under other elements

I have an issue formatting some HTML. Basically I have a large number of listboxes which are hidden once the page is loaded, and have placed them in HTML tables for now. I am aware that this is not good practice, but this is how I have received them and since there are over 100, I cannot realistically change their HTML code.
I would like for the </hr> and two buttons on the right of the image, to appear under the listboxes.
Here is a jsfiddle of the code.
How can this be formatted for the buttons to appear underneath, regardless of the height taken up by the listboxes? i.e. they will always appear underneath.
You just need to tell the browser to ignore the floating set by the the div surrounding the table:
#divButtons{
clear:both;
}
#divButtons input[type="submit"]{
float:right;
}
Please note that this solution "inverses" the order in which your buttons are displayed. You might need to change their position in your HTML.
Or something like this
#divButtons{ width:100%; float:left }
http://jsfiddle.net/9BBKp/
Here is demo
try this:
<form>
<div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>
<select name="cmbProducts" onchange="javascript:setTimeout('__doPostBack(\'cmbProducts\',\'\')', 0)" id="cmbProducts" style="width:250px;"></select>
</div>
<div style="padding-top: 50px;">
<hr />
<div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
</td>
</tr>
</table>
</div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
</td>
</tr>
</table>
</div>
</div>
<hr />
</div>
<div id="divButtons" style="text-align: center;">
<input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
<input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
</div>
</form>
and css:
.list-box {
width: 250px;
}
.selection-panel {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;
align-content: center;
text-align: center;
}
#divButtons {
float:right;
clear:both;
}

Setting textbox's clickable background

I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK

Page does not display correctly in firefox and opera

So I'm working on this site and for some reason a couple of the pages do not align correctly in firefox and opera, but work just fine in chrome, IE, and Safari. The basic construction is that I have a div with width, height=100%, within the Div i have a table to separate the sections of the page. The left and right side columns should be filling up the remainder of the width of the screen however in firefox and opera the columns have no width, but in IE, Chrome, and Safari they fill up the remainder. In playing with it if i remove the width parameters on the two middle cells it will line up correctly but this causes text alignment issues in chrome, IE, and Safari. How do I get the columns to fill up the page in all browsers?
Here is a link http://its.truman.edu/International/Meet_A_Student.htm
Here is my code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meet A Student</title>
<style type="text/css">
#outer {
opacity: .5;
}
#img1 {
opacity: .3;
}
#table1 {
opacity: 1;
}
</style>
</head>
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
<table style="width: 100%; height:100%; border-collapse:collapse">
<tr>
<td rowspan="4" style="background-color:#2BA7D0; margin-right:0px; height:100%;" id="outer" >
</td>
<td colspan="2" style="text-align: center; background-image: url('Pictures/Header_New.jpg');width:960px; height:100px" valign="bottom" >
<table style="width: 100%; border-collapse:collapse">
<tr>
<td style="width:20%"> <a href="/International/Home.htm">
<button type="button" style="color: black;background: #2BA7D0; border:0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Home
</span>
</button>
</a></td>
<td style="width:20%">
<button type="button" style="color:white; background:#FA7042; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Meet A<br/> Student
</span>
</button>
</td>
<td style="width:20%"> <a href="/International/Available_Funds.htm">
<button type="button" style="border-style: none; border-color: inherit; border-width: 0; background: #2BA7D0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold; WORD-WRAP:break-word">
Available <br /> Funds
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Contact.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Contact <br/> Truman
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Give.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Give
</span>
</button>
</a></td>
</tr>
</table>
</td>
<td rowspan="4" style="background-color:#2BA7D0; height:100%;" id="outer">
</td>
</tr>
<tr>
<td style="width:480px" >
<div>
<img alt="Wanding Shi" src="Pictures/Wanding Shi.jpg" style="float: left; margin-right:10px" width="258" height="389"/>
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">
Wanding Shi
</span><br />
Senior Business Major<br />
<br />
Home Country - China<br />
<br />
"I enjoy the environment at Truman and have
gotten involved in Phi Beta Lambda and the
Bulldog Investment Fund. I am grateful for
the opportunity to get to know students from
different countries while at Truman."
</p>
</div>
</div>
</td>
<td style="width:480px">
<div>
<img alt="Babajide Adio" src="Pictures/Babajide_Adio.jpg" style="float: left; margin-right:10px" width="240" height="389" />
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">Babajide
Adio</span><br />
Senior Biology Major<br />
<br />
Home Country - Nigeria<br />
<br />
"At Truman, I have enjoyed great opportunities
to do research with professors since my freshman
year. I have also gotten involved in a lot of
student organizations including honors
organizations, the African Students Association
and Intramural Soccer and Basketball. The
community is very friendly, and it is easy for
every student to find his or her niche. Since
international students don't qualify for many
scholarships because of citizenship, it would be
wonderful to receive support for international
students."
</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; width:20%; background-image:url('Pictures/Footer_New.jpg')" class="style6" >
<div id="table1"> <table id="table1" style="border-collapse:collapse; width:960px">
<tbody>
<tr>
<td style="text-align:right;font-family:Calibri;margin-bottom:0px; ,margin-top:0px" valign="bottom" >
<p style="font-family:Calibri;font-size:20pt; text-align:center;margin-bottom:0px;margin-top:0px" >
<a href="https://secure.truman.edu/alumni-s/contribution_new.asp" style="text-decoration:none; color:black">
Make a Contribution
<span style="color: #FA7042; font-weight:bolder">
TODAY!
</span>
<span style="text-decoration: underline">
<br/>click here
</span>
</a>
</p>
</td>
<td style="text-align:right;font-family:Calibri;">
<span style="font-size:14pt;font-weight:bold; padding-right:40px">
Truman State University
</span> <br />
<span style="font-size:12pt">
Office of Advancement | McClain Hall 205 <br />
100 E. Normal Avenue |Kirksville, MO 65301</span>
</td>
<td style="font-family:Calibri;border-left-style: solid;border-left-width: 1px; margin-left:10px; text-align:left">
<span style="font-size:14pt;font-weight:bold;padding-left:50px">
<a href="www.truman.edu">
www.truman.edu
</a>
</span>
<br />
<span style="font-size:12pt; margin-left:5px;">
(660) 785-4133 or (800) 452-6678
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#2BA7D0; margin-right:0px; height:100%" id="outer" class="style3">
<br />
<br />
</td>
</tr>
</table>
</div>
</body>
</html>
I suggest the following for you main div and body style:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-
HomepageColor.jpg'); clip:auto; overflow:hidden;">
<div style="margin:0px auto">.....
Ok and for the content: Why do you have so many Divs inside your table? The use of a table defeats the need for using a Div in most cases, so I suggest you take out all the divs in the table. If you want something to behave like a block element such as the images, set display: block or inline-block.
As for all the dimensions: You defined too many widths and heights. Do not assign the widths in pixels to the td tags, the size of the images will do their job. You can specify their dimensions. Try that and let me know.
"for some reason a couple of the pages do not align correctly in firefox and opera"
You can quikly fix that problem by adjusting this part of your code:
CHANGE THIS:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
TO:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:relative; height:100%; margin:0px auto">
The issue is that if you give position:absolute; your are removing the element from the normal document work-flow, thus causing the margin: 0 auto; to be meaningless.
What I did was to change the position:absolute; to position:relative; thus having the margin:0 auto; being "respected" by the browser.
EDITED
To solve the mentioned issue on your comment, you just need to set the html height to 100%;.
CSS
html {
height: 100%;
}
Note: This will tell the browser that the document has a height of 100%, thus causing the body and body>div height of 100% to extend till the end of the document.