SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Norfolk, England
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout problem in IE7, IE8 and all others fine

    Hi,

    I have an odd problem with what appears to be a straight forward layout.

    The problem is only evident in IE7.

    See the attached image. A normal left hand sidebar (float left) which contains the navigation, and the right hand content area.

    For some reason the right hand content area start at the bottom of the navigation elements inside the sidebar.

    The project is confidential so its difficult to post a demo url. Have made a graphic of the problem.

    All help greatly appreciated.

    Steve
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Do you have clear:right (or some other form of clear) on any of those nav items?

    You could post some css and html without compromising your site.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, there are so many possibilities of what could be going on. All of which, however, as Ralph pointed out, would be entire guesses without full HTML and CSS .

    Although a link would be more preferable as it would allow easy testing.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Norfolk, England
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Guys. I have permssion to post the site now...

    You can see the problem here: http://79.170.40.247/go-moco.co.uk/i...r10-18-DIV.htm

    The css is here http://79.170.40.247/go-moco.co.uk/s...common-new.css

    In all browsers accept IE7 and below display the site fine.

    The maincontent area is being shifted over to the right as if the padding has been applied twice.

    I inherited this site from another designer, so it not my original code.

    All help greatfully received.

    Steven

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't have IE available right now, but I'm assuming the problem is with the quadR div? I couldn't see any "maincontent".

    I would recommend floating quadR and removing the left margin. That's always just asking for trouble in IE. I can't remember how people get that to work (perhaps by adding display: inline?) but I just don't use that for layout. I don't see the point, when you can just float both divs.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Norfolk, England
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, if anyone doesn't have IE7, you can see the same problem in IE8 in compatibility mode.

  7. #7
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Norfolk, England
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A bit more info may help...

    div rightcolumnFront has a left padding to push it to the right of the left column.

    inside this is div QUADcontainer.

    inside this is quadL which is float left or quadR.

    it appears it is the QUADcontainer that is being pushed over to the right by a similar margin to the rightcolumnFront div. But there is no padding set on this.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Subtle hint:

    Code:
    .rightcolumnFront {
    	min-height: 376px;
    	font-size: 1.2em;
    	line-height: 1.3em;
    	padding: 0px 0px 0px 240px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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