i.e messes EVERYTHING up?

@k0r54Mar 31.2005

Hi,

I have been trying to figure this out for the last three days or so but if you can go to ~~[url]~~http://dnet.apc-compunet.co.uk/main/login/recover/[/url] using firefox it is just how i want it.

But if you then go to it in i.e there is major difference and i cant seam to figure out why.

If you can help me that would be gr8, feel free to view source and css files.

Thank you so much in advance
Adam

to post a comment

CSS

29 Comments(s) _↴

@BonRougeMar 31.2005 — #Just an idea, but you could try using a decent doc-type. There doesn't seem to be any reason for you to use a loose doc-type. Maybe this one...

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

@k0r54authorMar 31.2005 — #sorry doesn't make any difference ?

This has been driving me mad for ages ?

if you notice something really wierd happens when the goes over the sub menu on the right.

The tables moves up??

Thanks

Adam

@BonRougeMar 31.2005 — #OK, but can you keep the good doc-type in? It will help. Maybe not today, maybe not tomorrow, but soon and for the rest of your life.

@k0r54authorMar 31.2005 — #what does the doc type do exactly and what differences can strict and transitional have.

Also (if any1 can help with main problem)

Thanks

adam

@FangMar 31.2005 — #Take the width:100% out of #cu_table and put it in .cu_td

@k0r54authorMar 31.2005 — #ahh something so small can mess it up so much!

Does that mean i cant set the table to 100% inside there.

Also i am suing <col> on the table but the problem is it doesn't set the second <col> to 16em wide. It just goes to the minimal it can.

Any ideas why?

I have updated the link.

Thanks

Adam

@BonRougeApr 01.2005 — #what does the doc type do exactly and what differences can strict and transitional have.
[/QUOTE]
The doc-type tells the browser that you want it to conform to the W3C standards. I think the difference is that 'strict' is well... strict - you have to write good code and separate the presentation (which goes in the stylesheet) from the content (html). 'Transitional' allows deprecated tags such as <align="right">. I thought (though after searching I couldn't find anything to confirm this) that a 'loose' DTD let IE use quirks mode, which is bad.

I hope this helps.

@FangApr 01.2005 — #You have placed the [I]width:100%[/I] in [I].cu_tdlbl[/I]. a class that is not used.

It should go in [I].cu_td[/I], which could be removed and replaced by:

#cu_table td
 {
 border: solid 1px black; 
 margin: 0; 
 padding: 3px; 
 font: small Verdana,sans-serif;
 text-align: left; 
 vertical-align:top;
 width: 100%;
 }

The [I]col[/I] is invalid here, and can be removed as IE has little support for it.

Serving XHTML:

http://www.w3.org/International/articles/serving-xhtml/

http://www.w3.org/MarkUp/2004/xhtml-faq

http://validator.w3.org/check?verbose=1&uri=http%3A//dnet.apc-compunet.co.uk/main/login/recover/

@MstrBobApr 01.2005 — #[font=Georgia][COLOR=royalblue]The doc-type tells the browser that you want it to conform to the W3C standards. I think the difference is that 'strict' is well... strict - you have to write good code and separate the presentation (which goes in the stylesheet) from the content (html). 'Transitional' allows deprecated tags such as <align="right">. I thought (though after searching I couldn't find anything to confirm this) that a 'loose' DTD let IE use quirks mode, which is bad.

I hope this helps.[/QUOTE]

Giving IE too much credit there. IE just checks that the first text is DOCTYPE - like syntax. Hell, you could make up your own, it wont check, but go to "standards compliant mode".[/COLOR][/font]

@FangApr 01.2005 — #IE will go into quirks mode if you use an invalid DTD or add [B]any characters[/B] before the DTD

@BonRougeApr 01.2005 — #Fang, can you confirm or deny what I think is true about the 'loose' DTD?

@FangApr 01.2005 — #Not true, see quote from the W3C:... the HTML 4.01 Transitional(loose) DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures.

Authors should use the Strict DTD when possible, but may use the transitional DTD when support for presentation attribute and elements is required.[/QUOTE]
This [URL=http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html]table[/URL] lists when quirks/standards mode will be envoked. Use of a [URL=http://www.w3.org/QA/2002/04/valid-dtd-list.html]valid DTD[/URL] will envoke standards mode, the exception being when it is preceded by any text, when it will revert to quirks mode in IE.

There are a few odd exceptions. See [URL=http://www.opera.com/docs/specs/doctype/]Opera DTD switches[/URL] and further links on the same page, but using a valid DTD will keep IE in standards mode.

@BonRougeApr 01.2005 — #So how about the difference between 'loose' and 'transitional' - you're quote seem to say they're the same thing, but they have different DTDs, don't they?

@FangApr 01.2005 — #They are the same. The W3c confused the issue by using 'Transitional' and then referencing it's DTD with 'loose'.

@BonRougeApr 01.2005 — #Hnnn.... Thanks for that.

@k0r54authorApr 01.2005 — #Hi,

The doc type was useful information, thanks for that.

Back to the main problem though. i have done this and replaced it with cu_table td{

You have placed the width:100% in .cu_tdlbl. a class that is not used.

It should go in .cu_td, which could be removed and replaced by:[/QUOTE]

but it doesn't seam to fix the problem of the input field having to be 16em wide?

It just puts it to the smallest possible.

I have updated the link again

Thanks

Adam

@FangApr 01.2005 — #Make the input field 16em wide:

#cu_table input {

width: 16em;

}

@k0r54authorApr 01.2005 — #im rly sorry to be a pain, but that would set all of them to that, i dont really want that.

Can the td just not be set to it or something :s

Sorry

Adam

@FangApr 01.2005 — #It is advisable to validate your document. Many of the errors can cause the document to display incorrectly.

@BonRougeApr 01.2005 — #Good point - [URL=http://validator.w3.org/check?verbose=1&uri=http%3A//dnet.apc-compunet.co.uk/main/login/recover/]have a look here[/URL] - you have 97 errors...

I'd fix them first.

@FangApr 01.2005 — #Attempting to make the td 16em wide when the largest input is 37 is a little odd?

@k0r54authorApr 01.2005 — #im just fixing all the bugs but why is that odd?

16em is about 37

but the problem is on another table it may not have a input at 37 but i still want it to be the same

@k0r54authorApr 01.2005 — #** Sorry pressed refresh and it reposted **

Any ideas?

@FangApr 01.2005 — #I think this is how you want it, but having the [I]size[/I] in input and width in td is confusing the matter:

&lt;form action="/main/login/recover/index.php?val=1" method="post"&gt;
 &lt;table class="cu_table"&gt;
 &lt;colgroup style="width:100%"&gt;&lt;col&gt;&lt;/col&gt;&lt;col&gt;&lt;/col&gt;&lt;/colgroup&gt;
 &lt;tr&gt;
 &lt;th colspan="2" class="cu_th"&gt;&lt;p&gt;Request a new username.&lt;/p&gt;
 &lt;p class="cu_thsml"&gt;* Required entry&lt;/p&gt;&lt;/th&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;label for="PE_EmailAddress"&gt;*Email Address:&lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input id="PE_EmailAddress" name="E_EmailAddress" type="text" maxlength="150" size="25" style="margin-right:2em;" value="" /&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;label for="Password"&gt;*Password:&lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input id="Password" name="Password" type="password" maxlength="50" size="25" /&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td colspan="2"&gt;
 &lt;div class="cu_proccess"&gt;
 &lt;input name="submit" type="submit" class="buttons" value="Submit" /&gt;
 &lt;/div&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/form&gt;

Then remove [I]width: 100%;[/I] from .cu_table td

@k0r54authorApr 01.2005 — #ok that works ? thank you so much for that.

Just a Q though, would u suggest doing it a different way? to get the same effect

Thanks

k0r54

@FangApr 01.2005 — #something similar can be done without tables:

&lt;div  style="width:40em;"&gt;
 &lt;div style="width:100%; border:1px solid black; padding:2px;"&gt;
 &lt;label style="float:left;" for="PE_EmailAddress"&gt;*Email Address:&lt;/label&gt;
 &lt;input style="float:right;margin-right:3em;width:16em" id="PE_EmailAddress" name="E_EmailAddress" type="text" maxlength="150" value="" /&gt;
 &lt;/div&gt;
 &lt;div style="width:100%; border:1px solid black; border-top:0; padding:2px;"&gt;
 &lt;label style="float:left;" for="Password"&gt;*Password:&lt;/label&gt;
 &lt;input style="float:right;margin-right:3em;width:16em" id="Password" name="Password" type="password" maxlength="150" value="" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

@k0r54authorApr 02.2005 — #Hi,

Just to check if what i have done is good or not, i have done this kind off using your idea from the first one. Is this ok do you think

[code=html]<form action="/main/login/recover/index.php?val=1" method="post">
 <table class="cu_table">
 <tr>
 <th colspan="2"><p>Request a new username.</p>
 <p class="cu_thsml">* Required entry</p></th>
 </tr>
 <tr>
 <td><label for="Username Email Address">*Email Address:</label></td>
 <td><input id="Username Email Address" name="E_EmailAddress" type="text" maxlength="150" class="cu_input_large" value="" /></td>
 </tr>
 <tr>
 <td><label for="Password">*Password:</label></td>
 <td><input id="Password" name="Password" type="password" maxlength="50" class="cu_input_medium" /></td>
 </tr>
 <tr>
 <td><label for="somin">*somin else:</label></td>
 <td><input id="somin" name="somin" type="text" maxlength="50" class="cu_input_small" /></td>
 </tr>
 <tr>
 <td colspan="2">
 <div class="cu_proccess">
 <input name="submit" type="submit" class="buttons" value="Submit" />
 </div>
 </td>
 </tr>
 </table>
 </form>
 
 
 /* 3 Input sizes, large, medium and small and the total including the right margin much add up to 240px (total width of the right column) */
 .cu_input_large {
 width:240px;
 }
 
 .cu_input_medium {
 width:175px;
 margin-right:65px;
 }
 
 .cu_input_small {
 width:100px;
 margin-right:140px;
 }[/code]

Would you say this is ok or good coding?

Thanks

Adam

@FangApr 02.2005 — #If it validates and works in most browsers it's ok.

@k0r54authorApr 02.2005 — #Ok brill ?

Thanks for all your help and advice ?

Thanks

Adam

Also in #CSS _↴

How do i fix the white space?saving css Adapt background image's width/height to browser window

Success!

Help @k0r54 spread the word by sharing this article on Twitter...

Tweet This

i.e messes EVERYTHING up?

29 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

i.e messes EVERYTHING up?

29 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

29 Comments(s) _↴

Also in #CSS _↴