ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Subscription Options  

White lines around cells

Forums: General Discussion
Created on: 10/28/18 09:32 AM Views: 678 Replies: 7
Sunday, October 28, 2018 at 9:32 AM

I've set the border color to be white in cell properties for each cell in all of the tables for my Burma Shave 1920 and 1930 pages. It shows that it's been done in Edit but not when it's pulled up live. WYSIWYG isn't working, in other words. Please take a look.

Thanks,
Carole Mackey

Reply
Sunday, October 28, 2018 at 2:19 PM - Response #1

Another instance of HTML and CSS conflicts. The Editor does not work correctly since it doesn't know about the CSS that CC has added (I think).

Here's how to fix that one - a bit harder but not too bad. I don't know what you intended with the border exactly, but I think this is what you wanted - a white separation between the cells? You can also add a border line by making the border 1px or more, plus a color.

Add this style:

Now in your table, this is the original code there. I'll just show the first line but the other td cells have the same changes

This is the code that replaces ALL that code for each td

That's the neat thing about CSS. You can put all that detail in one definition and just use "class" to reuse that over and over.

I changed the absolute widths to percentages - although you could have made them absolute in the definition. I did that since if you change the table width to percent (maybe 90%) then your page adapts to different screen sizes.

Reply
Sunday, October 28, 2018 at 9:43 PM - Response #2

Wow! I did it! But, now it doesn't show the lines in "edit," which I certainly can live with. Really neat and sure makes it easier to add these white lines!

Thanks so much!
Carole

Reply
Sunday, October 28, 2018 at 10:32 PM - Response #3

You are welcome. Never sure how well I explained. I assume you are still working on the rest and verifying. CC editor is not fully adjusted for RD designs.

It might be easier/faster (once you see what you like in the real displayed page) to NOT use the CC editor and use Notepad instead.

Select ALL the code in the CC editor window and then Copy, open Notepad and then Paste that code into Notepad.

Make the changes in Notepad, delete the old code in CC editor (select ALL and press Delete) and copy/paste from Notepad back into the CC editor. Use Search/Replace to make repetitive changes for exactly the same code very fast.

PREVIEW your changes BEFORE saving in the CC editor. That makes sure that nothing really bad happened that your users might see (typos are easy to make Confused ). IOW, you don't have to save to preview any page.

(Make a copy of the original OLD and save that too just as another safety.)

Reply
Sunday, October 28, 2018 at 10:44 PM - Response #4

Ran into a problem in 1920 and 1930 Burma Shave tables. I had alternated shades of gray in each row to make it more interesting. I decided that I wasn't satisfied with this anymore so I attempted to add the white lines to separate one cell and one verse from another as you suspected.

Adding the class/style to the table now colors the entire table the same rather than have alternate shades of gray in alternate rows See Burma Shave 1940. Is there a way to do that or do I have to color each cell individually?

Thanks,
Carole

Reply
Sunday, October 28, 2018 at 10:44 PM - Response #5

Ran into a problem in 1920 and 1930 Burma Shave tables. I had alternated shades of gray in each row to make it more interesting. I decided that I wasn't satisfied with this anymore so I attempted to add the white lines to separate one cell and one verse from another as you suspected.

Adding the class/style to the table now colors the entire table the same rather than have alternate shades of gray in alternate rows See Burma Shave 1940. Is there a way to do that or do I have to color each cell individually?

Thanks,
Carole

Reply
Sunday, October 28, 2018 at 11:22 PM - Response #6

Just found this. Very clever! I'm not sure I have enough courage to delete all the code in CC editor but having a backup will help find it. I especially like the ability to "search" as I was having trouble with my eyes by the time I neared the end of "source" in 1930 Burma Shave.

By the way, you explain very well in spite of the fact you speak another language and use some initials that I'm too embarrassed to admit I don't recognize. With trial and error and more answers from you, I've been able to follow. The results have been fantastic and I'm very grateful!

Carole

Reply
Monday, October 29, 2018 at 12:01 AM - Response #7

Oh right, you had one row one color and then the next row lighter and then back again.

To alternate colors, make TWO CSS definitions.

Call the second one tdstyle2. Identical with prior, but just change the background-color. Simple to edit what you have now - just modify alternate rows from tdstyle to tdstyle2.

[There are other shorter ways, but this is easier to figure out when looked at later.]

What is easy to do is now you can play with colors very easily by just changing tdstyle and tdstyle2 background-color: I used 'bright' colors in some of our pages with tables like you have. Yellow, Blue, Pink and so forth. The admins liked to play with that. Sort of like an art project.

If I had looked better, it would have been a bit better to call them tdstyle1 and tdstyle2, but not a biggie - more a hindsight here.

FYI you can also use NAMES for the colors. In your useage probably lightgray and darkgray Here's a page with the names and values (there are others_

Always make sure the colors work though. Some don't show correctly. Maybe that was fixed in the last few years Question

It's fun to play with color gradients too. You can transition from one color to another. That's how I did the background on this page for JVideoPlayer. (Assuming you have a wide screen so it shows.)

Next time.

Reply
New Topic  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.