A Niggling layout CSS problem..

steveinbaz · February 13, 2015

Morning all.. :)

I am really annoying myself asking this question, after all the alterations I have made to my site.. all the mods I have painstakingly put in.. all that work.. slowly getting there..

But do you think I can find how to adjust this annoying border issue. I have fiddled and fiddled.. but nope.. I give in.. Grrr!

Can anyone help at all please?

See pic attached.. yellow border with the red circle.. edge of main table.. is it the wrapper? Just want to get rid if I can.

Anyone? I'll post you the last hair out of my head as a souvenir :D

♥Tsimi · February 13, 2015

use Firefox browser -> install firebug and then you should be able to find it.

Or post the URL to the site and i guess within few minutes someone can answer.

steveinbaz · February 13, 2015

Sorry I forgot to say 2.3.4

No I still cant find it.
It looks like it should be the wrapper but the border is already set to 0.

Can anyone offer any pointers?

Here's my css text..

/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

.ui-widget {
  font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
  font-size: 15px;
}

body { 
  background: url('http://www.wongabadge.com/images/bg2.jpg') no-repeat fixed center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #000;
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 11px;
  font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif
}

#bodyWrapper {
border:0px none #BB27BD; background:#FEFF01; 
}

#bodyContent {
background: #FEFF01;
}

#header {
  height: 244px;
  background: #FEFF01;
}

#storeLogo {
  float: left;
  margin-top: 12px;
  margin-bottom: 2px;
  margin-left: 2px;
}

#headerShortcuts {
  float: right;
  margin-top: 15px;
}

#columnLeft {
  padding-top: 30px;
}

#columnRight {
  padding-top: 30px;
}

.infoBoxContainer {
  padding: 0;
 }

/* structural settings */
.infoBoxHeading {
    font-size: 15px;
    padding: 5px;
}
/* color settings */
.infoBoxHeading,  .infoBoxHeading a{
    color: #F1F12F;
    background: #BB27BD;
}

.infoBoxContents {
  padding: 20px;
  font-size: 13px;
  line-height: 1.5;
  background: #9EBEBE; 
}

.contentContainer {
  padding-bottom: 10px; padding-left: 0;
}

.contentContainer h2 {
  font-size: 16px;
  text-decoration: underline;
  font-weight: normal;
  margin-bottom: 0;
  padding-bottom: 5px;
}

.contentText, .contentText table {
  padding: 5px 5px 5px 5px;
  font-size: 12px;
  line-height: 1.5;
}

.productListTable {
  padding: 5px;
  font-size: 15px;
  line-height: 1.5;
}

.productListTable tr.alt td {
  background-color: #F2F02C;
}

.fieldKey {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  width: 150px;
}

.fieldValue {
  font-size: 12px;
  line-height: 1.5;
}

h1 {
  font-size: 20px;
  margin-bottom: 0;
  padding-bottom: 5px;
}

img {
  border: 0px none;
}

table, p {
  font-size: 11px;
  line-height: 1.5;
}

#piGal {
  float: right;
  width: 250px;
}

#piGal img {
  max-width: 250px;
  height: auto;
}

.buttonSet {
  clear: both;
}

.buttonAction {
  float: right;
}

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 11px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 11px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 11px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 11px; color: #70d250; text-decoration: underline; }

A {
  color: #000000;
  text-decoration: none;
}

A:hover {
  text-decoration: underline;
}

FORM {
	display: inline;
}

TR.header {
  background: #ffffff;
}

TR.headerNavigation {
  background: #bbc3d3;
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight : bold;
}

A.headerNavigation { 
  color: #FFFFFF; 
}

A.headerNavigation:hover {
  color: #ffffff;
}

TR.headerError {
  background: #ff0000;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #B925B7;
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #B925B7;
  color: #ffffff;
  font-weight: bold;
}

.infoBox {
  background: #b6b7cb;
}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #B925B7;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
}

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #f8f8f9;
}

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #b6b7cb;
  border-spacing: 1px;
}

.productListingHeader {
  table-layout: fixed;
  color: #FFFFFF;
  font-weight: bold;
}

.productListingHeader A:hover {
  color: #FFFFFF;
}

.productListingData {
  table-layout: fixed;
}

A.pageResults {
  color: #0000FF;
}

A.pageResults:hover {
  color: #0000FF;
  background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #9a9a9a;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #000000;
}

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #aabbdd;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

TABLE.formArea {
  background: #f1f9fe;
  border-color: #7b9ebd;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

/* buttons */

.tdbLink a { }

.tdbLink button { }

/* account link list */

.accountLinkList {
  list-style-type: none;
  margin: 2px 2px 2px 10px;
  padding: 5px;
}

.accountLinkListEntry {
  float: left;
  margin-right: 5px;
}

multimixer · February 13, 2015

It is not clear what section of the website you refer to. Is it header, footer, columns, somewhere else? What is "the wrapper" you refer to?

The yellow colour look like a background, is it a background colour?

Post your url or at least a bigger image

steveinbaz · February 13, 2015

@@multimixer

Hi.. it's http://www.wongabadge.com

I'm sure its something to do with

#bodyWrapper {

background: #FEFF01;

border-color: #BB27BD;

border-style: none;

border-width: 0;

I just changed the background to transparent.. to check th result and of course the border went away. But I dont want to make it transparent because I need the background there for other elements.
Would just prefer it to have no 'surround', where it extends beyond the info boxes by a few px, down the sides.

As you can see theres no border set in the css.. But I can't work it out.

Any ideas?

multimixer · February 13, 2015

Since the "border" go away the moment you remove the background colour, you can say for sure that it is not a border

What look like a border is the 5px margin created by the 960 grid system. There are 5px left and right of each grid

You can move the left column to the left (and right column to the right) by adding

#columnLeft{margin-left:0; padding-right:5px}

#columnRight{margin-right:0; padding-left:5px}

This will move the 5px margin to the inner of the content, so you'll have a larger space between column and middle part

steveinbaz · February 13, 2015

Oh OK.. I did wonder if it was something to do with the grid system, since I tried to alter everything else. I wouldn't have known how to approach tampering with that though..

Thanks for code, I will try it.. Do I just put it anywhere on the style sheet? Or should it go in a certain place?

Thanks for your help.. I know it's not a major thing, but just irritating :)

steveinbaz · February 13, 2015

Thank you very much.. 'Problem' solved. :)

A Niggling layout CSS problem..

Recommended Posts

steveinbaz

♥Tsimi

steveinbaz

multimixer

steveinbaz

multimixer

steveinbaz

steveinbaz

Archived

Browse

Activity