CSS help please with <b class=

HTML & CSS
1

I have added CSS code:

strong.footer, em.footer, b.footer{
position: absolute !important;
clip: rect(0.1px 0.1px 0.1px 0.1px); /* IE6, IE7 */
clip: rect(0.1px 0.1px 0.1px 0.1px);
}

To these lines:

<strong class="footer">Word</strong>

<em class="footer">Word</em>

<b class="footer">Word</b>

strong and em work, but <b class= does not?

All help appreciated :slight_smile:

2

The code you posted above is working as it stands so there must be something else going on in your page? Or does the above code as it stands not work for you?

Do you have a link to the page where its not working?

1 Like
3

Is your CSS validated? A closing bracket somewhere in the stylesheet can screw up the remaining styles in the stylesheet.

1 Like
4

Hello PaluOB, thank you for your reply, the “strong”, and “em” work correctly creating the “Word” with the correct strong and em CSS characteristics.

But for some reason the b.footer does not change the Word is bold ?

Hmmm :slight_smile:

5

RayWilk,

You have already posted this question and Paul requested a link to your working page. Perhaps there is more code involved.

1 Like
6 
But for some reason the b.footer does not change the Word is bold ?

are you saying that simply the B tag is not bold? Do you have any other CSS where the display of a B tag might have been reset?

1 Like
7

I’m merely speculating as I’ve never personally attempted absolute positioning or clipping a tag, but some markup elements do not accept certain CSS properties. Are you sure the bold tag is inherently tolerant of the type of CSS you’re trying to apply?

1 Like
8

How do you know the word has the correct strong and em characteristics because the clipping makes it invisible?

If it were visible then yes it would be bold but as you have clipped it then it is invisible like the other elements.

Just run the code you gave us to see what we are talking about.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
strong.footer, em.footer, b.footer {
    position: absolute !important;
    clip: rect(0.1px 0.1px 0.1px 0.1px); /* IE6, IE7 */
    clip: rect(0.1px 0.1px 0.1px 0.1px);
}
</style>
</head>

<body>
<div> <strong class="footer">Word</strong> <em class="footer">Word</em> <b class="footer">Word</b> </div>
</body>
</html>

If your words are not invisible or you are seeing something different then we need to see the exact code you are using.

1 Like
9

Thank you to everyone who has commented, and replied with possible solutions.

By passing the page to a website that detects h1, h2, h3, strong, em, bold tags I can see what is on the page. I can see what css is working correctly … even when invisible.

The bold is not working, as no Bold tags are detected using css b.footer with <b class=footer>Word</b>

So for the bold I have returned to using a strong bold combo span class.

<strong><b><span class="original_style_css">Word</span></b></strong>

This is detected as bold on the page when the page is sent to the tags on page detection website.

Thank you again for all your replies :slight_smile:

10

Try this on for size:

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
strong.footer, em.footer, b.footer {
/*    position: absolute !important;  /* */
    clip: rect(0.1px 0.1px 0.1px 0.1px); /* IE6, IE7 */
    clip: rect(0.1px 0.1px 0.1px 0.1px);
}
strong.footer {
    color:#0f0;
}
em.footer {
    color:#00f;
}
b.footer {
    color:#f00;
}
    </style>
    </head>
<body>

<div>
    <strong class="footer">Word</strong>
    <em class="footer">Word</em>
    <b class="footer">Word</b>
</div>

</body>
</html>
1 Like
12

Hello ronpat,

Thank you for that css alternative, but still no bold displayed or detected,

I am very ok using the class for the bold text,

Thank you everyone who has scratched their heads over this mystery :slight_smile:

13

I thought I knew a little about web design but I haven’t the slightest clue what you are talking about there :smile:

1 Like
14

Hello PaulOB, yes you are right, my wording and explanation was as confused as I was. Appoligies. Thank you again for your time and help :slight_smile:

15

Did you solve the issue? If so, what was the cause of the problem and how did you solve it?

16

Hello ronpat, Thank you for your help, the only way I could make the bold text be detectable was to use this code.

with this css:

.original_style_css {
/*    position: absolute !important;  /* */
    clip: rect(0.1px 0.1px 0.1px 0.1px); /* IE6, IE7 */
    clip: rect(0.1px 0.1px 0.1px 0.1px);
}
17

You’ve tried this:

<b style="clip: rect(0.1px 0.1px 0.1px 0.1px); ">Word</b>
1 Like
18

Nothing to do with the original problem but note that the correct syntax for clip is a comma separated list. The comm-less version is only for ie7 and under support.

e.g.

	position: absolute;
	clip: rect(10px  400px  170px  0); /* IE4 to IE7 */
	clip: rect(10px, 400px, 170px, 0); /* IE8+ & other browsers */
1 Like
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.