Border problem

[GrandmaJ]

Using Internet Explorer 7, on this page:

http://www.puppycoatjunction.com/ind...roducts_id=493

at the bottom we have a "Customer Also Bought" box... the grey single line border is supposed to encase the products, but instead the product picture seems to be on top of line and there is no "box' so to say... it seems to have collapsed. It only does this in IE7; in Firefox it is a box as it is supposed to be.

Any ideas what is wrong with it?

[kobra]

IE issue and I can not test interactively but try this:

Add to your style sheet:

#alsoPurchased {
        height: 1%;
        }

Save & upload and let us know

[GrandmaJ]

You're brilliant! It looks exactly as it should now. Many thanks

[kobra]

Great!!!

Pesky IE & their "quirks" mode

[tatiana77]

Here's another one for the experts versus IE's pesky quirks...

I had a hard time manipulating the right sideboxes, so I set a max-width for them, and min-with for centercolumn, great. After a day's work I was finally able to relax because it worked out, but when I tried IE there's issues, such as
1- top+right borders of left and right top sidebox (wrappers?) are cut off
2- left, center and right top borders are pushed down (I did a -6px for these in stylesheet, does this conflict with IE?)
3- Worst of all, the right sidebox is overlapping on top of center column, AND changes width and overlap distance when viewing different pages... this doesn't occur on my main page, of which works fine (I inserted a table from Define Pages)

I know my methods aren't perfect as I've only been working with ZC for 2 weeks now, but I feel deflated that there are discrepencies between IE and Firefox... I realized also that I should check Safari for Mac users? Darn, I don't even own a Mac... so
4- How to verify with Safari...

My posts have been going unanswered lately, I need a little luv :)

TIA, Tatiana

PS As usual... I've included screenshots, it's the best way I could describe things to you guys, hope that's ok. 1sts FF, 2nds IE7/IE6), 3rd main page in FF/IE7-6

[kobra]

tatiana77,

My posts have been going unanswered lately, I need a little luv :

And we need a url...

[tatiana77]

Sorry it's
http://www.wolfandrabbit.com/zencart/

Thanks,Tat

[kobra]

I did not look at all the issues but have determined that you have many conflicts and you need to look at the items that you have attempted to restrict or define in all the places that you have i.e. your table through defines and this one:

paypal.jpg contained in the side box is 128px wide, the side box is 140px wide you have sidebox content padding at 1em(10px equiv) all around so left and right padding = 20px.

Add it up 128px + 20px = 148px in a box that is 140px wide - and this error gets rendered differently in browsers depending on how they handle this size mis-match

Other things that are not normally necessary and could be conflicting with other items(highlighted in red)

.sideBoxContent {
	background-color: #ffffff;
	padding: 1em;
	font-size: 12px;
	}

.leftBoxContainer, .rightBoxContainer {
    margin: 0em 0em 1.5em 0em;
    width: 100%;
	background-color: #ffffff;
    border: 4px dotted pink;
    margin-top: 0em;
    }

#blanksidebox {
	text-align:center;
	float:left;
	max-width: 140px
	}

.centerColumn {
	background-color: white;
	border: 1px solid black;
	padding: 1.5em;
	margin: -0.5em 0.5em 1em 1em;
	min-width: 620px ;
	}

#navColumnTwoWrapper {
	background-color: transparent;
	max-width: 140px
	}

I would change this to cleanup your header a bit:

#logoWrapper{
	background-color: #E4F4FF;
	height:123px;
	width: 100%;
	border: 2px solid #000000;
	}

Generally better not to specify max & min dims and to let the browser adjust as required

i.e. the center results from subtracting from the overall width the left & right columns and margins & padding values and then is what ever remains. Specifying a min of 620px then looking at margins and padding and possibly a table def I theorize that you have situations that are not attainalbe as in the paypal side box and you are thereby leaving this up to the browser to correct.

As each browser calculates these things differently you are at the mercy of the browser.

[tatiana77]

Thanks Kobra (darn you're fast)

I'm going to revise everything, especially since I didn't take into account sizing for smaller res users...

I'll make the changes and come back.

Tatiana

[tatiana77]

Hi,
Ok I changed the stylesheet as you instructed. Also played with the sizes to make it more user-friendly for lower res users.

Looks good in FF, I must say. Still a few discrepencies in IE7 though,
The center column keeps widening/shortening depending on the page chosen. Also, the left space next to it as well as distance from the above titles (About Us, etc) is too wide. I'm going to see what's going on with the mainwrapper width. (Is there a Web Developer add-on for IE7?)

As for the header image, I manually re-sized it, although left/right edges still too wide, still working on it.

If you have the time, do you mind taking another look?

TIA,
Tatiana