CSS interference with my table...

User 92681 Photo


Registered User
12 posts

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;
}

User 187934 Photo


Senior Advisor
20,170 posts
Online Now

Line 104 in the defualt.css is controlling your table border.
table.washpackages {
border-color: #5CA4BD;
border-style: dashed;
border-width: 1px;
width: 600px;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 92681 Photo


Registered User
12 posts

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.
User 187934 Photo


Senior Advisor
20,170 posts
Online Now

What exactly is it suppose to look like.
table.washpackages {
border-collapse: collapse;
border-color: #5CA4BD;
border-radius: 6px;
border-style: dashed;
border-width: 1px;
width: 600px;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 92681 Photo


Registered User
12 posts

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.
User 187934 Photo


Senior Advisor
20,170 posts
Online Now

Did you leave it with the adjusted code? It still looks the same.
table.washpackages {
border-collapse: collapse;
border-color: #5CA4BD;
border-radius: 6px;
border-style: dashed;
border-width: 1px;
width: 600px;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 92681 Photo


Registered User
12 posts

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.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.