Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

IE table/div spacing different to mozilla

  • 09-12-2008 11:01AM
    #1
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭


    Too much space in IE.
    perfect in Firefox.

    link

    ive specified the height for the div and the cell <td>

    any ideas?

    thanks


Comments

  • #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    You have too many html errors like extra closing </tr> tag plus you need to remove the {...} from the style code

    should be 
    <input type="text" id="firstname" value="Name" style="border: 1px solid #498bae; color:#498bae; width:130px">


  • #3
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭Placebo


    regardless, didnt work. <HR> doesnt work well either,
    just using an image now,

    thanks IE


  • #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    First for the CSS to work right you need a doctype
    Second, ff and ie treats margins differently


  • #5
    p
    Registered Users, Registered Users 2 Posts: 2,119 ✭✭✭p


    I don't understand why you're even using tables. You might as well just use one big image map if that's the approach you're going to take.


  • #6
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭Placebo


    that just a sidebar to another page,
    thought tables would be the quickest and universally safe way to do it, i have full control with align/valign and width values. Only other way is to use a div which seems to have huge incompatibility issues , for me anyway

    adding doctype here makes some attributes illegal


  • Advertisement
  • #7
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    As I said your coding is wrong
    give this a go: 
    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>

<body>
<table cellspacing="0" cellpadding="5" border="1"  width="270" align="right">
	<tr>
    	<td rowspan="2" valign="top" align="left"><img src="images/side/1.jpg"></td>
		<td align="left"><img src="images/side/a.png"></td>
	</tr>
    <tr>
    	<td align="left"><img src="images/side/1a.png"></td>
    </tr>
    <tr>
    	<td height="2"align="right" colspan="2" style="padding: 0px; cell-spacing:0px;"><img src="images/side/line.gif"></td>
    </tr>
    <tr>
    	<td rowspan="2" valign="top" align="left"><img src="images/side/2.jpg"></td>
        <td align="left"><img src="images/side/b.png"></td>
    </tr>    
    <tr>
    	<td align="left"><img src="images/side/2b.png"></td>
    </tr>
    <tr>
    	<td height="2"align="right" colspan="2" style="padding: 0px; cell-spacing:0px;"><img src="images/side/line.gif"></td>
    </tr>
    <tr>
    	<td  rowspan="2" valign="top"><img src="images/side/3.jpg"></td>
        <td align="left"><img src="images/side/c.png"></td>
    </tr>
    <tr>
    	<td align="left"><img src="images/side/3c.png"></td>
    </tr>
    <tr>
    	<td height="2"align="right" colspan="2" style="padding: 0px; cell-spacing:0px;"><img src="images/side/line.gif"></td>
    </tr>
    <tr>
    	<td rowspan="2" valign="top" align="left"><img src="images/side/4.jpg"></td>
        <td align="left"><img src="images/side/d.png"></td>
    </tr>
    <tr>
    	<td align="left">
            <form>
             <INPUT type="text" id="firstname" value="Name" style="border: 1px solid #498bae; color:#498bae; width:130px;"><br><br>
             <INPUT type="text" id="email" value="Email" style="border: 1px solid #498bae; color:#498bae; width:130px;">
            </form>
            <img src="images/side/4d.png">
        </td>
    </tr>
</table>
</body>
</html>


  • #8
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭Placebo


    thanks louie, ive updated my code since, it works fine. I just didnt want to resort to using images.

    Im using loose as my DOC Type btw.... should change to trans


  • #9
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    the code above has errors as well. Here is a revised option 
    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
.div_test{border-top:2px solid #cccccc; padding:3px 0px;}
form{padding:2px; margin:0px;}
.text_test{border: 1px solid #498bae; color:#498bae; width:130px;}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="5" border="1"  width="270" align="right" summary="">
	<tr>
    	<td valign="top" align="left"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/1.jpg" alt="" /></td>
		<td align="left">
       	  	<img src="http://www.mediatize.com/vodafone/wws/site/images/side/a.png" alt="" />
        	<div class="div_test"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/1a.png" alt="" /></div>      
        </td>
    </tr>
    <tr>
    	<td height="2" align="right" colspan="2" style="padding: 0px; cell-spacing:0px;"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/line.gif" alt="" /></td>
    </tr>
    <tr>
    	<td valign="top" align="left"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/2.jpg" alt="" /></td>
        <td align="left"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/b.png" alt="" />
        <div class="div_test"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/2b.png" alt="" /></div>
        </td>
    </tr>
    <tr>
    	<td height="2"align="right" colspan="2" style="padding: 0px; cell-spacing:0px;"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/line.gif" alt="" /></td>
    </tr>
    <tr>
    	<td  valign="top"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/3.jpg" alt="" /></td>
        <td align="left"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/c.png" alt="" />
        <div class="div_test"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/3c.png" alt="" /></div>
        </td>
    </tr>
    <tr>
    	<td height="2" align="right" colspan="2" style="padding: 0px; cell-spacing:0px;"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/line.gif" alt="" /></td>
    </tr>
    <tr>
    	<td valign="top" align="left"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/4.jpg" alt="" /></td>
        <td align="left"><img src="http://www.mediatize.com/vodafone/wws/site/images/side/d.png" alt="" />
        <div class="div_test">
        	<form action="" method="post">
             <input type="text" id="firstname" value="Name" class="text_test" /><br /><br />
             <input type="text" id="email" value="Email" class="text_test" />
            </form>
            <img src="http://www.mediatize.com/vodafone/wws/site/images/side/4d.png" alt="" /> 
        </div>
        </td>
    </tr>
</table>
</body>
</html>


Advertisement