Guest Stephen Plink Posted October 8, 2006 Share Posted October 8, 2006 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; } Quote Link to comment Share on other sites More sharing options...
Robsta Posted October 8, 2006 Share Posted October 8, 2006 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. Quote Link to comment Share on other sites More sharing options...
Guest laptopsdirect.nl Posted October 8, 2006 Share Posted October 8, 2006 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- Quote Link to comment Share on other sites More sharing options...
Guest laptopsdirect.nl Posted October 8, 2006 Share Posted October 8, 2006 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? Quote Link to comment Share on other sites More sharing options...
Robsta Posted October 8, 2006 Share Posted October 8, 2006 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. Quote Link to comment Share on other sites More sharing options...
Guest laptopsdirect.nl Posted October 9, 2006 Share Posted October 9, 2006 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- Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.