On the main page of my website I have a problem concerning the two inputs located at the top right of the page ("Rechercher" text field and "OK" button).
In fact, my CSS works on FF & IE but not on Chrome.
To make it more generic, it's just two input in a div.
Can you help me to correct this misbehaviour on Chrome?
Thanks a lot guys!
CSS of the "Rechercher" text field:
#champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}
CSS of the "OK" button:
#habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}
CSS of the div:
#encart_recherche_style {
padding-left:746px;
text-align:center;
width:210px;
}
In general, tables are terrible for layout, but if you MUST use them, just put your button in a TD after the input's TD instead of putting the input field in a table by itself and attempting to force the table to display inline.
I highly suggest learning how to use CSS for your layouts in the future.
Again, I don't recommend tables for layout, but...
Instead of:
<table>
<tr>
<td> INPUT IS HERE </td>
</tr>
</table>
BUTTON IS HERE
Try this:
<table>
<tr>
<td> INPUT GOES HERE </td>
<td> BUTTON GOES HERE </td>
</tr>
</table>
Using inline-block instead of inline on your table will get you closer to the behavior you want.
Related
I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
I want to display a list of complex records and trying to simply fit it into a table doesn't seem to be working very well.
I'd like a layout that goes something like this:
Each whole record could be put into a table cell (one cell per row), and then I could use <div> tags within each cell. Is putting divs into table cells likely to cause display problems? It could be simply done with divs anyway, so perhaps that's a bad idea.
Within each record, there are quite a number of components. If I lay these out with divs, what do I need to do to ensure each label/value pair is in the right position? Or is there some better way to ensure a consistent layout?
Obviously the values for each record will be different so to maintain a consistent look I would need the labels to all line up vertically.
If the question seems a bit vague, then it's because my understanding of how to do it is vague... even some help clarifying the question would be great!
Using divs in table cells is fine. Shouldn't cause issues.
Although looking at your mockup, semantically I would say its not a table. No columns, column headings etc.
It looks more like a list of items with more details in them.
I'd use a ul with li's and divs inside to lay things out further.
Also if you need the ID sitting exactly like that you could use a legend element inside each li.
If you are looking at HTML 5, the article tag might fit here. The fact that you have an "Author Element" seems to make it a good fit. If you are not looking at HTML 5 just use a div instead of article. Or as #Moin Zaman mentioned use ul and use li in place of article in my example below.
As for ensuring your labels etc line up vertically this is fairly easy to achieve. Just explicitly set the widths via css.
Here is a quick example:
HTML
<article>
<h2>ID: 123</h2>
<div class="actions">
<input type="button" value="Do Someting" />
<input type="button" value="Do Someting Else" />
<input type="button" value="And Maybe something Else" />
</div>
<div class="description">A fairly long description that takes up basically the entire width of the section, maybe even longer still</div>
<div class="details">
<div class="author"><span>Author:</span>Douglas Adams</div>
<div class="created"><span>Created:</span>1 Jan 2012</div>
<div class="label first"><span>Label 1:</span>Value</div>
<div class="label"><span>Label 2:</span>Value</div>
<div class="label"><span>Label 3:</span>Value</div>
<div style="clear:both; line-height:0px;"> </div><!-- Use A Clear Fix Instead of this, I got Lazy!! -->
</div>
</article>
CSS
article
{
border: solid 2px black;
margin:20px;
padding:5px;
position:relative;
}
article h2
{
background:#FFF;
padding:5px 8px;
position:relative;
top:-15px;
left:5px;
display:inline;
}
article .actions
{
float:right;
width:25%;
text-align:right;
position:relative;
}
article .actions input
{
display:block;
float:right;
clear:both;
}
article .details
{
position:releative;
width:70%;
}
.author
{
float:left;
width:60%;
}
.created
{
float:left;
width:40%
}
.label
{
float:left;
width:30%;
}
.label span, .author span, .created span
{
font-weight:bold;
padding-right:3px;
}
See this fiddle
Note: Use a clear fix instead of having the clearing div.
How about something like this.
HTML
<div>
<span class="label">ID 345</span>
<table>
<tr>
<td class="desc" colspan="3">A fairly long description that takes up basically the entire width of the section, maybe even longer still</td>
<td rowspan="3" class="doStuff">Do Something<br />Do another thing<br />Maybe 1 more thing</td>
</tr>
<tr>
<td class="author"colspan="2"><span>Author: </span>Joe Bloggs</td>
<td class="created"><span>Created: </span>19th June 2012</td>
</tr>
<tr>
<td class="label3"><span>Label 3: </span>Value</td>
<td class="label4"><span>Label 4: </span>Value</td>
<td class="label5"><span>Label 5: </span>Value</td>
</tr>
</table>
</div>
CSS
div{
margin:17px 10px;
border:2px solid #000;
}
span.label{
background:#FFF;
padding:5px 8px;
position:relative;
top:-10px;
left:5px;
}
table{
width:100%;
}
tr{
background:#ccc;
}
td{
padding:5px 7px;
}
span{
font-weight:bold;
}
jsFiddle - http://jsfiddle.net/QActK/
I have a table in which I have this
</tr>
<tr class="table-top-background" >
<td class="thread-pic" ></td>
<td class="thread-top-middle" colspan="2" >Threads</td>
<td class="thread-information">Last Post</td>
</tr>
So I want to give background image to my tr, so I put this
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat;
position:relative;
color:White;
height:31px;
}
.thread-pic
{
width:30px;
}
.thread-information
{
width:280px;
}
.thread-top-middle
{
width:418px;
}
The problem is that in all browser's it is fine expect Google Chrome.
In Google Chrome it seems that I give background not to tr, but to all td's... It repeat same background for each td.
It is the same in IE7, but in one of stackoverflow questions I read about solving that with position:relative and it helped.
But I didn't find any solutuin for Chrome.
I try to give tr css like this also
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
display:block;
position:relative;
color:White;
height:31px;
width:728px;
}
But it change all my table design... At that time text's in td's of this header row aren't in that places and also all other first td's of my table are in the same size as my header tr . It seems really hillarious.
I tried also to give display:inline-table instead of display:block and it didn't help me too...
What is the solution of that problem?
EDIT: Same problem is in Safari, so it is webkit problem.
Although it worked for me, take a look at:
Can we solve the table row background image problem, in chrome, in multi celled tables?
Which mentions this fiddle:
http://jsfiddle.net/pzjUt/
Using display:table-cell on the <tr> seems to do the trick, but it may have side effects in Chrome or other browsers.
I want to know how can I set my desired width for all the and in my tables. What happens is that when I declare something like <th> Employee Code </th>, it will separate the Employee and Code and creating two lines. This usually happens when the data is shorter than the table header. I want to make my table go wider when the table data is long and not go taller like what is happening right now. Please help...
You can enclose the parts that you don't want broken across the line with a <nobr> </nobr> tag. The browser will not wrap this part of the text.
You can use the Colspan property like <th COLSPAN=2> Employee Code </th>
Colspan indicates the number of columns a cell should take up. There is also Rowspan property.
use css:
table.mytable th
{
height:20px;
text-align:center;
font-weight:bold;
font-family:arial;
font-size:12px;
background-color:yellow;
width:100px;
}
table.mytable td
{
height:20px;
text-align:center;
font-weight:bold;
font-family:arial;
font-size:12px;
width:100px;
}
The CSS attribute min-width was designed for this and compatibility is good. Except for IE6.
This has been driving me crazy, sadly haha. I can't figure out why I can't make the "X's" in my table align with the bottom of the table... I've tried putting vertical-align in different places in the CSS, but to no avail :(. Also am I using correctly for blank spots in my table?
Here are snips of both my HTML and CSS files...any comments would be greatly appreciated
<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>
<body>
<table id="products">
<tr>
<th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
</tr>
<tr>
<td>Advertising</td>
<td id="td">X</td>
<td><span></td>
<td><span></td>
</tr>
<tr class="alt">
<td>Catering Software</td>
<td><span></td>
<td id="td">X</td>
<td id="td">X</td>
</tr>
....
#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}
You could use position: relative on your td and table, then move the td to the bottom by using bottom: 0px.
However, I think this website should answer your question a bit more clearly: http://shouldiusetablesforlayout.com
With the HTML and CSS you have provided the vertical aligning seems to be working as I'd expect. I set up a little test on jsfiddle here http://jsfiddle.net/dttMd/ . I put some line breaks in the first row to confirm that the following text was bottom aligning. If this isn't what you are after could you clarify what exactly it is that you need.
As for the empty cells, what you are doing is wrong since <span> elements need to have a closing tag. My personal preference is just to put in a into the cells. I don't think there really is a "right" way though necessarily (though I am happy to be corrected).
that's because you have a 7px bottom padding in the td. You can change it to
padding:3px 2px 0 5px;
and the spacing is gone.
http://jsfiddle.net/6AAvH/2/
Padding can mess with layout and height/width. Get rid of the padding from your td and give it a height instead.
Sometimes line height can make it seem like it's not aligning to the top or bottom. If your font size is less than its container, it might be inheriting the line height. If you set the line height to the font size (or just line-height: 1) and give the td a height, that should do the trick.
<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>
Your <span> is missing the closing </span>, and you shouldn't be using a span to take up space since it is an inline element. For tables, you shouldn't even need a placeholder, but if you are more comfortable you can use or if you want it to inherit some kind of padding/margin style, you can use that element (<p> </p> or <h3> </h3>).
You can just simply add valign="bottom" in every td and this will make content to be aligned at the bottom and is supported by every browser in the world!
Hope this would help you.