Hi -

Here is another css issue I have with Web Calendar - after I uploaded it, my tables that I use to tabulate information, not to lay out my page!, were messed up. My formerly rounded borders and general sizing didn't work anymore- on all my pages not only the one were the calendar is displayed. I don't know enough CSS to understand this!

I defined classes for all of my tables which helped with the sizing but now I have a really weird effect on my borders - you can see here
http://shake-and-shine.com/wash.html
that I have now sharp corners around the rounded corners of the cells - even though my tables are collapsed.

Following the advice in another thread about issues with web calendar interfering with my link formatting, I moved the script/css link for web calendar above my stylesheet link - that helped with the links, but not the table formatting.

My site has a stripped-down placeholder page at the moment, with only the calendar page being already in use.
http://shake-and-shine.com/index.html
http://shake-and-shine.com/calendarpage.html
The page that I copied above (canine wash) is part of the set of pages that I will eventually upload when my store opens.

My stylesheet was originally from a coffeecup theme that I use for another webpage (http://www.buecherfuerneugierige.de) and have worked over for the Shake & Shine page. I pasted it below. I use HTML Editor.

I'd appreciate your help!
Monika

/* Copyright (c) 2010 CoffeeCup, All rights reserved - http://www.coffeecup.com/
----------------------------------------------------------------------------------------------------*/

/* Reset v1.0 | 20080212 - http://meyerweb.com/eric/tools/css/reset/
----------------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

img {

margin: 0;
padding: 0;
border-color: #5CA4BD;
border-width:1px;
border-style:solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

img.floataround {
float:left;
margin-right: 10px;
}


img.noborder{
border:none; }

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}


table {
border-collapse: collapse;
border-spacing: 0;
}

table.sidebar {
border-collapse:collapse;
border-spacing:0;
border-style:solid;
border-width: 1px;
border-color: #5CA4BD;
width: 200px;
text-align:center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
font-size: 1.2em;
line-height: 1.5em;
color: #333;}

table.washpackages {
border-width: 1px;
border-color: #5CA4BD;
border-style: dashed;
width: 600px;

}

th {
color:#ecdeb5;
background-color: #5CA4BD;
font-size: 1.3 em;
}

th.wash {
background-color: #c8ab37;
color: #ecdeb5;
font-size: 1.3 em;

}

th.grooming {
background-color: #ff7f2a;
color: #ecdeb5;
font-size: 1.3 em;

}

th.services {
background-color: #ffdd55;
color: #ecdeb5;
font-size: 1.3 em;

}

td.included {
background-color: #ecdeb5; }

td.leftalign{
text-align:left;
padding-left: 15px; }

table.sidebar th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}

table.sidebar th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}

table.sidebar th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}

table.sidebar tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}

table.sidebar tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}

table.sidebar tr:only-child {
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px; }


table.washpackages th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}

table.washpackages th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}

table.washpackages th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}

table.washpackages tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}

table.washpackages tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}

table.washpackages tr:only-child {
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px; }

/* Reset for HTML 5 Elements
----------------------------------------------------------------------------------------------------*/

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {
display: block;
margin: 0;
padding: 0;
}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

/* Type
----------------------------------------------------------------------------------------------------*/

html {
font-size: 16px;

}

body {
color: #333;
font: 75%/1.5em Trebuchet MS, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
color: #5CA4BD;
font: 2em/1em Trebuchet MS, Arial, sans-serif;
}

h1 {
text-align:center;
padding-top:7px;
font-weight:bold;

}

h2 {
color: #5CA4BD;
font: 1.7em Trebuchet MS, Arial, sans-serif;
text-align:center;
}

h3 {
color: #f26932;
font-size: 2em;
font-weight: bold;
}

h4 {
font-size: 1.35em;
color: #f26932;
font-weight: bolder;
}

h5 {
font-size: 1.1em;
font-weight: bold;
}

h6 {
font-size: 1em;
font-weight: bold;
}

p {
color: #868686;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5em;
text-align: left;
}
p.box {
border-color: #eddeb5;
border-style:solid;
border-width: 5px;
border-radius: 10px;
width: 200px;

}
p.floataround {
margin-left: 10px;
}

ul {
list-style: disc;
color: #f26932;
font-size: 1.0em;
font-weight: normal;
line-height: 1.3em;
}

ol, ol.lowerRoman, ol.upperAlpha {
list-style: decimal;
color: #f26932;
font-size: 1.0em;
font-weight: normal;
line-height: 1.3em;
}

ol.lowerRoman {
list-style: lower-roman;
}

ol.upperAlpha {
list-style: upper-alpha;
}

strong, b, .b {
color: #f26932 !important;
font-weight: bold;
}

a {
color: #f26932;
text-decoration: none;
}

a:link {
color: #f26932;
outline: none;
text-decoration: none;
}

a:visited {
color: #f26932;
outline: none;
text-decoration: none;
}

a:hover {
color: #008080;
text-decoration: underline;
}

a:active {
color: #f26932;
outline: none;
text-decoration: none;
}

a:focus {
outline: 1px dotted;
}

.linkprotect {color: #f26932;
outline: none;
text-decoration: none;
}

.more {
text-decoration: underline !important;
font-size: 1.2em;
}

.weiteres {
text-decoration: underline !important;
color: #868686;
font-size: 1.6em;
font-weight: normal;
font-family: Expletus Sans, Trebuchet MS, Arial, Sans-serif;
line-height:1.5;
}

/* Spacing
----------------------------------------------------------------------------------------------------*/



h1, h2, h3, h4, h5, h6 {
padding-bottom: 3px !important;
}

hr {
border: 0 #ccc solid;
border-top-width: 0.5px;
clear: both;
height: 0;
}

p {
margin-right: 10px;
padding: 5px 0;
}


blockquote {
margin-right: 10px;
padding: 5px 0 20px 0;
}

ul, ol {
margin-left: 25px;
padding-left: 0;
}

li {
margin-bottom: 15px;
margin-left: 15px;
}

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
margin-bottom: 10px;
}

/* Layout
----------------------------------------------------------------------------------------------------*/

html {

background-color: #fff;
padding: 0px 0px 0px 0px;
text-align: left;
}

body {

width: 960px;
margin: 0 auto;
position: relative;
border: none;
}

#logoTxt {
background: url(../images/logowide.png) top right no-repeat;
position: absolute;
background-size: contain;
display:inline-block;
top: -110px;
left: 20px;
width: 400px;
height: 105px;
border: none;
padding-bottom: 50px;

}


#logoTxt h1, #logoTxt h2 {
color: #fff;
font-size: 3em;
line-height: 1.5em;
text-align: center;

}

#logoTxt h2 {
color: #fff;
}

#logoTxt h1 span, #logoTxt h2 span {
display: block;
position: absolute;
top: 0px;
right: 0;
width: 124px;
z-index: 9;
border: none;
}

#logoTxt h2 span {
top: 0 !important;

}

header {
height: 45px;
position: absolute;
top: 0px;
width: 960px;
border-radius:20px 20px 0 0;
-moz-border-radius:20px 20px 0 0;
-webkit-border-radius:20px 20px 0 0;
background-color: #333;
clear:both;

}

header h1 {
color: #333;
font-size: 1.9em;
margin-top: 0px;
text-align: left;
border: none;
}

header h1 span {
color: #868686;
display: inline-block;
position: absolute;
top: -50px;
right:60px;
width: 300px;
border: none;
z-index: 10 !important;
}

header EN span {
color: #868686;
display: inline-block;
position: absolute;
top: -50px;
right:0px;
width: 300px;
border: none;
z-index: 10 !important;
}

header Monika span {
color: #f26932;
display: inline-block;
position: absolute;
top: -50px;
right:-115px;
width: 300px;
border: none;
z-index: 10 !important;
}

#headTxt {
color: #000 !important;
font-size: 4em;
line-height: 0.3em;
text-transform: capitalize;
width: auto !important;
}

ul.sidebar {
border-style:dotted;
border-color: #5CA4BD;
border-width: 2px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
width: 200px;
margin: 0px;
list-style:none;
padding-top:5px;
text-align:center;}
}

li.header {
color: #ecdeb5;
background-color: #5CA4BD;
font-size: 1.3 em;
}

nav ul {
float:right;
clear: left;
list-style: none;
width: 700px;
height: 30px;
margin-right: 50px;
margin-left: 200px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: right;
border: none;
position: absolute;
display:inline-block;
top: 20px;
}

nav ul li {
display: inline;
margin: 0 2px 0 0;
border: none;
}

nav ul li a {
color: #f4f4f4;
font-size: 1.5em;
font-weight: normal;
font-family: Expletus Sans, Trebuchet MS, Arial, Sans-serif;
text-align: right;
padding: 0px 10px 0px 10px;
width: 170px;
height:30px;
border: none;
repeat: no-repeat;

}
nav ul li a.calendarpage {
color: #f4f4f4;
font-size: 1.5em;
font-weight: normal;
font-family: Expletus Sans, Trebuchet MS, Arial, Sans-serif;
text-align: right;
padding: 0px 10px 0px 10px;
width: 170px;
height:30px;
border: none;
repeat: no-repeat;

}

nav ul li a:hover {

color: #008080;
text-decoration: none;


}

nav ul li a.selected {
color: #ed6f25;
text-decoration: none;

}


nav ul li a.selected:hover {
color: #008080;
text-decoration: none;
}

#mainRight, #mainRight2 {


background-color: #fff;
margin-top: 130px;
width: 960px;
text-align: left;
margin-bottom: 100px;
padding-top: 45px;
padding-bottom: 10px;
border-style:solid;
border-color: #333;
border-width: 1px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}


/*#mainRight h2 {
margin-bottom: 40px;
border: none;
}

#mainRight2 {
width: 300px !important;
}*/

.back {
margin: 0px 20px 0px 20px;
padding-left: 0px;
border: none;
}

.columns {
margin: 25px 0 25px 0;
padding-left: 0px;
border: none;
}

.colLeft {
float: left;
width: 590px;
border: none;
margin-left: 0px;
margin-bottom: 50px;
padding-right: 50px;
}


.colRight {
float: right;
width: 200px;
border: none;
margin-left:15px;
padding-bottom:50px;
}

.col1 {
float: left;
width: 270px;
border: none;
margin-bottom: 50px;
padding-right: 50px;
margin-left: 0px;
}

.col2 {
float: left;
width: 270px;
border: none;
padding-right: 50px;
}

.col3 {
float: left;
width: 200px;
border: none;
margin-left: 15px;
padding-bottom:50px;

}

.contact {
float: left;
display: inline-block;
width: 250px;
margin: 15px 20px 100px 0px;
padding-left: 0px;
border: none;
}

.about {
float: right;
display: inline-block;
width: 520px;
margin: 15px 0 0 0;
padding-right: 50px;
border: none;
}

.index {
margin: 20px 50px 20px 50px;
padding-left: 0px;
border: none;
}


#signature {
margin-top: 15px;
margin-bottom: 5px;
margin-right: 30px;
text-align: right;
}


footer {
position:absolute;
bottom: 0px;
clear:both;
padding-bottom: 25px;
height: 40px;
width: 960px;
border-radius:0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-radius: 0 0 20px 20px;
background-color: #333;
clear:both;

}

footer p {
float: left;
margin-left: 10px;
font-size: 0.8em;
color: #5CA4BD;
border: none;
}

footer ul {
float: right;
list-style: none;
width: 330px;
padding-top: 3px;
text-align: right;
margin-right: 30px;
border: none;
}

footer ul li {
display: inline;
margin: 0 3px;
border: none;
}

footer ul li a {
font-size: 0.9em;
}

footer ul li a:hover {
color: #5CA4BD;
}

Line 104 in the defualt.css is controlling your table border.

Hi Eric,

Thank you - that seemed promising as this is the last table definition I did in the stylesheet - but it didn't help.
The tables still look the same:
http://www.shake-and-shine.com/wash.html

This is what line 104 and following now says:
table.washpackages {
border-collapse:collapse;
border-width: 1px;
border-color: #5CA4BD;
border-style: dashed;
width: 600px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

I played around with it some more and it seems to have been a coincident that this started to happen when I inserted web calendar - I removed the calendar from my server and it still happens - but only online, not in the Editor preview. Maybe I should move this thread to the Editor forum.

M.

What exactly is it suppose to look like.

Thank you - I tried it, it didn't have an effect. This goes beyond my limited experience - maybe I should give up on tables and organize the information with lists? Is there a way to have "tabs" in html/css? Or I have to give up on my rounded corners.

Did you leave it with the adjusted code? It still looks the same.

Ok - I figured it out - this property doesn't work with border collapse - but If I use border-spacing: 0; it worked.
Thanks for you help!
M.