/    Sign up×
Community /Pin to ProfileBookmark

Why Style Has No Effect ?

Hi,

Why this line has no effect in Fire Fox or Chrome ?

**ISSUE CODE**

[code]
<colgroup>
<col span=”3″ style=”background-color:white; color:green; font-family:courier; font-size:50%”>
<col span=”3″ style=”background-color:black; color:blue; font-family:verdana: font-size:40%”>
<col span=”3″ style=”color:red; font-family:arial: font-size:10%”>
</colgroup>
[/code]

Check the following code on your browser (localhost) and see that the cell text colour, size, font style has no effect!
I see all cell texts same size, same style and same colour black. SHouldnot be the case as there should be 3 sets of size, style and colour.

**CONTEXT:**

[code]
<html>
<!DOCTYPE html>
<html>
<head>

<style>

th:hover {background-color: black; color: gold;}
tr:hover {background-color: silver; color: white;}

</style>

</head>
<body>

<table border=”20″ width=”100%” cellspacing=”5″ cellpadding=”20″ bordercolor=”red” bgcolor=”orange”>
<caption>Caption</caption>
<colgroup>
<col span=”3″ style=”background-color:white; color:green; font-family:courier; font-size:50%”>
<col span=”3″ style=”background-color:black; color:blue; font-family:verdana: font-size:40%”>
<col span=”3″ style=”color:red; font-family:arial: font-size:10%”>
</colgroup>
<thead>
<th colspan=”3″>GOOD</th><th colspan=”3″>BAD</th><th colspan=”3″>NEUTRAL</th><br>
</thead>
<th>Title</th><th>FIRST NAME</th><th>SURNAME</th><th>Title</th><th>FIRST NAME</th><th>SURNAME</th><th>Title</th><th>FIRST NAME</th><th>SURNAME</th>
<tfoot>
<th colspan=”3″>GOOD</th><th colspan=”3″>BAD</th><br>
</tfoot>
<tbody>
<tr>
<td name=”gt0″ id=”gt0″>Mr</td><td name=”gf0″ id=”gf0″>Muhammad</td><td name=”gs0″ id=”gs0″>Ali</td><td name=”bt0″ id=”bt0″>Mr</td><td name=”bf0″ id=”bf0″>Adolph</td><td name=”bs0″ id=”bs0″>Hitler</td><td name=”nt0″ id=”nt0″>Mr</td><td name=”nf0″ id=”nf0″>Mohandas</td><td name=”ns0″ id=”ns0″>Ghandi</td>
</tr>
<tr>
<td name=”gt0″ id=”gt0″>Mr</td><td name=”gf1″ id=”gf1″>Mike</td><td name=”gs1″ id=”gs1″>Tyson</td><td name=”bt1″ id=”bt1″>Mr</td><td name=”bf1″ id=”bf1″>Winston</td><td name=”bs1″ id=”bs1″>Churchill</td><td name=”nt1″ id=”nt1″>Mr</td><td name=”nf1″ id=”nf1″>Crocodile</td><td name=”ns1″ id=”ns1″>Dundee</td>
</tr>
<tr>
<td name=”gt0″ id=”gt0″>Mr</td><td name=”gf2″ id=”gf2″>Malcolm</td><td name=”gs2″ id=”gf2″>X</td><td name=”bt2″ id=”bt2″>Mr</td><td name=”bf2″ id=”bf2″>Joseph</td><td name=”bs2″ id=”bs2″>Stalin</td><td name=”nt2″ id=”nt2″>Mr</td><td name=”nf2″ id=”nf2″>Napolean</td><td name=”ns2″ id=”ns2″>Bonaparte</td>
</tr>

</tbody>
</table>

</body>
</html>
[/code]

to post a comment
CSS

12 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJun 23.2022 — The validator I recommended in another thread

https://validator.w3.org

reports a lot of errors for your code and gives explanations. Fix these errors and check if your CSS works afterwards.
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @Sempervivum#1644827

I fixed my code. Look:
<i>
</i>&lt;colgroup&gt;
&lt;col span="3" style="background-color:white; color:green; font-family:courier; font-size:50%;"&gt;
&lt;col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%;"&gt;
&lt;col span="3" style="color:red; font-family:arial; font-size:10%;"&gt;
&lt;/colgroup&gt;


But guess what ?

I still see no effect in Fire Fox or Chrome. Issue mentioned in ,my original post still remains.

What do you make out of all this now, Sempervivum ?
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @sibert

Do you mind chiming in and providing your valuable input here ?

Thanks!
Copy linkTweet thisAlerts:
@SempervivumJun 23.2022 — Still a lot of errors and the validator is giving up.

Two issues I spot without using the validator:

`html</C> before <C>doctype</C><br/>
<C>
th`
tag in table body.
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — To understand the issue, check this code on your localhost:
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;Table&lt;/title&gt;
&lt;style&gt;

th:hover {background-color: black; color: gold;}
tr:hover {background-color: silver; color: white;}

#gt0:hover, #gt1:hover, #gt2:hover {background-color: orange; color: red;}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;table border="20" width="100%" cellspacing="5" cellpadding="20" color="red" bgcolor="orange"&gt;
&lt;caption&gt;Caption&lt;/caption&gt;
&lt;colgroup&gt;
&lt;col span="3" style="background-color:white; color:green; font-family:courier; font-size:50%;"&gt;
&lt;col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%;"&gt;
&lt;col span="3" style="color:red; font-family:arial; font-size:10%;"&gt;
&lt;/colgroup&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th colspan="3"&gt;GOOD&lt;/th&gt;&lt;th colspan="3"&gt;BAD&lt;/th&gt;&lt;th colspan="3"&gt;NEUTRAL&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt0"&gt;Mr&lt;/td&gt;&lt;td id="gf0"&gt;Muhammad&lt;/td&gt;&lt;td id="gs0"&gt;Ali&lt;/td&gt;&lt;td id="bt0"&gt;Mr&lt;/td&gt;&lt;td id="bf0"&gt;Adolph&lt;/td&gt;&lt;td id="bs0"&gt;Hitler&lt;/td&gt;&lt;td id="nt0"&gt;Mr&lt;/td&gt;&lt;td id="nf0"&gt;Mohandas&lt;/td&gt;&lt;td id="ns0"&gt;Ghandi&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt1"&gt;Mr&lt;/td&gt;&lt;td id="gf1"&gt;Mike&lt;/td&gt;&lt;td id="gs1"&gt;Tyson&lt;/td&gt;&lt;td id="bt1"&gt;Mr&lt;/td&gt;&lt;td id="bf1"&gt;Winston&lt;/td&gt;&lt;td id="bs1"&gt;Churchill&lt;/td&gt;&lt;td id="nt1"&gt;Mr&lt;/td&gt;&lt;td id="nf1"&gt;Crocodile&lt;/td&gt;&lt;td id="ns1"&gt;Dundee&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt2"&gt;Mr&lt;/td&gt;&lt;td id="gf2"&gt;Malcolm&lt;/td&gt;&lt;td id="gs2"&gt;X&lt;/td&gt;&lt;td id="bt2"&gt;Mr&lt;/td&gt;&lt;td id="bf2"&gt;Joseph&lt;/td&gt;&lt;td id="bs2"&gt;Stalin&lt;/td&gt;&lt;td id="nt2"&gt;Mr&lt;/td&gt;&lt;td id="nf2"&gt;Napolean&lt;/td&gt;&lt;td id="ns2"&gt;Bonaparte&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td colspan="3"&gt;GOOD&lt;/td&gt;&lt;td colspan="3"&gt;BAD&lt;/td&gt;&lt;td colspan="3"&gt;NEUTRAL&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;


Checking the code on your browser, can you see the black backgrounded cells in the middle of the table ?

Can you see any text in the cells ? No. That is because, the blue text is not appearing as this part of the code is failing:
<i>
</i>&lt;colgroup&gt;
&lt;col span="3" style="background-color:white; color:green; font-family:courier; font-size:50%;"&gt;
&lt;col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%;"&gt;
&lt;col span="3" style="color:red; font-family:arial; font-size:10%;"&gt;
&lt;/colgroup&gt;

Why is it failing ? That is the big issue.

EDIT:

I switched this line:
<i>
</i>&lt;col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%;"&gt;

.. blue text to yellow text ..

to:
<i>
</i>&lt;col span="3" style="background-color:black; color:yellow; font-family:verdana; font-size:40%;"&gt;


But still the text is not visible in the black backgrounded cells.
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @Sempervivum#1644847

Code sorted. See previous post.
Copy linkTweet thisAlerts:
@SempervivumJun 23.2022 — @novice2022#1644848

I found this thread on Stackoverflow when searching for this issue:

https://stackoverflow.com/questions/8983648/style-on-colgroup-not-working
>Most properties that you can set on colgroup won’t have an effect, since by definitions, table cells inherit properties from tr elements (rows), not columns or column groups (to the extent that there is inheritance).

Set, in CSS, the properties directly on the cell elements.


This is an explanation why `background-color</C> does work and <C>color` does not.
Copy linkTweet thisAlerts:
@cootheadJun 23.2022 — Hi there novice2022,

You may find this example of some interest...
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;Untitled document&lt;/title&gt;

&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;

&lt;style media="screen"&gt;
body {
background-color: #f9f9f9;
font: normal 1em / 1em sans-serif;
}
caption {
margin: 1em 0;
font-weight: bold;
}
table {
border:1.25em outset #f00;
width: 100%;
border-spacing: 0.31em;
background-color: #ffa500;
word-break: break-all;
}
th, td {
padding: 1.25em 0.25em;
background-color: #fff;
}
thead th:last-of-type,
tbody tr:nth-of-type(1) td:nth-of-type(1),
tbody tr:nth-of-type(1) td:nth-of-type(2),
tbody tr:nth-of-type(2) td:nth-of-type(3),
tbody tr:nth-of-type(2) td:nth-of-type(4),
tbody tr:nth-of-type(3) td:nth-of-type(3),
tbody tr:nth-of-type(3) td:nth-of-type(4),
tfoot th:last-of-type {
background-color: #000;
color: #fff;
}
tbody tr:nth-of-type(1) {
font-weight: bold;
text-align: center;
}
tbody tr:nth-of-type(2) td:nth-of-type(1):hover,
tbody tr:nth-of-type(2) td:nth-of-type(2):hover,
tbody tr:nth-of-type(3) td:nth-of-type(1):hover,
tbody tr:nth-of-type(3) td:nth-of-type(2):hover {
font-weight: bold;
color: #d30;
cursor: pointer;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;caption&gt;Caption&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th colspan="2"&gt;GOOD&lt;/th&gt;
&lt;th colspan="2"&gt;BAD&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;FIRST NAME&lt;/td&gt;
&lt;td&gt;SURNAME&lt;/td&gt;
&lt;td&gt;FIRST NAME&lt;/td&gt;
&lt;td&gt;SURNAME&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Muhammad&lt;/td&gt;
&lt;td&gt;Ali&lt;/td&gt;
&lt;td id="bf1"&gt;Adolph&lt;/td&gt;
&lt;td id="bs1"&gt;Hitler&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Malcolm&lt;/td&gt;
&lt;td&gt;X&lt;/td&gt;
&lt;td&gt;Joseph&lt;/td&gt;
&lt;td&gt;Stalin&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;th colspan="2"&gt;GOOD&lt;/th&gt;
&lt;th colspan="2"&gt;BAD&lt;/th&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;


[i]coothead[/i]
Copy linkTweet thisAlerts:
@sibertJun 24.2022 — > @novice2022#1644835 Do you mind chiming in

There are many gurus who advices NOT to use inline CSS to format HTML. https://www.thoughtco.com/avoid-inline-styles-for-css-3466846

  • 1. Avoid inline CSS

  • 2. Use https://jsfiddle.com in order to make it easier to answer your question. Save it and paste the link


  • Sometimes when I ask a question and creates a jsfiddle, I get the answer myself by just doing the jsfiddle.

    Here is @coothead answer almost (in a jsfiddle) https://jsfiddle.net/vgjsue3x/

    Here is @Sempervivum answer the same way https://jsfiddle.net/8aef0jws/

    By using jsfiddle you will find some of your mistakes in seconds. By learning external CSS you will find it easier in the long run. https://www.w3schools.com/css/default.asp
    Copy linkTweet thisAlerts:
    @novice2022authorJun 24.2022 — @Sempervivum#1644852

    Thanks for the answer.

    Html5 is silly because if colgroup all properties don't work then I can understand.

    text colour, text size, text style don't work. Only background colour works. In ColGroup.

    Anyway, wild goose chase came to an end.

    Just curious. Were you getting puzzled why my code was not working that made you search in StackOverFlow ? Were you scratching your head to the puzzle at first ? :)

    Cheers!
    Copy linkTweet thisAlerts:
    @SempervivumJun 24.2022 — I agree, the benefit of colgroup is very limited when it's not possible to style all properties by use of it. Surely that's the reason why it's being used fairly rarely. I myself didn't use it before I encountered your issue here.

    >Were you getting puzzled why my code was not working that made you search in StackOverFlow ?

    That's a weak point of mine: I can't bear when a question is not answered or an issue is not fixed. :D
    Copy linkTweet thisAlerts:
    @novice2022authorJun 24.2022 — @coothead#1644853

    Yes. Better than mine. But no effect on mouse hover on names under BAD column. Apart from that. Perfect.
    ×

    Success!

    Help @novice2022 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...