Header issues in IE 6 and 7

Ok Folks,

No more really easy ones, I am actually getting to learn my way around Zen Cart to some degree. Now I am having IE 6 and IE 7 issues. These maybe simple, but I can't find the answers.

In both 6 and 7 I have a Shopping Cart/Contact Us/My Account gif image that I have linked to the proper pages, looks great in Firefox. The image links are totally out of alignment in IE.

Have a look:
http://wallstreetcoffeeroastery.com/zcart/index.php

I thought about getting cute and tried the position:relative; IE fix, but it did not make a difference.

In IE 7 the entire page contents moves up over the header image and nothing is readable.

I'm stumped on these two issues, anybody have a clue?

Thanks,
Jim

Can not look at [possible solutions interactively in IE but you may have conflicting position declarations in the css - i would try all float right and in your tpl_header.php file insure that the order is correct and that a clear both exists before the tagline
Emphasis mine

#tagline ul {
    height:107px;
    margin:0;
    width: 336px;
    background:#fff url(../images/topnav.gif) no-repeat right bottom;
    }
  
#tagline li {
    list-style-type:none; 
    width:0;
    height:100px;
    position:absolute;
    }
  
#tagline a {
    float:left;
    height:0;
    position:absolute; 
    color:#000; 
    text-decoration:none; 
    padding-top:66px; 
    font: 1.5em;
    }

kobra:

Can not look at [possible solutions interactively in IE but you may have conflicting position declarations in the css - i would try all float right and in your tpl_header.php file insure that the order is correct and that a clear both exists before the tagline
Emphasis mine

#tagline ul {
height:107px;
margin:0;
width: 336px;
background:#fff url(../images/topnav.gif) no-repeat right bottom;
}

#tagline li {
list-style-type:none;
width:0;
height:100px;
position:absolute;
}

#tagline a {
float:left;
height:0;
position:absolute;
color:#000;
text-decoration:none;
padding-top:66px;
font: 1.5em;
}

Thanks kobra,

I did some more research and I am going to try your suggestion and then create a separate IE stylesheet, it seems the best way to deal with IE problems and solving them.

Thanks for the simple answer, let's see if it works,
Jim

Your image should most likely be applied to #tagline and this container positioned as the ul & ul li need not have these being inside the container

Looking you have many many entries for this???

kobra:

Your image should most likely be applied to #tagline and this container positioned as the ul & ul li need not have these being inside the container

Looking you have many many entries for this???

OK Now you are getting over my head quick, I need a little more than just telling me I have many many entries for this. I am trying to make sense of what you are telling me and not having much luck with the explanation assuming I know what you are referring to, thanks for the input, but i need a lot more direction if it is going to do me any good.

Thanks again,
Jim

For tagline there are 17 thats correct 17 entries

Some have to be seperate like tagline ul & tagline ul li

But 17 times - - look at your stylesheet and concantenate these where you can for this and any others

kobra:

For tagline there are 17 thats correct 17 entries

Some have to be seperate like tagline ul & tagline ul li

But 17 times - - look at your stylesheet and concantenate these where you can for this and any others

OK kobra,

So I will look into the ul li issues and see if I can figure out what needs to be done. I am still trying to figure out how to take css code and make it IE friendly for an IE css entry. My Shopping Cart/Contact Us/My Account in the header is screwed up in both. In IE 7 the Main container with text comes up and overlaps the header logo image. Nasty issue, is there a thread besides ones showing html cracks that explains how to make the css code IE friendly.

Thanks for the diagnosis,
Jim

I am still trying to figure out how to take css code and make it IE friendly for an IE css entry.
First make it validate

kobra:

First make it validate

Ah ha kobra,

Now this is some good info, although I had to go and figure out what "validating" was first. I installed the Firefox Web Developers Toolbar a few days ago and found the validation tool after you mentioned it, do I have to validate all 3 levels of the CSS? I am reading up more on CSS and will soon have a better understanding, thanks so much for the input!:smile:

Thanks for the guidance,
Jim

Also validate the page code as I think that this may be where the issue begins.

Hard enough trying to fix IE "qurik mode" issues - but even harder to impossible when one tries to account for how each handle errors

3 levels of css??? do you mean additional stylesheets?

kobra:

Also validate the page code as I think that this may be where the issue begins.

Hard enough trying to fix IE "qurik mode" issues - but even harder to impossible when one tries to account for how each handle errors

3 levels of css??? do you mean additional stylesheets?

I am using a free CSS Toolbox from Blumentals.net, when I say check the CSS in it asks what level, 1,2 or 3. My understanding so far is that CSS 1 is for single line defintion tags, 2 is for page defintions and 3 is for entire site defintions, thus 3 levels of CSS definition. I will stick to my Firefox validation tool and check the fixes as i upload the updated sheet. With your reaction, I guess I should stick to Level 2 and 3 definitions and work them out as I go through the site page by page.

I will read up more today on CSS and fix the CSS definitions that I can figure out. Be sure that I will come back and ask if I can't fix something!:D

Who knows maybe I will get good enough at this that I will actually be answering posts instead of just bugging you guys for answer!:unsure:

Thanks again,
Jim

Did you relocate these images to the define_main_page.php?