Please help with this html alignment issue

clcinc
clcinc used Ask the Experts™
on
Apparently my website has not been displaying in IE correctly.  I have been checking in FireFox and have learned a very valuable lesson... I also need to add a banner that is approximately 500 pixels wide above the flash slideshow.  

Any help is really appreciated... I did not lay this site out and can't seem to figure why it does this in IE and not FF!  
Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You'll need to post a link to a live version, or your source at least. It'll most likely be because of the box model (http://css-tricks.com/2841-the-css-box-model/)

Author

Commented:
Wow... Can't believe I forgot that!
Clcinc.org

Thanks
Carlos LlanosIT Manager

Commented:
Ok, drew this up quickly for you...obviously add the background picture in the css...and change the height to what you need...

website with banner...
Here's the code:

HTML:
</div><!-- ## END NAVI ## -->
<div class="header"></div>
<!-- ##### Column Two ##### --><div id="col-twoWrapper">

Open in new window


CSS:
.header {
 background-color: #cccccc;
 width: 500px;
 margin-top: 50px;
 height: 150px;
}

Open in new window


I put the background to gray so you could see what it looked like as far as a box...

If you need additional help, please let me know...
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Which parts aren't showing properly and in which version of IE? IE9 actually looks better than Firefox as the Donate button is inline, rather than slightly below the About Us/Events & Classes/Career School/Contact Us links. The down arrows for your menu are also flush with the above links whereas with Firefox there is a gap.

Guessing its IE7 and possibly IE6.
Carlos LlanosIT Manager

Commented:
Sorry need to explain html a little bit...

Add a div container in between END NAV and Column Two.  Give it a class of .header or something you like...

Then create the css for the class and put the background-image: (../url) of image in the css as well...

This is a framework for you to use.
Carlos LlanosIT Manager

Commented:
I concur it looks great in IE9...

Author

Commented:
It doesn't look good in IE 8.  Everything on the left is below everything on the right...  Nukit, I will try your suggestion and report back
Carlos LlanosIT Manager

Commented:
Ah, this could be a float issue with IE8...I will have to look at it on a different machine, but I might not be able to be of any assistance until I get home...

Author

Commented:
If you don't mind checking, I'd greatly appreciate it.  I can certainly wait.
Carlos LlanosIT Manager

Commented:
Sure thing...I'll get back to you later tonight.
Carlos LlanosIT Manager

Commented:
I see the exact same thing in IE8 that I see in IE9 and mozilla.

Perhaps you just need to fully refresh you IE browser?

You can do this by pressing the "Shift" key and "F5" at the same time.  This will fully refresh your browser.

Please let me know if that works.

Also, the banner below the Training | Employers | Job Seekers section, you can copy the CSS and HTML for that and paste it in the location I provided in the HTML in my previous comment and then just change your image background and viola...perfect banner :)

Author

Commented:
Thanks for the response.  Really not sure what the deal is then....  Here is a screen shot taken after a full refresh (ctrl. + F5)  

Note that everything on the left is below what is visible in this photo.
untitled.bmp

Author

Commented:
Just noticed that it does the same thing on all pages.
Ok, I'm not familiar with IE dev tools, so not sure what I can do with it yet. Quick look and the right column is actually part of #container, which sits above #mainContent in the DOM. If you have #col-twoWrapper inside #mainContent, what happens?

You may need to adjust widths and I would also recommend, if you haven't, resetting the box-model in CSS. See earlier link.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial