[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] when are 2 external css called for?
Bill Brown wrote:
John wrote:
[snip]
This has been an excellent thing for me to learn in my
greenhorn-hood..
As I adjust my pages to work with this new combined style sheet, I'm
adding id=index to every instance of my p tags; my space
after design employs a pparagraph's worth of text/p
pparagraph's worth of text/p, so every p needs adjusting.
Is there a way to say All of these p are now p id=index?
Another possibility would be to wrap the section of your page that
contains those particular paragraphs in a div, give the div an ID
id=index, then in your stylesheet add something like:
#index.p { /* do stuff with paragraphs inside my div */ }
Might be easier than going through assigning classes to all those
paragraphs.
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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/
[css-d] Nested floats render different accross browsers, who's right?
Hello guys girls, new to this list. Observe: http://lensco.be/test/nested_floats/ Short story: a right float within a left float looks different in Safari compared to Firefox and IE. So, who is right here? Is there a way to get them to behave the same? Fixed widths are not an option. My opinion: Safari is the most consistent - although it adds some extra padding for no reason? __ 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] Full-height left column in fluid layout.
On 4/15/08, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Richard Grevers wrote: Having had problems with onetruelayout before, I tried Gunlaug's companion column example. FYI: companion column is not mine. It's Ingo Chao's (linked to from my site). I stand corrected. (Sorry Ingo!) But I still have the problem of the gap (stripe of background colour) in FF/Opera, plus the client will want the left column to go all the way to the bottom (or a narrow footer) Contradicting requirements - or I simply don't understand them. Since the footer has a child it was easiest to fake the left column by giving the child the same left margin and moving the background. Also a number of contradicting styles in your page, which makes it less cooperative. I don't have time to debug it all, so I just play along with what's already there. That's what happens when you start out with some negative margins code from layoutgala, overlay your IE width expressions (currently lost in the wash), then add footerstickalt into the mix, then have a change in brief and a new design (which necessitates losing the header), and finally add companion columns. As I understand it, footerstickalt precludes having a global container to set width (because the 100% height has to pass down the chain of inheritance), so I was looking at having 3 elements to handle when I get the min-max for IE working again. I added a class (fluidwidth), but on second thoughts isn't the method dependent on using ids? It's just about in shape now, http://www.vine.org.nz/index.php/adult-classes except pages seem to be an em too tall in most browsers, and I haven't yet spotted where that snuck in. Richard -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] Site Check Please: IE 6 / CSS Zen Garden Project
In IE6 the layout is fine, but instead of a drop shadow behind the container div, I see a solid gray border. You can see a screen shot here: http://valeriewininger.com/css_list/ssCssZenGarden.jpg Valerie www.valeriewininger.com On Mon, Apr 14, 2008 at 4:53 PM, Alan K Baker [EMAIL PROTECTED] wrote: It's not too bad in IE6. It's not perfect but it's far from broken. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Elli Vizcaino To: CSS Discuss Sent: Monday, April 14, 2008 9:31 PM Subject: [css-d] Site Check Please: IE 6 / CSS Zen Garden Project Hello, I was given the CSS Zen Garden project as a design test and I have something up on my server that I'm working on: http://e7flux.com/csszengarden/chaoticspring.html I've checked across IE6, 7, 8, FF Windows Mac and Safari Mac. They all seem fine except in IE6. The last time I checked via www.browsershots.org the layout was completely broken and looks like this in IE6: http://e7flux.com/csszengarden/ie6.png - Is this the haslayout bug? Haven't been able to get a screenshot from browershot.org in over an hour. Can someone check and tell me if it's still broken and if so, how can I fix it? TIA, Elli __ 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/ -- Valerie Wininger www.valeriewininger.com __ 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] Site Check Please: IE 6 / CSS Zen Garden Project
Thanks. I'm using a PNG file in the background and had a .htc file call in the HTML which I removed, so now the transparency doesn't show in IE6 - the .htc file was causing it not to layout right. I will resort to using a different image file format for the reasons mentioned as well as the fact, the part of the challenge with the Zen Garden project is not two touch the HTML. Thanks for checking though! Elli --- Valerie Wininger [EMAIL PROTECTED] wrote: In IE6 the layout is fine, but instead of a drop shadow behind the container div, I see a solid gray border. You can see a screen shot here: http://valeriewininger.com/css_list/ssCssZenGarden.jpg Valerie www.valeriewininger.com On Mon, Apr 14, 2008 at 4:53 PM, Alan K Baker [EMAIL PROTECTED] wrote: It's not too bad in IE6. It's not perfect but it's far from broken. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Elli Vizcaino To: CSS Discuss Sent: Monday, April 14, 2008 9:31 PM Subject: [css-d] Site Check Please: IE 6 / CSS Zen Garden Project Hello, I was given the CSS Zen Garden project as a design test and I have something up on my server that I'm working on: http://e7flux.com/csszengarden/chaoticspring.html I've checked across IE6, 7, 8, FF Windows Mac and Safari Mac. They all seem fine except in IE6. The last time I checked via www.browsershots.org the layout was completely broken and looks like this in IE6: http://e7flux.com/csszengarden/ie6.png - Is this the haslayout bug? Haven't been able to get a screenshot from browershot.org in over an hour. Can someone check and tell me if it's still broken and if so, how can I fix it? TIA, Elli __ 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/ -- Valerie Wininger www.valeriewininger.com Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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 floats render different accross browsers, who's right?
On Apr 15, 2008, at 9:10 PM, Lensco wrote: Observe: http://lensco.be/test/nested_floats/ Short story: a right float within a left float looks different in Safari compared to Firefox and IE. So, who is right here? Is there a way to get them to behave the same? Fixed widths are not an option. If you are comparing Gecko1.8/Firefox 2 to Safari 3.1, then yes Gecko 1.8 is buggy. Gecko1.9/Fx 3 renders the test case the same as Safari 3.1 My opinion: Safari is the most consistent - although it adds some extra padding for no reason? Could you clarify that ? Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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] Full-height left column in fluid layout.
Richard Grevers wrote:
Since the footer has a child it was easiest to fake the left column
by giving the child the same left margin and moving the background.
That's easier than stacking, yes.
Also a number of contradicting styles in your page, which makes it
less cooperative. I don't have time to debug it all, so I just play
along with what's already there.
That's what happens when you start out with some negative margins
code from layoutgala, overlay your IE width expressions (currently
lost in the wash), then add footerstickalt into the mix, then have a
change in brief and a new design (which necessitates losing the
header), and finally add companion columns.
Nice mix :-)
In case something get lost in translation somewhere, here's a newly
modified example of what can be done visually with Ingo's companion
column method when combined with my conditionally fixed-elastic-fixed
layouts an px/em based min/max expression for IE6...
http://www.gunlaug.no/tos/alien/ic/test_08_0415.html
It's a pretty versatile method.
As I understand it, footerstickalt precludes having a global
container to set width (because the 100% height has to pass down the
chain of inheritance), so I was looking at having 3 elements to
handle when I get the min-max for IE working again. I added a class
(fluidwidth), but on second thoughts isn't the method dependent on
using ids?
The inherited 'height' has nothing to do with 'width', so you're pretty
free to add what you want. I use global container / wrapper with a
declared and expression-controlled 'width', so there shouldn't be any
problems making it all work together without adding more IDs or CLASSes.
It's just about in shape now,
http://www.vine.org.nz/index.php/adult-classes except pages seem to
be an em too tall in most browsers, and I haven't yet spotted where
that snuck in.
#footer's height too short. Try #footer {height: auto;} and/or adjust
'height' to taste.
regards
Georg
--
http://www.gunlaug.no
__
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] Site Check Please: IE 6 / CSS Zen Garden Project
Elli Vizcaino wrote:
http://e7flux.com/csszengarden/chaoticspring.html
You have height:1%; on the below selector. You may (?) want to feed
that only to IE/6, as compliant browsers might do better without it at
+2 font-scaling.
.p5 {
height: 1%;
}
__
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] css-d Digest, Vol 65, Issue 20
This has been an excellent thing for me to learn in my greenhorn-hood.. As I adjust my pages to work with this new combined style sheet, I'm adding id=index to every instance of my p tags; my space after design employs a pparagraph's worth of text/p pparagraph's worth of text/p, so every p needs adjusting. Is there a way to say All of these p are now p id=index? thank you! John If you need all P tags to be styled the same way then you shouldn't need to add an ID to them. You especially shouldn't be doing it if there's more than one paragraph on each page. __ 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] DTD- from ccs-d Vol 65, Issue 17
I'm not sure if this is the correct place for my question but here goes... The other day David was helping Keith with a coding problem and he recommended the following re: http://bsaroundtable.com/ /Part/ of the difficulty may be that the file is in quirksmode. Delete this: html !--!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;-- !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; Replace it with this: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; head Originally I thought that I understood DTD correctly but as I read on line info I find myself getting somewhat confused. There seems to be so much information. Could David / or someone / explain to me how the original DTD (strict) put the file into quirksmode and why the second one (transitional) corrects the problem ...or.. Perhaps someone can direct me to a tutorial that will help me to understand. Help much appreciated Doreen Cowan __ 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 floats render different accross browsers, who's right?
My opinion: Safari is the most consistent - although it adds some extra padding for no reason? Could you clarify that ? In the meantime I updated the testcase and added screenshots for IE7, FF3 and Opera: http://lensco.be/test/nested_floats/ Safari seems to add some extra 'padding' to the containing boxes, while Opera doesn't. As far as I can tell, Opera is currently the only one to get it 100% right. My next question then is how to get FF2 en IE to behave like Opera does. I need it for a right to left website (in Arabic) I'm working on. __ 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 floats render different accross browsers, who's right?
Lensco wrote: Hello guys girls, new to this list. Observe: http://lensco.be/test/nested_floats/ Short story: a right float within a left float looks different in Safari compared to Firefox and IE. So, who is right here? Is there a way to get them to behave the same? Fixed widths are not an option. My opinion: Safari is the most consistent - although it adds some extra padding for no reason? Welcome to the list. :-) Gecko 1.7~1.8 and IE7 will show this behavior when a child element is floated right inside a parent element floated either left or right. http://css-class.com/test/css/visformatting/floats/floats-width-auto.htm I should add that in Gecko 1.7~1.9 and Opera 9.5 a right floated element within an overflow container, either the viewpoint or an element with overflow:auto and overflow:scroll will be clipped at the left edge of the overflow container. All other browsers that I know of will show the full width of such a float. http://css-class.com/test/bug/float-right-left-edge-hidden.htm This is now a bug in Safari [1] and was discussed [2] on the CSS WG mailing list. [1] https://bugs.webkit.org/show_bug.cgi?id=18203 [2] http://lists.w3.org/Archives/Public/www-style/2008Mar/0422.html Alan http://css-class.com/ __ 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 floats render different accross browsers, who's right?
Lensco wrote: My opinion: Safari is the most consistent - although it adds some extra padding for no reason? Could you clarify that ? In the meantime I updated the testcase and added screenshots for IE7, FF3 and Opera: http://lensco.be/test/nested_floats/ Safari seems to add some extra 'padding' to the containing boxes, while Opera doesn't. As far as I can tell, Opera is currently the only one to get it 100% right. My next question then is how to get FF2 en IE to behave like Opera does. I need it for a right to left website (in Arabic) I'm working on. What you are encountering is undefined behavior in CSS2.1 [1]. No browser is correct or incorrect because this has never been looked into before. This I will personally be raising on the CSS WG mailing list [2] but my test cases must become more simpler. Welcome to the world of many many standards. ;-) [1] http://www.w3.org/TR/CSS21/ [2] http://lists.w3.org/Archives/Public/www-style/ Alan http://css-class.com/ __ 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] Single floated list with forced row clear in IE
Having trouble with this one... Example here: http://geniuscar.com/old/tests/iefloat.html I just have a single UL with all the LIs all floated left. I want to be able to force a second row at a given point in the list, so I applied a clear:left to first element I want in the 2nd row. This behaves like I expect in FFox and Safari, with the cleared LI on the 2nd row and following LIs also on the 2nd row. In IE however, LIs following the clear get bumped up and are placed in the first row. I've gone through my bag of tricks and can't figure it out in IE, any ideas? __ 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] Single floated list with forced row clear in IE
On Tue, Apr 15, 2008 at 6:16 PM, Timothy Kelty wrote: Example here: http://geniuscar.com/old/tests/iefloat.html I just have a single UL with all the LIs all floated left. I want to be able to force a second row at a given point in the list, so I applied a clear:left to first element I want in the 2nd row. This behaves like I expect in FFox and Safari, with the cleared LI on the 2nd row and following LIs also on the 2nd row. In IE however, LIs following the clear get bumped up and are placed in the first row. In IE7 (and below) when a box has both the float and the clear properties (as your cleared LI) many wrong behaviors occur, see [1]. At the moment the only fix that I see for your case consists in adding in the HTML an empty not floated LI before the cleared one. Sure not a nice solution. It seems not to create problem in other browsers, anyway you could feed it just to IE, with a CC. So you could use: ... liRow One/li !--[if lt IE 8]li style=float:none/li![endif]-- li class=twoRow Two (item 1)/li ... Best regards, Bruno [1] http://brunildo.org/test/IEWfc2.html -- Bruno Fassino http://www.brunildo.org/test __ 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] Full-height left column in fluid layout.
Ingo wrote: http://www.gunlaug.no/tos/alien/ic/test_08_0415.html It sometimes stops to dynamically resize (stays small) in your favourite browser (9.27 win xp). You mean vertically? The lose 100% height initially (or what one should call it) bug? Can't check in any browser on winXP now. Have to wait till I get new machines - have ordered three of these... http://www.hardware.info/productdb/bGZkZZibmJHK/viewproduct/Acer_Aspire_L5100TV/index.php ...as subs for my main workstation. Should bring Linux browsers and multiple IE/win versions and other stuff within reach. Can't see anything but the won't resize vertically with window problem in any Op 9.xx version on win2K, but I had that initial bug in Opera 9.50beta earlier, and added a test-fix on html for it that seems to work at my end. If you have a tested workaround/solution for what you see, then by all means let me know. regards Georg -- http://www.gunlaug.no __ 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] IE table-layout bug? (Was: IE table column width)
I have posted this before, but could not find anything in the
meantime: IE6 and IE7
seem to add any horizontal padding for td to the width for the col element.
Test case:
http://test.rudolphina.org/col-width.html
Questions:
- Is IE 6, IE 7 in accordance with the specification or is it a bug?
- How does it look in Safari, Firefox 3 and IE 8 ?
Regards,
Manfred
On 06/04/2008, Manfred Staudinger [EMAIL PROTECTED] wrote:
Assume we have a table with these basic properties:
table {
border-collapse: collapse;
border: 1px solid #859EB5;
border-spacing: 0;
font-family: tahoma;
}
td {
border: 1px solid #859EB5;
font-size: 11px; text-align: right;
padding-top: 1px; padding-bottom: 1px;
padding-right: 0px; padding-left: 0px;
}
Note the last line: horizontal padding is set to 0. Assume further the
table has 8 columns which should have an alternating width of 60px and
90px respectively. We do this by assigning a class to the col:
colgroup
col class=num1
col class=cur1
col class=num1
col class=cur1
col class=num1
col class=cur1
col class=num1
col class=cur1
/colgroup
and then define the column width with css:
table col { width: 90px; } /* take this as a default */
table col.num1 { width: 60px; }
table col.cur1 { width: 90px; color: black; background-color: #ffc;}
To take advantage of the fixed table layout we specify
table {
table-layout: fixed;
width: 609px; /* (60+90)*8 for col-width + (8+1) for borders */
}
The result is shown in Tab. 1 (http://test.rudolphina.org/col-width.html).
The
display is the same for Firefox 2.0.0.13, Opera 9.25, IE 6 and IE 7.
But this changes if we specify a padding (Tab. 2) for the cells like
td { padding-right: 4px; padding-left: 0px; }
as IE 6 and IE 7 enlarge each column by 4px (in the absence of a colspan).
To get IE 6 and IE 7 to display the same as Firefox and Opera again (Tab. 3)
it is necessary to overwrite the specified col width by
table#t3 col { width: 86px; }
table#t3 col.num1 { width: 56px; }
table#t3 col.cur1 { width: 86px; }
Note: Other tests seem to indicate that this might not sufficient in cases
where colspans are present.
Questions:
1. Is IE 6, IE 7 in accordance with the specification?
2. How does it look in Safari, Firefox 3 and IE 8 ?
Regards,
Manfred
__
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] How do you feed IE versions different css than w3c compliant browsers?
David Laakso wrote:
You have height:1%; on the below selector. You may (?) want to feed
that only to IE/6, as compliant browsers might do better without it at
+2 font-scaling.
.p5 {
height: 1%;
}
I have a restructuredtext generated site that now looks as intended in firefox,
but not in the IE
that is installed with Win2K. IE seems to ignore the css positioning of a list
and an image hyperlink.
http://ecosensory.com/
John Griessen
--
Ecosensory Austin TX
__
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] How do you feed IE versions different css than w3c compliant browsers?
I have a restructuredtext generated site that now looks as intended in firefox, but not in the IE that is installed with Win2K. IE seems to ignore the css positioning of a list and an image hyperlink. http://ecosensory.com/ Hi John, You can use this syntax to target all NON-MSIE browsers: !--[if !IE] -- style type=text/css@import url(css/fix/non_msie.css);/style !-- ![endif]-- Use this syntax to target ALL MSIE browsers: !--[if IE] style type=text/css@import url(css/fix/all_msie.css);/style ![endif]-- And this will target specific versions of MSIE browsers: !--[if IE 6] style type=text/css@import url(css/fix/msie_6_0.css);/style ![endif]-- !--[if IE 7] style type=text/css@import url(css/fix/msie_7_0.css);/style ![endif]-- CSS in the last three will not be seen by the validator, the first one will (the non-msie syntax). This is important if you care about validation. Additionally, this sort of technique has advocates and opponents. It uses two semi-frowned-upon approaches: 1. Proprietary syntax. 2. Browser sniffing. I use it because it also one of the most failsafe methods for targeting the two type of browsers: Nice, standards-compliant, user and developer friendly browsers...and anything made my Microsoft. Hope it helps. --Bill Brown TheHolierGrail.com __ 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] CSS background image not showing up
I'm still going through the Beginning CSS Web Development book. I have two problems, but I have to get the first one answered before I can go on to the second one. I am working through an exercise that uses a background image with a repeat-y to create faux columns. Here is the page: http://home.comcast.net/~prairiedream/beginning/faux.html and here is the CSS: http://home.comcast.net/~prairiedream/beginning/faux.css My problem right now is that the background image isn't showing at all. I have faux.gif in a folder titled images like this: /beginning/images/faux.gif I also tried it like this: /images/faux.gif (not in the the beginning folder). Both ways, the background image does not show. The image is a dark gray and a lighter gray column that should show up in the content section. Can anyone see what the problem might be? I apologize for these very basic, newbie questions, but you have been very helpful to me so far and I appreciate it, Carol __ 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] CSS background image not showing up
instead of
css-d@lists.css-discuss.org
#container {
background:url(/images/faux.gif) repeat-y;
}
try this:
#container {
background:url(../images/faux.gif) repeat-y;
}
~Neal
life is certain
death is short
~furry lewis
__
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] Text Sizing and Div Height
Hello All, How do I keep my divs the same height if the user resizes the text to go beyond the min-height property? This looks perfect until the text size gets too large then it all blows up: http://aan.einfosystems.net/blocks.htm And I have a feeling that it doesn't look right in IE6 even with the default text size. (It is a real pain that you can't run IE6 and IE7 side-by-side.) Also, is there a CSS way to handle changing the style on the right block when the mouse hovers over the left and middle blocks? Thanks, Chris __ 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] CSS background image not showing up
I meant one of two things, in this case the likely candidate being B. Sometimes I forget to express the full idea when I'm doing a quick site check amongst my own projects. -Jack Timmons On Tue, Apr 15, 2008 at 4:44 PM, Brian Ogden [EMAIL PROTECTED] wrote: This is not true the image does exist and showing up on my browser at the following url: http://home.comcast.net/~prairiedream/beginning/images/faux.gif On Tue, Apr 15, 2008 at 2:38 PM, Jack Timmons [EMAIL PROTECTED] wrote: Carol, On hand, my browser is unable to find the image, which is telling me two things: A: You haven't uploaded the image B: You are referencing the image incorrectly. I tried going straight to see if I could look in the directory, but it's disabled. -Jack Timmons On Tue, Apr 15, 2008 at 4:32 PM, Carol Huddleston [EMAIL PROTECTED] wrote: I'm still going through the Beginning CSS Web Development book. I have two problems, but I have to get the first one answered before I can go on to the second one. I am working through an exercise that uses a background image with a repeat-y to create faux columns. Here is the page: http://home.comcast.net/~prairiedream/beginning/faux.html and here is the CSS: http://home.comcast.net/~prairiedream/beginning/faux.css My problem right now is that the background image isn't showing at all. I have faux.gif in a folder titled images like this: /beginning/images/faux.gif I also tried it like this: /images/faux.gif (not in the the beginning folder). Both ways, the background image does not show. The image is a dark gray and a lighter gray column that should show up in the content section. Can anyone see what the problem might be? I apologize for these very basic, newbie questions, but you have been very helpful to me so far and I appreciate it, Carol __ 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-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] How do you feed IE versions different css than w3c compliant browsers?
On 15/04/2008, John Griessen [EMAIL PROTECTED] wrote: Manfred Staudinger wrote: Hi John, If you want to select IE6 and IE7, but not IE8 nor IE5.5 or IE5.01 then you might use !--[if lte IE 7]![if gte IE 6] style type=text/css css here /style ![endif]![endif]-- Thanks, very helpful. Looks like you just put this in line with your stds compliant css and the css here lines are fed to the version of IE you selected, right? Yes. Manfred __ 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] IE6 IE7 together [was: Text Sizing and Div Height]
Chris. You can run IE6 and IE7 and a few others side-by-side, I'm doing it right now. :-) See: http://tredosoft.com/Multiple_IE Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Chris Morse To: css-d@lists.css-discuss.org Sent: Tuesday, April 15, 2008 11:00 PM Subject: [css-d] Text Sizing and Div Height (It is a real pain that you can't run IE6 and IE7 side-by-side.).. Thanks, Chris __ 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] How do you feed IE versions different css than w3c compliant browsers?
On 15/04/2008, Bill Brown [EMAIL PROTECTED] wrote: You can use this syntax to target all NON-MSIE browsers: !--[if !IE] -- style type=text/css@import url(css/fix/non_msie.css);/style !-- ![endif]-- Thats definitely an unnecessary hack. The correct (although proprietary) syntax would be: !--[if IE]![if !IE]![endif]-- style type=text/css css here /style !--[if IE]![endif]![endif]-- Regards, Manfred __ 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] Blog menu overlapping header
Hello everyone, I'm very new at this. My site is Thiefhunters in Paradise, http://bobarno.com/thiefhunters . You'll see right away that the top menu now overlaps the header image. I don't know where else to start looking to fix it. The header.php and style.css file seem fine, but I'm not good at reading them. How it happened: I added the Wordpress plugin WP Admin Bar Reloaded to my blog, adding a little bit of code to style.css and to header.php, as instructed athttp://onemansblog.com/2007/04/08/wordpress-plugin-wp-admin-bar-reloaded/ That created the mess. Therefore, I removed the plugin and all code. The admin bar went away, of course, but the menu now overlaps the header image, i.e., the header should be pushed down enough for the menu, but isn't. After that, I completely replaced the header.php with the original. No luck. May I send someone those two docs to look at? I'm so lost... Gratefully, Bambi Vincent aka thiefhunter P.S. the plugin-pusher at onemansblog.com has not responded, unfortunately. __ 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] Text Sizing and Div Height
Chris Morse wrote:
[snip]
How do I keep my divs the same height if the user resizes the text to go
beyond the min-height property?
[snip]
http://aan.einfosystems.net/blocks.htm
[snip]
And I have a feeling that it doesn't look right in IE6 even with the default
text size. (It is a real pain that you can't run IE6 and IE7 side-by-side.)
Also, is there a CSS way to handle changing the style on the right block
when the mouse hovers over the left and middle blocks?
Thanks,
Chris
Hi Chris.
Setting overflow:auto (better) or overflow:hidden (not as nice) on the
element with the min-height (height in ie6) property will help for times
when the user resizes text (also using ems or %s can help).
You can run IE6 and IE7 side by side:
http://tredosoft.com/Multiple_IE
In terms of changing the style on the right block when the mouse hovers
over the left and middle blocks, you might be able to emulate this in
most browsers with this:
ul:hover li:last-child {font-weight: bold;}
Hope it helps!
Bill Brown
TheHolierGrail.com
__
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] Blog menu overlapping header
How it happened: I added the Wordpress plugin WP Admin Bar Reloaded to
my blog, adding a little bit of code to style.css and to header.php,
as instructed
athttp://onemansblog.com/2007/04/08/wordpress-plugin-wp-admin-bar-reloaded/
That created the mess. Therefore, I removed the plugin and all code.
The admin bar went away, of course, but the menu now overlaps the
header image, i.e., the header should be pushed down enough for the
menu, but isn't.
After that, I completely replaced the header.php with the original. No
luck. May I send someone those two docs to look at? I'm so lost...
Gratefully,
Bambi Vincent
aka thiefhunter
P.S. the plugin-pusher at onemansblog.com has not responded,
unfortunately.
Hi Bambi. Welcome.
Line 106 in this document:
http://bobarno.com/thiefhunters/wp-content/themes/organic-10/style.css
Missing a {.
Change this:
.pagenavigation
text-decoration: underline;
color: #DB5600;
}
to this:
.pagenavigation {
text-decoration: underline;
color: #DB5600;
}
That should fix it for you. Hope it helps.
Bill Brown
TheHolierGrail.com
__
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] How do you feed IE versions different css than w3c compliant browsers?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Bill Brown Sent: Tuesday, April 15, 2008 4:27 PM To: Manfred Staudinger Cc: css-d@lists.css-discuss.org; John Griessen Subject: Re: [css-d] How do you feed IE versions different css than w3c compliant browsers? Manfred Staudinger wrote: On 15/04/2008, Bill Brown [EMAIL PROTECTED] wrote: You can use this syntax to target all NON-MSIE browsers: !--[if !IE] -- style type=text/css@import url(css/fix/non_msie.css);/style !-- ![endif]-- Thats definitely an unnecessary hack. The correct (although proprietary) syntax would be: !--[if IE]![if !IE]![endif]-- style type=text/css css here /style !--[if IE]![endif]![endif]-- Regards, Manfred Manfred, I could not more *strongly* disagree with you, and I'm not sure why you are calling my syntax incorrect or unnecessary either. If they both do the same thing, mine not only appears (to me, at least) to be more elegant, but is shorter and more understandable. By comparison: Mine: !--[if !IE] -- ... anything at all, including css here !-- ![endif]-- and yours: !--[if IE]![if !IE]![endif]-- ... anything at all, including css here !--[if IE]![endif]![endif]-- What about a simple: !--[if !IE] ... anything at all, including css here ![endif]-- Or am I totally missing something here? Could be me ;) -- Regards, Thierry | http://www.TJKDesign.com __ 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] How do you feed IE versions different css than w3c compliant browsers?
On Wednesday 16 April 2008 12:58 am Thierry Koblentz wrote: What about a simple: !--[if !IE] ... anything at all, including css here ![endif]-- Or am I totally missing something here? Could be me ;) But then every browser would ignore it, which is presumably not what you want. Nicholas __ 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] CSS Background Image Not Wide Enough
Thank you all very much for your help with my background image, I've now got it displaying on the page. Now for my next problem: I am trying to use the background image as a faux column. The width of the image is supposed to total 760 pixels (180px for the dark gray column, 20 px blank, then 560px for the light gray column). However, with those measurements and the CSS I have currently, the image doesn't cover all of the text. I keep increasing the width of the image (it's now at 820px!) but that seems to have no effect whatsoever. I know something is wrong with either the width of my column/sidebar, or width of the image, but I can't see it. Can you? Page: http://home.comcast.net/~prairiedream/beginning/faux.html CSS: http://home.comcast.net/~prairiedream/beginning/faux.css Thanks so much for your help! Carol __ 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] How do you feed IE versions different css than w3c compliant browsers?
On Wednesday 16 April 2008 1:09 am John Griessen wrote: Thierry Koblentz wrote: What about a simple: !--[if !IE] ... anything at all, including css here ![endif]-- This short one looks good... As I understand this, it goes in default.css, so what else besides css code would you want to put here? John Griessen css newbie building his own selling web site. !-- -- style comments go in the HTML file, not the css file. You can put a link rel=stylesheet ... (/) in there if you need, but only IE supports these type of conditional comments, so you need to use [if IE]. Here is how you would build up the logic of the expression: We have to start with: !--[if IE] Now IE thinks we are not in a comment, and the rest do. !--[if IE]!-- Now IE has started a comment, and ! is ignored by the rest, so they now think they are not in a comment. You mirror this with the closing tag: !--[if IE]!-- ...seen by everything except IE... !--![endif]-- Nicholas __ 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] How do you feed IE versions different css than w3c compliant browsers?
1/ Regarding Conditional Comments, see: Microsoft Developer Network http://msdn2.microsoft.com/en-us/library/ms537512(VS.85).aspx 2/ Regarding using Conditional Comments to feed hacks to IE, see: On havingLayout (scroll down a little to: Alternatively, and possibly more future proof, are conditional comments:) http://www.satzansatz.de/cssd/onhavinglayout.html#hacks __ 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/
