Ok this has been driving me nuts. I have used just about every hack I could think of and nothing has worked. So I figured I would post here and maybe someone else could see something I'm missing.

http://sephroth.no-ip.info/Telco/index.php

For now I am fixing my header. for some odd reason the subnav in the upper right will not work properly. It is acting like there is a break after the image. I have tried adjusting the padding, adding display: inline; to my image, even removing floats but nothing works... Removing the image and it works correctly so something that has to do with the image is breaking it.

By the way, it ONLY breaks in IE6. I checked FF, Opera, and IE 7 and they all work but unfortunately my client wants it to look perfect in both IE6 and FF...sigh. Any help would be appreciated.

it is never going to be the same in all browsers, nor should you try to make it that way.
Nobody but yourselves is ever going to look at it in anything other than the default one on their machine, and believe me no one other than a designer is going to notice small differences.
I stopped bothering about small differences when one client said "What this Opera then"?

However in this case, the very simple solution to get it 100% is to set

margin:0;
font-size:0;

on the classes

header_spacer
white_spacer
and
gray_spacer

Reason;
IE will leave space in an empty div element for the text you are not placing in there and by setting the font size to 0 that imaginary text will take up no space at all.

Also as your "horizontal rules" are images make sure there is no white space or line breaks before or after the <img ... /> element.
Sometimes browers will render this space and create another gap or move elements down slightly.

Thanks for your help, I will try that. Sorry I posted this in the html forum section, I forgot there was a CSS subsection and didn't see it until after I had posted!

I sort of fixed a few of my problems. With the very top header I had to use a negative margin in my ie.css file so that the ul would align properly and also I had, had a text indent on the parent div and it was applying to to everything, not just the image and the UL but everything in the <li> tags as well.

I also sort of fixed my main_header image problems too. I surrounded my image tags with <h1></h1> and it sort of fixed them. I'm still working on that though.

The only reason I am fixing it in IE6 is because the client requested it otherwise I would have left it alone. I would rather conform to the client's requests than to argue the points of switching browsers!

If you haven't already, you should read all about the various IE bugs and how to squash them here: http://www.positioniseverything.net/explorer.html

Originally Posted by LadynRed

If you haven't already, you should read all about the various IE bugs and how to squash them here: http://www.positioniseverything.net/explorer.html

I was looking for something like that , thank you.

Originally Posted by LadynRed

If you haven't already, you should read all about the various IE bugs and how to squash them here: http://www.positioniseverything.net/explorer.html

I actually have read those several times, most of the fixes don't work for me or are not for my problems. I know my errors but getting around it is another ball game...

I have a feeling IE6 doesn't support xhtml 1.0 very well and I can't use <object>'s for the img's to support xhtml 2.0 because of the active X security garbage for IE. my only other option is to take a long route, a less SEO route and just make it a div with a bg.

No offense, but there is no bug that I know of that isn't covered by the solutions at Position Is Everything. IE supports XHTML 1.0 as well as the others, I code in XHTML 1.0 Strict every day with no problems in IE. However I don't know that any of the current crop of browsers has support for XHTML 2.0 as yet - for now 2.0 is vapor.

What do you want to use the <object> for anyway ?
In IE 6 your upper right nav is way off the page, so whatever solution you used isn't working. Chris gave you a solution.

I don't quite understand the logic of putting an image inside a header tag.

Rather than using images for the dots in your upper right menu, use the proper ascii character - &middot; works. This eliminates the image completely.

On the image you placed in the H1 tags, part of the problem is that you didn't include the images dimensions in your HTML, which you should ALWAYS do. Otherwise, the browser will size for you !

Your "navigation icon' could be better used as a background on the <a>, adjust position with margins and padding.

I took out your 'dot' images and replaced them with the &middot;. I also changed your CSS a bit:

div#page_header ul {
float: right;
display: inline;
margin: 25px 50px 0px 0px;

}

div#page_header ul li {
/*float: left;*/
display: inline;
padding: 0;
margin: 0;
}

There's no reason to float the UL AND the list. The menu sits where it should.

I put the images inside header tags because the images were bugged in IE somehow. I DO have the width/height declared for the images in my CSS. It seemed every single image I used was being treated as a block element. (even using display: inline; produced no results.)

Also for SEO reasons I was told by someone to put it inside a header tag, which I don't agree with. I only kept it because it actually fixed my problem. or did on my browser.

also I'm not sure what you mean by it's way off the page now. It looks correct to me up to the resolution my monitor supports which is 1280x1024. You are using IE6 correct?

Also using the CSS you provided (which I have tried before) produces this:

I DO have the width/height declared for the images in my CSS.

You have to also have the width and height defined IN YOUR HTML for every image. Otherwise, you're asking the BROWSER to determine the image's dimensions, which can also slow things down. It also causes the images to show as stretched or otherwise deformed until the browser is done figuring out what the correct dimensions are.

As for what you ended up with, I was working strictly with the CSS file that was on your web server. Any other changes you made could affect it. I did test in IE 6, FF 2.01, and IE 5.5, none of which showed that result.

Putting an IMAGE inside a Header tag is pointless, since the SE spiders can't read an image.

Cross-browser migraine.

You can try with this:
<img src="your image" style="display: block;" />
and other elements around should have style="margin: 0;"

Chrishirst, you are AWESOME! Ive been searching for that solution for some time now. It does raise another question though.

I set the font-size to 0 for all the divs that i wasn't going to include text and everything lined up beautifully in IE. The problem now is... The divs that i am using text, if i set the font size in 'em', IE does not display the text properly, the text is tiny, i tried '!important' as well (it works properly in Firefox BTW). The only way to get larger text in that div is to set the font-size in pixels, which i do not want..

Any ideas?

By the sounds of it you have a cascade of "font-size:0" happening, where some elements are inheriting the size when they shouldn't

Set a default size for fonts in divs
div {
font-size:1em;
}
and see if that makes a difference.

If not post a link to the page or post the code.