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 13 of 13
  1. #1
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Layout not working in IE 5

    Ok, some of you may have seen my other thread in genereal web building, but anyways, I am having a bit of a problem getting this site to work in IE 5.

    http://www.freeipb.net/ibe

    Basically, due to IE5 not supporting CSS or doctypes properly, my code is causing the right had navigational menu to start below the content block. Its to do with the XHTML 1.0 box model I think, and the way padding works.

    As you can see, it validates XHTML 1.0 strict at the moment, which is good, and I want to keep it that way. I know of a method for loading an alternate stylesheet in ie. The:

    <!-->
    <link.....
    <!-->

    method which use the CSS in IE but not in any other browser. The problem is my site works in IE6, so using that method would cause it to break in IE 6 becuase of how I would have to use the CSS.

    Finally, I dont want to use any form of javascript to detect browser ect.

    This is alot I know, but does anyone have any suggestions on how I could make it work in IE5?

    Thanks
    Matt

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    Minneapolis, MN
    Posts
    208
    Thanks
    0
    Thanked 1 Time in 1 Post
    this is just another reminder of what a pain in the *** web design really is. html is easy, but coding for 50 different browsers isn't. sucks, good luck in your journey.
    anthony

  • #3
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually i think i have a way to overcome the problem.

    its becuase of the IE box model, but if i remove all padding and then add more padding to the paragraph elements then it will stay at its fixed width and as the paragraphs are arent fixed width, it *should* solve the problem.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Hack

    That, or use any one of the numerous CSS hacks to supply IE5.x/win with the appropriate value for width; see the HTML & CSS Documentation sticky on top of this forum for more info, or try the infamous Box Model Hack by Tantek Çelik.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Erm... did you fix it already, because it looks fine in IE5.0
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #6
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm... doesnt on my machine, and at school which is running IE 5

    The exact version i believe is 5.0.1 Service Pack 2

  • #7
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Screenshot:

    (IE5.01sp2)
    Attached Thumbnails Attached Thumbnails CSS Layout not working in IE 5-ibe.jpg  
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #8
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats very odd. What resolution are you at (although it shouldnt make much difference)?

    Very odd, looks like this on mine:
    Attached Thumbnails Attached Thumbnails CSS Layout not working in IE 5-ie5.0.1-sp2.gif  

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1024x768. I'm running IE5 alongside IE4, IE5.5 and IE6 but again, that shouldn't matter

    What does anyone else get?
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    same here.

    ok, when you rollover the menu items does the item indent itself very slightly (2px) or does it stay static.

  • #11
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Indents. I assume that's intentional as Fx does the same.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #12
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm, on my IE 5.0.1 SP2 it doesnt have any effect onmouseover which is odd. I know its like this at school aswell.

  • #13
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ive managed to get it working now.

    My original idea didnt work, as I had already done that during the design process, so there wasnt any padding to change, but in the end what I did was changed the width of the right hand content block from 140px to 130px (this made it line up in IE5), then I added 10px left padding which made it look more central in IE6 and Mozilla. The design looks very slightly different (the menu is more in the center) but i think it looks better like that anyway so im happy.

    If you want to have a look to see how I did it or at the css you can goto:

    http://www.freeipb.net/ibe/index.html and get the source, and:
    http://www.freeipb.net/ibe/emotion.css for the CSS file.


  •  

    Posting Permissions

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