Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Cross-browser solution for table problem

Status
Not open for further replies.
Aarem

Aarem

Programmer
Oct 11, 2004
69
US
Hi. I have a frame-like table, and I'm having trouble with the <span> tag in this code. I need a cross-browser way to align two horizontal lines in the images t-t-l and t-t-c and t-t-r, while being able to move the text up and down. Please help!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
<base href="
<table cellspacing=0 cellpadding=0>
<TR>
<TD height=30 width=7><img src="t-l.jpg" width=7 height=30></TD>
<TD background="m-t.jpg" style="font-family:arial;font-size:13pt;color:#FFFFFF;font-weight:bold" valign=middle>
&nbsp;<img src="t-t-l.jpg" style="margin-bottom:-1px;padding:-1px"><span style="background-image:url(t-t-c.jpg);background-repeat:repeat-x">Beowolf Electronic Mailboxes</span><img src="t-t-r.jpg" style="margin-bottom:-1px;padding:-1px"></TD>
<TD width=7><img src="t-r.jpg" width=7 height=30></TD>
</TR>
<TR>
<TD width=7 background="m-l.jpg"></TD>
<TD valign=top>
<P style="padding:10px;word-wrap:break-word">
Inbox<br>Compose
</P>
</TD>
<TD width=7 background="m-r.jpg"></TD>
</TR>
<TR>
<TD width=7><img src="b-l.jpg" width=7 height=14></TD>
<TD style="font-size:7px;height:7px;background:url(m-b.jpg) bottom repeat-x"></TD>
<TD width=7><img src="b-r.jpg" width=7 height=14></TD>
</TR>
</table>
 
Sort by date Sort by votes
Hi Aarem,

I'm not quite sure what you mean. Could you please post a link to the "problem page". Then we can have a better look at it!

Regards


Jakob
 
Upvote 0 Downvote
Okay - Got it now!

First -your HTML is not entirely valid. At all.

You need to wrap it in <HTML> ... </HTML> (except for <!DOCTYPE ...>).

Then you need a <HEAD> ... </HEAD> section.

And a <BODY> ... </BODY> scetion.

However, that it not why it's not working. To make graphics fit precise you must use it as background -NOT as images ie. no <IMG ....>. I would cut up the graphics once again to make it fit in either a nested table OR in DIVs (in case you use DIVs, you must "float:left;" them). Then you can omit the <SPAN> as well.

Do you see what I mean?

Regards


Jakob

PS. If not then I'll have a look tomorrow morning (CET).
 
Upvote 0 Downvote
I'm having difficulty understanding what you are saying I should do.
 
Upvote 0 Downvote
Hi Aarem,

I had a look at you problem today at work. Tried to solve it using DIVs only ... sadly I didn't crack it yet.

I'll give it a shot tomorrow -at least I can post you the TABLE-way to do it :)

- check here tomorrow afternoon (CET)

Regards


Jakob
 
Upvote 0 Downvote
There is a nice CSS technique for doing this.

Take a look at

or my site at
Not sure if you wish to use a pure CSS method though, or to stick with tables.

Are you trying to make the lozenge behind the heading?
If so, make a nested table for the heading with 3 cells. A left end, a middle and a right end. Then put the text in the middle one and use background graphics in that table.

- Web design and ranting
- Day of Defeat gaming community
"I'm making time
 
Upvote 0 Downvote
Yes, however, I would like for the lozenge to be the right width, just enough to fit the text.
 
Upvote 0 Downvote
It would be.

Imagine the nested table with the header in it.

It has 3 cells


Left endcap | heading | Right endcap


The left and right endcaps contain a graphic and this props the cell open.
The middle bit contains the heading text, which props the cell open to the right size to fit the text.
But then you apply a horizontally repeating background to that middle cell, so it fills the space created.

Code: 
<table cellspacing=0 cellpadding=0 border=0>
<TR>
<TD height=30 width=7><img src="t-l.jpg" width=7 height=30></TD>
	<td>
	<table border=0 cellpadding=0 cellspacing=0>
		<tr>
		<td><img src="t-t-l.jpg"></td>
		<td style="background:url(t-t-c.jpg) top left repeat-x; font-family:arial;font-size:13pt;color:#FFFFFF;font-weight:bold">Beowolf Electronic Mailboxes</td>
		<td><img src="t-t-r.jpg"></td>
		</tr>
	</table>
</td>



<TD width=7><img src="t-r.jpg" width=7 height=30></TD>
</TR>

<TR>
<TD width=7 background="m-l.jpg"></TD>
<TD valign=top>
<P style="padding:10px;word-wrap:break-word">
Inbox<br>Compose
</P>
</TD>
<TD width=7 background="m-r.jpg"></TD>
</TR>
<TR>
<TD width=7><img src="b-l.jpg" width=7 height=14></TD>
<TD style="font-size:7px;height:7px;background:url(m-b.jpg) bottom repeat-x"></TD>
<TD width=7><img src="b-r.jpg" width=7 height=14></TD>
</TR>
</table>

I just quickly tested that and it works in Firefox and IE6.
You may need to tweak it, as it's just a quick job to demonstrate what I mean.



- Web design and ranting
- Day of Defeat gaming community
"I'm making time
 
Upvote 0 Downvote
Aarem,

Sorry I let you down on this -it slipped my mind for a while ;-)

... did you work out a solution or would you like me to get back with my ideas?

Regards


Jakob
 
Upvote 0 Downvote
I still haven't found a solution. Your most recent code still has a slight vertical alignment problem with the title images.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
237
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
772
3esolar
3
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
993
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top