SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divs and mouse highlighting?

    I am experimenting with the method of using div-tags instead of tables and until now everything worked fine. I tried to highlight some text with the mouse and it highlighted the rest of the text, and not just the part I wanted it to.

    You can test it on http://www.icheb.de/test/ .

    I removed every ounce of unnecessaire HTML code, all Javascript, all CSS codes, even every other content to rule out conflicts. It still doesn't work as intended.

    I think I figured out what the problem is, but I have no idea how to solve it. The problem occurs when I use "position: absolute;" in the style definition for the div-tag in question, if I use "position: relative;" highlighting text works just fine. But as you might imagine, that doesn't work as intended with the actual design.

    Do I have to switch back to table-based design or is there a workaround for this?

  2. #2
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Checked out your test page, what do you mean by highlight text? Do you mean like a like high lighting when the mouse is over it?
    Martin

  3. #3
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just mark the text normally with the mouse, as if you want to copy&paste from it. It highlights the rest of the text, instead of the intended part.

  4. #4
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried to select the text in IE 5 Mac, Netscape and Safari, I can select and highlight all the text, still not sure what piece is the 'intended part' as I cant read German!
    Martin

  5. #5
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I just want to select one single word, one sentence, whatever, it selects the rest of the text.

    http://www.icheb.de/images/div.png

  6. #6
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, looking at your image I can do this in all the browsers I just tested. Just a simple click and drag, no problem from this end!
    Martin

  7. #7
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again: I just want to highlight ONE single sentence, and NOT the entire text. If I switch to position: relative it works, but NOT with absolute.

    I asked several other people and they are reporting the same problem, otherwise I wouldn't have asked this here in the first place.

    I'm using Win XP Pro and IE 6.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can confirm that IE6 won't let you highlight parts of the text whereas mozilla 1.2 and Opera 6 have no problems.

    I don't know what the answer is but as you say it is related to using position absolute. Do you really need that text absolutely positioned? It would look the same if you used relative positioning (or static with margin-left).

    Sorry can't offer any more advice than that.

    Paul

  9. #9
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I removed the rest of the page and shrinked it down to the absolute minimun to rule out conflicts.
    I would like to design the entire page with divs, but this issue would basically prevent me from doing so.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure why you need to design everything with absolute positioning as CSS is much better when you let it flow. The layout on your link can be acheived without abs positioning so I'm a bit confused.

    Anyway, here's a nasty workaround ! Add the xml prologue to your doctype:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    This puts IE6 into quirks mode and the highlighting seems to function ok in quirks mode. The prologue is completely valid but IE6 has a major bug that throws it into quirks mode, so bear this in mind.

    Hope this helps.

    Paul

  11. #11
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I followed this article to design the page with div-tags instead of tables.

    What do you mean with letting it flow with CSS?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    What do you mean with letting it flow with CSS?
    If you use too many absolutely positioned elements in your page then you may find that some elements overlap when the screen is resized. If elements are place statically (the default) then they are placed in the normal flow of the document and will move and flow as the page is re-sized.

    Obviously without knowing what you are eventually going to achieve with your layout, perhaps I shouldn't have commented on the use of absolute positioning as it may be correct in your case.

    However on the link you provided, your use of absolute position is not necessary as you could achieve the same effect using margins etc or relative positioning. This would then have solved the problem that you identified originally with regard to highlighting.(I assumed you were just centreing the block of text.)

    Hope this clears it up.

    Paul

    PS (did you try the xml prologue out.)

  13. #13
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The elements won't overlap if their width is defined as a relative size [img]images/smilies/smile.gif[/img] .
    And I removed the rest of the page to create the example mentioned in the first post, I wanted to make sure there are no conflicts between elements of the page which cause my problem.

    Yes, I tried adding the xml part and it worked great, highlighting text works totally normal now. However, it led me to a different issue: The font sizes in IE 6 and NS 7 aren't equal anylonger. NS 7 displays the page as it did before, but IE 6 displays the text as if it's "medium", instead the font size is defined as "small".

    This is how IE 6 displays it:


    This is how Netscape 7 displays it:



    You don't happen to know a solution/fix/workaround for this problem?

    Btw: Yes, I made sure both browser are set to the same text size, they display the text identical when I don't use the xml-tag workaround.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try using this for your body style :

    Code:
    body {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 80%;
    }
    Paul

  15. #15
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works wonderful .

    Thank you very very much for your help.


Bookmarks

Posting Permissions

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