In IE8 the link below looks correct, but in IE7 the last div that holds the graphic title “Photo Gallery” spills down onto the next line below. I first thought that it was the double margin bug but I have added the “display:inline;” property and it is still re-wrapping underneath the first div in the container. (Please excuse my sloppy code… ie. tables).
Can someone take a look and tell me why this is happening? And how to fix it?
As a note, the double-margin float bug is an IE6-only bug.
Glad I could help. I never actually tested that, (or even viewed it outside of Opera for that matter) but it seemed like the obvious starting point.
I always tell people not to be afraid to throw it all out and start over. (A theory that can be credited to deathshadow60) I’d recommend that you consider applying your updated skill set to that site, as it’s code is REALLY outdated. (Like, 1990’s outdated.)
I know, its ugly code, huh. I wrote this before tackling CSS and a no-table design approach. Thanks for your input! I simply removed the width off of the TD tag and it fixed it! Thanks for the link too. I appreciate it!
Todd
The width on the table cell (TD) containing the four floated DIVs is set to 563px. If you add the width of the four floated DIVs it comes to 620px. Add in the horizontal margin’s on those DIVs and you’re up to 665px. I think that could have something to do with the last floated DIV dropping.
I would work up an example that fixes this for you, but I’m not brave enough to touch your code. You’ve got presentational markup, inline styling, nested presentational tables, extra wrappers that do absolutely nothing… and the list goes on.
I really suggest considering some revisions. You may want to read this SitePoint article, too.