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 7 of 7
  1. #1
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts

    IE and FF difference I can't seem to solve

    I have used an IE min-width technique from Stu Nicholls here.

    the site

    Look at it using the ViewDOM in the developers toolbar in both IE7 and FF2


    -In IE the top and bottom width classes are seperated by the 42px high menu.
    -In FF the top and bottom width classes are butted up together with the 42px menu over top of the bottom width class.

    How can I get FF to slide that width class down without making IE slide it down further???
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need a clearing div after your menu div.
    Code:
    <div style="clear:both;line-height:0px;font-size:0;">&nbsp;</div>
    Also do you really need that many divs? It seems to me like you have a case of divitis (look it up, its a common term in HTML).
    Last edited by _Aerospace_Eng_; 12-27-2006 at 01:38 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Also do you really need that many divs? It seems to me like you have a case of divitis (look it up, its a common term in HTML).
    That's what I thought when I was building it and I tried to do with less but every time I got rid of one the page quit working. That is pretty much exactly how Stu Nicholls showed to do it on http://www.webreference.com/programming/min-width/

    Do you have a better min-width solution?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
    <div style="clear:both;line-height:0px;font-size:0;">&nbsp;</div>
    That added a gap that you could see the pink body under the menu.

    I seem to have cured it with a declaration of clear: both; in the #bottom_content. The div still does the same thing in FF when viewed with the DOM inspector but the content inside the div does not slide under the menu anymore.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    There was no gap when I tried it. I like this method
    http://www.pmob.co.uk/temp/min-width-ie.htm
    It doesn't seem to work with all layouts but it might work with yours.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    hehe,
    Where the one you linked to has
    #outer
    #inner
    #content
    #content2

    The one I used has
    .width
    .minwidth
    .layout
    .container


    Actual page content would follow after that basic layout.

    Both layouts are essentially the same and both have "divitis" but ...that's how minwidth works with IE.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I wasn't referring to the min-width fix for IE as divitis. I was referring to the rest of your divs. They seem to be uneccessary. You seemed to have a div for every single little thing when you don't have to.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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