[css-d] List layout issue in loose HTML under IE8
Hi
I have a problem with list formatting when list items contain named anchors,
but only under the loose doctype in IE (I am using IE8).
This is my minimal example:
-
test.html:
-
html
head
link href=test.css type=text/css rel=stylesheet
/head
body
ol
li
a name=one class=empty/a
pOne/p
/li
/ol
/body
test.css:
ol {
padding: 0 0 0 2em;
margin-top: 1em;
margin-bottom: 1em;
}
li {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0.35em;
padding-left: 0;
list-style-type: decimal;
}
li:first-child {
margin-top: 0;
}
a.empty {
font-size: 0;
line-height: 0;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
--
Output:
--
1. One
However if I add the following line to the html file:
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
then the output (using IE8) is no longer what I want, but appears on a
broken line, viz.:
--
Loose output:
--
1.
One
Unfortunately I need the loose doctype because of other document content not
relevant to this example. Unfortunately I also have to use IE as the
browser.
Is there a way to style this HTML so as to see what I want when the HTML is
declared as conforming to the loose.dtd doctype?
Thanks
Trevor
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] simple margins not collapsing
Hello
Can somebody please explain why the lower margin of my first para and the
upper margin of my fragment div are not collapsing? How could I fix this?
I've seen this gap in both IE7 and FF3. The target market is IE6+.
Thanks in advance
Trevor
Here's the html:
---
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
headtitleCommands/title
style type=text/css
body { font-family: Arial,sans-serif; font-size: small; color: Black; }
h2 { color: Black; background: none; font-size: 130%; font-weight: bold;
margin: 0 0 1em 0; padding: 0.5em 0 0.17em 0; border-bottom: 1px solid
#aa; }
p { margin: 0 0 1em 0; }
div.fragment { float: left; margin: 1em 0 1em 0; }
div.fragbody { font-family: Courier New,monospace; font-size: 88%;
background-color: #e0e0e0; border: 0.25mm solid black; padding: 3pt 6pt
3pt 6pt;
float: left; margin: 0 0.75em 0 0.75em; white-space: nowrap; }
.fragclear { clear: both; }
/style
/head
body
h2Commands/h2
pCommands may be typed whenever the:/p
div class=fragment
div class=fragbodygt;gt;/div
/div
br class=fragclear
pprompt is displayed./p
/body
/html
---
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] nowrap and border issue in IE6 and/or IE7
Hi Example found at http://homepages.ihug.co.nz/~tmjpbn/csw5.html I have a (div) code fragment which has a text content (div) 'fragbody', styled with white-space:nowrap and displayed in a colored rectangle with a black border. Apparently in IE6 if the browser window is narrowed the border and colored background box will not shrink to be smaller than the text, and the user can scroll right to see the end of the text and the edge of the box. This is the desired behaviour. However in IE7 the box shrinks, while the text does not. The user can scroll right to see the rest of the text, but the box margin cuts through the text. Having observed that Firefox 3 and Opera 9 behave similarly to IE7, I guess that IE7 is probably doing the right thing and I am relying on an IE6 quirk. The question is, can I implement the same behaviour in IE7? Cheers Trevor __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nowrap and border issue in IE6 and/or IE7
Hi Sarah I'm afraid that suggestion doesn't work. The browser shows a horizontal scrollbar no matter how wide the window is stretched, and the RH edge of the fragment box is never quite in view. Why can't the border simply follow the width of the text? Rather than block (as you suggested) I tried adding 'display: inline;' to fragbody and found that the RH edge of the box then behaves just as I want - but unfortunately as the window narrows the margins disappear from the *LH* edge of the box - both the margin L of the border, and also the padding between the border and the beginning of the text within the box. The fragbody is double-divved because in the typical case there is a preceding caption and a following hyperlink and I want to set some styles on the whole construction - this is a highly simplified example to illustrate the problem with the RH border of the fragment box. Thanks for looking into it T -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Sarah Atkinson Sent: Tuesday, 17 February 2009 4:29 a.m. To: tre...@castingthevoid.com; Untitled Subject: Re: [css-d] nowrap and border issue in IE6 and/or IE7 On 2/16/09 10:08 AM, Trevor Nicholls tre...@castingthevoid.com wrote: Hi Example found at http://homepages.ihug.co.nz/~tmjpbn/csw5.html I have a (div) code fragment which has a text content (div) 'fragbody', styled with white-space:nowrap and displayed in a colored rectangle with a black border. Apparently in IE6 if the browser window is narrowed the border and colored background box will not shrink to be smaller than the text, and the user can scroll right to see the end of the text and the edge of the box. This is the desired behaviour. However in IE7 the box shrinks, while the text does not. The user can scroll right to see the rest of the text, but the box margin cuts through the text. Having observed that Firefox 3 and Opera 9 behave similarly to IE7, I guess that IE7 is probably doing the right thing and I am relying on an IE6 quirk. The question is, can I implement the same behaviour in IE7? Cheers Trevor Try adding to fragbody display:block; width:100%; Also why do you double div it? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nowrap and border issue in IE6 and/or IE7
Hi Brian, Alan, David Thanks for your ideas. The float idea looks promising; I'll have to see how it behaves when I add in the other elements (the example is a considerable simplification of the live case). Unfortunately I cannot use white-space: pre and need the NBSP entities because this HTML has to survive some Javascript processing: it's probably off-topic for css-d but we have found that IE strips (some of) the white-space out of document.body.innerHTML, so the non-breaking spaces are essential. Setting a min-width causes the scrollbar and code box to play nicely together, though I think to do it properly condemns me to calculating exact line lengths for all the content, which (in the live case) isn't as easy as counting characters, if only :-) Overflow: auto doesn't display nicely, I think I'll pursue the other options first. Cheers T -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Brian Funk Sent: Tuesday, 17 February 2009 8:02 a.m. To: tre...@castingthevoid.com Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] nowrap and border issue in IE6 and/or IE7 Trevor Nicholls wrote: Example found at http://homepages.ihug.co.nz/~tmjpbn/csw5.html I have a (div) code fragment which has a text content (div) 'fragbody', styled with white-space:nowrap ... You could use white-space: pre; which would give the same no-wrap effect but you could eliminate all the (21 in this case) nbsp; characters. ... if the browser window is narrowed the border and colored background box will not shrink to be smaller than the text, and the user can scroll right to see the end of the text and the edge of the box. This is the desired behaviour. Would floats be an option? I achieved what I /think/ you're after by floating both divs. http://www.stoneladder.ca/sandbox/css/nowrap-01.html -- Brian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] wrapping woes - paras containing preformatted phrases - IE7
Hello
Scattered liberally throughout my webpages one will find pieces of
application code which have been marked up as span class=preformatted.
The preformatted class is used for code which may occupy a single word, or
may extend over several lines. For this reason carriage returns and
whitespace in these spans need to be honoured, so the CSS which is in force
defines
.preformatted { white-space: pre; }
When these spans occur inside longer paragraphs we find that sometimes the
paragraph is not linewrapped at all (although pre applies only to the
short phrase and not to the entire paragraph).
For an example, have a look at http://homepages.ihug.co.nz/~tmjpbn/pref.html
and http://homepages.ihug.co.nz/~tmjpbn/pref1.html
The first paragraph and following note use the preformatted span, while the
subsequent paragraph and note do not. You will notice that the first note
line is displayed on one line without line wrap. For some reason the first
paragraph is not similarly afflicted, although in the larger document from
which this sample was extracted this particular paragraph is also laid out
incorrectly: the first few lines wrap but after reaching the first
preformatted span the rest of the paragraph fails to wrap at all. In my
real documents some paragraphs do this and some are formatted OK; I can't
see any difference - but it's always the same paragraphs that misbehave.
The pref1 page has white-space: pre commented out, and the problem goes
away.
Naturally Firefox behaves impeccably, but (as before) I am restricted to
using IE7. Is anyone able to explain what is going on, and how I could get
IE7 to linewrap these paragraphs correctly, please?
Cheers
T
Trevor Nicholls
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrapping woes - paras containing preformatted phrases - IE7
Following on from the previous post, I should probably put up an example to
show why I am not using pre-wrap instead of pre. These two examples
illustrate:
http://homepages.ihug.co.nz/~tmjpbn/prefprew.html
http://homepages.ihug.co.nz/~tmjpbn/prefprew1.html
The prefprew version has
div.fragment { white-space: pre-wrap; }
.preformatted { white-space: pre; }
This lays the code example out properly (pre on both gives double spaced
lines), but shows the problem with the unwrapped note line.
The prefprew1 version has
div.fragment { white-space: pre-wrap; }
.preformatted { white-space: pre-wrap; }
This line-wraps the note correctly, at the expense of chopping all the
leading spaces out of the code example.
Cheers
Trevor
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nested list troubles in IE
Georg
Post a link to a live example of your nested list
constructions, so we can see what's bugging IE the most.
I haven't kept all the different versions of my attempted styles, and trying
to reconstruct them is getting beyond me at this hour of the night. So
instead I've put up a completely unstyled version of a test file, which you
can find here:
http://homepages.ihug.co.nz/~tmjpbn/listnone.html
The text (i.e. step x, item x) is aligned as I want. All browsers seem
to do this, as one would hope that they would. The two adjustments which I
have been trying to make to this default layout are:
(a) to align the (unordered) list markers and the (ordered) list numbers
without disturbing the alignment of the (text) list items
(b) to align the level{n} list markers/numbers with the level{n-1} text
without disturbing the other alignments
And, as I mentioned in the original post, this is to be achieved in IE7.
Thanks
Cheers
Trevor
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] bottom border vs padding in IE, retry
Hmm. I see that putting my tiny HTML file on freehomepage.com has caused it
to be engulfed by an advertising monster. If it helps, the relevant bits of
the problem are this:
HTML -
html
head
link rel=stylesheet type=text/css href=gloss.css
/head
body
div class=gloss
div class=head/div
div class=entry
p/p
p/p
/div
/div
/body
/html
CSS -
body {
font-family: Arial,sans-serif;
font-size: small;
color: black;
}
div.gloss {
border: 1px solid black;
}
div.head {
color: black;
background: #c0c0c0;
font-size: 133%;
margin: 0;
padding-left: 0.5em;
padding-right: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
div.entry {
color: black;
background: #e0e0e0;
margin: 0;
padding-left: 0.665em;
padding-right: 1em;
padding-top: 0;
/* padding-bottom: 0.2em; */
}
p {
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
With the div.entry { padding-bottom: 0.2em; } line commented out Firefox
looks OK but IE7 drops the border.
With the padding restored the border appears in both browsers.
If I comment out the padding-bottom line again, but add a border: 1px solid
red to the div.entry block I see both a red and a black border.
I've tried Google, but it doesn't want to be my friend on this one.
Cheers
T
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Trevor Nicholls
Sent: Friday, 11 January 2008 4:13 p.m.
To: css-d@lists.css-discuss.org
Subject: [css-d] bottom border vs padding in IE
Hi
I'm coding up a simple glossary function and have found that IE loses the
bottom border of my display when the final div has no bottom padding.
A simple example:
http://trevor.freehomepage.com/glossary_documentation.html
The stylesheet is
http://trevor.freehomepage.com/gloss.css
In Firefox this displays as expected, but in IE7 the bottom border is
missing. If I restore the line which is commented out in the div.entry
then IE displays the border.
Can somebody please explain why this is so?
Cheers
Trevor
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] bottom border vs padding in IE
Hi I'm coding up a simple glossary function and have found that IE loses the bottom border of my display when the final div has no bottom padding. A simple example: http://trevor.freehomepage.com/glossary_documentation.html The stylesheet is http://trevor.freehomepage.com/gloss.css In Firefox this displays as expected, but in IE7 the bottom border is missing. If I restore the line which is commented out in the div.entry then IE displays the border. Can somebody please explain why this is so? Cheers Trevor __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] external html content in popup on mouseover
I would like to create an effect where, when the user moves their mouse over a certain object in the current webpage, a popup opens which displays some variable content, e.g. a URL, and the popup automatically closes when they move the mouse off the object. I think I can code this (rather crudely) with CSS if the source of the popup content is part of the page, but I need the content to be obtained from a remote URL. The effect I am looking for may be seen if you have software like McAfee's SiteAdvisor installed - search for something in Google (say) and every result has a small icon attached (e.g. a green tick, or a red cross). Mouse over the icon and a McAfee SiteAdvisor popup appears; and it disappears when you mouse away. Has anyone investigated how to code this effect, and maybe even succeeded with it? I guess it will probably involve some Javascript as well as CSS, and thus may be beyond scope for this list. But I hope that one of you can point me in the right general direction for it. A very happy holiday season to you all Cheers T Trevor Nicholls Casting the Void __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A little border dispute
Hi I am having problems formatting a copyright footer on my pages. A minimal page and CSS file may be seen at http://trevor.freehomepage.com/copy.html and http://trevor.freehomepage.com/test.css (sorry about the advertising). The browser is IE as my pages are delivered through an IE component inside another application. What I want is to see a single pale line above the copyright block, but the black border from a normal table appears to be trumping the colour setting I have applied to a .copyright table. The copyleft block appears as I would expect; the border: 2px solid green is applied correctly. The ordinary table border colour is not being carried through in this case. If I insert a border: none; in the .copyright table style ahead of the border-top (hoping that this will kill the black border) I still see a black top border. What is going on? Can some kind person explain what I obviously don't understand about inheritance here? Thanks Cheers Trevor Trevor Nicholls Casting the Void __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Border troubles
Hi I am having problems formatting a copyright footer on my pages. A minimal page and CSS file may be seen at http://trevor.freehomepage.com/copy.html and http://trevor.freehomepage.com/test.css (sorry about the advertising). The browser is IE as my pages are delivered through an IE component inside another application. What I want is to see a single pale line above the copyright block, but the black border from a normal table appears to be trumping the colour setting I have applied to a .copyright table. The copyleft block appears as I would expect; the border: 2px solid green is applied correctly. The ordinary table border colour is not being carried through in this case. If I insert a border: none; in the .copyright table style ahead of the border-top (hoping that this will kill the black border) I still see a black top border. What is going on? Can some kind person explain what I obviously don't understand about inheritance here? Thanks Cheers Trevor __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mixed units for table padding
Hi fantasia, thanks for your suggestion.
Margin is ignored for captions.
But a white border-left seems to do the trick:
table {
/* NB */
/* IE tables don't inherit font-size */
font-size: 1em;
border: thin solid black;
}
th, td {
padding: 0.25em;
}
table caption {
caption-side: top;
/* NB *
/* padding needs extra allowance for border */
border-left: thin solid white;
padding: 0.25em;
}
Cheers
Trevor
-Original Message-
From: fantasai [mailto:[EMAIL PROTECTED]
Sent: Thursday, 9 August 2007 8:26 a.m.
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] mixed units for table padding
Trevor Nicholls wrote:
I hope this requirement is simple!
I am trying to align a table caption with a table cell.
The table has a 2 pixel border.
The table cell has 0.25em padding.
This means that the table caption needs padding of 0.25em + 2px.
The browser is IE.
Is this possible without making assumptions about font sizes?
Does your caption have a border or backgrounds? Because if not,
margin: 2px;
padding: 0.25em;
might work
~fantasai
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] mixed units for table padding
I hope this requirement is simple!
I am trying to align a table caption with a table cell.
The table has a 2 pixel border.
The table cell has 0.25em padding.
This means that the table caption needs padding of 0.25em + 2px.
The browser is IE.
Is this possible without making assumptions about font sizes?
Relevant lines from the current CSS file:
body {
font-size: small;
}
table {
/* NB */
/* IE tables don't inherit font-size */
font-size: 1em;
border: thin solid black;
}
th, td {
padding: 0.25em;
}
table caption {
caption-side: top;
/* NB *
/* padding needs extra allowance for border */
padding: 0.25em;
}
Cheers
Trevor
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] selector for missing attribute?
Hi
I must be wrong, because its surely a basic feature, but it seems that it
is not possible to define a selector which matches elements which *dont*
have a particular attribute.
I am taking HTML which contains alignment attributes on table cells where
the originating software considers this appropriate, e.g.
table
captionThis is a table/caption
tr
th align=centerheading/th
thheading/th
/tr
tr
td align=centerdata/td
tddata/td
/tr
tr
tddata/td
td align=rightdata/td
/tr
/table
The alignment attributes are generated with the assumption that all table
cells and headings are left-aligned by default, but this leads to an issue
with the default behaviour of IE (which is to left-align td elements, but
center th elements).
So I want to style this with something like
tr[^align], th[^align] {
text-align: left;
}
tr[align], th[align] {
text-align: attr(align);
}
where the [^align] piece means select elements which do NOT have an align
attribute. There doesn't seem to be such a construct in CSS.
Two and a half questions:
1. Is there a construct which I can use for an undefined attribute?
2. Is it valid to define text-align: attr(align) as in the code above? All
the examples I have seen restrict the use of attr() to defining content:.
The half question:
a. If the answer to both the foregoing is No, how would you recommend coding
this requirement in CSS?
Cheers
T
Trevor Nicholls
Casting the Void
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] selector for missing attribute?
Thank you Jukka Joe for your answers The remaining problem is that on browsers that do not support attribute selectors, such as IE 6 and earlier, the style sheet would make _all_ th elements left-aligned. Thus, this might be one of (rare) cases where some trick for hiding the first rule from such browsers might be in order. I think it would be sufficient to use a conditional comment; see http://www.quirksmode.org/css/condcom.html for the techniques. On the other hand, then IE 6 would obey the align attributes but follow its own defaults, centering th elements that lack an align attribute. Rats. Almost all our tables have left aligned column headings, and I hoped to make that the default so that alignment only needed specifying occasionally. On the other hand, if IE doesn't respect attribute selection, it's all a bit pointless (the HTML is displayed by the end-user application in a browser subcomponent which is - currently - IE). Maybe the best solution is an XSL pass to fill in all the defaults... Cheers Trevor __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Table internal borders
Hi
Sample table can be seen at
http://img2.freeimagehosting.net/uploads/bdf02c11e5.gif
My question relates to the junction between the black bottom border of the
table heading row and the grey side border of the two columns. It's partly
grey and partly black, and I'd like it to be wholly black.
The CSS rules which have produced this result are here:
/* NB IE doesn't inherit font size into tables */
table { font-size: 1em; }
table {
border: thin solid black;
border-collapse: collapse;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
th {
padding: 0.25em 0.5em;
border-bottom: thin solid black;
border-left: thin solid #C8C8C8;
border-right: thin solid #C8C8C8;
}
td {
padding: 0.25em 0.5em;
border: thin solid #C8C8C8;
}
The browser from which I took the screen capture is IE6.
Is there something I have defined inaccurately?
Cheers
Trevor
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] generated content before div
Hi
Thanks for your helpful answers to this.
The Q: and A: prefixes were simply there as trivial examples of extra
content, I've been trying out a lot of different ways to present the QA
material and nothing which used before/after was working at all. I was
totally unaware that IE ignores these pseudo-elements so that is useful to
know, now!
The non-repeating image looks like a useful trick which I may use elsewhere,
thank you.
Cheers
T
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Jukka K. Korpela
Sent: Sunday, 17 June 2007 3:39 a.m.
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] generated content before div
On Fri, 15 Jun 2007, Trevor Nicholls wrote:
The HTML I am styling uses classes to distinguish between questions and
answers, like so:
div class=questionp.../p/div
div class=answerp.../p/div
For questions, it would be more suitable (for accessibility reasons and
for logic) to make a question a heading (for the answer after it):
h2 class=question.../h2
(You might not need a class if do things this way - perhaps there are no
other h2 elements on the page.)
I mention this (in this list on CSS, despite its being a markup issue),
because people often mistakenly assume that using h2 markup has
undesired effects like too large and bold font size. You can, if you like,
remove some or all of the default styling of h2 elements using CSS.
You would need to consider font-size, font-weight, and vertical margins.
div.question:before {
display: block;
content: Q: ;
}
The :before pseudo-element and the content property are not supported by
IE (even in IE 7), though they are rather well supported on other
browsers.
You can simulate them, in this case, by setting a non-repeating background
image, containing e.g. Q: in some appearance, and a suitable left
padding for the question elements.
But maybe it's simplest to include the strings Q: and A: as document
content. After all, they can be useful in all browsing situations,
including non-CSS situations.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
