HTML - Table Problem - Opera Vs The Rest
Hi! I'm a Opera diehard since I know it's the only browser that does all measures (height/width/etc) 100% correct. And usually when something doesn't show up right in another browser I have different kinds of 'backups' ready, but this time I'm pretty lost.
This is the thing I'm busy with: test.html (As you might notice it's pretty much based on the old YouTube menu.) It really only shows up fine in Opera but just to show you guys what it looks like in the other browsers: All Browsers - Picture The codes (test.html): Quote: <html> <head> <title>TEST</title> </head> <body style='background:white'> <center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="177" height="28"></td> <td width="130" height="28" align="center" valign="middle" background="active.png"> <font color="#333333" size="2" face="sans-serif"><b>Link 1</b></font></td> <td width="130" height="28" align="center" valign="middle" background="inactive.png"> <a href="link2.html" style="text-decoration: none;"> <font color="#003399" size="2" face="sans-serif"><b>Link 2</b></font> </a></td> <td width="130" height="28" align="center" valign="middle" background="inactive.png"> <a href="link3.html" style="text-decoration: none;"> <font color="#003399" size="2" face="sans-serif"><b>Link 3</b></font> </a></td> <td width="130" height="28" align="center" valign="middle" background="inactive.png"> <a href="link4.html" style="text-decoration: none;"> <font color="#003399" size="2" face="sans-serif"><b>Link 4</b></font> </a></td> <td width="177" height="28"></td> </tr> <tr> <td background="bar.png" colspan="6" width="874" height="37" align="center" valign="middle"> <form id="form" method="post" action="formcorrect.php" enctype="multipart/form-data"> <font color="#333333" size="2" face="sans-serif">URL:</font> <input type="text" name="url" size="40" value=""> <input type="submit" name="submit" value="Send"> <input type="hidden" name="config" value="0""></form> </td> </tr> </table> </center> </body> </html> (Also available over here.) The form isn't active, nor are the pages linked to Link 2-4. The meaning obviously is that the input is centered (align and valign) in all browsers. The pictures used: 1x active.png: 130 x28px (white on the sides included) 3x inactive.png: 130 x28px 1x bar.png: 874 x37px (colspan=6) 2x 177 x28px (= free space on both sides of top row) Calculation: 177 + 130 + 130 + 130 + 130 + 177 = 874 Well, I think that's all I can say. Hope someone could help me out! Thanks a lot in advance! Similar TutorialsI have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd can i have fixed layout for only some part of a table? I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! Hey, Well, I made this webpage, and when I preview in IE its ok, but in opera theres something messed up. I use table (I know thats bad, but I'v got it to work before), and I use css to script hoover images(buttons) in the menu and stuff. When I preview these in Opera, it shows both the ordinary image, and the hoover image partially overlapping and making the table bigger and messe sup everything. Any ideas? Can anyone tell me what i did wrong? I havent coded in a while but i think i didd it right. Its for my friends uncle. Can anyone tell me why this works fine in ff (my browser) not IE, or safari? The page should be centered and be connected at the top. No other spaces. krrose27.com/flip/ Hi everyone Let me first say how awesome it is for the web to have a place like this where other html coders can relate. I've been lurking here for a couple months and now I come in with a bang, ha, yes a question. Nonetheless...I'm very greatful to be here. So onto my question.. I'm an assistant on a web design project and I'm having trouble aligning text on a website. I used divs on a WYSIWYG editor to place the text and when I opened the page everything looked fine, of course that was because it was done on this computers resolution specs. Now if you look you will see that when you are either: A) On a different resolution on another computer the text look ambiguous and doesn't align propery B) Minimizing the window or changing its shape the text also doesn't align. So my question is, how do I resolve this matter. Any html pro's or programmers in whatever arena would be truly appreciated in taking a look at this issue for me. Oh and about styles..I don't know much about css as I'm still a beginner and I'm thinking I can't even use styles since I already have that <style> code in there already, but it's not a css one. So I've written that off. Here is the website so you can see the issue (assuming you're not on 1280 for your width in resolution and not in full screen). URL - http://blendsphere.com/mailconnect/ Once at the site you can pull up the html code to see it too. Again thanks for any support or solutions on this. I am relatively new to the web design world so if you do have any solutions if you could make it brief that would be fantatstic. Ok thanks again. Please enlighten this noob, so far I've been enjoying html and hope to do so for much longer. I've kept up with things and it's no surprise that after all these years HTML is still so damned popular. Alright then. Ok, I have a button in the main site and when it is clicked a pop up window opens and the user can navigate and do whatever. Then they can go back to the main site and click another button which is supposed to then give focus to the pop up window again (just a different part). Here's the thing: It works just fine in Safari. Whenever a button is clicked the focus goes back to the popup window, yet every other browser seems to keep the popup window behind. Any idea of how to FORCE the popup window to have focus? Thanks. hi, as shown in the pic, the line and the word "Hello" has a gap in between, how can i remove the gap or space to allow the line to sit directly on top of the word Hello ?? Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language Hi. I am creating web service. But the problem must be somewhere on HTML page. When I submit form, the data send by web service (java program) to the page does not show up. If I do not submit form, then the program works; results appear on the page. The form is submitted invoking pushSubmit() javascript function. This method is invoked from setMessage() javascript function. I submit form cause in this way I discover what value is selected on drop down list. This is done using JSP code. Can I do it somehow else. Next action using retrieved data is to invoke Java class on server side. What might be the problem? This is the code: Code: <%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" pageEncoding="UTF-8" %> <%@ page import="mart.ebay.database.ReadsCategoryTable" %> <jsp:useBean id="categoryList" class="mart.ebay.database.ReadsCategoryTable" scope="request" /> <jsp:setProperty name="categoryList" property="*"/> <!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>eMart</title> </head> <body class="create"> <!-- shows items from that country by default --> <% // String strSiteId = "EBAY-GB"; // Object categoryList = session.getAttribute("items"); // receives result from servlet // out.println(categoryList + " result ++++++++++++++++++++++++++++"); // strSiteId = (String)session.getAttribute("siteId"); // strSiteId =(strSiteId == null)? "": strSiteId; // out.println(strSiteId+ " strSiteId +++++++++++++++"); %> <% String result= ""; String strSiteId = request.getParameter("siteId"); strSiteId =(strSiteId == null)? "": strSiteId; if(strSiteId.equals("")) { out.println(strSiteId+ " global ID is empty"); result= categoryList.readTable("EBAY-GB"); } else { out.println(strSiteId+ " this is global ID"); result= categoryList.readTable(strSiteId); } %> <div id="container"> <div id="header"> <h1>Header</h1> <!-- end of header--> </div> <div id="mainContent"> <h1>Main content</h1> <!-- onsubmit="run()" --> <form name="form" id="form1" action="index.jsp" method="post" > <table id="input" border="0" cellpadding="0" cellspacing="5"> <tr> <th align="left">Looking for</th> <th align="left">Location</th> <th align="left">Category</th> </tr> <tr> <td align="left"><label><input style="width: 230px" type="text" name="message" id="message" /></label> </td> <td> <select name="siteId" id="siteId" > <option <%=(strSiteId.equals("EBAY-AT"))?"selected":""%> value="EBAY-AT">Austria</option> <option <%=(strSiteId.equals("EBAY-AU"))?"selected":""%> value="EBAY-AU">Australia</option> <option <%=(strSiteId.equals("EBAY-CH"))?"selected":""%> value="EBAY-CH">Switzerland</option> <option <%=(strSiteId.equals("EBAY-DE"))?"selected":""%> value="EBAY-DE" >Germany</option> <option <%=(strSiteId.equals("EBAY-ES"))?"selected":""%> value="EBAY-ES">Spain</option> <option <%=(strSiteId.equals("EBAY-FR"))?"selected":""%> value="EBAY-FR">France</option> <option <%=(strSiteId.equals("EBAY-FRBE"))?"selected":""%> value="EBAY-FRBE">Belgium (French)</option> <option <%=(strSiteId.equals("EBAY-NLBE"))?"selected":""%> value="EBAY-NLBE">Belgium (Dutch)</option> <option <%=(strSiteId.equals("EBAY-FRCA"))?"selected":""%> value="EBAY-FRCA">Canada (French)</option> <option <%=(strSiteId.equals("EBAY-ENCA"))?"selected":""%> value="EBAY-ENCA" onclick="pushSubmit()" >Canada (English)</option> <option <%=(strSiteId.equals("EBAY-GB"))?"selected":""%> value="EBAY-GB" selected="true">United Kingdom</option> <!-- <option value="EBAY-HK">Hong Kong</option> --> <option <%=(strSiteId.equals("EBAY-IE"))?"selected":""%> value="EBAY-IE" onclick="pushSubmit()" >Ireland</option> <option <%=(strSiteId.equals("EBAY-IN"))?"selected":""%> value="EBAY-IN">India</option> <option <%=(strSiteId.equals("EBAY-IT"))?"selected":""%> value="EBAY-IT">Italy</option> <!-- <option value="EBAY-MOTOR">Motors</option> --> <option <%=(strSiteId.equals("EBAY-NL"))?"selected":""%> value="EBAY-NL">Netherlands</option> <option <%=(strSiteId.equals("EBAY-NLBE"))?"selected":""%> value="EBAY-NLBE">Belgium (Dutch)</option> <option <%=(strSiteId.equals("EBAY-PH"))?"selected":""%> value="EBAY-PH">Philippines</option> <option <%=(strSiteId.equals("EBAY-PL"))?"selected":""%> value="EBAY-PL">Poland</option> <option <%=(strSiteId.equals("EBAY-SG"))?"selected":""%> value="EBAY-SG">Singapore</option> <option <%=(strSiteId.equals("EBAY-SE"))?"selected":""%> value="EBAY-SE">Sweden</option> <option <%=(strSiteId.equals("EBAY-MY"))?"selected":""%> value="EBAY-MY">Malaysia</option> <option <%=(strSiteId.equals("EBAY-US"))?"selected":""%> value="EBAY-US">United States</option> </select> </td> <td> <select name="Category" > <option value="100" ><%= result%></option> </select> </td> <td> <label> <input type="button" value="Start" onclick="run()"/></label></td> </tr> </table> </form> </div> <div id="footer"> <p>Footer</p> </div> <!-- the end of container--></div> <script type="text/javascript"> function getXmlHttpRequest() { try { // Firefox, Opera 8.0+, Safari return new XMLHttpRequest(); } catch (e) { // Internet Explorer try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return null; } } } } function setLocation(location) { strSiteId = location; var xmlHttp = getXmlHttpRequest(); xmlHttp.open("GET","app/messages/location/" + location,true); xmlHttp.send(null); } function setCategory(category) { var xmlHttp = getXmlHttpRequest(); xmlHttp.open("GET","app/messages/category/" + category, true); xmlHttp.send(null); } function setMessage(index) { var xmlHttp = getXmlHttpRequest(); //alert(index) xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // document.write(xmlHttp.responseText.indexOf("<body>")); if(xmlHttp.responseText.indexOf("<body>") != -1) { s = xmlHttp.responseText.substring(xmlHttp.responseText.indexOf("<body>") + 6, xmlHttp.responseText.indexOf("</body>")) document.getElementById("output").innerHTML=s; } else { document.getElementById("output").innerHTML=xmlHttp.responseText; } pushSubmit() // submits form } } xmlHttp.open("GET","app/messages/" + index,true); xmlHttp.send(null); } function run(){ setCategory(document.form1.Category.value) setLocation(document.form1.siteId.value) setMessage(document.form1.message.value) alert(document.form1.Category.value+" "+document.form1.siteId.value+ " "+document.form1.message.value) } function pushSubmit() { document.getElementById('form1').submit(); } </script> <% // sessionObj = null; //arlItems = null; //session.removeAttribute("items"); //session.removeAttribute("siteId"); %> <h3>result</h3> <div id="output" style="border: 1px solid black; color: black; height: 18em; width: 100%"></div> </body> </html> I've created my site using mainly Netscape and Mozilla. It looks fine, even though the code is a little messy. But one page won't display properly in IE, only in Mozilla: http://kukla.tv/cbs.html The top tables are constrained to the browser width in both browsers, but not the large bottom table (the list of films). I even made the bottom table 997 pixels rather than 100% of page width, but it still does not wrap the text in IE, only in Mozilla. What do I need to do? Thanks, Mark OK Look I Have This Code: HTML Code: <table align="center" width="1010" border="1" cellpadding="0" cellspacing="0" name="table"> <tr> <td background="http://www.imageshack.com/up/mywyjwz3m4.png" width="1010" height="952" style="background-repeat:no-repeat;;background-position:center"> <img src="full.jpg" style="position:absolute;left:0px;top:0px;"> </td></tr> Now, What I Wanted To Know If With This Code: HTML Code: style="position:absolute;left:0px;top:0px;" Can I Move The Object Just In The Table If I Will Give Him For Example: HTML Code: left:0px;top:0px; So It Will Be Like That: And No Like That: Please Help Me! I have a table problem where in table (A) and any tables under gets longer, links and content in table (B ) doesn't stay aligned to top, the whole content in table (B) and any others appears away from the top, even in the middle so the top part becomes blank I'd like the content in A as well as B stay on the top and no blank spaces appear on the top of them I'll appreciate any quick fix for this issue kind regards Here's the problematic table I have Quote: <table width="79%" height="100%" border="0"> <tr> <td width="63%" scope="col">A</td> <td width="37%" rowspan="3" >B<br /> </td> </tr> <tr> <td> </td> </tr> <tr> <td scope="row"><table width="100%" border="0" > <tr> <td width="230"> </td> <td width="230"></td> <td width="230" border="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table></td> </tr> </table> Attached are 2 images of the footer of my website, one (displayed properly) in every browser except IE7 and the other (screwed up) in IE7. As you can see, I have 4 columns, inside which are links to a forums section. In IE7, column 2 is shifted over to the right and sits on top of column 3. The section is styled in CSS...I have attachments for the HTML and CSS code for the section. I'm hoping that one of the guru's here can suggest a fix (please let it be easy ). Thanks for the help. Rick Hi, I have a problem with my tables. I made 1 table with 3 TD/tables in them. And have text them. The problem though is that in the first two tables the text begins in the middle. I want it to start at the top like the third does which also contains most text and fills up the whole 3rd table. How can I solve it? Thanks. Hi.. i've got a table that doesnt do what i want it to do.. Page : http://www.yeltzin.net/test/index2.html One cell dont display the background (cell changes from time to time), and the page dont finish "loading".. The size of the cells/pictures have been triple-checked.. I tried narrowing it down and here is the part of the code i still have : PHP Code: index2.html --------------- <html> <head><link rel="stylesheet" type="text/css" href="styles.css"></head> <body> <table class="indextable"> <col style="width: 287px;"> <col style="width: 286px;"> <col style="width: 285px;"> <tbody> <tr> <td colspan=1 class="r1c1">row 1 cell 1</td> <td colspan=2 class="r1c2">row 1 cell 2</td> </tr> <tr> <td colspan=1 class="r2c1">row 2 cell 1</td> <td colspan=2 class="r2c2">row 2 cell 2</td> </tr> <tr> <td colspan=2 class="r3c1">row 3 cell 1</td> <td colspan=1 class="r3c2">row 3 cell 2</td> </tr> </tbody> </table> </body> </html> styles.css --------------- table.indextable{ table-layout:fixed; border-collapse:collapse;} td.r1c1{ background-image:url('R1C1_.jpg'); height: 184px;} td.r1c2{ background-image:url('R1C2_.jpg'); height: 184px;} td.r2c1{ background-image:url('R2C1_.jpg'); height: 182px;} td.r2c2{ background-image:url('R2C2_.jpg'); height: 182px;} td.r3c1{ background-image:url('R3C1_.jpg'); height: 180px;} td.r3c2{ background-image:url('R3C2_.jpg'); height: 180px;} Hi, I have a table layout (I know I should be using CSS ... but it was a quick site!) I have table width 100% and then 2 columns with td both set to 50% There are many text and images / tables & tr & td within both of the above. I have ensured no table or td within the 50% ones have any width measurements. However, when I minimise the window it doesn't seem to be keeping them 50/50 the left column seems to stay the same size. From the looks of it (images etc) it should re-size far more before it stops. Can anyone advise of typical things i should be looking for in my code that may be causing this? Cheers, d HI and hello I am having a problem with a table i am using . before the table starts there is a > right above the table --like so LOOK at the PROBLEM attachment file. I think the problem is the > below...... but i cannot find a way to hide it or remove it I am editing in Dreamweaver i am a NOOB but learning my code is as follows : this is the live code. below at the bottom is the editable code which does not have the > seen HTML Code: <div class="features_list"> > <table id="features_table"> <thead> <tr> <th height="57" class="fthead wide featcol"> <div class="titleth"> <span class="shead">Features</span></div> </th> <th class="fthead checkcol"><span class="pro">HostScott</span></th> </tr> </thead> <tbody> <tr> <td class="featcol"> GB of Disk Space </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Hosted Domains Allowed </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Instant Activation </td> <td class="checkcol"> Included FREE </td> </tr> <!--tr> <td class="featcol">Domain Privacy</td> <td class="checkcol"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> <td class="checkcol pro"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> </tr--> <tr> <td class="featcol"> POP3/POP3 Secure Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> IMAP/Secure IMAP Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> GB's of Site Transfer (Bandwidth) </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Forwarding Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Email Autoresponder </td> <td class="checkcol">Unlimited</td> </tr> <tr class="pro"> <td class="featcol pro"> Add-on Domains </td> <td class="checkcol pro">Unlimited</td> </tr> <tr> EDITABLE CODE: HTML Code: <div class="body_container"> <table border="0" width="860" class="columns"> <tr> <td valign="top" width="608"> <div class="body_container"> <div class="title_bar">Hosting Features</div> <div class="body_content" id="feat_content"> From the business owner to the individual who desires full functionality on a small budget, HostScott provides your complete web hosting solution. View a listing of what we offer below.. <br /> <br /> <br /> <div id="why_we_are_better"> <div class="star_header"> <span class="himgspac">Why Choose HostScott?</span> </div> <div id="better_features"> <div class="redcent">Outstanding Support, Speed and Flexibility:</div> <ul class="gabul left"> <li>24/7 US-based Support</li> <li>SimpleScripts 1-Click installs</li> <li>Trusted by Millions of Sites</li> <li>SSH Secure Shell Access</li> </ul> <ul class="gabul right"> <li>True Resource Management (<a target="_blank" href="resource_protection.html">more info</a>)</li> <li>Avg Support Hold Times Under 30 Sec</li> <li>Proven Track Record</li> <li>Blazing Fast Servers</li> </ul> </div> </div> <br /> <br /> <div class="features_list"> <table id ="features_table"> <thead> <tr> <th height="57" class="fthead wide featcol"> <div class="titleth"> <span class="shead">Features</span></div> </th> <th class="fthead checkcol"><span class="pro">HostScott</span></th> </tr> </thead> <tbody> <tr> <td class="featcol"> GB of Disk Space </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Hosted Domains Allowed </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Instant Activation </td> <td class="checkcol"> Included FREE </td> </tr> <!--tr> <td class="featcol">Domain Privacy</td> <td class="checkcol"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> <td class="checkcol pro"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> </tr--> <tr> <td class="featcol"> POP3/POP3 Secure Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> IMAP/Secure IMAP Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> GB's of Site Transfer (Bandwidth) </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Forwarding Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Email Autoresponder </td> <td class="checkcol">Unlimited</td> </tr> <tr class="pro"> <td class="featcol pro"> Add-on Domains </td> <td class="checkcol pro">Unlimited</td> </tr> <tr> <tr> <td class="featcol"> Perl 5 </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td> </tr> <tr> <td class="featcol"> Python </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="24/7 Network Monitoring" /></td> </tr> <tr> <td class="featcol"> Ruby/Ruby On Rails </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Courtesy Site Backups" /></td> </tr> <tr> <td class="featcol"> Javascript/DHTML </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td> </tr> <tr> <td class="featcol"> Flash/Shockwave </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td> </tr> </tbody> </table> </div> <br /> <br /> <div id="feat_signup"> <a class="signup_btn" href="../../cgi-bin/signup.html"><img alt="Sign Up Now" class="signup_button" src="../../media/shared/general/_hs/signupnow_both.jpg"></a> </div> <!-- class="content" --> </div> <!-- class="frame center" --> <div id="footer"> <ul class="footer_links"> <!--<li><a href="/cgi/info/awards">Awards</a></li>--> <li><a href="https://my.HostScott.com/cgi/help">Help Center</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="../../cgi-bin/partner.html">Affiliates</a></li> <li><a href="terms.html">Terms</a></li> <li style="padding:11px 8px 8px 8px;"><g:plusone size="small" annotation="bubble"></g:plusone></li> </ul> <div id="copyright">©2011 HostScott.com<!--HostScott.com-->. All rights reserved.</div> </div><!-- footer --> I am having a problem getting a table to render properly in IE (including version 7): Test Page Why does extra padding show up to the right of the "+ Select" button? I want the table to collapse to the size of the content, but I can't find ANY combination of CSS that forces IE to do this. Firefox renders the page OK. |