I've some code like this:
<div class="divleft">
<TABLE class="form-table">
<TR class="heading">
<TD colspan="2" align="left">
<h3>Account description</h3>
</td>
</tr>
<TR>
<TD>Name</TD>
<TD><input name="Naam" id="Naam" type="text" class="InputText" /></TD>
</TR>
and a CSS style on the class heading like this (for testing purposes, not actual styling)
.form-table tr.heading{
border-bottom-width: 10px;
border-bottom-color:black;
}
However, this style is being ignored. When I inspect the element with google chrome tools I cannot see any other stylesheet element that could affect this.
Any ideas on what could be causing this issue?
border-style is missing
.heading{
border-bottom-width: 10px; border-style:solid;
border-bottom-color:black;
}
You can write in single line like this
.heading{
border-bottom: 10px solid black;
}
Related
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
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;
}
My website has borders on many objects using border= activeborder 1px solid and it was working fine till last week on all the browsers. Now it has stopped working just on Chrome (Works on all other browsers). I haven't changed anything in the style sheet and have checked many times but it still does not work for some reason. Here's a sample of the code. If I change activeborder to gray 1px solid it works. Why so ? some kind of google update ?
<html>
<head></head>
<body>
<form id="form1">
<div>
<table style="width: 90px; margin-top: 27px;" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 30px;">
Latest News
</td>
</tr>
<tr>
<td style="border: activeborder 1px solid; padding: 10px" align="left">
<a style="color: #666666;" href="" target="_blank">one</a>
<br />
<a style="color: #666666;" href="" target="_blank">two</a>
<br />
<a style="color: #666666;" href="" target="_blank">three</a>
<br />
<a style="color: #666666;" href="" target="_blank">four</a>
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
activeborder is not a standard css colour name. Using a standard name e.g. gray, or #666 or rgb(50,50,50) should work.
They were included as CSS2 system colours, but are now deprecated (an apparently now don't work). My testing shows that:
background-color: ActiveBorder;
... does work in IE11 and FireFox26 but not in Chrome32. Try seeing if it works in Quirks mode.
Find and Replace is your friend if you want to use css3 standard colors ;)
And ... ahem ... you should be defining your css in a stylesheet, not inline rough idea:
table.grid {width: 90px; margin-top: 27px;}
.grid td {border: 1px solid #999; padding: 5px 10px; text-align: left;}
.grid a {color: #666}
but I'm sure you knew that and were only doing inline for the example ;)
I have following markup
<div class="dc2-search-form">
<table width="100%">
<tbody>
<tr>
<td>
<div class="search-form-label">
<span id="StreetAddress_Label">Address</span>
</div><br>
<input style="height: 10px; width:80px" tabindex="0"
type="text" value="">
</td>
<td>
<div class="search-form-label">
<span id="Sales_Cycle_Label">Sales
Cycle</span>
</div><br>
<input style="height: 10px; width: 80px;" tabindex="0" type="text" value="">
</td>
</tr>
</tbody>
</table>
And following CSS
.dc2-search-form {
overflow-x: scroll;
}
.dc2-search-form table {border-collapse:collapse;border-spacing:0;border:0}
.dc2-search-form .search-form-label{font-size:13px;background-color:#BFBFBF;padding:10px 0 10px 1px; border-top:1px solid black;border-bottom:1px solid black;}
.dc2-search-form table select,input{height:10px;font-size:10px;padding:2px;}
Here is the jsfiddle for reference
It gives me the desired output except for a tiny bit space between table cells. I need to make the span div appear as seamless one row with border on top and bottom but I am to able to accomplish that due the space.
How to remove the space between them.
Apply no padding to your table cells:
.dc2-search-form table td{padding:0}
JSFiddle
add cellspacing=0 cellpadding=0 to your table
update fiddle
<table width="100%" cellspacing=0 cellpadding=0>
Try setting the cellpadding and cellspacing to 0, like this:
<table cellpadding='0' cellspacing='0'>
...stuff...
</table>
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>