By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,394 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,394 IT Pros & Developers. It's quick & easy.

Problem with displaying background images in Firefox table

P: 1
As part of my learning, I wrote the following codes to display 2 background images side-by-side:

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

.image1 {background-image: url(images/sw1.jpg);
background-repeat: no-repeat}

.image2 {background-image: url(images/sw2.jpg);
background-repeat: no-repeat}

</style>
</head>

<body>

<table border="0" width="100%" height="100%" style="border-collapse: collapse">
<tr>
<td width="50%" class="image1">
<p>picture A</p></td>
<td width="50%" class="image2">
<p>picture B</p></td>
</tr>

</table>
</body>

They work well on IE, but on FF, the 2 images only occupy 15% of the screen height instead of 100% as desired.

Appreciate any help.
Jan 22 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
IE is not following the rules and assumes too much. To do what you want, you have to think of your table as being 100% of what? Well, it's the parent of the table. So what is the parent set to? Right now, nothing. So that's what you get, sort of.

In your css, add this: html,body{height:100%}

In your learning, you should also be learning CSS and not using tables for page layout. That's not what tables are for.
Jan 22 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.