#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    84
    Rep Power
    19

    Weird IE text selection behavior


    OK, this is a new one to me. I'm building my first CSS-only site, and am quite happy with the way it's going, but have discovered something quite odd today.

    When viewed with IE, the browser handles text selection VERY oddly, not allowing users to highlight a block of text to, say, copy to the clipboard. Try it yourself:

    http://www.theatrebayarea.org/v2/

    Any idea what this is about? It's not a huge bug, but I'd like to be able to fix it. Needless to say, non-IE browsers handle it fine.

    -D
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Tallinn, Estonia
    Posts
    34
    Rep Power
    15
    Maybe it has something to do with the stylesheet you are using. Post it here so we can have a look.
    On the otherhand, I am not sure what can cause this kind of behaviour maybe javascript??
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    84
    Rep Power
    19

    the code


    The css is pretty long, but here you go:

    Code:
    body {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 90%;
    	margin: 10px auto;
    	width: 775px;
    	background-color: #F4B997;
    	background-image:url(../images/whiteback.gif);
    	background-position: center;
    	background-repeat: repeat-y;
    }
    
    a {
    	color: #0033FF;
    	font-weight: normal;
    	text-decoration: underline;
    }
    
    a:hover {
    	color: #CF5813;
    }
    
    #header {
    	height: 150px;
    }
    
    #header img{
    	behavior: url("pngbehavior.htc");
    	float: right;
    }
    
    #selector {
    	width: 770px;
    	text-align: right;
    	position: relative;
    	top: -22px;
    	padding: 0px;
    }
    
    #selector img {
    	border: 1px solid #000;
    }
    
    #frame {
    	width: 775px;
    	position: absolute;
    	top: 170px;
    	padding: 0px;
    	text-align: left;
    }
    
    #left {
    	width: 150px;
    	padding: 0px;
    	float: left;
    	background: #fff;
    }
    
    #left h1 {
    	background-color: #CF5813;
    	border-bottom: 1px solid #000;
    	display: block;
    	width: 145px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	padding: 4px 0px 4px 3px;
    	color: #fff;
    	text-transform: uppercase;
    	font-weight: bold;
    	font-size: 90%;
    }
    
    #search {
    	border: 1px solid #000;
    	background-color: #F4B997;
    }
    
    #search form {
    	margin: 0px;
    	padding: 3px 0px;
    }
    
    #search input {
    	margin-top: 5px;
    	margin-left: 4px;
    }
    
    #search select {
    	margin-top: 0px;
    	margin-left: 4px;
    }
    
    #search .button {
    	height: 22px;
    	margin-left: 4px;
    }
    
    #search .button:hover {
    	background-color: #000;
    	cursor: pointer;	
    }
    
    #search label {
    	display: none;
    }
    
    #nav {
    	margin-top: 10px;
    	border: 1px solid #000;
    	background-color: #FFF;
    }
    
    #nav h1 {
    	border-bottom: 0px;
    }
    
    #nav ul {
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    
    #nav li {
    	margin: 0px;
    }
    
    #nav li ul {
    	border-top: 1px solid #000;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    
    #nav li ul a {
    	color: #CF5813;
    	font-weight: bold;
    	background-color: #fff;
    	border: 0px;
    	padding-left: 15px;
    	width: 129px;
    }
    
    #nav li ul a:hover {
    	text-decoration: underline;
    	color: #CF5813;
    	background-color: #fff;
    }
    
    #nav a {
    	padding: 3px 0px 3px 4px;
    	display: block;
    	width: 144px;
    	background-color: #F4B997;
    	color: #000;
    	font-weight: bold;
    	font-size: 80%;
    	text-decoration: none;
    	border-top: 1px solid #000;
    }
    
    
    #nav a:hover {
    	background-color: #CF5813;
    	color: #fff;
    }
    
    #nav a:active {
    	background-color:#CF5813;
    	color: #fff;
    }
    
    .button {
    	background-color:#CF5813;
    	border: 1px solid #fff;
    	text-transform: lowercase;
    	font-weight: bold;
    	color: #fff;
    	font-size: 70%;
    }
    
    #head_caption {
    	font-size: 70%;
    	color: #CF5813;
    	margin-top: 10px;
    }
    
    #main {
    	width: 416px;
    	margin-left: 10px;
    	padding: 0px;
    	float: left;
    	background: #fff;
    	border: 1px solid #000;
    }
    
    #main h1 {
    	background-color: #CF5813;
    	border-bottom: 1px solid #000;
    	display: block;
    	margin-top: 0px;
    	margin-bottom: 10px;
    	padding: 4px 0px 4px 5px;
    	color: #fff;
    	text-transform: uppercase;
    	font-weight: bold;
    	font-size: 90%;
    }
    
    #main h2 {
    	margin-left: 5px;
    	color: #CF5813;
    	font-size: 100%;
    	font-weight: bold;
    	text-transform: uppercase;
    }
    
    #main h3 {
    	margin-left: 5px;
    	color: #000;
    	font-size: 100%;
    	font-weight: bold;
    	margin-bottom: 0px;
    	padding-bottom: 0px;
    }
    
    #main p {
    	font-size: 90%;
    	line-height: 1.3;
    	margin: 0px 5px 10px 5px;
    }
    
    #main ul {
    	font-size: 90%;
    }
    
    #right {
    	width: 185px;
    	float: left;
    	background: #fff;
    }
    
    #right h1 {
    	background-color: #CF5813;
    	border-bottom: 1px solid #000;
    	display: block;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	padding: 4px 0px 4px 5px;
    	color: #fff;
    	text-transform: uppercase;
    	font-weight: bold;
    	font-size: 90%;
    }
    
    #right p {
    	margin-left: 5px;
    	margin-right: 5px;
    }
    
    #login, #sidebar {
    	width: 185px;
    	margin-left: 10px;
    	margin-bottom: 10px;
    	border: 1px solid #000;
    	background-color: #F4B997;
    }
    
    #login form {
    	margin: 0px;
    	padding: 3px 0px;
    }
    
    #login input {
    	margin: 3px 5px 3px 5px;
    }
    
    #login .button {
    	height: 22px;
    	margin-left: 25px;
    }
    
    #login .button:hover {
    	background-color: #000;
    	cursor: pointer;	
    }
    
    #login label {
    	font-size: 85%;
    	font-weight: bold;
    	margin-left: 10px;
    }
    
    #login .frm_label {
    	width: 75px;
    	float: left;
    	margin-top: 8px;
    }
    
    #login .small {
    	font-size: 70%;
    	margin-left: 3px;
    	position: relative;
    	top: -3px;
    }
    
    #sidebar {
    	background-color: #fff;	
    	font-size: 90%;
    }
    
    #sidebar h1 {
    	margin-bottom: 10px;
    }
    
    #sidebar h2 {
    	margin: 0px 5px 3px 5px;
    	color: #CF5813;
    	font-size: 100%;
    	font-weight: bold;
    	text-transform: uppercase;
    }
    
    #sidebar h3 {
    	margin-left: 5px;
    	color: #000;
    	font-size: 100%;
    	font-weight: bold;
    	margin-bottom: 0px;
    	padding-bottom: 0px;
    }
    
    #sidebar img {
    	border-top: 1px solid #000;
    	border-left: 1px solid #000;
    	border-bottom: 1px solid #000;
    	margin-left: 5px;
    }
    
    #sidebar p {
    	font-size: 85%;
    	margin-bottom: 10px;
    	margin-top: 0px;
    }
    
    #footer {
    	background-color: #CF5813;
    	border: 1px solid #000;
    	color: #fff;
    	width: 775px;
    	text-align: center;
    	font-size: 70%;
    	margin-top: 10px;
    	padding: 4px 0px 4px 0px;
    	clear: left;
    	float: left;
    }
    
    #footer ul {
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    
    #footer li {
    	display: inline;
    	margin-right: 10px;
    	margin-left: 10px;
    }
    
    #footer p {
    	margin: 0px;
    }
    
    #footer a {
    	color: #fff;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    #footer a:hover {
    	text-decoration: underline;
    }
    
    .show {
    	display: block;
    }
    
    .hide {
    	display: none;
    }
    As for javascript, there is a snippet for the nav system that goes as follows:

    Code:
    function change(id) {
    identity=document.getElementById(id);
    document.getElementById("programs").className="hide";
    document.getElementById("tix").className="hide";
    document.getElementById("mag").className="hide";
    document.getElementById("playbill").className="hide";
    document.getElementById("comm").className="hide";
    document.getElementById("artsed").className="hide";
    document.getElementById("about").className="hide";
    document.getElementById("members").className="hide";
    	if (identity.className=="hide") {
    		identity.className="show";
    	} else {
    		identity.className="hide";
    	}
    }
    And then implemented on the page like so:

    Code:
    <a href="javascript:;" onClick="change('comm');" onKeyPress="change('comm');">Community</a>
    I don't see how javascript could be at fault. I think it must be a CSS issue, somehow.

IMN logo majestic logo threadwatch logo seochat tools logo