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.
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.
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).
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.
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).
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.
Reply With Quote
Originally Posted by savvykms
Bookmarks