Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

IE table/div spacing different to mozilla

Options
  • 09-12-2008 11:01am
    #1
    Placebo
    Registered Users 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

  • Options
    #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">


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


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

    thanks IE


  • Options
    #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


  • Options
    #5
    p
    Registered Users 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.


  • Options
    #6
    Placebo
    Registered Users 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
  • Options
    #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>


  • Options
    #8
    Placebo
    Registered Users 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


  • Options
    #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