www.webdeveloper.com
Results 1 to 7 of 7

Thread: img alignment problem - Firefox Only

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52

    img alignment problem - Firefox Only

    I am using margin: 0 auto; and display: block; to make images sit in the center of a div. It works perfectly fine in all browsers except Firefox, which is pushing the image all the way to the right, outside of the div.

    You can see the error happening live here: http://theme.pippinsdesign.com/css/blog-post-3/

    What is supposed to be happening is the image, with class="aligncenter", should be centered in the div with the class="entry", which has a width of 490px.

  2. #2
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    I am not sure what is causing the problem in FF. Firefox does tend to screw up alignment though, as I found out recently with widths. If you specify a width which is larger than the element's parent element's width, than it will overflow (use borders to watch).
    Computer programmer / web developer.

  3. #3
    Join Date
    Jan 2010
    Posts
    25
    Take out display: block and contain it in an element with a text-align style of center.

  4. #4
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    Quote Originally Posted by savvykms View Post
    I am not sure what is causing the problem in FF. Firefox does tend to screw up alignment though, as I found out recently with widths. If you specify a width which is larger than the element's parent element's width, than it will overflow (use borders to watch).
    The .entry div has an okay width that is smaller than the parent div.

    Take out display: block and contain it in an element with a text-align style of center.
    This won't work because the img needs be able to be nested in text that is floated to the left, without the img have its own div.

  5. #5
    Join Date
    Mar 2006
    Posts
    172
    Quote Originally Posted by savvykms View Post
    I am not sure what is causing the problem in FF. Firefox does tend to screw up alignment though, as I found out recently with widths. If you specify a width which is larger than the element's parent element's width, than it will overflow (use borders to watch).
    The default value for overflow is 'visible'.

  6. #6
    Join Date
    Mar 2006
    Posts
    172
    I'm not sure, but I think the problem might have something to do with putting a block element (your image that you've set to display:block) inside an inline element (the a tag).

    I can get it to display properly in firefox by setting the 'a' tag to display block, removing the classes from the image element, and closing the paragraph right after you close the 'a' tag (start a new one for the text) and set that closed paragraph to text-align:center). Not sure what impact that would have on ie or other browsers.

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles