inline image display
I have 7 images that display inline perfectly in IE, Safari and Chrome, but in Firefox the last one wraps, while the bar menu (which the pics are supposed to line up with) displays properly.
Here is a link to view, if you need it:
Thanks,
Helen
Okulungisiwe
All Replies (10)
I can wrap the last image (on Windows 7; I don't have a Mac) if I use zoom. Interestingly, not all zoom levels cause wrapping, it seems to alternate. Is this a new issue in Firefox 14? Do you recall the last version without this issue?
I am seeing the same thing - alternative zoom clicks causing the last image to "wrap" - on WinXP SP3. That wrap happens at 150% and above with IE8, too. Happens in Opera at the first zoom level.
This is a new site. I have not published as yet, so can't speak for older versions. I am not as concerned about XP nor high magnification. Can you think of any reason why it would not work in the normal Firefox window? Thanks, Helen
This is a new site. I have not published as yet, so can't speak for older versions. I am not as concerned about XP nor high magnification. Can you think of any reason why it would not work in the normal Firefox window? Thanks, Helen
Helen, what OS are you running? The page looks correct to me at default zoom on Windows 7 (with ClearType as disabled as possible and hardware acceleration turned off in Firefox's Options > Advanced > General).
It is also font-size and font-family related.
If you set the minimum font-size to 16 or more then it always wraps.
It looks that white-space between the images can take more space then fits in that container with or without zooming in some cases.
I am new to Mac (last February), but did not upgrade to the latest OS. I also have Vista Home P displaying the Firefox incorrectly, while displaying correctly in Chrome, Safari and IE. I have viewed in more current Windows OSs at other locations (only in IE for these) and have not seen a wrap. Have never tried the "zoom" To be frank, never thought of it until it was suggested here. That said, I must also admit that I am not a Firefox "frequent user," and can not find: "Firefox's Options > Advanced > General" Thanks for your continued interest, Helen
I think my math is correct with the spacing across (always a challenge with margins and padding). It seems to me if I change the sizing/white space between images, it would guarantee that in all other browsers they would no longer align with the menu, but will give it a try. Thanks for your continued interest, Helen
It's something about the way spacing is computed when you use floats vs. in the normal flow. To match them up, could you try the following (note that in the page you want id="menuPhotos" not id="#menuPhotos"):
#menuPhotos a { display: block; float:left; border-right: 3px solid #ffffff; } #menuPhotos a:last-child { border-right: none; } #menus_main_menu_2012 { clear:left; }
Note: IE8 and earlier did not support the :last-child pseudoclass, so that last image may have a border that causes a problem. I didn't test it, sorry.
Okulungisiwe
That did not improve the Firefox display, but thanks for the tip. You must have dug deep to get all the CSS code et al. And thanks for that "heads up" about the # sign. I am guessing it must accept that as well, because the same error was in the code for each page layout, yet the photos followed the coding. I am really stumped. Thanks again, Helen