I am having trouble with the layout of one of my pages.
on my product listing pages, in IE only, the item titles are not lined up with the rest of the listings. they are off by either 1 or 3 rows, depending on how i've tried to adjust the code...

the descriptions images, etc, are exactly where they're supposed to be, but the titles start up in the category description, rather than above the product descriptions.

this only happens on the product listings pages, not on the main page, nor on the individual product info pages... I am ready to pull my hair out.

I don't know if it has something to do with my css, or if it's the way one of the pre-made shopping cart pages is written, if it's code in the pages, I can change it too... but I don't know which part of the code is giving the problem.

zen-cart is the shopping cart I am using...
the product listings are dynamically inserted in a table, and as you can see, the titles, which should be directly above each description, are starting at the top of the page instead of staying in the table. how are they getting out of the table?

http://tinyurl.com/356oao

this is a problem page, views fine in mozilla based browsers, but is out of alignment in IE... help?

Ok, for one thing you've got this:

/* IE peekaboo bug: \*/
html .centerColumn, .centerBoxWrapper, .tabTable{
height: 1%;
}

The hack needs the * and you have to list them correctly:
* html .centerColumn, * html .centerBoxWrapper and * html .tabTable


You also need to get all those hacks OUT of your main CSS file and use conditional comments. The *html hack doesn't work in IE 7 and it will be a problem having it in there.

Originally Posted by LadynRed

Ok, for one thing you've got this:

/* IE peekaboo bug: \*/
html .centerColumn, .centerBoxWrapper, .tabTable{
height: 1%;
}

The hack needs the * and you have to list them correctly:
* html .centerColumn, * html .centerBoxWrapper and * html .tabTable

Ok, I changed that and it didn't make any difference in the page whatsoever. So I changed it back, because I realized, it's doesn't even need the html part there, it only needed the .centerColumn... (so I took the html part out) that version of the hack was given to me by another zenner who had an issue with their home page not working, and it had fixed my home page on the site.

However, you DID make me take a fresh look at what items were and weren't having the hack applied to them. And I found that there were items that needed to have position:relative applied to them, and they didn't have it. Appying that to the * at the top of my stylesheet made the thing line up right, but took away my scroll bars at the side in IE. So I figured that SOMETHING in there needed some extra consideration for IE, just not EVERYthing, and it cleared up a few other niggling issues I was having in IE as well... LOL...

so it wasn't the height:1% part of the hack that wasn't working, it was the position:relative part that needed help.... it's not the *html hack though, it's a different one... where it escapes the comment's end with the slash thingy...
I don't think I use the *html hack anywhere... I have styles applied to "body", and styles applied to " * " which applies them to everything on the site, and the particular place you pointed out, it's applying the style to " html .centerColumn", which didn't make sense once I looked at it... LOL I wonder if the fella who gave me that snippet of code was mixing up the two hacks?


I ended up with the following:

/* IE peekaboo bug: \*/
h1, h2, h3, h4, h5, h6, p, .tabTable, .centerColumn, .centerBoxWrapper, h2.centerBoxHeading, .productListing-rowheading{
position: relative;
}*/

/*  IE peekaboo bug: \*/
 .centerColumn, .centerBoxWrapper, .tabTable {height: 1%;}*/

Originally Posted by LadynRed

You also need to get all those hacks OUT of your main CSS file and use conditional comments. The *html hack doesn't work in IE 7 and it will be a problem having it in there.

Yes, I know... (I just have them right there mixed in now, because I have a strange way of associating things, and keeping it together with the other things it's associated with helps me see how it works together when I'm troubleshooting...)

I wanted to make sure I had all the items fixed first, and then I'll gather them all up and move them over to their own stylesheet that will get called in addition to this one for IE browsers <7 only.

Is that the best way to do it? I'm still learning this css thing so if you have suggestions and/or examples, I'm very willing to hear them.

I also have one more question... This time about something not displaying correctly in Mozilla, while it displays fine in IE...

Some of my image links.... For example on the individual product pages, or very noticeably on the "Reviews" page... in Mozilla (full or firefox) when I try to click on the image links, any part of the image that is lined up with the product title, is not clickable, as if the row the product title is on is on top of the image or something. on the "Reviews" page, it's not just the image, but the top button for each review as well, as it's on the same visual line as the product title.

You can also see it right on the homepage, where the two image links are, in the chandelier picture, the top part is not clickable, where it is in line with the text opposite to it, and in the wall lamp picture, the top and bottom are clickable, but not the middle of the picture, where the text is in line with the middle...

http://tinyurl.com/3xnfv8


how can I fix the clickable areas on those? thanks...

I wanted to make sure I had all the items fixed first, and then I'll gather them all up and move them over to their own stylesheet that will get called in addition to this one for IE browsers <7 only.

Is that the best way to do it?

Absolutely the best way

On your Reviews page, the problem stems from your headings, h2 in this case. The H2 will be full-width of the box it's in, and that 'overlaps' the top of the image on the left. You can try setting the h2 to display:inline and then the 'box' formed by the h2 will only be as wide as the text inside it.

Perfect! thank you! It's working much better. Now I need to go and look up how to do the conditional comments thingy... lol

ugh... it fixed that problem, but now I can't get my paragraphs to line up right in IE on the main page... I even tried putting them in a table, and the text in the table is all offset to the left... what did I do wrong?

Ok... I figured it out... I got rid of the table again and adjusted the divs and gave them a class that was included in the code I used above, for the positioning... and it all lined up... (I hate IE.. haven't used it in years, but I still have to code for it... lol)

IM HAVING THE SAME PROB!! In Firefox it works, but IE it doesnt!? I inserted a new header on my website to replace a flash one, but in IE - it still comes up as the old flash one, even though I delted the file out of cpanel!?!? So I dont even know where its coming from ?

One thing I noticed right off the bat that would help your page load faster is to scale down http://www.villadec.com/images/chandelier/BC-106.jpg

That image is way too large to have on your front page.

Wow.. I'll say. NEVER put in full sized images and scale them up or down in the HTML <img> tag.

Ooops.. put the wrong image there... lol.. I have two sizes of that image, and thought I got the small one... thanks for pointing that out!

I find that it shows up fine in IE but that in Firefox it doesn't load the stylesheet????

Originally Posted by Angelosanto

I find that it shows up fine in IE but that in Firefox it doesn't load the stylesheet????

What time of night did you try viewing it? There is a certain time of night with our hosting service when you can barely access pages on the site, and the stylesheets don't load until you refresh the page a bunch of times. I totally freaked the first time I saw my page all black and white with no styles... lol... It tends to do this most often between 10pm and 2am...

It's the hosting service, not the style sheet... unfortunately... And the site owner will not be changing hosting any time soon...