Highlighted text problem

cmt · 10-28-2009, 11:55 PM

Hi,

First, please note that I'm a really unexperienced beginner at web development! Programming at Objective-C is my area and now I'm trying some HTML CSS.

I have here a problem probably very easy to solve but I have no idea:

Why does the highlighted text goes over the limits of the div tag at a 1 column design? A made here a example where this happens:

Code:

<head>
<title>Highlight test</title>
<style type="text/css">
<!--
body {margin:0;}
#content {
	width:600px;
	height:2000px;
	background-color:#CCC;
	margin:0 auto;
	padding:10px;
}
-->
</style>
</head>

<body>
	<div id="content">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc odio, tempus id imperdiet porta, adipiscing at odio. Proin dolor nulla, molestie eleifend ultricies sed, placerat quis massa. Duis risus velit, accumsan vel iaculis id, fringilla non ligula. Pellentesque malesuada lorem sit amet sapien suscipit molestie. Duis quis magna sit amet est mollis adipiscing ac eget purus. Nunc elementum ipsum in arcu pellentesque dictum. Suspendisse ligula lectus, scelerisque id auctor vitae, venenatis et nisi. Suspendisse risus nisl, tincidunt a pellentesque eu, tempus vitae risus. Sed vehicula augue venenatis odio bibendum tempor. Fusce lacus nisl, tristique eget lacinia vitae, molestie et lorem. Proin eu imperdiet mauris. Quisque id neque tortor, ac ultrices leo. Ut metus augue, molestie sit amet rhoncus sit amet, dapibus sit amet ante. Proin eu leo urna. Proin quis ipsum at orci venenatis tempus sed non arcu. Suspendisse potenti. Proin sed mauris neque, ac molestie velit. Etiam risus nunc, suscipit eget eleifend a, scelerisque et libero. Mauris ut lorem nisi, quis eleifend justo. Mauris mollis vestibulum blandit.</p>
    </div>
</body>
</html>

When you select that text, the highlight goes outside the div also.

I'd love to know why this happens and how to fix it.

Thank you so much

Excavator · 10-29-2009, 12:01 AM

Hello cmt,
I just copy/pasted your code and I'm not seeing the same results your screencap shows. Are you testing in IE6?
It selecting only the text here with FF3.5 and IE8.

Check out the link in my sig about DocTypes. Might make all the difference.

cmt · 10-29-2009, 12:13 AM

Hi Excavator,

Actually I'm using Safari 4 on MacOS 10.6.1 .

Thanks by your article, I'll read carefully although I know it's importance. I propositaly removed this for making the code smaller.

This is pretty annoying and happens also on Dreamweaver LiveView, as you can see at this other screenshot: http://dl.getdropbox.com/u/2274153/img2.png

Thank you

Excavator · 10-29-2009, 12:38 AM

You can't trust DW's live view. Who knows what browser that is emulating...

Test your code in a standards compliant browser like FireFox. Much more dependable.