Avatar of clcinc
Flag for United States of America asked on

Please help with this html alignment issue

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

Avatar of undefined
Last Comment

8/22/2022 - Mon

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/)

Wow... Can't believe I forgot that!

Carlos Llanos

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:

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

Open in new window

.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...
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck

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 Llanos

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 Llanos

I concur it looks great in IE9...
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.

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 Llanos

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

If you don't mind checking, I'd greatly appreciate it.  I can certainly wait.
Your help has saved me hundreds of hours of internet surfing.
Carlos Llanos

Sure thing...I'll get back to you later tonight.
Carlos Llanos

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 :)

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.

Just noticed that it does the same thing on all pages.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question