IE 8 alignment problem

[Worldbuilder]

Hi all,

Building a test site; some of you have seen it: http://joomlatest.chrisbartlett.net/

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!

[Ron Roe]

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

[Worldbuilder]

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!

[Worldbuilder]

Any ideas, folks? Are others seeing the issue?

[ronpat]

Worldbuilder,

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!!!

[Dr John]

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?

[Worldbuilder]

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.

[ronpat]

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

template/beez_20/css/personal.css

Line 215:

#fontsize {display:inline}    /* {display:inline}  pushes the slide show down in IE8 */

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

[Worldbuilder]

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!

A.W.E.S.O.M.E.

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

/* {display:inline}  pushes the slide show down in IE8 */

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

[ronpat]

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.

Glad it works.