Forums / Templates, Stylesheets, Page Layout / Header out of alignment in IE, fine in FF

Header out of alignment in IE, fine in FF

Locked

Views: 1,354

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
22 Sep 2006, 2:51 AM
#1
karina_l avatar

karina_l

New Zenner

Join Date:
Sep 2004
Posts:
39
Plugin Contributions:
0

Header out of alignment in IE, fine in FF

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

22 Sep 2006, 5:41 AM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Header out of alignment in IE, fine in FF

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.

Zen-Venom Get Bitten

22 Sep 2006, 5:44 AM
#3
karina_l avatar

karina_l

New Zenner

Join Date:
Sep 2004
Posts:
39
Plugin Contributions:
0

Re: Header out of alignment in IE, fine in FF

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

22 Sep 2006, 5:59 AM
#4
karina_l avatar

karina_l

New Zenner

Join Date:
Sep 2004
Posts:
39
Plugin Contributions:
0

Re: Header out of alignment in IE, fine in FF

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

23 Sep 2006, 2:51 AM
#6
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Location:
Canada
Posts:
940
Plugin Contributions:
2

Re: Header out of alignment in IE, fine in FF

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

23 Sep 2006, 4:18 AM
#7
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,846
Plugin Contributions:
0

Re: Header out of alignment in IE, fine in FF

stick my nose in:D 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.

Mike
AEIIA - Zen Cart Certified & PCI Compliant Hosting
The Zen Cart Forum...Better than a monitor covered with post-it notes!

23 Sep 2006, 4:35 AM
#8
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Header out of alignment in IE, fine in FF

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.

Zen-Venom Get Bitten