div with class screws selecting text 1

[zollo9999]

Hi
I'm very new to coding in CSS, and I did a very basic dreamweaver / x/HTML/CSS intro course a few weeks ago. (I'm using Dreamweaver Mx 2004).

Under advice from the teacher, my Html has is divided up into Divs.

I've got divs for page, header, content and footer.
Within content I've got divs for columnnavigation and another for columncontent

For testing, I have gone back to just one div on the page with no id="classname". That works fine.

When I change the div to include any class ... for example

<div id="header">
Line 1 <br />
Line 2 <br />
Line 3 <br />
Line 4
</div>

when the page is viewed in a browser, and I attempt to select a word or line of text, all the text from that point either forward or backward is selected, not just the word or line that I wanted. This sux from a presentation point of view.

The header class is as follows

#header {
    position: absolute;
    float: left;
    top: 10px;
    left: 2%; 
}

Any ideas where I'm going wrong?
I'm sure I need to learn more about CSS.
Thanks



Zollo VBA Developer

 

[zollo9999]

Hi
I've just realized that I've mixed up my class and Id jargon.

I should have said id="stylename" or something else but I'm not using classes in this case.

But the problem remains!

Zollo VBA Developer

 

[Vragabond]

If you use id (which you can only use once in the entire page) or class (which is freely reusable as many times as you want on the page) it does not matter from the presentation (CSS) point of view. There is a specificity issue, but this does not come into play until later.

I do believe your problem is with absolute positioning. Certain browsers have issues with absolute positioning and they tend to cause trouble with selecting text in absolutely positioned elements. However, most of the time when coding pages, you shouldn't be using absolute positioning anyway. You should only use it when needed.

I would suggest you remove the absolute position as well as positioning (left and top) from the element's styling and start anew. For instance, a statically positioned (default position for every element on the page) floated div with appropriate margins would appear in exactly the same position as your absolutely positioned div.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[zollo9999]

Thanks Vragabond
Cutting out the absolute positioning has stopped the problem.

When I have time I'll redesign the CSS, but for now I'm tied up in a VBA project.



Zollo VBA Developer