/    Sign up×
Community /Pin to ProfileBookmark

Colspan and rowspan ruining cell dimensions

Copy linkTweet thisAlerts:
Jul 19.2007

I need to accomplish a layout like this:

[CODE]
<table>
<tr>
<td colspan=2 rowspan=2>? by ?</td>
<td width=7 height=7>7×7</td>
</tr>
<tr>
<td height=7>?x7</td>
</tr>
<tr>
<td height=7 width=7>7×7</td>
<td height=7>?x7</td>
<td height=7 width=7>7×7</td>
</tr>
</table>
<!–
expected:
_____________
| ? x ? [U]|7×7|[/U]
[U]| |7x?|[/U]
[U]|7×7|?x7|7×7|[/U]

actual (ie):
__________________
| ? x ? [U]|7x[COLOR=”Red”]?/2[/COLOR]|[/U]
[U]| |7x[COLOR=”Red”]?/2[/COLOR]|[/U]
[U]|[COLOR=”Red”]?/2[/COLOR]x7|[COLOR=”Red”]?/2[/COLOR]x7| 7×7 |[/U]
–>
[/code]

Any idea how to overcome this ie oddity?

to post a comment
HTML

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@zaxnydauthorJul 19.2007 — There was some confusion in another forum regarding my explanation, so here's my clarification:

"?" is the variable height of the large cell. In the cases of cells 0,3 and 1,3 "?/2" indicates that their height is half that of the large cell.

Instead I need: height of 0,3 = 7; height of 1,3 = ?-7.[/quote]
Copy linkTweet thisAlerts:
@FangJul 20.2007 — You are contradicting yourself; in the first post all heights are set to 7px and the second post you have a problem with height. ?

As it's for a layout you should be using css.
Copy linkTweet thisAlerts:
@zaxnydauthorJul 21.2007 — You are contradicting yourself; in the first post all heights are set to 7px and the second post you have a problem with height. ? [/quote]

It happens with both height and width. I'll simplify:
<i>
</i>_________________________
| x height [U]| 5 height |[/U]
[U]| | x-5 height |[/U]


As it's for a layout you should be using css.[/QUOTE]

I've tried. Couldn't come up with a solution. If you can, please advise.
Copy linkTweet thisAlerts:
@FangJul 21.2007 — Why do you need to fix the height/width?

Give a practical example of the problem.
Copy linkTweet thisAlerts:
@zaxnydauthorJul 23.2007 — I'm making a dropshadow using pngs with alpha transparencies. I need 3 corner images and tiling edges.
Copy linkTweet thisAlerts:
@FerretJul 23.2007 — http://www.alistapart.com/articles/cssdropshadows/

This should get you to where you're trying to go. :]
Copy linkTweet thisAlerts:
@zaxnydauthorJul 23.2007 — http://www.alistapart.com/articles/cssdropshadows/

This should get you to where you're trying to go. :][/QUOTE]

I've read that very article already, actually.

It's great for static-sized shadows. But I'm looking to make a dynamic sized one.
Copy linkTweet thisAlerts:
@zaxnydauthorJul 23.2007 — What I'm trying to accomplish is a dynamically sizing drop shadow frame using png images. So I need a static sized corners and stretching edges so it'll fit whatever I put inside it.

This works beautifully in firefox but not ie:
<i>
</i>&lt;style&gt;

.shadow .topright {
background-image: url(images/shadow.top-right.png);
background-position: top right;
background-repeat: no-repeat;
margin-top: 7px;
}

.shadow .right {
background-image: url(images/shadow.right.png);
background-position: right;
background-repeat: repeat-y;
}
.shadow .bottomleft {
background-image: url(images/shadow.bottom-left.png);
background-position: bottom left;
background-repeat: no-repeat;
}
.shadow .bottom {
background-image: url(images/shadow.bottom.png);
background-position: bottom;
background-repeat: repeat-x;
}
.shadow .bottomright {
background-image: url(images/shadow.bottom-right.png);
background-position: bottom right;
background-repeat: no-repeat;
}

.shadow .content {
padding: 5px;
}
&lt;/style&gt;
&lt;body&gt;
&lt;table class="shadow" cellpadding=0 cellspacing=0&gt;
&lt;tr&gt;
&lt;td colspan=2 rowspan=2 class="content"&gt;dynamic content goes here&lt;/td&gt;
&lt;td class="topright" width=7 height=7&gt;&lt;img src="images/spacer.png"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="right"&gt;&lt;img src="images/spacer.png"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="bottomleft" height=7 width=7&gt;&lt;img src="images/spacer.png"&gt;&lt;/td&gt;
&lt;td class="bottom"&gt;&lt;img src="images/spacer.png"&gt;&lt;/td&gt;
&lt;td class="bottomright" height=7 width=7&gt;&lt;img src="images/spacer.png"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
Copy linkTweet thisAlerts:
@FerretJul 23.2007 — I've read that very article already, actually.

It's great for static-sized shadows. But I'm looking to make a dynamic sized one.[/QUOTE]

But that is for dynamically sized shadows: you resize the background image based on the size of the image you're placing.

If you read the source material (linked toward the top of the article I linked you to) it states that the shadow image is actually 800x800, resized as needed.

Simple solutions are more often the most effective. :]
Copy linkTweet thisAlerts:
@zaxnydauthorJul 24.2007 — That's an alternative which I'll definitely consider. Thanks.

However, I'd still like to accomplish my proposed layout.
Copy linkTweet thisAlerts:
@zaxnydauthorJul 25.2007 — Still no luck on my end. Any more suggestions? =
Copy linkTweet thisAlerts:
@zaxnydauthorJul 25.2007 — I stumbled upon the answer.
Copy linkTweet thisAlerts:
@FerretJul 26.2007 — I stumbled upon the answer.[/QUOTE]


Nicely done. If you notice, that page uses the link I provided as one of it's sources later on in the article. ?
×

Success!

Help @zaxnyd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...