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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE 6 Display Problems (big surprise)

    Hello Everyone,

    I just started using CSS and I am having some quirky issues with IE6. My Site works on every other browser but IE6 is having some issues. My content boxes are floated left (there are three of them) and each of them has a fixed width of 180px. In the middle of each box is a picture (55px in width) and I use the margins to center them. These images display fine in all other browsers but on IE6 they are all pushed to the very right of the box.

    Does IE6 translate a margin left or right in px differently than other browsers? Should I be using a percent instead of px? Here is some of the code and I will include the image files so it will display properly.

    Thanks as always,
    Jeff
    Attached Files Attached Files

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    If you're floating your images, IE6 will double your margins.
    To counter this, use margin: 0 auto; to center your images instead.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Or display them inline should cancel the double margins... but the above method (as long as they have a width set) will work very nicely to center them in the divs.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IS this fix cross-browser compatible?

    Thank you so much for the advice. I will certainly give it a shot. Will this fix work on other browsers (IE7, firefox etc..)? Also could someone possible put the snippet of code that will make this work? Is it as simple as replacing my current margin code with the code mentioned here? Or does something have to be done to the body of the document as well?

    Thanks a million,
    Jeff

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Code:
    #left1 p.pic1{
    	display:block;
    	background:url(../images/lft_pic1.gif) 0 0 no-repeat;
    	width:88px;
    	height:78px;
    	margin: 0 auto;
    }
    You'll need to do that for all of them. Or, because they should all have the same properties you can simply use one class for all three images
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Or maybe not use a class at all, and insert your images as actual images. You shouldn't be using paragraphs as the holders anyway: they're not. Use a div, if you must.

    You should read up on the semantic web; left and right aren't exactly the best names to use. What if you change your mind and want your left on the right?


  •  

    Posting Permissions

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