Header out of alignment in IE, fine in FF

[Karina_L]

Help! I can't figure it out so far.... the logo is fine in FF, but in IE it is one line below the "Home | Log In | etc" links on the right side of the header. I can't figure out what's causing that line break to appear, whatever I do just messes things up worse. Here's the page in question: http://www.milastyle.com/store/

Thanks in advance!!!

[kobra]

In IE it looks as if you wanted the red line to traverse the site and this is not being displayed in FF in the same location. It does not appear to be an image and do you want it to be visible and inline with the one in your logo? Or as it displays if FF as a topper for the pink separator bar? Or having the logo underline lined up with the other red line?

If it is what I think you want. you can try this adding/forcing a height to:

#headerWrapper {
        background-color: #ffffff;
	margin: 0em;
	padding: 0em;
        height: 67px;
	border-bottom: 1px solid #cc0066;
	}

But I actually think that if you moved this line out of the css and into a header back ground image that repeats that you will have better luck.

[Karina_L]

I'll post a pic in a second...



^^ that's the way I wanted it to look, the logo and the links on the right being kind of on the same line, with the thin dark pink 1px line on the bottom (border-bottom of logo wrapper I think.)

[Karina_L]

Just tried the "height: 67px;" css suggestion... it moves the thin dark line to the bottom of header in IE, but the logo is still on the first "floor" while the "Home | Login" words are on the "second floor", figuratively speaking. What I want is to make the logo "jump up a floor" in IE, just so it looks like in Firefox.

I'm so exhausted and cross-eyed at this point, I can't even figure out how to transform that css thin line into "header back ground image that repeats". Totally feel like a dummy.

<a href="http://photobucket.com/" target="_blank"><img src="http://img.photobucket.com/albums/v292/Karina_L/screenshot_header_2.gif" border="0" alt="Photobucket - Video and Image Hosting"></a>
^^ that's what I see in IE and wanted to fix

[Karina_L]

darn it all again...




^^ that's what I see in IE and wanted to fix

[Sketchy]

Katrina, I have some free time this weekend... so, if you want, you could send me your tpl_header.php file and I'll experiment with it.

The Explorer developer bar is a joke and I can't do anything with it. The only way is for hands on testing, without having to guess-timate where the problem lies. Your borders seem to lift with the tagline wrapper, whereas I think the border could just be placed on top of the main content. Blah, I can't even explain it properly.

[barco57]

stick my nose in Would it work to turn off the bottom border in headerwrapper and replace the top border in mainContentWrapper with an image that repeats across? the image would be a couple of pixels wide and 10px tall (9 pink and 1 black). Might work to fix the border problem in IE.

[kobra]

This can be addressed most easily by creating a header_bg.xxx image with the line at the bottom. say 4-6px wide and as high as needed. Repeated horizontally x times. Then remove the darker red line from the css wrapper.