How to make Website look the same in IE and Firefox

Discussion in 'Web Design and Development' started by macjram, Feb 2, 2009.

  1. macjram macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #1
    How do I make my divs look the same in both IE and Firefox? I want both to appear like they do in IE.

    IE
    [​IMG]

    Firefox
    [​IMG]

    Thanks !
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    We'll need to see the HTML and CSS to answer. Browsers have different understandings of CSS so it's hard to get them both to display things exactly the same in some instances.
     
  3. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #3
    Sadly the screenshots are far to small to see the URL and therefore take a look at the CSS and markup.
     
  4. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #4
    oh sorry

    http://www.mfjram.com/wp

    you could've looked at the address of the picture and found out from there ;), but my fault


    and heres from my header html

     
  5. Trip.Tucker Guest

    Joined:
    Mar 13, 2008
    #5
    The most common way of dealing with IE's inadequacies is to use custom CSS files depending on the browser.

    Example:

    Code:
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="iespecific.css" />
    <![endif]-->
    
    The unfortunate answer is that you will have to code up multiple sheets. You can thank Microsoft for not making a standards compliant browser.




    ....Melrose should be in here soon....
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Actually he said IE is showing it the way he wants.

    The short answer to the issue is that you have a lot of floating going on. Firefox is showing it correctly as implemented. When you float an item it's removed from the flow, and as a result won't add to its parent's height, and is why the background is not going as far as it should. You should read over float behavior.
     
  7. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    Location:
    Elsewhere
    #7
    Dun-da-da-daaa!! :D

    Safari Screenshot (Mac)

    IE8 also has trouble with it I'm afraid - which is only Win7 atm but will be danger down the road. Sorry there's not more right now but it's a bit late. I'll check it in the morning if it hasn't been resolved by Angelwatt or someone by then.

    The float bug mentioned ^^ has troubled me in the past until I caught on to what it was.. Float hack in IE. I'd also note what Angelwatt said about the differences between the two: Firefox is interpreting it correctly. I'd recommend you develop in Firefox, and do your testing in IE at the major stages along the way.
     
  8. RoninXI macrumors regular

    Joined:
    Jun 5, 2006
    Location:
    Vermilion, Ohio
    #8
    How I do it

    I agree with what Melrose said about coding for FireFox. If you do you will have less problems later on, like when you deal with Safari andpossibly Opera and a Linux browser. After you do so you can make sure it is valid which will in theory make it relatively future proof. Once that is done I start in on the custom CSS page or IE hacks(only use the hacks if it is only a couple of adjustments).

    I am by no means telling you how it has to be done but with IE8 coming all your work could be harder to fix, been there myself. This is the best solution I could come up with so I had to make adjustments for only one browser not five. I hope that helps, happy coding.
     
  9. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #9
    Hi,

    Change these two declerations:

    HTML:
    #rap {
            width:625px;
            height: 100%;
            margin:0 auto;
    }
    
    #rap3 {
            width:585px;
            padding: 0 20px;
            float: left;
            background: url(http://www.mfjram.com/images/trans.png) 0 0;
    }
    
    This means everything inside the #rap div will be centred (as before).

    The #rap3 div will expand to fill its contents. This means the background image will tile down the page.

    This will get the job done in Safari and Firefox and very likely IE 8.

    Will probably break IE 7 and earlier though. Use conditional comments, as outlined a above.
     
  10. emanprinting macrumors newbie

    Joined:
    Jan 28, 2009
    #10
    to see the HTML and CSS to answer. Browsers have different understandings of CSS so it's hard to get them both to display things exactly the same in some instances.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    He provided a link. Please read thread more closely.
     
  12. Trip.Tucker Guest

    Joined:
    Mar 13, 2008
    #12
    Exactly. I want you to keep those words in mind when I tell you that just because it looks right in IE, doesn't mean it is coded correctly. You haven't provided a solution for his issue, only a float tutorial. There are situations that dictate the use of multiple style sheets. If you think different, you must have come across some miraculous new way that web designers have missed.
     
  13. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #13
    You were all really helpful, I read all the links (some of it was confusing, well, most of it but I'm kinda new at this lol), and thanks for the screenshots & advice from everyone ! I tried the fixes elppa recommended, and so far so good.

    I'm gonna start trying to mainly code in Firefox now, and then afterwards I'll deal with IE since that seems what most of you are recommending?

    Anyways, thanks everyone that helped ! Hopefully I didn't waste too much of your guys times :eek:

    See ya.
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    Well the solution is an involved one, not a quick fix, and I don't have the time to develop the solution. You didn't provide a solution either so not sure why you're being so immature about this. I've never had to rely on conditional comments.
     
  15. jakeOSX macrumors regular

    Joined:
    Mar 24, 2005
    #15
    sure! do it the way we did it in the olden days!

    use only P, B, A and IMG tags. =D

    (joking aside)

    this is one of the unfortunate things that has happened when we 'ditched' tables. and of course, MS being, well, MS.

    I do suggest looking at some of the CSS frameworks (like YUI, for example) which have already tackled this issue, perhaps they would be of help.
     
  16. RoninXI macrumors regular

    Joined:
    Jun 5, 2006
    Location:
    Vermilion, Ohio
    #16
    I hate to say this but I think you may have just gotten lucky. Unfortunately many of us have seem to of had at some point needed to deal with floats and/or fixed/absolute positioning. Conditional CSS is almost a necessity these days and from what I hear so far IE8 is well on it's way to getting worse not better (i really should get off my ??? and test it myself). I hope this changes but I never expect anything even half way decent from MS, ever, that way it is never a huge disappointment only a small one.

    With that in mind I recommend macjram look up w3schools cssplay.co.uk and anything else in the new thread in these forums with developer resources you will find it here: Helpful links for Web Design and Development it will help you learn how to code correctly and it has an indispensable link for the CSS "IE hacks". The only solution for now would be to leave what you have now alone and make adjustments in a new CSS file copying what you have and using what elppa gave you. You can then do what Tip.tucker said and add that code calling up the IE specific CSS which is what you have now. I personally make a whole CSS file for "everything else" and then a CSS file with only that IE hacks.
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    Well, from the look of the OP's site now, they have fixed the original problem and it didn't require using the conditional comments. :) Some of the comments here were making it sound like I have something against conditional comments as if they were evil. I haven't said anything against them, but also didn't see them being necessary for this situation, as has been shown by the solution. I know you (RoninXI) weren't accusing me of anything, but you were the second person to mention it, so I just wanted to clarify my position as I was seemingly being misinterpreted.

    Glad to see elppa's help has given macjram a solution. The site looks good.
     
  18. mogzieee macrumors 6502a

    Joined:
    Feb 8, 2008
    Location:
    London, UK
    #18
    This is why I hate Microsoft. I have much the same problem. I just constantly tweak the code over and over again until it looks the same, avoiding using the 'padding' attribute.
     

Share This Page