CSS prevents highlighting text

Forum Moderators: not2easy

Message Too Old, No Replies

CSS prevents highlighting text

can't highlight text

deko

8:27 pm on Sep 22, 2009 (gmt 0)

I've created a new page on my site and for some reason I cannot highlight text on the page. I think it has something to do with the background color being white (#FFFFFF) and the initialized color also being white (#FFFFFF).

It seems the text itself gets highlighted, but because the text is on white background, the highlight cannot be seen.

How do I fix this? I want my readers to be able to highlight text normally. Is there a best practice for this kind of situation?

(note: the page validates as HTML 4.01 Strict)

Thanks in advance.

[edited by: tedster at 1:10 am (utc) on Sep. 23, 2009]
[edit reason] no urls, thanks [/edit]

D_Blackwell

8:56 pm on Sep 22, 2009 (gmt 0)

Welcome to WebmasterWorld. The personal link is going to be chopped, so I will restrict my comments to the specifics in the post.

I think it has something to do with the background color being white (#FFFFFF) and the initialized color also being white (#FFFFFF).

White on white = invisible. If it is text then it = Google death penalty if used; though that is obviously not the intention here.
............................

I may be mistaken. If so, just rephrase the question. It sounds as though the container of the text will have one background-color: and that you want some of that text to have a 'highlighted' background-color: ?

IF this is the case, THEN you will need to span the text that you want to highlight.

CSS:
.highlight {
background-color: red;
}

HTML:
<p>
Lorem ipsum dolor sit amet, rhoncus suspendisse pede felis, aliquet laoreet vestibulum augue varius senectus, arcu mi, <span class="highlight">tellus bibendum, etiam sapien. Pellentesque nullam cursus hendrerit imperdiet suspendisse.</span> Dictumst ut cras tristique, wisi gravida volutpat libero sem a, nulla vestibulum bibendum at rhoncus in in, lacus tempus sollicitudin ante ut.
</p>

deko

10:10 pm on Sep 22, 2009 (gmt 0)

Thanks for the reply, but I think I need to clarify: I want users to be able to highlight text on the page by holding down their left mouse button somewhere on the page (in the middle of some text), moving their mouse to the right, or down, and then releasing the left button on their mouse. This results in the selected portion of text becoming (what I call) "highlighted". If you try this on this page we are reading (with Firefox on Windows), you will notice the selected text becomes white and the background around the selected text becomes blue.

So the highlighting is something the user of the page does, not something I am trying to do.

On my problem page, user selections are not behaving as described above. I think this is because of my CSS.

Here is the source of the page (if the link in my previous post does not work):

NOTE: The content in the "header" and "menu" divs CAN be highlighted, but the highlight color is white. It is visible because the background of those divs is dark (grey or blue). The problem, I think, is the white highlight background is being inherited by the page div, which has a white background. But I don't know how to fix it...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Prevents Highlighting Text</title>

body {
margin: 0;
padding: 0;
background: #000000 url("img03.jpg") repeat-x left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
}

h1, h2 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}

h1 { font-size: 44px; }

h2 {
font-size: 26px;
font-weight: bold;
color:#649632;
}

ul, ol {
margin-top: 0;
line-height: 175%;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}
ul, ol { }
blockquote { }
a { color:#0000FF; }
a:hover { text-decoration:none; }
a img {border:none; }
img.left {float:left; margin:7px 30px 0 0; }
img.right { float:right; margin:7px 0 0 30px; }
hr { display: none; }
.list1 { }
.list1 li {float: left; line-height: normal; }
.list1 li img {margin: 0 30px 30px 0; }
.list1 li.alt img { margin-right: 0; }

#wrapper {
background: url("img06.jpg") repeat-x left bottom;
}

#header-wrapper {
width: 880px;
margin: 0 auto;
border-left: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
border-top: 15px solid #FFFFFF;
}

#header {
width: 880px;
height: 76px;
margin: 0 auto;
background: #608F30 url("menu.jpg") no-repeat left top;
}

#menu {
float: left;
width: 640px;
height: 51px;
}

#menu ul {
margin: 0;
padding: 25px 0 0 10px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
}

#menu a {
display: block;
float: left;
margin-right: 17px;
padding: 5px 12px;
text-decoration: none;
font: 14px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}

#menu a:hover { text-decoration:underline; }

#page {
width: 840px;
margin: 0 auto;
padding: 30px 20px 0px 20px;
background-image:url(background.jpg);
border-left: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
color:#000000;
}

#logo {

height: 200px;
background: url("banner.png") no-repeat left top;
}

#logo h1, #logo p {
float: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
}

#logo h1 { padding-top: 90px; }
#logo h1 a {
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}

#logo h1 a:hover { text-decoration: underline; }

#logo p {
padding: 165px 0 0 15px;
font: italic 14px Georgia, "Times New Roman", Times, serif;
color: #B6ACA2;
}

#logo p a {
text-decoration: none;
color: #B6ACA2;
}

#logo p a:hover { text-decoration: underline; }

#content {
float: left;
width: 570px;
}

#sidebar {
float: right;
width: 222px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 10px;
padding: 0 0 20px 0px;
}

#sidebar h2 {
padding: 0 0 10px 0;
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #649632;
}

#sidebar p {
font-weight:normal;
font-style:italic;
color:#666666;
}

#footer {
width: 880px;
margin: 0 auto;
padding: 0;
background: #494336 url("img05.jpg") no-repeat left top;
border-left: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
}

#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
line-height: normal;
font-size: 11px;
color: #B5ADA5;
}

#footer a {
color: #B5ADA5;
}

</style>

</head>

<h1><a href="/">Sample Page</a></h1>
<p><em>CSS prevents highlighting text</em></p>
</div>

<hr>

</ul>
</div>

</div>

</div>

<h2>Left Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum pretium augue eget tristique. Fusce sit amet risus vel nisi gravida porttitor.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ullamcorper magna dignissim libero convallis eu iaculis arcu accumsan.</p>
<p>Morbi nec tellus adipiscing ligula tempus convallis. Etiam vel magna felis, at ultricies metus. Maecenas vulputate, velit rutrum accumsan dignissim, sapien est malesuada lacus, non molestie lacus augue at lectus. Sed pellentesque varius elit, sed cursus nunc ornare sed. Nam convallis gravida massa condimentum blandit. Donec auctor ultrices adipiscing. Ut at est convallis mi lacinia imperdiet.</p>
</div>

<div id="sidebar">
<h2>Right Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum pretium augue eget tristique. Fusce sit amet risus vel nisi gravida porttitor.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ullamcorper magna dignissim libero convallis eu iaculis arcu accumsan.</p>
</div>

</div>

<div id="footer">
<p>Nullam semper scelerisque neque id auctor. Maecenas at neque nisi. Morbi mattis dapibus tortor.</p>
</div>

</div>

</body>
</html>

D_Blackwell

10:43 pm on Sep 22, 2009 (gmt 0)

So the highlighting is something the user of the page does, not something I am trying to do.

Something that you are trying to control though, so pretty much the same thing. You are defining the user experience.
............................

/* Firefox */
::-moz-selection {
background-color: teal; color: red;
}

/* Opera, Safari */
::selection {
background-color: teal; color: red;
}

For IE, don't know, don't care. Somebody will know though. Count on it.

deko

1:44 am on Sep 23, 2009 (gmt 0)

The snippets you posted work--thanks. I still think I have some kind of CSS problem, but that code is a decent work around for now.

As for trying to defining user experience... actually, I'm trying to preserve the default behavior of the user's browser, not control it.

deko

3:39 pm on Sep 23, 2009 (gmt 0)

Fixed.

The problem was the background was set to black in the body (background: #000000;) and was inherited by the #content div. But the #content div used a (mainly) white background image. This caused browsers to behave as if they were selecting (highlighting) text on a black page and thus the browser's selection color scheme was invisible because the page was actually white.

The solution was to set the background to white (background: #FFFFFF;) in the #content div.

[edited by: swa66 at 5:34 pm (utc) on Sep. 24, 2009]
[edit reason] unintended smiley removal [/edit]