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 4 of 4
  1. #1
    cmt
    cmt is offline
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlighted text problem

    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
    Attached Thumbnails Attached Thumbnails Highlighted text problem-hl_over.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    cmt
    cmt is offline
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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