+ Post New Thread
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
Web Development Thread, IE7 css problem in Coding and Web Development; I am working on a new template for my school's website. It looks nice in IE6, but awful in IE7. ...
  1. #1

    Join Date
    Dec 2006
    Location
    US
    Posts
    300
    Thank Post
    64
    Thanked 17 Times in 16 Posts
    Rep Power
    18

    IE7 css problem

    I am working on a new template for my school's website.
    It looks nice in IE6, but awful in IE7. I have tried a few things, but nothing has worked.

    The problem is that the center CSS main area (where all the main text is) does not auto change the height in IE7, like IE6 does. Part of the left hand navy column also does not auto change the height (in IE6, it goes all the way to the bottom of the page, like it needs to).

    If anyone has any ideas, I'd GREATLY appreciate it! I am stumped right now.


    If you want to take a look, here is the webaddress (Add http to the beginning):

    claridenfundraisers.com/tcsweb2

    and here is the css file:

    --DELETED--

  2. #2

    Join Date
    May 2006
    Posts
    1,319
    Thank Post
    101
    Thanked 25 Times in 18 Posts
    Rep Power
    25

    Re: IE7 css problem

    It also has the same problems in firefox. Not sure why though, I -hate- cross browser compatibility issues, i'm still trying to iron out mine.

  3. #3
    mark's Avatar
    Join Date
    Jun 2005
    Posts
    3,966
    Thank Post
    248
    Thanked 49 Times in 45 Posts
    Blog Entries
    2
    Rep Power
    46

    Re: IE7 css problem

    Your #content height is what is defining the bottom mis-placed border - remove 'height: 600px' to see what I mean.

    It also left justifies in Firefox.

    Sorry I don't have IE6 here to try 6 & 7 together. It'd be more helpful to post small screen shots I think.

    IE6 is badly un-compliant re web standards, and IE7 isn't much better, due, I think, to MS trying to keep backwards compatability with poorly coded IE6 sites.

  4. #4

    Join Date
    May 2006
    Posts
    1,319
    Thank Post
    101
    Thanked 25 Times in 18 Posts
    Rep Power
    25

    Re: IE7 css problem

    Quote Originally Posted by mark
    IE6 is badly un-compliant re web standards, and IE7 isn't much better, due, I think, to MS trying to keep backwards compatability with poorly coded IE6 sites.
    Heh... i'd say IE6 and IE7 together have caused me about 12 hours worth of troubleshooting. At least IE7 supports transparent PNG files... if IE6 did, I wouldn't have had half the problems with my site as I am having now, as I installed a very dodgy PNG work around script (removing it is not an option as the GIF versions of the images just weren't good enough). Out of the four browsers I tested my site in, firefox and opera both passed without issue... IE6 and IE7 both failed... go figure.

  5. #5

    Join Date
    Dec 2006
    Location
    US
    Posts
    300
    Thank Post
    64
    Thanked 17 Times in 16 Posts
    Rep Power
    18

    Re: IE7 css problem

    I tried taking out the height tag from #content, no luck

    I am posting screenshots from IE6 and IE7. Sorry they are different resolutions (the only computer I have IE7 installed on is a new Vista laptop we just got, and it is a lot different resolution from my desktop computer).
    Attached Images Attached Images

  6. #6
    mark's Avatar
    Join Date
    Jun 2005
    Posts
    3,966
    Thank Post
    248
    Thanked 49 Times in 45 Posts
    Blog Entries
    2
    Rep Power
    46

    Re: IE7 css problem

    It fixes it for me in firefox and IE7 claridentech. Attached is the modified file.
    Attached Files Attached Files

  7. #7

    Join Date
    Dec 2006
    Location
    US
    Posts
    300
    Thank Post
    64
    Thanked 17 Times in 16 Posts
    Rep Power
    18

    Re: IE7 css problem

    Thank you so much for your help, everyone (especially Mark). I uploaded the revised style tags and everything works perfect in both IE6 and 7 now! Thanks!

  8. #8

    Join Date
    Dec 2006
    Location
    US
    Posts
    300
    Thank Post
    64
    Thanked 17 Times in 16 Posts
    Rep Power
    18

    Re: IE7 css problem

    OK, I thought it might be a good idea to install Firefox and test my site in it, since several of you said the alignment is left, rather than centered, like it is supposed to be.

    I tried a few alignment tweaks and was able to get it to move over in Firefox, but then it also moves the already centered IE design to, making it too far to the right.

    Anyone have any ideas on this? I am fairly new to CSS, until recently I had never used CSS for any of my sites.

  9. #9
    mark's Avatar
    Join Date
    Jun 2005
    Posts
    3,966
    Thank Post
    248
    Thanked 49 Times in 45 Posts
    Blog Entries
    2
    Rep Power
    46

    Re: IE7 css problem

    Try this:

    Change this line:

    #margin {width: 790px; text-align: left; align: center; }

    to this:

    #margin {margin-left: auto; margin-right: auto; width: 790px; text-align: left}



    The top border to the #content is missing in FF too - you need to add border-top: 3px solid navy;

  10. #10

    Join Date
    Dec 2006
    Location
    US
    Posts
    300
    Thank Post
    64
    Thanked 17 Times in 16 Posts
    Rep Power
    18

    Re: IE7 css problem

    Thanks again, mark! Everything now appears perfectly in all browsers.

  11. #11
    mark's Avatar
    Join Date
    Jun 2005
    Posts
    3,966
    Thank Post
    248
    Thanked 49 Times in 45 Posts
    Blog Entries
    2
    Rep Power
    46

    Re: IE7 css problem

    Any time

  12. #12

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,406
    Thank Post
    640
    Thanked 961 Times in 661 Posts
    Blog Entries
    2
    Rep Power
    324

    Re: IE7 css problem

    Quote Originally Posted by mark
    #margin {margin-left: auto; margin-right: auto; width: 790px; text-align: left}
    You can consolidate that even further:

    #margin{ margin:0 auto; ... etc}

    Top and Bottom is 0, Left and Right is auto.

  13. #13
    mark's Avatar
    Join Date
    Jun 2005
    Posts
    3,966
    Thank Post
    248
    Thanked 49 Times in 45 Posts
    Blog Entries
    2
    Rep Power
    46

    Re: IE7 css problem

    cwl

  14. #14

    Join Date
    Dec 2006
    Location
    US
    Posts
    300
    Thank Post
    64
    Thanked 17 Times in 16 Posts
    Rep Power
    18

    Re: IE7 css problem

    OK this is odd now. My page text displays perfectly in Netscape and Firefox, but the left margin in not lined up properly in IE6. This is just a normal space in a sentence, no special formatting used.

    Attached are two screenshots.

    If anyone has any ideas on this, I'd be very happy
    Luckily, I am starting to figure out how to fix CSS problems, but I am still a ways from really understanding CSS entirely.
    Attached Images Attached Images

  15. #15

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,406
    Thank Post
    640
    Thanked 961 Times in 661 Posts
    Blog Entries
    2
    Rep Power
    324

    Re: IE7 css problem

    That looks like the old 'IE6 Three Pixel Gap'.

SHARE:
+ Post New Thread
Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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