more problems in ie

perkeyone

something clever
Reaction score
71
ok so i am experiencing some problems between different browsers again.
in firefox my form looks like this...
ff.jpg

but in ie it looks like this...
ie.jpg

ie doesnt seem to want to put input elements beside each other (on the same line going left to right) inside of a single data element, instead it puts each underneath the previous (across multiple lines)
ie also doesnt seem to understand that i have allotted 11 columns for the "kft" table and 9 columns for the "ft" table, instead it tries to put the entire table into one table data element, which may explain why the input elements are being split across 2 lines.

this is my html form... in my main table and in each nested table i have a "skeleton" of table data elements... each of which has a width of 40 px as designated by my css sheet. these were put in place to provide a reference width for other elements with multiple columns. my main interest is the two nested tables at the bottom. the tables are inside data elements but for some reason do not use the full colSpan of the data element.
Code:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="entry.js"></script>
</head>
<body>
<form name="rlform" method="POST" action="submit.php" enctype="multipart/form-data">
<input type="hidden" autocomplete="off" value="approval" name="mode"/>
<input type="hidden" autocomplete="off" value="0" name="reviewed"/>
<input type="hidden" name="MAX_FILE_SIZE" value="10485760"/>
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<input type="hidden" autocomplete="off" value="" name="id"/>
<tr><th colSpan="2" class="a">Approve</th><td><input type="checkbox" name="approve"/></td></tr>
<tr><th colSpan="2">Title*     </th><td colSpan="14"><input type="text" style="width:560px" name="title"       />           </td>
    <th colSpan="2">ISBN       </th><td colSpan="2" ><input type="text" style="width:80px"  name="isbn"        />           </td></tr>
<tr><th colSpan="2">Author     </th><td colSpan="14"><input type="text" style="width:560px" name="author"      />           </td>
    <th colSpan="2">Edition    </th><td colSpan="2" ><input type="text" style="width:80px"  name="edition"     />           </td></tr>
<tr><th colSpan="2">Publisher  </th><td colSpan="14"><input type="text" style="width:560px" name="publisher"   />           </td>
    <th colSpan="2">Copyright  </th><td colSpan="2" ><input type="text" style="width:80px"  name="copyright"   />           </td></tr>
<tr><th colSpan="2">Gen. Type  </th><td colSpan="4" ><select            style="width:160px" name="type"         ></select>  </td>
    <th colSpan="2">Spec. Type </th><td colSpan="8" ><input type="text" style="width:320px" name="mediatype"   />           </td>
    <th colSpan="2">Length     </th><td colSpan="2" ><input type="text" style="width:80px"  name="length"      />           </td></tr>
<tr><th colSpan="2">Location*  </th><td colSpan="14"><input type="text" style="width:560px" name="location"    />           </td>
    <th colSpan="2">Copies*    </th><td colSpan="2" ><input type="text" style="width:80px"  name="copies"      />           </td></tr>
<tr><th colSpan="2">Hyperink   </th><td colSpan="18"><input type="text" style="width:720px" name="hyperlink"   />           </td></tr>
<tr><th colSpan="2">Notes      </th><td colSpan="8" ><textarea rows="3" style="width:320px" name="notes"       /></textarea></td>
    <th colSpan="2">Description</th><td colSpan="8" ><textarea rows="3" style="width:320px" name="description" /></textarea></td></tr>
<tr><th colSpan="2">Strengths  </th><td colSpan="8" ><textarea rows="3" style="width:320px" name="strengths"   /></textarea></td>
    <th colSpan="2">Limitations</th><td colSpan="8" ><textarea rows="3" style="width:320px" name="limitations" /></textarea></td></tr>
<tr><th colSpan="2">Rights     </th><td colSpan="8" ><textarea rows="3" style="width:320px" name="rights"      /></textarea></td>
    <td colSpan="10" class="b"><input type="text" id="kwf"/><input type="button" value="New Keyword" onclick="newkeyword();"/></td></tr>
<tr><td colSpan="9" class="t">
        <table id="ft" ><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>
        <input type="button" value="More Files"    onclick="morefiles();"   /><input type="hidden" value="0" name="fc" ></td>
    <td colSpan="11" class="t">
        <table id="kwt"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>
        <input type="button" value="More Keywords" onclick="morekeywords();"/><input type="hidden" value="0" name="kwc"></td></tr>
<tr><td colSpan="20"><input type="button" value="Submit" onclick="validate();"/><input type="button" value="Delete" onclick="confirmdelete()"/></td></tr></table></form></body></html>
here is the css...
Code:
table{
    border-collapse:collapse;}
tr.a td{
    background-color:#eeeeee;}
th{
    text-align:left;
    padding:0px 0px 0px 1px;
    background-color:#3399ff;
    color:#ffffff;}
th.a{
    background-color:#cc6600;}
td{
    width:40px;
    vertical-align:top;
    padding:0px 0px 0px 0px;}
td.b{
    vertical-align:bottom;}
these are the javascript functions which i believe are most relevant to this problem. both functions do pretty much the same thing. they insert a new row into a table, insert a heading into the new row, insert a new data element into the row, insert some inputs into the data element. the main reason i am including this code is to show that i am setting the colSpans.
Code:
function morekeywords(){
    //alert('more keywords');
    var row=document.getElementById('kwt').tBodies[0].insertRow(document.getElementById('kwt').tBodies[0].rows.length-1);
    var head=document.createElement('th');
    head.colSpan='2';
    row.appendChild(head);
    head.appendChild(document.createTextNode('Keyword'));
    var data=row.insertCell(1);
    data.colSpan='9';
    var sel=document.createElement('select');
    data.appendChild(sel);
    for(var i=0;i<kw.length;i++){
        addoption(sel,kw[i],kw[i]);}
    var btn=document.createElement('input');
    btn.type='button';
    btn.value='X';
    btn.onclick=removerow;
    data.appendChild(btn);}

function morefiles(){
    //alert('more files');
    var row=document.getElementById('ft').tBodies[0].insertRow(document.getElementById('ft').tBodies[0].rows.length-1);
    var head=document.createElement('th');
    head.colSpan='2';
    row.appendChild(head);
    head.appendChild(document.createTextNode('File'));
    var data=row.insertCell(1);
    data.colSpan='7';
    var upl=document.createElement('input');
    upl.type='file';
    data.appendChild(upl);
    var btn=document.createElement('input');
    btn.type='button';
    btn.value='x';
    btn.onclick=removerow;
    data.appendChild(btn);}
 

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
You should start by specifying a doctype to make sure quirks IE isn't being a b*tch to you.

Then you should be ashamed for using tables ^^
(Try floating divs?)
 

perkeyone

something clever
Reaction score
71
will transitional type work?
or would i have to use strict?
why divs as opposed to tables?
 

GetTriggerUnit-

DogEntrepreneur
Reaction score
129
I would suggest transitional as it offers both old and new html way of coding.

floating divs will work for sure as their position is predefined and should not change.
 

Lyerae

I keep popping up on this site from time to time.
Reaction score
105
You should never use transitional.
There's a reason why features are depreciated.
 

GetTriggerUnit-

DogEntrepreneur
Reaction score
129
Indeed but in this particular case, transitional might be the way to solve issues without having to redo the whole thing.
 

Lyerae

I keep popping up on this site from time to time.
Reaction score
105
While that may be true, it would have been better to start off using strict.
 

perkeyone

something clever
Reaction score
71
i think it its apparent that im not experienced enough to do strict.
when ever i encounter an issue that i do not know how to approach, i use google to find answers, which sometimes leads me use to old and depreciated methods. i guess i could look up every single thing before i use it to see if it is depreciated or not, but then i might not always know how to solve my issue.
 

celerisk

When Zerg floweth, life is good
Reaction score
62
" problems between different browsers "

Actually, the problem here is invalid code...


<!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">
Put that at the top.


<input type="hidden" autocomplete="off" value="" name="id"/>
Move that line up, to the other "hidden" ones. As it is, it stands between two "tr"s...
And put a div around them to separate them from the form.
(form - div - ... hidden ... - /div - /form)


You have an empty "select". Add at least one option.


Textarea does not support short tags. And, if it did, you'd close them twice.
They also need a "cols" attribute.


fc and kfc aren't closed.


Damn, what a mess... :p

Clearly reminds me of this:
http://stuffthathappens.com/blog/2008/03/05/simplicity/ :D
 

perkeyone

something clever
Reaction score
71
now ie looks like this
ie2.jpg

i specified the doc type
moved the hidden input and put all the hiddens in a separate div, including 2 other hiddens that you didnt mention.
gave the select an option.
specified 37 cols for the text areas
and i closed the inputs that you pointed out

why did you say those hiddens need to be in a div?
is having an empty select really an issue?
(i use javascript to populate the select from a database later on... by hardcoding an option there i would need to remove it using javascript to get the desired effect.)
 

celerisk

When Zerg floweth, life is good
Reaction score
62
" now ie looks like this "

Well, notice how submit and delete magically aligned themselves "correctly"? :p


" is having an empty select really an issue? "

Difficult to say. Better save than sorry though.


" why did you say those hiddens need to be in a div? "

Because form - input - /form is invalid, whereas form - div or p - input - /div or /p - /form is valid.

The entire point of this exercise is the following:
As long as your pages aren't valid, you have no valid reason to blame the browser.


The rest looks like a margin setting that shouldn't be there.
Optionally, your 319 TDs are slightly off-by-one somewhere :D


On a related note, I'd definitely recommend to give jQuery a try.
It greatly simplifies the entire create / add / append new content process.

$('<p>Hello</p>').addClass('awesomeClass').appendTo('#targetid');
Is certainly a major improvement over create textnode, create P, append, set a class, find target, append there, ... requiring several lines per action.
 

celerisk

When Zerg floweth, life is good
Reaction score
62
The only thing worse than "schools" is random javascript that's been copy & pasted around the interwebs since the late '90s...

Most to all of it falls under "Works just fine in the only browser I'm using and that means it's perfect and who cares for IE".

It's "basics", and not complete.
Details are left as an exercise for the student.


About the easiest to validate HTML is getting this Firefox extension, and abusing it's "Tools / Validate (local) HTML" feature.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Monovertex Monovertex:
    Hmm, how do I change my signature?
  • tom_mai78101 tom_mai78101:
    Signatures can be edit in your account profile. As for the old stuffs, I'm thinking it's because Blizzard is now under Microsoft, and because of Microsoft Xbox going the way it is, it's dreadful.
  • The Helper The Helper:
    I am not big on the recipes I am just promoting them - I use the site as a practice place promoting stuff
    +2
  • Monovertex Monovertex:
    @tom_mai78101 I must be blind. If I go on my profile I don't see any area to edit the signature; If I go to account details (settings) I don't see any signature area either.
  • The Helper The Helper:
    You can get there if you click the bell icon (alerts) and choose preferences from the bottom, signature will be in the menu on the left there https://www.thehelper.net/account/preferences
  • The Helper The Helper:
    I think I need to split the Sci/Tech news forum into 2 one for Science and one for Tech but I am hating all the moving of posts I would have to do
  • The Helper The Helper:
    What is up Old Mountain Shadow?
  • The Helper The Helper:
    Happy Thursday!
    +1
  • Varine Varine:
    Crazy how much 3d printing has come in the last few years. Sad that it's not as easily modifiable though
  • Varine Varine:
    I bought an Ender 3 during the pandemic and tinkered with it all the time. Just bought a Sovol, not as easy. I'm trying to make it use a different nozzle because I have a fuck ton of Volcanos, and they use what is basically a modified volcano that is just a smidge longer, and almost every part on this thing needs to be redone to make it work
  • Varine Varine:
    Luckily I have a 3d printer for that, I guess. But it's ridiculous. The regular volcanos are 21mm, these Sovol versions are about 23.5mm
  • Varine Varine:
    So, 2.5mm longer. But the thing that measures the bed is about 1.5mm above the nozzle, so if I swap it with a volcano then I'm 1mm behind it. So cool, new bracket to swap that, but THEN the fan shroud to direct air at the part is ALSO going to be .5mm to low, and so I need to redo that, but by doing that it is a little bit off where it should be blowing and it's throwing it at the heating block instead of the part, and fuck man
  • Varine Varine:
    I didn't realize they designed this entire thing to NOT be modded. I would have just got a fucking Bambu if I knew that, the whole point was I could fuck with this. And no one else makes shit for Sovol so I have to go through them, and they have... interesting pricing models. So I have a new extruder altogether that I'm taking apart and going to just design a whole new one to use my nozzles. Dumb design.
  • Varine Varine:
    Can't just buy a new heatblock, you need to get a whole hotend - so block, heater cartridge, thermistor, heatbreak, and nozzle. And they put this fucking paste in there so I can't take the thermistor or cartridge out with any ease, that's 30 dollars. Or you can get the whole extrudor with the direct driver AND that heatblock for like 50, but you still can't get any of it to come apart
  • Varine Varine:
    Partsbuilt has individual parts I found but they're expensive. I think I can get bits swapped around and make this work with generic shit though
  • Ghan Ghan:
    Heard Houston got hit pretty bad by storms last night. Hope all is well with TH.
  • The Helper The Helper:
    Power back on finally - all is good here no damage
    +2
  • V-SNES V-SNES:
    Happy Friday!
    +1
  • The Helper The Helper:
    New recipe is another summer dessert Berry and Peach Cheesecake - https://www.thehelper.net/threads/recipe-berry-and-peach-cheesecake.194169/
  • The Helper The Helper:
    I think we need to add something to the bottom of the front page that shows the Headline News forum that has a link to go to the News Forum Index so people can see there is more news. Do you guys see what I am saying, lets say you read all the articles on the front page and you get to the end and it just ends, no kind of link for MOAR!
  • The Helper The Helper:
    Happy Wednesday!
    +1

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top