Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2005
    Location
    Northfield, MA
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clicking and Highlighting

    So I was just wondering what was the problem with this site: http://wordsaddup.com/beta

    As you can see, when you try to highlight the text on the page, it acts really funny. On a version of the site I have on my computer, there is a form button, and you can't click on it, probably because of the same problem causing the odd text behavior. The CSS is as follows:

    Code:
    /* CSS Document */
    
    * {
    margin:0;
    padding:0;
    }
    
    body {
    color:#000;
    background-color:#5893ac;
    background-image:url(../images/bg.png);
    }
    
    #wrapper {
    margin:10px auto 10px auto;
    width:1007px;
    }
    
    #header {
    height:135px;
    background-image:url(../images/header.png);
    }
    
    #header a {
    display:block;
    width:1007px;
    height:135px;
    }
    
    #nav {
    font-family:"Trebuchet MS", Arial, "Arial Black", sans-serif;
    color:#FFFFFF;
    font-size:1.5em;
    height:59px;
    background-image:url(../images/buttons.png);
    }
    
    	.wordcount {
    	color:#FFF;
    	height:37px;
    	float:left;
    	width:178px;
    	margin:8px 16px auto 10px;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	line-height:35px;
    	}
    	
    	.link1 {
    	color:#FFF;
    	height:37px;
    	float:left;
    	width:169px;
    	margin:8px 1px auto 0px;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	line-height:35px;
    	}
    	
    	.link2 {
    	color:#FFF;
    	height:37px;
    	float:left;
    	width:190px;
    	margin:8px 1px auto 0px;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	line-height:35px;
    	}
    	
    	.link3 {
    	color:#FFF;
    	height:37px;
    	float:left;
    	width:209px;
    	margin:8px 1px auto 0px;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	line-height:35px;
    	}
    	
    	.link4 {
    	color:#FFF;
    	height:37px;
    	float:left;
    	width:221px;
    	margin:8px 1px auto 0px;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	line-height:35px;
    	}
    
    #content {
    width:700px;
    float:left;
    text-align:justify;
    margin-bottom:20px;
    }
    
    #sidebar {
    width:195px;
    float:left;
    background-color:#FF0000;
    margin-right:60px;
    }
    
    #footer {
    margin-top:20px;
    color:#FFF;
    text-align:center;
    font-size:10px;
    width:1007px;
    height:50px;
    line-height:50px;
    clear:both;
    }
    
    #ad {
    border:1px #000 solid;
    background-color:#FFF;
    text-align:center;
    height:500px;
    }
    
    	.padding {
    	padding: 50px;
    	}
    and the HTML is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Words Add Up :: A Million Words Strong</title>
    </head>
    
    <body>
    
    <div id="wrapper">
    	<div id="header">
    		<a href="index.html"></a>
    	</div>
    
    	<div id="nav">
    		<span class="wordcount">Word Count: 0</span>
    		<a href="#" class="link1">home</a>
    		<a href="#" class="link2">buy words</a>
    		<a href="#" class="link3">how it works</a>
    		<a href="#" class="link4">the purpose</a>
    	</div>
    
    	<div id="sidebar">
    			<div id="ad">
    				<img src="images/ad.png" />
    			</div>
    	</div>
    
    	<div id="content">
    		<span class="padding">
    Donec nibh sapien, feugiat quis, malesuada eget, porta ut, elit. Donec pretium tempor felis. Donec aliquet ligula sed risus. Fusce sollicitudin nunc vehicula sem cursus consectetuer. Nullam sapien diam, volutpat a, placerat vel, sagittis vitae, orci. Etiam faucibus pharetra neque. Vivamus ullamcorper enim eu enim. Mauris feugiat felis quis leo. Donec neque. Maecenas pretium porttitor eros. Fusce ac diam.
    
    Suspendisse massa. Aliquam eget metus laoreet turpis cursus placerat. Vestibulum vestibulum. Integer varius tortor vel pede. Curabitur justo eros, posuere id, viverra nec, consequat accumsan, neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt blandit nisl. Nullam nulla mi, lobortis a, blandit eget, lobortis nec, nisi. Donec ac quam. Mauris vulputate. Integer aliquet imperdiet tortor. Maecenas pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Praesent fermentum commodo dolor.
    
    Donec ligula libero, varius at, consectetuer at, suscipit sit amet, mi. Etiam et lectus vitae arcu laoreet scelerisque. Pellentesque vitae pede. Phasellus sit amet nunc. Vivamus semper eros sed nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ut turpis non nunc aliquam viverra. Nullam eget velit. Quisque commodo lacus sollicitudin nunc. Nam fringilla ipsum in leo. Pellentesque vitae lectus. Integer quis diam vel pede fringilla consequat. Donec congue quam non tellus.
    
    Nunc commodo pharetra eros. Integer urna turpis, imperdiet laoreet, pharetra ut, fringilla ut, neque. Suspendisse fermentum, pede eget rutrum dignissim, augue neque laoreet massa, tempus iaculis dui ipsum et ipsum. Donec nec metus a dui vestibulum auctor. Maecenas tortor nibh, tincidunt at, blandit sit amet, imperdiet sit amet, augue. Praesent vehicula, odio ut ultrices pulvinar, ipsum neque facilisis odio, in ultrices eros eros a quam. Donec dictum. Duis ligula mi, laoreet vitae, volutpat ac, porttitor ac, mauris. Aenean sagittis malesuada quam. Praesent quis velit. Duis pulvinar purus nec est.
    
    Mauris tempor vehicula mi. Cras tincidunt. Proin tempus, tortor a luctus tincidunt, ipsum enim ornare neque, quis fringilla nibh orci quis magna. Praesent pellentesque. Integer pede. Donec porttitor. Ut dapibus. Integer eget ligula non ipsum fermentum vestibulum. Integer facilisis luctus lacus. Vivamus odio nulla, congue nec, mollis nec, tempor at, massa. Vestibulum mattis. Etiam tristique posuere nibh. Nullam vitae eros vitae ipsum egestas lobortis. Sed feugiat, felis at viverra sagittis, sem nisi egestas urna, in pretium quam ante a leo. Etiam ornare hendrerit ipsum. Morbi ullamcorper nisl. Integer in purus. Nulla facilisi. Maecenas nec felis ac magna dictum molestie. Nulla facilisi.
    
    Duis at massa ut libero sollicitudin volutpat. Nullam pharetra magna id sapien. Phasellus posuere turpis et neque. Donec at dolor. Phasellus nibh sapien, elementum sed, consectetuer et, posuere consequat, sapien. Fusce vel leo id nisi rutrum varius. Ut blandit justo id nisi. Etiam consectetuer quam quis augue. Mauris hendrerit tincidunt quam. Maecenas dapibus ornare justo.
    
    Proin in diam. Etiam lobortis mollis magna. Ut malesuada, nisi at dictum consequat, urna ipsum porta massa, pulvinar tincidunt sapien enim rutrum libero. Nunc odio nulla, pellentesque vel, congue sed, hendrerit at, neque. Aliquam pellentesque lacinia odio. Vestibulum vel nisi. Nullam pellentesque velit nec sem. Nunc tortor ipsum, consequat eget, aliquam commodo, ultrices id, odio. Donec facilisis rutrum purus. Curabitur mauris. Nullam fermentum sollicitudin est. Fusce non velit ut enim pretium tempus. In vitae ligula. Aenean dictum. Nam congue, tortor volutpat bibendum vulputate, quam augue suscipit dolor, sed varius elit lorem ut orci. Nam sit amet arcu. In iaculis elementum nisi. In dictum mattis odio. Nullam tincidunt ante ac sem.
    
    Nulla auctor. Fusce condimentum tortor. Curabitur metus tortor, cursus malesuada, consequat a, gravida ut, magna. Mauris venenatis massa id lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eget urna. Pellentesque elit nisl, ultrices et, auctor sed, iaculis sit amet, urna. In elementum, purus quis consequat hendrerit, magna sem suscipit lorem, quis lacinia sapien enim non est. Morbi ipsum nulla, vestibulum quis, feugiat eu, accumsan eu, magna. Fusce congue. Aliquam sodales, nulla quis laoreet varius, justo sem euismod orci, et adipiscing quam odio eget purus. Duis venenatis, odio eget faucibus tristique, lectus arcu gravida velit, id rutrum purus libero nec purus. Nunc non mi. Suspendisse vitae lorem nec est luctus malesuada. Aliquam eget sem in tortor tempor nonummy. Ut ut nulla. Aenean consectetuer risus ornare mauris. Duis sed nunc a ipsum ornare facilisis. Maecenas rhoncus lacus a nisi.
    
    Nulla laoreet mollis orci. Donec leo nisi, placerat quis, aliquet non, euismod eu, orci. In neque. Ut nisl nunc, gravida sed, varius et, nonummy gravida, purus. Nam sit amet mauris et est pellentesque sagittis. Donec at purus sed erat fermentum consectetuer. Ut nonummy, nibh eu consequat dictum, urna ligula malesuada orci, vel scelerisque nulla sem a mi. Donec tempor mollis lacus. Vivamus magna mi, dictum a, vehicula sit amet, pulvinar vel, turpis. Suspendisse potenti. Nullam nec nulla et ipsum euismod dignissim. In cursus mauris eu lectus. Suspendisse vel neque.
    
    		</span>
    	</div>
    
    	<div id="footer">
    		Footer Text
    	</div>
    
    </div>
    
    </body>
    </html>
    Thanks!
    I'm not always the most helpful, but I'm trying :P

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its the span around your text causing the issue. Why do you have a span around your text? If its just to produce the padding then why not add the padding to the #content div? You just have to reduce its width by 100px.
    Code:
    #content {
    width:600px;
    float:left;
    text-align:justify;
    margin-bottom:20px;
    padding:50px;
    }
    Get rid of the span around the text.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2005
    Location
    Northfield, MA
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Its the span around your text causing the issue. Why do you have a span around your text? If its just to produce the padding then why not add the padding to the #content div? You just have to reduce its width by 100px.
    Code:
    #content {
    width:600px;
    float:left;
    text-align:justify;
    margin-bottom:20px;
    padding:50px;
    }
    Get rid of the span around the text.
    Oh wow, thanks again!
    I'm not always the most helpful, but I'm trying :P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •