I need some help as to the reason IE7 will not render my image in the following HTML/CSS code
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Debugging IE 7 image problem</title>
<style>
.delete-icon
{
background-image: url("http://cdn4.iconfinder.com/data/icons/momenticons-basic/16x16/trash-can-delete.png");
background-position: top right;
background-repeat: no-repeat;
padding-right: 18px;
margin-left: 7px;
}
</style>
</head>
<body>
<table id="table_Locations">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="div-input-default" id="LocationsTest2">
<td>
<select name="AllTests_Locations_Substance_2" id="LocationsTest2">
<option value="641">Okuku</option>
<option value="644">Oyan</option>
<option value="645">Ikirun</option>
<option value="646">Oshogbo</option>
</select>
</td>
<td>
<input id="LocationsTestResults2_negative" name="AllTests_Locations_Result_2" value="776" type="radio" />Negative <input id="LocationsTestResults2_positive" name="AllTests_Locations_Result_2" value="777" type="radio" />Positive<br />
</td>
<td>
<a class="delete-icon" href="#"></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This renders well in IE8, IE9, Firefox and Chrome but not IE7. How can I change this markup to get it to work in IE7 please? Thanks.
Try this:
.delete-icon {
background: url("http://cdn4.iconfinder.com/data/icons/momenticons-basic/16x16/trash-can-delete.png") no-repeat right 0;
display: inline-block;
width: 100px; /* set to whatever you need */
height: 100px; /* set to whatever you need */
padding-right: 18px;
margin-left: 7px;
}
The key is giving the anchor tag the correct display value plus a width and height.
I'd also recommend that you don't use tables for layout purposes as that hasn't been good practice for at least 10 years or more.
Try to set width and height to .delete-icon style
Related
I am trying to align the "minus" and "plus" sign to the bottom. However, neither the css nor inline style works. By selecting the contents, there is no extra white space in the bottom of the icon.
Why neither css nor the inline-style statement didn't work?
Here below are the codes I tried:
HTML
<tr>
<td style="vertical-align: text-bottom;">
Copies:
<i class="material-icons icons"></i>
<input type="text" id="myNumber" size="1px" value="1" />
<i class="material-icons"></i>
</td>
</tr>
CSS Option 1
material-icons.icons {
vertical-align: text-bottom;
}
CSS Option 2
material-icons.icons {
position: absolute;
bottom: 0;
right: 0;
}
You can consider using a flexbox for the table cell.
td {
display: flex;
align-items: flex-end; /* Vertical alignment at the bottom */
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<tr>
<td>
Copies:
<i class="material-icons icons"></i>
<input type="text" id="myNumber" size="1px" value="1" />
<i class="material-icons"></i>
</td>
</tr>
</table>
Approach 1 :
PS: #Gerard answer is well accepted as it follows the flexbox which is
a good technique to play with element's alignment, also the answer doesnot
modify the markup as its slightly modified in approach 2.
Approach 2:
Made slight change in html mark-up, - Wrapped the Copies: inside a span tag.
Floated every element, and used line-height to adjust the elements.
td {
height: 20px;
}
td > * {
float: left;
display: inline-block;
height: 100%;
line-height: 20px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<tr>
<td valign="bottom">
<span>Copies:</span>
<i class="material-icons icons"></i>
<input type="text" id="myNumber" size="1px" value="1" />
<i class="material-icons"></i>
</td>
</tr>
</table>
Make different < td > for each of them it will align in proper way. Check the below code :
//Link is to add the material icon (CDN for material Icon) you have do add this in
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<tr>
<td style="vertical-align: text-bottom;">
Copies:</td>
<td> <i class="material-icons icons"></i> </td>
<td> <input type="text" id="myNumber" size="1px" value="1" /> </td>
<td><i class="material-icons"></i></td>
</td>
</tr>
</table>
Add below css and you're done...
tr>td {
display:table;
}
tr>td>i {
display:table-cell;
vertical-align: bottom;
}
I have a table with 2 columns and on each column I have a different size of font (the bigger size font also strong).
My problem is the vertical alignment of the text: it doesn't align vertically (see the image):
Here's my html code:
<html>
<head>
<style>
.big-text-size {
font-size: 3.5em;
}
.small-text-size {
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Any suggestions why does it happen?
Tweak the vertical alignment of your different-size-text (see here):
<html>
<head><style>
.big-text-size {
font-size: 3.5em;
vertical-align: text-bottom;
}
.small-text-size {
font-size: 1.1em;
vertical-align: text-bottom;
}
</style></head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Your second table doesn't have any rows...
<table>
<tr> <!-- Missing -->
<td class="small-text-size">Daniel Boro</td>
<td class="big-text-size"><strong>My doctor's name</strong></td>
</tr>
</table>
try including rows in your table..
you can also visit this site http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html It provides 4 CSS tricks that you can use to align text vertically in a table cell
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
I'm trying to align a table row of form controls, as in this jsbin example:
http://jsbin.com/umeyud/6
I only care about IE8+, recent Firefox and recent Chrome (sorry Safari & Opera!)
While I can get pretty close, I wish I could get the "Label" on the left to align nicely with the first line of all the text displayed on all the other controls.
An added bonus would be to get the checkboxes to be vertically centered to the middle the first line of text.
Here you go. Enjoy!
I needed 4px for IE & Opera, 6px for the others
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/umeyud/6/edit
-->
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
div
{
display: inline-block;
}
body,td,input,select,textarea
{
font: 14pt Arial
}
.multi td
{
white-space: nowrap;
}
.q, .vAlign
{
padding-top: 0px;
vertical-align: top;
padding-top: 4px;
}
table
{
display: inline-table;
}
</style>
</head>
<body>
<table>
<tr>
<td class="q"><div>Label</div></td>
<td class="a text" style='vertical-align: top'><input type="text" value="Hello, World!"/></td>
<td class="a text" style='vertical-align: top'><textarea>Hello, World!</textarea></td>
<td class="a yesno vAlign" style='vertical-align: top'><div><input type="checkbox"/> </div></td>
<td class="a single" style='vertical-align: top'><select><option>Option 1</option></select</td>
<td class="a multi vAlign" style='vertical-align: top'>
<input type='checkbox'/>Option 1<br>
<input type='checkbox'/>Option 2<br>
<input type='checkbox'/>Option 3
</td>
<td class="a picture"><img src="#" width=160 height=120></td>
</tr>
</table>
</body>
</html>
just have found strange problem in ie7 rendering (may be for previous versions else).
If I have input inside td it create cell with height more then other browsers (ff, ie8, chrome).
All margins are reset, paddings removed, cellcpacing to zeroes. The only possibly way to make them equivalent
that I have found is specify height for all tds in pixels. But it seems to me very ugly.
here is html:
<!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>
<link type="text/css" href="styles/main.css" rel="Stylesheet" />
</head>
<body>
<br />
<table cellspacing="0" cellpadding="0" border="0" class="details-table">
<tr class="details-row">
<td>
<label for="txtFirstName">First Name</label>
</td>
<td>
<label for="txtFirstName">Last Name</label>
</td>
</tr>
<tr class="alt-details-row">
<td>
<label for="txtFirstName">First Name2</label>
<input type="text" class="details-input textField" id="txtFirstName2" name="txtFirstName2" />
</td>
<td>
<label for="txtLastName2">Last Name2</label>
<input type="text" class="details-input textField" id="txtLastName2" name="txtLastName2" />
</td>
</tr>
<tr class="details-row">
<td>
<label for="txtFirstName3">First Name3</label>
<input type="text" class="details-input textField" id="txtFirstName3" name="txtFirstName3" />
</td>
<td>
<label for="txtLastName3">Last Name3</label>
<input type="text" class="details-input textField" id="txtLastName3" name="txtLastName3" />
</td>
</tr>
</table>
</body>
</html>
here is css:
html,
body,
form,
table,
tr,
td
{
margin: 0;
padding:0;
border: 0;
outline: 0;
font-size: 100%;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px ;
}
input.textField
{
margin:0px;
padding:0px;
border: 1px solid #BFBFBF;
height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px ;
}
.details-table
{
width:100%;
color: #666
}
.details-table tr.details-row,
.details-table tr.details-row td
{
background: #ebe4bc;
}
and here is screen shot:
float:left on the elements might help
I don't think you can fix it by changing the height of either td or input element, as there's always 1 offset auto generated for that input in IE7 mode. In IE8 or other popular browsers, the extra 1 offset is not generated.
I think it's a bug in IE7.