Link to home
Start Free TrialLog in
Avatar of clcinc
clcincFlag 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!  
Thanks!
Avatar of Vampireofdarkness
Vampireofdarkness
Flag of United Kingdom of Great Britain and Northern Ireland image

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/)
Avatar of clcinc

ASKER

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

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

User generated image
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...
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.
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.
I concur it looks great in IE9...
Avatar of clcinc

ASKER

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
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...
Avatar of clcinc

ASKER

If you don't mind checking, I'd greatly appreciate it.  I can certainly wait.
Sure thing...I'll get back to you later tonight.
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 :)
Avatar of clcinc

ASKER

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
Avatar of clcinc

ASKER

Just noticed that it does the same thing on all pages.
ASKER CERTIFIED SOLUTION
Avatar of Vampireofdarkness
Vampireofdarkness
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial