Few alignment issuse, layout.css content included

[Guest Stephen Plink]

It must be so simple, yet can't get it right.

Who can help me?

Look at my site: http:// www.laptopsdirect.nl

1. The catBgRight image sticks out further than the boxes / or the boxes stick out less than the catBgRight image. For you to find out.

2. Even worse on the bottom with siteDocsBgLeft. You'll see it.

3. Last but not least, I cannot get the left and right content boxes to align directly to eachother without that gap. I don't see a reference for margin or padding for this anywhere.

FYI I have searched and read through posts and still was not able to get it right, therefor my new post. Thank you!

Content of my layout.css

body {

margin: 5px;

}

#pageSurround {

width: 900px;

margin: 0px auto;

padding: 5px;

}

#subSurround {

padding-left: 14px;

}

#topHeader {

text-align: right;

height: 58px;

background-image: url(../styleImages/backgrounds/topHeader.gif);

background-repeat: no-repeat;

}

#sessionBox {

text-align: left;

background-image: url(../styleImages/backgrounds/);

background-repeat: no-repeat;

width: 250px;

height: 0px;

float: right;

}

.topCats {

text-align: center;

background-image: url(../styleImages/backgrounds/catBg.gif);

height: 18px;

color: #ffffff;

margin-bottom: 10px;

}

.topCatsBgRight {

background-image: url(../styleImages/backgrounds/catBgRight.gif);

background-repeat: no-repeat;

background-position: right;

height: 18px;

}

.topCatsBgLeft {

float: left;

background-image: url(../styleImages/backgrounds/catBgLeft.gif);

background-repeat: no-repeat;

background-position: left;

height: 18px;

}

.siteDocs {

text-align: center;

background-image: url(../styleImages/backgrounds/siteDocsBg.gif);

height: 18px;

color: #ffffff;

}

.siteDocsBgRight {

background-image: url(../styleImages/backgrounds/siteDocsBgRight.gif);

background-repeat: no-repeat;

background-position: right;

height: 18px;

}

.siteDocsBgLeft {

float: left;

background-image: url(../styleImages/backgrounds/siteDocsBgLeft.gif);

background-repeat: no-repeat;

background-position: left;

height: 18px;

}

.boxTitleLeft, .boxTitleRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 70%;

color: #ffffff;

background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

width: 175px;

height: 18px;

padding-top: 0px;

padding-left: 5px;

background-repeat: no-repeat;

font-weight: bold;

}

.boxFootLeft, .boxFootRight {

background-image: url(../styleImages/backgrounds/);

width: 175px;

height: 0px;

padding-left: 5px;

background-repeat: no-repeat;

}

.boxContentLeft, .boxContentRight {

border-left: 1px solid #CCCCCC;

border-right: 1px solid #CCCCCC;

border-bottom: 1px solid #CCCCCC;

background-color: #FFFFFF;

padding-left: 5px;

padding-top: 9px;

padding-bottom: 9px;

width: 168px;

}

.boxContent {

border-top: 0px solid #458fd3;

border-right: 0px solid #cccccc;

border-bottom: 0px solid #cccccc;

border-left: 0px solid #cccccc;

padding: 0px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #333333;

margin-bottom: 5px;

}

/* CHECKOUT PAGES

.colLeftCheckout {

position: relative;

left: 0px;

width: 160px;

padding-left: 9px;

padding-right: 10px;

float: left;

}

*/

/* END CHECK OUT PAGES */

.docBtnLeft {

background-image: url(../styleImages/backgrounds/docBtnLeft.gif);

width: 4px;

}

.docBtnRight {

background-image: url(../styleImages/backgrounds/docBtnRight.gif);

width: 4px;

}

.docBtnMid {

background-color: #DDDDDD;

padding: 0px 3px 0px 3px;

}

.pagination {

text-align: right;

padding-top: 5px;

padding-bottom: 5px;

}

#subCats {

background-color: #EBEDFE;

text-align: center;

border: 1px solid #C9CEFC;

margin: 0px;

float: left;

width: 99.5%;

}

.subCat {

text-align: center;

padding: 8px;

float: left;

width: 110px;

}

.regSep{

padding: 10px 0px 10px 0px;

margin: 10px 0px 10px 0px;

border-top: 1px solid #cccccc;

border-bottom: 1px solid #cccccc;

}

.topCatsTabLeft {

background-image: url(../styleImages/backgrounds/);

background-repeat: no-repeat;

width: 7px;

}

.topCatsTabMid {

background-image: url(../styleImages/backgrounds/);

background-repeat: repeat-x;

}

.topCatsTabRight {

background-image: url(../styleImages/backgrounds/);

width: 7px;

background-repeat: no-repeat;

}

[Robsta]

I don't actually see what you're referring to.

There are a lot of layout differences between Firefox and IE. One being no spaces between the side boxes in Firefox.

[Guest laptopsdirect.nl]

How about them apples!

I'll have to check and see if I can get Firefox on here and see what's going on.

Do you also have IE, just for looking sake?

Thanks-

[Guest laptopsdirect.nl]

Downloaded and installed Firefox. Indeed, the spacing does not appear in between the side boxes.

HUH? So what is the code fix to make this right for IE, as lots of peoples (customers) will be browsing with that?

BUT in Firefox I do see the bottom and top bar issue where they are too long on one side, do you see that too?

[Robsta]

Firefox is a more accurate way of getting code working as it should as it follows proper web standards much more closely than IE. A site can work perfectly in IE but mess up in every other browser. Get a site looking great in both IE and FF, and there is a very good chance it will work as expected in other browsers.

[Guest laptopsdirect.nl]

Still looking for a fix... what code needs to be added/changed in the above layout css for my site to display properly in IE as it does in FF?

Thank you-