Border problem

[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

[tatiana77]

-----------------------

[kobra]

Looks good in FF, I must say
(Is there a Web Developer add-on for IE7?

Unfortunately not, why would one need to adjust anything in IE?(sarcasm)...

If you do have the FF WDTools...select outline > table cells.

You will see that your left and right columns are not being contained inside their containers and you are leaving where to place this to the browser and then this is also the reason you see differing rendering between browsers

[tatiana77]

Crikey..

any hint as to where I can change this?

Tat