Fitting images to table cells

[kylejpatrick]

Hi folks,

I have a situation involving some art I created that isn't quite
fitting into a table cell, despite both the art and the dimensions of
the table cell are the same (607px by 66px). And I cannot figure out
for the life of me why not. It seems like the righthand side of my
art gets cut off.

Here's a snippet of my HTML and CSS:

<table width="950 px" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr height="66 px">
<td width="25 px" rowspan="2"> </td>
<td width="318 px" rowspan="2" class="logo"><img src="images/BIG
LOGO.jpg"></td>
<td width="607 px" height="66 px" colspan="2"
class="blueBarBottom">test1</td>
</tr>

<tr>
<td width="582 px" class="table-main"> test2</td>
<td width="25 px"> </td>
</tr>
</table>

..blueBarBottom{
background-image:url(images/blueBarBottom.gif);
background-repeat: no-repeat;

}

To see screenshots of what I want and what it ends up looking like,
visit my blog at ouvreslesyeux.wordpress.com.

Thanks!

Kyle

 

[dorayme]

Hi folks,

I have a situation...

Here's a snippet of my HTML and CSS:

<table width="950 px" ...>
<tr height="66 px">

"=950 px"? Use instead "=950"

 

[dorayme]

"=950 px"? Use instead "=950"

oops, let me say that again!

Instead of

width="950 px"

use

width="950"

And I don't think height on TRs is kosher.

Check with a good validator and follow all the leads.

 

[Jukka K. Korpela]

Instead of

width="950 px"

use

width="950"

Yeah, right, but it doesn't really matter, except removing an error
message from a validator's report, so that you could focus on other
errors. If you tried to fix the page, that is.

Browsers just ignore the " px" part.

A fixed width of 950 pixels is usually tells that the page should not be
debugged but redesigned.

 

[dorayme]

Yeah, right, but it doesn't really matter, except removing an error
message from a validator's report, so that you could focus on other
errors. If you tried to fix the page, that is.

It matters in the way that shiny buttons, correctly held rifles and
proud upright stances matter when soldiers in training march on the
parade ground. It matters in the way perfectly cleaned rifles in
peacetime matter. If war comes, these soldiers will survive better and
they will die better.

 

[Captain Paralytic]

Hi folks,

I have a situation involving some art I created that isn't quite
fitting into a table cell, despite both the art and the dimensions of
the table cell are the same (607px by 66px).  And I cannot figure out
for the life of me why not.  It seems like the righthand side of my
art gets cut off.

Here's a snippet of my HTML and CSS:

<table width="950 px" border="0" align="center" cellpadding="0"
cellspacing="0">
  <tr height="66 px">
    <td width="25 px" rowspan="2"> </td>
    <td width="318 px" rowspan="2" class="logo"><img src="images/BIG
LOGO.jpg"></td>
    <td width="607 px" height="66 px" colspan="2"
class="blueBarBottom">test1</td>
  </tr>

  <tr>
     <td width="582 px" class="table-main"> test2</td>
     <td width="25 px"> </td>
  </tr>
</table>

.blueBarBottom{
        background-image:url(images/blueBarBottom.gif);
        background-repeat: no-repeat;

}

To see screenshots of what I want and what it ends up looking like,
visit my blog at ouvreslesyeux.wordpress.com.

Thanks!

Kyle

I've had a look at the site and I cannot figure out what you are
talking about.
In the first picture labelled "Here’s what I need it to look like
(ignore the cell borders):", I cannot see a curve on the bottom right
of the blue graphic.

 

[kylejpatrick]

oops, let me say that again!

Instead of

width="950 px"

use

width="950"

And I don't think height on TRs is kosher.

Check with a good validator and follow all the leads.

Thanks! I'll try it.

 

[kylejpatrick]

I've had a look at the site and I cannot figure out what you are
talking about.
In the first picture labelled "Here’s what I need it to look like
(ignore the cell borders):", I cannot see a curve on the bottom right
of the blue graphic.

Captain, I'll see if I can zoom the images and repost so you can see
what I'm talking about. I'll write later tonight.

 

[kylejpatrick]

oops, let me say that again!

Instead of

width="950 px"

use

width="950"

And I don't think height on TRs is kosher.

Check with a good validator and follow all the leads.

Dorayme,

I made the suggested change but no dice

 

[kylejpatrick]

Yeah, right, but it doesn't really matter, except removing an error
message from a validator's report, so that you could focus on other
errors. If you tried to fix the page, that is.

Browsers just ignore the " px" part.

A fixed width of 950 pixels is usually tells that the page should not be
debugged but redesigned.

Yucca,

I assume you're talking about using some sort of flexible width as
opposed to fixed width cells... And that probably would take care of
the problem.. I was hoping to stick to a width 950 px in order to
ensure consistency across several templates me and my business partner
are designing... is there any particular fix you had in mind? I'm all
ears. -K

 

[kylejpatrick]

Hey all,

I figured it out. The "padding" CSS property in one cell was pushing
adjacent cells further out. Which is fine, but how do I code a
webpage so that one cell has an image with padding, and the other
cells and their art "flex" - i.e. without having to go to the adjacent
cells and having to edit their art or edit HTML/CSS?

K

 

[dorayme]

Hey all,

I figured it out. The "padding" CSS property in one cell was pushing
adjacent cells further out. Which is fine, but how do I code a
webpage so that one cell has an image with padding, and the other
cells and their art "flex" - i.e. without having to go to the adjacent
cells and having to edit their art or edit HTML/CSS?

Best to do this. Mark up using no or very few style attributes. Class
whatever you want to style. And style those classes in separate CSS
blocks, linked externally or in the head of the document.

Now, about table and padding and flexibility: You class the TD you
want padding on and you give the appropriate padding in the CSS.

<table>
<tr>
<td class="padding">stuff<td>stuff</td> <td>stuff</td>...
</tr>

(You would choose more appropriate names for the classes)

table {width: ...;}
td {padding: 0;}
td.padding {padding: ...;}

The table will expand to the width specified for table in the CSS. The
TD of class "padding" will have the padding you want, and even the
width you might want if you specify a width too. The other cells don't
need anything at all to expand, they will have no padding. The browser
will distribute and divide other cells over the remaining space to
give a satisfactory result. The content of all the cells can affect
the result.

If you do not specify widths at all, not even for the table element,
the space taken will shrexpand to tightly fit the content, leave it to
the browser to do this.

There is a slight irony when we criticise table layout for its
inflexibility in that it is one of the cleverest elements around in
terms of flexibility, all handled by the browser. Of course, its
flexibility and inflexibility are in respect to different things, that
is why the irony is not at all large.