Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer IE wraps without reason

    Hello all,

    I have run into a very weird problem. The page has valid XHTML 1.0 and CSS (well except maybe a -mox-border-radius tag I just throw in to make it look nicer :P). The problem is that when viewing it in IE in a higher resolution, everything is fine. But as soon as there is less room, the #Location div (red text) gets unwrapped all the way, even while its FAR from needed.

    FireFox 0.9 shows the desired behavior.

    http://worstje.mine.nu/test/

    Related XHTML:

    Code:
    <div id="Header">
      <div id="Title">Worstje.mine.nu</div>
      <div id="Location">/
        <a href="http://worstje.mine.nu/" title="Main page">Testje</a>
    /    <a href="http://worstje.mine.nu/comic.php" title="Comic">Comic</a>
      </div>
    </div>
    Related CSS (styles.css)

    Code:
    #Header {
      margin:50px 50px 0px 50px;
      padding: 10px 10px 10px 170px;
      background: black url('/images/header.png') no-repeat;
      height: 130px;
    }
    
    #Title {
      position: absolute;
      top: 100px;
      left: 230px;
      color: #ddd;
      font-size: 36pt;
    }
    
    #Location {
      position: absolute;
      top: 170px;
      left: 230px;
      color: #f55;
    }
    I would appreciate any look you might be able to throw at this problem.. Thanks!

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I can't get it to recreate the problem in IE6 on Windows.

  • #3
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Screenshot is here:



    Thanks for looking at it.
    Am using IE 6, with SP2

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think IE is smart enough to know this, but you should put those in something other than just a div -- There are more advanced ways (like a list with slashes as dots), but you may just as well do a simple list:
    Code:
      <div id="Location">/
        <a href="http://worstje.mine.nu/" title="Main page">Testje</a>
    /    <a href="http://worstje.mine.nu/comic.php" title="Comic">Comic</a>
      </div>
    Code:
      <ul id="Location">
        <li>/<a href="http://worstje.mine.nu/" title="Main page">Testje</a></li>
        <li>/<a href="http://worstje.mine.nu/comic.php" title="Comic">Comic</a></li>
      </ul>
    Give it whatever CSS you want for the "location" id, but give your lists:
    Code:
    #location li {
    display: inline;
    }
    That should let them float right next to each other, put more spaces as you need, and you can position them and style them like you want -- bit it's probably because IE is handling those as block level elements, I may be wrong. If you still don't get that fixed, then apply the same thing to the a tags:
    Code:
    #location li, #location li a {
    display: inline;
    }
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just tried your changes, but no luck... IE is still behaving the same foolish way Anyone else got any ideas?

    Oh and thanks for the <ul> idea.. that's an alot better thing to use than using a div

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    maybe you have to force a width then? Try it as a float forced width -- give it your absolute position, then give the a tags this:
    Code:
    #location li, #location li a {
    display: block;
    float: left;
    width: 150px;
    height: auto;
    }
    Whatever width you want, ems or a different pixel width, but try that out and see if it flies instead...
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #7
    New Coder
    Join Date
    Apr 2003
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    I tried your suggestion.. didn't work... it gave me an idea though

    And.. I found the way to fix it.. but it's not to nice...

    I applied width: 250px; to the #location element. For some reason, IE does not like width: auto;.. Currently I am experiementing with ways to keep this automatic anyway... since I don't want a scrollbar to show up in small windows, nor have long dynamic content cause the bug all over again.. :/ Overflow: hidden; is just a hack and would remove usability instead of adding it what a locationbar is usually ment for anyway..

    I appreciate all the help you are giving me! Thanks!

    EDIT:

    I got the solution... for the interested, my problems were solved like this:

    Code:
    #Location {
      position: absolute;
      top: 170px;
      left: 230px;
      color: #f55;
      margin: 0;
      padding: 0;
      /* Following is a fix for a IE bug concerning width: auto;
         and it misinterpreting width: 100%. Using the fact IE
         does not understand > selector so that browsers other
         than IE get the right width: auto; anyway. */
      width: 100%;
    }
    
    
    html>body #Location {
      width: auto;
    }
    Last edited by doggo18; 09-23-2004 at 07:30 PM. Reason: Found solution! :)

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good job

    I didn't think about that, I've had issues with the width auto before... why, I do not know, other than they need to update their browser pronto
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •