IE CSS bug?

[MasterKaos]

I've got a problem with highlighting text in IE. I'm using divs to layout the page (see code below) and when i try to highlight text in IE 6 (both win98 and winXP) it acts erratically, highlighting the entire paragraph or the entire page, rather than a line or two.
Works fine in Netscape.
Is this an IE bug? Are there any workarounds?

Here's the relevant code from my css file:

div{
}
#content{
    position:absolute;
    left: 140px;
    top:136px;
    width: 480px;
    text-align:justify;
}
#leftcol{
    float:left;
    width:480px;
}
#rightcol{
    float:right;
    width:0px;
}
#footer{
    position:relative;
    clear:both;
    text-align:center;
    font-family:"arial", sans-serif;
    font-size:10px;
    font-weight:bold;
}

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

 

[grtammi]

MasterKaos:

The little snippet of CSS you posted doesn't tell me much about how you're trying to highlight the text - is it possible to see the whole style sheet and/or relevant parts of the HTML also?


Greg Tammi, IT Design & Consultation
Work:

http://www.atsbell.com

Home:

http://members.shaw.ca/gregandliz

 

[MasterKaos]

By 'highlight' I mean click and drag with left mouse button so i can copy a piece of text.

You can checkout the site I'm working on:

http://www.uniquesolutions.com.au

and the css is in

http://www.uniquesolutions.com.au/unique.css

Hope this helps. Are you aware of an IE bug to do with highlighting text?

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

 

[Vragabond]

I have never heard of this bug and never came across it. I have fiddled with your code and it seems the highlight works ok if you have the content div positioned relatively. I have no idea why this happens though.

 

[glenmac]

I went to your site to see what you were talking about, and it is wierd. I then tried to see your source code to try figure out what was happening and couldn't view it. How did you hide it so well, and if you want us to try help why hide it?

Glen

http://www.lantzvillecomputers.ca

 

[glenmac]

BTW you have some interesting meta content keywords. ;-)

Glen

http://www.lantzvillecomputers.ca

 

[ChrisHunt]

Like Glen says, weird. You could try putting your code through the validator at

http://validator.w3.org/

(or rather, fixing the bugs that it comes up with), it probably won't fix your problem but it's always worth doing.

You need to spell-check your copy too:

Whether you have cornered a niche in the market...

Competitive Prices
We aim to deliver the highest possible quality...

help your business maintain its professional image


Good-looking site though.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[MasterKaos]

Wow, so it really is weird, huh?
I thought this would be some well-known IE bug, but there you go!

As far as hiding the source goes, well that seems to be another IE bug (maybe Bill Gates has caught wind of how many times I've wished him a slow and painful death...?) Surely it's logically impossible to hide the source, if the source was hidden the page would not display, if the page displays that means the browser got the source. I noticed this happening a few days ago when I was trying to debug a PHP error... thought it had stopped doing this though.

Vragabond: If i position the content relatively then the footer dissapears, and I worked long and hard to get 'the elusive CSS footer' to work, so I'm prepared to put up with dodgy text highlighting for the sake of a nice footer.

Glen and Chris: As far as keywords and spelling goes well obviously the site is till under construction, and I haven't done any publicity for it yet. But i guess the cat's out of the bag now that i've posted the address here so thanks for the reminder! Also Chris, thanks for pointing out Weather vs Whether - I always get those mixed up, and the spellcheck would not pick that up! Glad you reckon the site looks good

Oh yeah and I did put the CSS thru the validator and to my surprise it found no errors or warnings! I guess I could tidy it up a bit, i've sort of change layout about three times so there's probably some redundant selectors there.

BTW, whats the difference between using

div{} #something{}  
...
<div id=&quot;something&quot;></div>

AND

div{} .something{}  
...
<div class=&quot;something&quot;></div>

I started with class="" but later switched to id="" after seeing it in most of the examples i was looking at when trying to get the footer to work.

Happy mystery solving!!

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

 

[Vragabond]

There is no difference between classes (.) and ids (#) when it comes to display. The only difference is that id can only be used on the page for one element as it distinctly defines that element. Some parts on your page use the ids incorrectly. Class however can be reused on the page as many times as desired. Hope it clarifies it.

However, I still cannot forget the relative positioning. I have tried it and it gave just the same result as absolute (except highlighting worked in IE) in IE6, Mozilla 1.5 and Opera 7.22. Here is the page:

http://moviemusic.misguided.darktech.org/random/unique.html

I would recommend what Chris said, sending your site through validator. There are many mistakes (unclosed anchor and paragraph tags) on the site at the moment - I rectified some of those.

Last but not least, declaration
div {
}
does nothing. You can start defining your div ids without this invocation. What you are actually doing here is trying to define a common behaviour to all divs but end up not declaring anything. If you are trying to apply your classes only to div elements, you should use it like this:

div#content {}
div#footer {}
...

Hope it helps.

 

[MasterKaos]

Vragabond:

Thanks for the CSS tips! I'm a bit ignorant when it comes to CSS, whatever i read about it sounds so darn cryptic, I've resorted to the trial-and-error school of thought.

As far as relative positioning for div#content goes, you seem not to have noticed that the footer disappears when relative. Look at your example page, scroll to the bottom, then compare it to my original page. Or just look in the source of your page. Copyright 2004 Unique Solutions... blah blah blah... disappears when div#content is relative.

As for the validator, well I closed those <a> tags and put some meaningless <img alt=&quot;&quot;> in and it validates OK now. As far as i know <p> tags don't require closing in html, only xhtml.

Since you seem to know your CSS well, i'll ask you one more thing: You'll notice that i'm using a table to layout the nav bar on the left. I've tried to be a good CSS purist and not use tables or other non-css hacks, but I just can't figure out how to do this in CSS! As you can see I want to keep an even spacing between the nav links, but line-height won't do it because some of the links are two lines long, others are one line. I'm sure there's a way of doing this with CSS, but i can't figure out how... any ideas?

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

 

[Vragabond]

Funny enough, I have checked again the page I posted and it is showing the footer in all the three tested browsers. And uses relative positioning for the #content div.

But anyway, let's check the menu and table. What you are asking is pretty simple and you could do it like this:

/* sidebar menu in css only, no table */
#sidebar { /* first we need to define your sidebar, as it wasn't by now */
	position: absolute;
	width: 91px;
	top: 150px; /* approximate position of the start of menu */
}

#sidebar a:link, 
#sidebar a:visited { /* styles for all links within the sidebar, when they are visited or normal */
	display: block; /* links will be displayed as block items */
	width: 91px;
	font-size : 12px;
	line-height: 16px;
	margin-bottom: 20px; /* how much margin will be between individual links */
}

#sidebar a:hover { /* special state for hovering with mouse */
	color: #F67422;
	text-decoration : underline;
}

This works nicely, you can play with positions, padding and margins to get the required result. The main thing was translating <a> from its original state as an inline element to a block element. That means that only one <a> element can be in a line (unless used with float property). This way we achieved the same effect as table cells. Your old menu was in a table container, thus I had to define the sidebar container to position the menu where you want it. You already had div#sidebar but no style was applied to it. This way we had menu where we wanted and every option in a new row. Last thing is margin-bottom, which defines the vertical spacing between individual items. You can delete all the table/tablecell and even a.button classes since I used dependancies to describe the styles for the menu:
#sidebar a
meaning <a> element which is inside the element with an id set to &quot;sidebar&quot;.

When using pseudo classes link, :visited, :hover, :active) you must remember to use them specifically in the order mentioned or they will not function properly. If you want, you can leave out the ones you do not to apply special styling to.

The non-table menu is now incorporated on the page I mentioned above.

 

[cian]

Re:tables, there's no reason not to use tables for something like nav bars, even the W3C do it.

I am also getting the highlight problem, IE6/Win2K

I haven't checked the html but did you put the content directly into the layout divs?
Always nest your layers, you one set of layers just for the base layout and put your actual content into nested layers.



<!--#sig value=''É'' url=''

http://www.ssi-developer.net''

-->

 

[dilettante]

Actually &quot;id can only be used on the page for one element as it distinctly defines that element&quot; is incorrect. Assigning multiple elements the same id value is a well-defined way of establishing an element collection and is widely used in IE pages.

However it is often used accidentally when the author really wants to assign a common className to elements for CSS purposes.

 

[Vragabond]

From W3C:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser).

regarding examples: Note that the French &quot;msg1&quot; and the English &quot;msg1&quot; may not appear in the same document since they share the same id value.

Read more:

http://www.w3.org/TR/html4/struct/global.html#adef-id

When it comes to correct usage of attributes, I tend to go with what W3C recommends/enforces rather than what is common practice.

 

[ChrisHunt]

... especially if it's common practice in &quot;IE pages&quot;.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk