WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Difference in column widths in IE and Firefox (8 posts)

  1. jongraphs
    Member
    Posted 5 years ago #

    Hello all,
    I'm designing this blog, http://amadimag.com/blogosphere, and for some reason, the column widths are weirdly different when you view it in IE from when you view it in Firefox. I want both to look like it does in Firefox, with the text going as far as it can within that framework you see there. Any and all help is appreciated. Thanks.

  2. Wendel Brume
    Member
    Posted 5 years ago #

    Google 'IE padding' and you'll get a lot of hits that explain the issue and how to fix it.

  3. jongraphs
    Member
    Posted 5 years ago #

    Thanks wendel.

    I have not been able to find a fix that works for this. The most commonly suggested solution is the dsiplay:inline property applied after the MARGIN: property under .narrowcolumn, but when I apply this, it pushes my sidebar all the way to to the bottom of the page.

  4. Wendel Brume
    Member
    Posted 5 years ago #

    I'm no expert at CSS, so I usually have to muck around with it until I find a combination that works. Save a copy of your stylesheet, then try various combinations of float on those divs. I've had luck floating the first column left, no float on the second, and float the third column right. The second column will sometimes just slip into place. It depends on the order they are being called into the template.

    Plus you might have too much total width for all three columns to fit in the wrapper that contains them all. If your page is 950 pixels wide (for example) the total of the widths of the three columns, plus their padding, borders, and margins has to be less.

    If you save a backup, you really can't break anything by trying.

    HTH

  5. martart
    Member
    Posted 5 years ago #

    Go to this link to find out why this is happening.
    Just do a search for your problem, it is a very good resource for compatibility problems. Yes it is in your css file:

    http://www.alistapart.com/

  6. martart
    Member
    Posted 5 years ago #

    Also you can download Firebug for Firefox... muck around with the css directly in your browser without changing any code to see what changes before making any changes in your actual css file.

  7. jongraphs
    Member
    Posted 5 years ago #

    Thanks, it's almost impossible to find anything related to my specific issue on that site you provided, martart. My best bet is to continue googling "IE padding".

  8. jongraphs
    Member
    Posted 5 years ago #

    Here's my work around. Maybe it will help someone.

    I learned IE subtracts padding and margin from its calculation of the content size, whereas firefox only uses content "width" value, without regard to padding and margin. So, in theory, having no padding and no margins would cause both browsers to display the content the same — of course, having no margin and padding would just be lame.

    So, I had to settle with minimizing margins and padding as much as I could stand to do so, bringing the appearance in both browsers together as close as possible.

    Hey maybe I should be an admin here.

    http://amadimag.com/blogosphere

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.