IE 8 alignment problem

Hi all,

Building a test site; some of you have seen it:

The Home page has a slideshow. All other pages merely have a gray BG with a small logo on the left. Now, in Chrome, IE9, and Firefox, it all works as intended. The top of both the slideshow images OR the gray-BG “header” lines up perfectly with the bottom of the menu items.

In IE8, however, there is a gap… See screenshots to see what I mean, please.

I could use some help, if you would be so kind, “hacking” the code to get IE8 up to snuff… I’m not concerned about IE7 or earlier, personally… Thanks!

Guessing you fixed it, since I don’t see what’s in your images.

Thanks for your reply. Nope, haven’t fixed anything. Weird, because this almost seems sporadic… I am looking at it right now in IE9, but in the IE8 Browser Mode under Developer Tools, and it’s fine, where in the past it’s displayed the issue. And yet on a totally different computer (Windows 7 32, IE8), the problem is absolutely there.

Looking at it right now.

Don’t get it!

Any ideas, folks? Are others seeing the issue?


To answer your question, the problem that you describe is alive and well in IE8. I cannot offer a reason. 14 stylesheets with the same id styled on more than one including on the html page make it a bit difficult for me. I believe that IE is being your friend and showing you that there is a fundamental flaw in the layout of the page. Possibly a combination of something that is positioned absolutely at the top of the page, like #line, and perhaps some default vertical margins that were not zeroed; or maybe illogical containers. I don’t think it’s an IE bug.

Your html page validates spectacularly!!!

I wouldn’t worry about it if I were you. It would ne nice to get rid of it, but does it spoil your design? Will it confuse someone looking at your pages? Is it worth the effort?

Hi guys,

Yeah, tell me about it: the 14 stylesheets. Maddening aspect of Joomla an its add-ons! LOL! As far as being worth the effort, I’d like to if possible because, while the Home page whitespace is perfectly acceptable, the other pages with the red BG (which I could change, but left for this very “discovery” purpose) is annoying.

I may have been wrong about this being an IE8 ideosyncrasy…


Line 215:

[COLOR="#FF0000"]#fontsize {display:inline}[/COLOR]    /* {display:inline}  pushes the slide show down in IE8 */

DELETE or CHANGE to {display:block}. Good luck.

Well hot damn! I think that did it… Changed to block, tested in IE8, and it looks good. Still looks fine in FF, IE9, and Chrome, too!


Now, I did not find in the CSS the comment:

[COLOR="#008000"]/* {display:inline}  pushes the slide show down in IE8 */[/COLOR]

Was that something you put in your post here only? Just found it odd that I couldn’t find it…

LOL! Yes, I make notes for myself as I noodle along. Usually leave them in place “FYI” in case they are useful. Never know. I kinda figure the name of the stylesheet, line number, and id will do the trick. :slight_smile:

Glad it works.