Back To Website Design Forum

Tabbed code misbehaving in IE.

  • Zonezero5
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 04, 2005
  • Posts: 25
  • Status: Offline

Post January 23rd, 2009, 11:11 pm

I like tabbing my code so it's easier for me to read and go threw etc. but a lot of the time this causes problems in the way the site is displayed in IE.

For example:

Code: [ Select ]
<div id="nav">
        <img src="/images/nav_top.png" width="1001" height="3" alt="nav_top" /><ul id="links"><li><a href="/">Home</a></li><li><a href="/">About Us</a></li><li><a href="/">Policies</a></li><li><a href="/">Apply</a></li><li><a href="/">Forums</a></li><li><a href="/">DKP</a></li><li><a href="/">Videos</a></li></ul>
</div>
  1. <div id="nav">
  2.         <img src="/images/nav_top.png" width="1001" height="3" alt="nav_top" /><ul id="links"><li><a href="/">Home</a></li><li><a href="/">About Us</a></li><li><a href="/">Policies</a></li><li><a href="/">Apply</a></li><li><a href="/">Forums</a></li><li><a href="/">DKP</a></li><li><a href="/">Videos</a></li></ul>
  3. </div>


The above will display as intended. However the below:

Code: [ Select ]
<div id="nav">
    <img src="/images/nav_top.png" width="1001" height="3" alt="nav_top" />
   
    <ul id="links">
        <li><a href="/">Home</a></li>
        <li><a href="/">About Us</a></li>
        <li><a href="/">Policies</a></li>
        <li><a href="/">Apply</a></li>
        <li><a href="/">Forums</a></li>
        <li><a href="/">DKP</a></li>
        <li><a href="/">Videos</a></li>
    </ul>
</div>
  1. <div id="nav">
  2.     <img src="/images/nav_top.png" width="1001" height="3" alt="nav_top" />
  3.    
  4.     <ul id="links">
  5.         <li><a href="/">Home</a></li>
  6.         <li><a href="/">About Us</a></li>
  7.         <li><a href="/">Policies</a></li>
  8.         <li><a href="/">Apply</a></li>
  9.         <li><a href="/">Forums</a></li>
  10.         <li><a href="/">DKP</a></li>
  11.         <li><a href="/">Videos</a></li>
  12.     </ul>
  13. </div>


This will put a nice big space between the image and inline list.

Is it something specific to my code? Or is there some other coding practice or something I can do so I can have my code tabbed and still display properly in IE?

If it's needed I can link to the site in question above, but I generally find tabbing like the above to cause problems consistently in IE, not specific to this case.


Thanks for any help / advice.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 23rd, 2009, 11:11 pm

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post January 24th, 2009, 8:55 am

Just remove the space after the image. IE has a hard time if the next tag doesn't go up against the image close tag. The rest of your white space should be fine.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Zonezero5
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 04, 2005
  • Posts: 25
  • Status: Offline

Post January 24th, 2009, 7:48 pm

Did you mean?:

Code: [ Select ]
<div id="nav">
    <img src="/images/nav_top.png" width="1001" height="3" alt="nav_top" /><ul id="links">
        <li><a href="/">Home</a></li>
        <li><a href="/">About Us</a></li>
        <li><a href="/">Policies</a></li>
        <li><a href="/">Apply</a></li>
        <li><a href="/">Forums</a></li>
        <li><a href="/">DKP</a></li>
        <li><a href="/">Videos</a></li>
    </ul>
</div>
  1. <div id="nav">
  2.     <img src="/images/nav_top.png" width="1001" height="3" alt="nav_top" /><ul id="links">
  3.         <li><a href="/">Home</a></li>
  4.         <li><a href="/">About Us</a></li>
  5.         <li><a href="/">Policies</a></li>
  6.         <li><a href="/">Apply</a></li>
  7.         <li><a href="/">Forums</a></li>
  8.         <li><a href="/">DKP</a></li>
  9.         <li><a href="/">Videos</a></li>
  10.     </ul>
  11. </div>


That's what I had to do to make it render properly. Given it's better than what I originally had to do is there anything else different that can be done that's better?

Thanks again.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: roelof and 104 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.