Results 1 to 9 of 9
  1. #1
    New Lounger
    Join Date
    Jan 2004
    Location
    Sanford, Maine, USA
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS page falls apart in MSIE

    I'm starting a new site for a client and figured I'd dive in to CSS for this one. I'm using Adobe GoLive CS2. So far, I've created one page (I picked the 'busiest' one to see if I could get everything to fit/work in an 800 x 600 layout). It's posted to a temp. location here: http://www.atlanticdesignctr.com/testing/designers.html

    It looks perfect in Firefox, but falls completely apart in MSIE (I've got version 6 on a WinXP SP2 machine). Since this is my first time designing with CSS, I wasn't sure if there was some line of code I needed to add at the top so MSIE would read things properly or what. Are there different settings needed when I ftp to the server? I'm stumped here. I'd hate to have to put CSS on hold and go back to grid layouts, slices and tables (ugh!). Appreciate any help you can give.

  2. #2
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS page falls apart in MSIE

    What's falling apart? The page looks exactly the same in both Firefox and IE to me.
    -Mark

  3. #3
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS page falls apart in MSIE

    I see what you mean. There is a pixel here and a pixel there difference that seems to force the blocks of content down. The two browsers are doing something different by default (padding? margins?) or there is a calculation (rounding) issue. Tracking this down might take a bit of work! As a "quick fix" test, see whether allowing a pixel of slack (e.g., in the sum of divs floated side by side) fixes it.
    Attached Images Attached Images

  4. #4
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS page falls apart in MSIE

    Sorry, padding was a false lead. In the style rules for your class names that start with <code>navboxauto</code>, try deleting the margin-left setting and replacing it with this:

    <code>margin:0px; float:right;</code>

    Uh-oh, that creates problems in Firefox (in the header area). Hmmm... perhaps there is a special "hack" for IE? there are always "conditional comments" (due to Lounge posting issues, pretend the = is - in the following):

    <code><!==[if IE]>
    <style type="text/css">
    .classname {property:value} /* for IE only*/
    </style>
    <![endif]==></code>

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS page falls apart in MSIE

    Hi there


    Sorry for the delay in getting back to you. It appears to a number of issues but I went off and redesigned part of your code. Some of the code is controlled using CSS but this is being circumvented by code inside the HTML. If this was to be a pure CSS solution you would not require tables. It appears that in some areas you were asking the various areas to be a certain width and then the tables within the section were larger than they should. Due to IE's quirk of rounding up widths it was causing the boxes to pop out as you have seen. This is not a serious issue, just one to be aware of.

    Flexibility was lost due to the left navigation bar having absolute position and it was further exacerbating the error. I have therefore recreated your left navbar option using an unordered list and changed their look in CSS, you will have to adapt this further as I did not download the images that you require. Using this method pulls all the boxes together nicely.

    Just putting my teachers head of here for a moment, with CSS it is a really good idea to open the code up to find if there are errors, I did this and I found a few syntax errors, nothing serious again, but sufficient for me to find it quickly.

    I have zipped the file for you to view.
    Jerry

  6. #6
    New Lounger
    Join Date
    Jan 2004
    Location
    Sanford, Maine, USA
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS page falls apart in MSIE

    Wow, thanks for taking the time to adjust the coding...that goes above and beyond.

    I applied a lot of your changes...I kept the left navigation bar as a component and it seems to work OK (keeping it that way will make it easier to update across the whole web site as I build it). The main fix seemed to be that margin-right setting of -50%. Not sure I understand the reasoning for it, but it appears to help a lot of the layout issues.

    Right now, the only problems seem to be a bit of the background showing through between the logo and header at the top. The other issue is the navigation bar in the footer. I simplified my table to include the divline in that component so I got rid of one of my 2-column CSS layout boxes. The problem I'm having, though, is it keeps forcing the height to be 114px when it should be 78. I checked the settings in my component and total height there is 78px. The CSS box is set for 78px, but in the csobj coding it keeps pushing it to 114px. Even if I go into the source and change it manually to 78, it reverts back. So, I've got an uneven bottom. Can't figure out why that's happening and how to fix it.

    Appreciate all the help thus far. All this tweaking and troubleshooting is helping me to understand more and more of what's going on the page...just wish MSIE wasn't so quirky with how it's handling things. No matter what changes/tweaks I made to the page, Firefox showed it beautifully every time.

    Here's what it's looking like in MSIE 6 (I also ftp'd the new code to the link I posted previously):
    Attached Images Attached Images

  7. #7
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS page falls apart in MSIE

    Ok, this is completely maddening and it will probably take a month of Sundays to grind our way through the code


    I discovered the -50%; hack in Why the difference: FF vs. IE when Gary had a similar problem and I declared it to be called the Jezza Bear Hack.

    So now comes to the cheat. I personally thinks it is the way the DIV tags are inheriting from each other as there appears to be a total over use of the div tag as there seems to be a pletherer of nested divs in the top section, I don't know if this is youe software getting over zealous but I would have preferred the use of span , especially when formatting the text in the header. I therefore cheated, it works and it is not wrong <img src=/S/evilgrin.gif border=0 alt=evilgrin width=15 height=15> I just coloured the background of .navboxcont_Header to white as the extract below shows


    .navboxcont_Header
    {
    width: 800px;
    height: 114px;
    background-color: #FFFFFF;
    }

    The part about the left navigation, I will need to go away and have a look at a little deeper

    I think the other issue is that is causing you such angst is your box model...I know this will not fix your problem now but this basic two column layout is more than sufficient:

    <div id="header"></div>

    <div id="container">
    <div id="center"></div>
    <div id="left" ></div>

    </div>

    <div id="footer"></div>


    Note how the header is seperate, this sandwiches a container which will hold a left column (navbar) and a right area for your contents (your gangs photographs. and then note that the footer now sits below this and can stretch right accros the width of the page width.

    This is the basic layout of your page and all you need to do it place the rest of the code in span tags. I always start with this basic model and then build my content inside and around this. Sorry for the last bit sounding like a lecture but it may help in future builds...enjoy <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  8. #8
    New Lounger
    Join Date
    Jan 2004
    Location
    Sanford, Maine, USA
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS page falls apart in MSIE

    By Jezza, I think we've got it!
    The white background worked for the header section, but my footer had fallen apart again. So, I changed my left side back to 150, instead of 200, and incorporated the white background trick there, too and that did the trick (go figure). At any rate, once the page looked right in both browsers, I quickly created a template from it and have been successfully creating pages from that.
    Thank you so much for your efforts with this, I greatly appreciate it.
    Let's hope MSIE 7 is a vast improvement in the area of CSS and we don't have to revisit the code with more tricks and hacks!
    Thanks again and enjoy your weekend.

  9. #9
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS page falls apart in MSIE

    <img src=/S/bananas.gif border=0 alt=bananas width=33 height=35>...and you mate <img src=/S/cheers.gif border=0 alt=cheers width=30 height=16>

    <img src=/S/whisper.gif border=0 alt=whisper width=29 height=17>Just remember the box model and if all fails the Jezza Bear Hack <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

Posting Permissions

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