SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox to IE help

    Every time I decide to do a fully CSS layout, I start in Firefox. And every time I do so, I open the layout up in IE and there are drastic changes that I normally have a very hard time figuring out. This time there are just issues I cannot figure out. I have fixed a lot of the problems that I had but there are still more to fix before I can release the layout. Can anyone show me some issues my CSS has that will make the IE version look closer (if not exactly) to the Firefox version?

    http://www.photoshopguides.com/new/

    Margins on the left and right are too big, the images on the tutorial boxes are out of their bounds, the background color doesnt change correctly on hover, and the tutorial search box in the top right has a random break in there. (I know the Random Tutorials title doesnt have an image like Fresh Tutorials does.. and I know the right bar is the same as the left.. these are all for testing purposes and will change before the final layout is released).

    Thank you in advanced!

  2. #2
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lots of Firefox/IE differences are not necessarily IE bugs but different default values. IE puts lots of padding/margin on ul's and h1, h2 etc elements (thats why the tutorials in the middle have lots of spacing, and the h2 "Random Tutorials" is massive, IE's default heading font-sizes are quite big). Try setting these explicity.
    Also, put all those style definitions which are above the doctype into the <head> where they belong. If IE doesn't detact a doctype it goes into quirks mode, in other words it turns into IE 5 with the broken box model. If it does detect a doctype it goes into standards mode and applies padding/width/height correctly, so should look the same as firefox.
    If all else fails you can use a hack to set rules differently for IE:

    element {
    /* set IE value */
    }
    html>body element {
    /* set firefox value */
    }

  3. #3
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gavwvin
    Lots of Firefox/IE differences are not necessarily IE bugs but different default values. IE puts lots of padding/margin on ul's and h1, h2 etc elements (thats why the tutorials in the middle have lots of spacing, and the h2 "Random Tutorials" is massive, IE's default heading font-sizes are quite big). Try setting these explicity.
    If you look at the CSS, I have made all of those elements you listed have zero margin and padding. It didnt do much to help the problem.

    Quote Originally Posted by gavwvin
    Also, put all those style definitions which are above the doctype into the <head> where they belong.
    Oops. I forgot to change the position of the <style> tag.. I had just thrown it in there when I started coding the layout. I put it in the <head> tag and now it looks worse.

  4. #4
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like my layout wont make it before Nov 1st's CSS Reboot

  5. #5
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has anyone got any suggestions? Any help is appreciated as I would like this layout up by tonight.

  6. #6
    Once I was a Factory Worker goofy's Avatar
    Join Date
    Dec 2004
    Location
    Sydney Australia
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the column on the right supposed to be there? I'm assuming it is and you are changing the content for that column.
    Goofy
    Life is what you make it!
    Follow your dreams!

  7. #7
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by goofy
    Is the column on the right supposed to be there? I'm assuming it is and you are changing the content for that column.
    Yes it is supposed to be there. The content of the column will change but it will keep the same structure.

  8. #8
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Validate your code. You have multiply defined 'id' and css errors.

  9. #9
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine
    Validate your code. You have multiply defined 'id' and css errors.
    I validated the code and fixed everything under the 'error' section. Though the layout remains unchanged.

  10. #10
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  11. #11
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine
    Ah whoops.. had defined the CSS not the HTML. Though these errors shouldnt be causing the problem.


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
  •