CSS - Scaling An Image Within A Table Cell

I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

Here is a setup of my table
Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table class="spry" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table class="spry" cellspacing="0" cellpadding="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="108px">{last}</td>
                <td width="106px">{first}</td>
                <td width="269px">{account}</td>
                <td width="66px">{state}</td>
                <td width="82px">{hls_year}</td>
                <td width="82px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>

Here is my CSS file
Code:

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#News a:link {
	color: #00F;
}
#News a:hover {
	color: #00F;
	text-decoration: underline;
}




body {
	background: #000 repeat;
}




#wrap {
	background: #000;
	width: 900px;
	border: thick solid #9C0029;
	float: left;
	height: auto;
	padding: 0px 0px 1em;
	margin-top: 2%;
	margin-left: 10%;
}
#footer {
	font: bold small/50px Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #9C0029;
	text-align: center;
	height: 50px;
	width: 850px;
	margin-left: 25px;
}

#Header {
	background: #8F001C url(../images/banner.jpg) no-repeat center center;
	width: 850px;
	height: 150px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 25px;
}
h1 {
	font: normal 18px Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
}
h2 {
	font: small Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: justify;
}
h3 {
	font: normal medium "Times New Roman", Times, serif;
	color: #FFF;
}
h4 {
	font-size: small;
	color: #333;
	text-align: left;
}
.banners {
	background: #FFF0B2;
	width: auto;
	height: auto;
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: .5em;
	padding-bottom: .5em;
	text-indent: 10px;
}
.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Content a:link {
	color: #00F;
}
.Content a:hover {
	color: #00F;
	text-decoration: underline;
}
.Content a:visited {
	color: #00F;
}

#inner_body {
	background: #FFF;
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-left: 50px;
	padding-top: 0.5em;
	padding-bottom: .5em;
}
#inner_border {
	margin: 0em auto auto;
	border: thin solid #8E887C;
	width: 775px;
	padding: 1em 0em 0em;
}
#nav_bar {
	height: 3em;
	width: 100%;
	margin-left: 0%;
	text-align: center;
}


#Content {
	height: auto;
	width: 95%;
	padding: 0em 0% 5em;
	margin: 2.5% 2.55% 2%;
	text-align: left;
	font-family: Verdana;
}
#nav {
	height: auto;
	width: 20em;
}

#News {
	margin-left: 2px;
	height: 30%;
	background: #FFF0B2;
	padding: 3%;
}
#News a:visited {
	color: #00F;
}

.Overload
{
	height: 208px;
	overflow: auto;
}

.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}

.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}

.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}

table.spry th {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry td {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

Any ideas?

Thanks!

I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

Correct look Incorrect look

I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

Here is my main CSS:
Code:

	body		{ background-color: #FFFFFF; }
	a		{ text-decoration: none; font-weight: bold; }
	a:link		{ color: #003366; background-color: transparent; }
	a:visited	{ color: #003300; background-color: transparent; }
	a:active	{ color: #339933; background-color: transparent; }
	a:hover		{ text-decoration: underline; }
	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
	tr.one		{ background-color: #FFFFFF; }
	tr.two		{ background-color: #DDDDDD; }
	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
	td.square	{ border: 1px solid grey; padding: 4px; }
	td.nopadding	{ padding: 0px; }
	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
	.h2		{ font-size: 120%; font-weight: bold; }
	.h3		{ font-weight: bold; }
	.step		{ font-size: 150%; font-weight: bold; color: #999999; }

Here is one of the sets of squares:
Code:

<table class="squares">
    <tr>
        <td class="square" style="background-color: #CCCC66"></td>
        <td class="square" style="background-color: #CC9966"></td>
        <td class="square" style="background-color: #990000; border: black"><td>
        <td class="square" style="background-color: #669966"></td>
        <td class="square" style="background-color: #669999"></td>
    </tr>
</table>

And finally, here is one of my progress bars:
Code:

<table style="color: white; width: 100px">
    <tr>
        <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
        <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
    </tr>
</table>

And in case that code is not enough, here is a link to the full HTML.

According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?

Hi there!

This might seem really basic but I don't seem to be able to remove the default border from a cell I created.

The code looks like this:

"<p> </p>
<table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;">
<tbody>
<tr>
<td>
<div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;">
<p align="center">
<img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" />&nbsp;</p>
<p align="center">
</p>
<p> </p>
</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;&nbsp;</p>

How shall I do to hide the border?

Thanks in advance!

/Kristoffer

Hi:

I am having trouble implementing a background image using CSS for compatibility with IE7, and if possible, IE6.

In my CSS, I have the following code defined

Code:

body{
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	background-color:#fff;
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: absolute;
	background-size: 100%;
}

/*
body{
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	background: #fff url(../images/bg.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
*/

The results work fine in Chrome, Safari and Firefox on both PC and Mac. However, the image does not scale and gets cropped in IE7.

I have tried it two different ways, both of which are in the code, and one of which is commented out. Neither way works properly with IE7.

Does anyone have a solution to this that they could share with me.

Thanks.

Hi all,

I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address:

http://www.magic-photography.co.uk/photoselector.html

It works fine in Chrome using the following simple CSS:

Code:

a img { border: none; height: 50%; width:auto; text-align: left; }

however in IE/Firefox the images do not re-scale at all.

Very very grateful for any help offered.

Thanks

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.

Hello,

I need to place an image in the bottom right-hand corner of a table cell. How would I do this using CSS, keeping in mind that text and other goodies are already present in the cell? I'd appreciate any advice. Thanks.

hi, and thank for the help in advance.

i was wondering if it is possible to make a table cell's top border different thickness versus the sides and the bottom.

Check out the following code.

Notice how the dark blue cell has one thin layer peeping through right inside the black border of the outer table? I can't figure out why.

What this should look like is a black border, followed by a border of 3 white thickness all around the light blue cells, as well as between the light blue cells.

Fixing this peeping cell in a way in which it is sucked out is fine - but if you have a better solution as to how to make the white spacing 3 around the cells AND the table, with a black border, I will accept.

Thanks

Code:

<html>
<head>
<style type="text/css">

.table1 
{
border-collapse: collapse; 
border: 1px; 
border-style: solid; 
border-color: #000000;
background-color: #FF0000;
}

.table2 
{
border: 1px; 
border-style: solid; 
border-color: #FF0000; 
border-collapse: collapse;
width: 300px;
}

.cell1
{
background-color: #0099ff;
border: 0px
border-style: solid;
}

.cell2 
{
border: 3px; 
border-style: solid; 
border-color: #FFFFFF; 
background-color: #95caff;
width: 300px;
height: 100px;
}



</style>
</head>

<body>

<table class="table1">
<tr>
	<td class="cell1">
		<table class="table2">
		<tr>
			<td class="cell2">&nbsp;</td>
		</tr>
		<tr>
			<td class="cell2">&nbsp;</td>
		</tr>
		</table>
	</td>
</tr>
</table>

</body>
</html>

hi all...

i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ?

btw: this is for the IE style sheet, mozilla(firefox) works great....

frank/

Hello,

I have a table and I am styling its cells:

table.Grid td {background-color: red;}

Inside this table I will have some other tables but I don't want their cells to have the styles changed.

I see two options: give a class to Grid table cells:
table.Grid td.Grid {background-color: red;}

Reset the changes in child tables:
table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;}

But can I apply the following style:
table.Grid td {background-color: red;}

And make it only for the cells inside that table but not inside the child tables in this code line?
... without needing to reset the styles on child table cells or give main cells a class ...

Thanks,
Miguel

hi all,
i'm trying to make a vertical menu using CSS2 and XHTML.
the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows.
This is the code i have written so far:
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>
        <title>
            TestMenu
        </title>
        <style type="text/css">
BODY, HTML {
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.menuContainer {
    background-color: red;
    width: 300px;
    height: 100%;
    border-spacing: 0px;
}

.menuItem {
    background-color: green;
}
.menuItemOpen {
    background-color: yellow;
}
.menuItemContents {
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}
.menuItemContainer {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
}
.menuTitle {
    background-color: blue;
    color: white;
    height: 20px;
    margin: 0;
    padding: 0;
}
.menuContents {
    padding: 0px;
}
.menuInnerContents {
    background-color: orange;
    overflow: auto;
    height: 100%;
    width: 100%;
    
}
</style>
    </head>
    <body>
    <table class="menuContainer">
        <tr class="menuItemOpen">
            <td class="menuItemContents"><table class="menuItemContainer">
                <tr>
                    <td class="menuTitle">Item 1</td>
                </tr>
                <tr>
                    <td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/></div></div></td>
                </tr>
            </table></td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 2</td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 3</td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 4</td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 5</td>
        </tr>
    </table>
    </body>
</html>

as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow.
Help me please!

Hi all.

I have a script that draws a calendar. I would like to be able to position the day number in the upper right of each table cell using CSS.

Note, each cell will also have an embedded table or just text showing events for that day, so I don't mind if the day number overlaps that table.

Ive tried doing something like this: PHP Code:
 td.dayNumJK {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 1px;
    right: 1px;
} 



But it seems to ignore the style. I've tried all the possible position attribute values (static, absolute, relative, fixed) but it doesnt seem to work. Maybe this is not possible with CSS?

Any ideas how I can accomplish this?

Hello,

I have too work with 3rd party code which I am not allowed to modify. It is .jsp code that calls(includes) a header file which I am alloud to modify. However the header unfortunatly is trapped inside a table cell that is 540 px wide but I want my header to span the full width of the page. I built the Header.jsp with a css layer. If I set the layer property to width=100% well 100% of 540 is 540 so it comes out short. If I set the absolute px width than at 860 screen resolution the header gets cut off. Here is some 'view source' code to just generate the .jsp to html:

</head>



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">

<!------------------------------The Login Page calls itself to verify login info and then redirects--------------->

<TABLE width="540" border="0" cellspacing="0" cellpadding="0" >
<TR>
<TD align="left" valign="top" nowrap>
<form NAME="Login" onSubmit="return checkRequired()" ACTION="LoginValidate.jsp" METHOD="post">
<input type="hidden" name="finalize" value="0">

<!------------------------------------------------------HEADER--------------------------------------------------------->

<p>&nbsp;</p>
<div id="Layer1" style="position:absolute; width:100%; height:115px; z-index:1; top: 0;">
<table border=0 cellpadding=0 cellspacing=0 align="center" width="100%">

Blah blah blah.

So you see that a 100% table is created then a 540px table with the 'include/header.jsp' code.

So Basically is there a way to break out of the table cell? I understand 'float' allows you to overide the inherited structure but it does'nt really apply here?

here is a url: URL

The header at the top needs to span the whole page. The header file is the upper blue banner as well ast the light blue faded banner logo.

Thanks in advance...

Hey all,
I'm working with a table in which the top row serves as column headers. Each column header can have a label-link as well as two graphics representing options for selecting an ascending or descending sort. The images are done through CSS so to allow use of :hover for mouse-over image swapping.

My problem is that I can't figure out a combination of CSS to make it so that, should a person's resolution be too low or should they narrow their browser window to the point where it attempts to reduce column width, that the text and images remain side-by-side.

A sample of the problem can be found he
http://www.weblifenetwork.net/sample.html

In this sample the first cell has a small, secondary table within it for the purpose of demonstrating the behavior I'm after. The second cell is kind of my current test cell (and the closest I've gotten to the correct behavior as of this post), and all other cells are using the same problematic CSS.

As you enlarge/reduce the width of your browser, you should notice this behavior:
First Cell: No wrapping. No display anomalies.
Second Cell: Unwanted wrapping. No display anomalies.
Other Cells: No wrapping. Images begin flowing over text. Text extends into neighboring cell.

Any help in duplicating the behavior of the first cell using only CSS would be greatly appreciated. I've spent over a day in a CSS IRC channel to no avail.