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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Clearing issue(?) in IE 7

    I know just enough HTML/CSS to be dangerous, as the saying goes - so I'm hoping someone here can help a newbie figure out what seems clearly to be an IE issue.

    I've just begun a job working with this site - www.risops.org. I know, I know...it's terribly exciting to look at. Here's the problem:

    On the Announcements page and the Events & Education page, the main content is being being pushed down to just under the bottom of the sidebar menu. Only in IE7 and 8. I haven't had an opportunity to check the site in any other versions of IE but it renders just fine in Firefox, Chrome and Safari on Mac and Windows.

    I can't figure out why. I thought it might have something to do with what appears to be an empty (except for an anchor link) div at the top of the main content area but taking that out - while keeping the anchor link - did nothing to fix the IE rendering.

    Can anyone help me figure out why just those two pages give IE problems? If it helps, the code for the site is pretty extensively commented...

    Thanks in advance, folks!

    Neal

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Your problem is the use of margins and padding. Since you are floating the sidebar, you don't need to have the margin-left for the #mainContent. Removing the margin-left will bring it to be to the right of the sidebar. Or, you can shrink the margin-left to 230px, which will also fix it.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Pixelologist,
    I've used this same method many times, floating the sidebar and margining the content over.
    The actual problem here is what you put in #mainContent. On your Announcments page the table that holds your links is too wide. I did not look at the other page to see what is too wide there.

    You could reduce that 25px right margin to accomodate the wider table, it may be fine to set that to 0 even.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
    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
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks for the feedback. Not only am I pretty new to coding, in general, but I'm getting tossed onto sites that are to a greater or lesser degree messy enough in their code that even I can see they're insane. I just can't easily figure out how to fix 'em (for many of them it'd be easier just to start from scratch but I'll need to convince folks of this).

    So, thanks! I'll try these out this afternoon.

    Cheers!


  •  

    Tags for this Thread

    Posting Permissions

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