Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On 4/07/2014 1:58 AM, Elli Vizcaino wrote:
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley a...@css-class.com wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing /span tag.
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
http://www.e7flux.com
Hello Elli,
I believe I know what is happening but I don't know what style is
causing it. Please see this screenshot.
http://css-class.com/test/temp/italic.jpg
It's this font-family.
h1, h1 a.logo {
font-family: Calluna Sans,Arial,Helvetica,sans-serif;
}
To get that 'Arial italic' fallback when I remove the reset CSS.
http://www.e7flux.com/e7flux2014/css/reset.css
I don't understand why the fallback is Arial italic instead of Arial but
I suspect the italic aspect is the thing that causing the space.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Is There A Way to Shrink Wrap Inline Elements?
On 4/07/2014 10:07 AM, Philippe Wittenbergh wrote: Le 4 juil. 2014 à 06:09, David Hucklesby huckle...@gmail.com a écrit : I think you may be looking at the normal letter spacing that occurs between letters. If you increase the font-size of your test text, you will notice small gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. As this spacing varies by letter and font, I’m sorry I have no good solution. Playing with the CSS letter-spacing value did not give a useful result. YMMV. letter-spacing: -.05em works here for the bottom span, at the price of pulling each of the 3 letters closer to each other. But that “fix” might be browser and platform dependent, and is dependent on the font font-size as well. A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. I agree with Philippe, it's the font metrics. A possible solution is to simplify. Why use three ems (this causes it to be italic) and other elements to achieve something which can be simply done with a SVG. Below is a demo with an inline svg which looks fine in Firefox and Chrome. Fails in IE12. http://css-class.com/test/temp/elli-code.htm I would recommend to redo the SVG as an image since the can be scaled as a percentage width of the h1 header and would look much more graceful as you re-sized the view-port. The only problem is it also fails in IE12. http://css-class.com/test/temp/elli.htm http://css-class.com/test/temp/elli.svg FYI, the E7FLUX could also be done as a SVG. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Is There A Way to Shrink Wrap Inline Elements?
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Regards,
Elli Vizcaino
http://www.e7flux.com
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is
to help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or
ALTER. I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing /span tag.
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] controlling aside for mobile
On 1/01/2014 8:27 AM, John wrote:
At this link: http://www.thinkplan.org/ I can’t see why I can’t
control over the L-R positioning of my aside
for the most part, my max-width=480px media break css are
working..I’m thinking this aside issue is some dumb thing but I’m not
seeing it.
When you use percentage margins, they become part of the width of the
float (margin box). If the float is floating right, only the
margin-right has any effect. The margin-left is eaten by the hidden
overflow (outside the viewport on the left).
The width of the float is as follows:
width: 100% + margin-right: 3%
This margin-right: 3% is the percentage that the float is overflowing
the viewport into hidden overflow. Remove the float for the aside and
change these following values.
aside{
width:100%;
float: none; /* ADD */
margin: 8% auto 0 3%; /* CHANGE */
border: 1px solid white;
}
Even this approach will bring unexpected results.
one weird thing, when I comment out my footer, the color I’ve
assigned to the wrapper for 480 reverts to the desktop color! I’m
hunting for things that are making the page “think” it’s still
desktop width..
This is because the floats further up the page are no longer being
cleared. You have clear: both on the footer.
Thanks for any pointers!
John
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] controlling aside for mobile
On 2/01/2014 2:54 AM, John wrote:
On Jan 1, 2014, at 3:43 AM, Alan Gresley a...@css-class.com wrote:
Thank you for shedding light Alan..as soon as I read your
corrections, I realized that I hadn’t removed floats (d’oh!) but had
no idea bout the margin % becoming part of the width of the float…
What is the *available width*? Please see section 10.3.5 of CSS2.1 [1]:
| Thirdly, find the available width: in this case, this
| is the width of the containing block minus the used
| values of 'margin-left', 'border-left-width',
| 'padding-left', 'padding-right', 'border-right-width',
| 'margin-right', and the widths of any relevant scroll
| bars.
The width of the float was 100% of the containing block (being the
initial containing block (the root element which is also be considered
the veiwport).
You had this. To the left is hidden overflow (HO) for a floated right
element.
HO | --- containing block --- |
| - float 100% - | +3% |
When you use percentage margins, they become part of the width of
the float (margin box). If the float is floating right, only the
margin-right has any effect. The margin-left is eaten by the hidden
overflow (outside the viewport on the left).
Why so? I thought it was Padding that added to width, ie, if:
padding-right:10px, subtract 10px from width to maintain overall
width (that the eye sees). Isn’t margin the value that *moves* the
entire div?
Please see above where I write float (margin box). Also section 10.3.3
of Block-level, non-replaced elements in normal flow [2]:
| 'margin-left' + 'border-left-width' + 'padding-left' +
| 'width' + 'padding-right' + 'border-right-width' +
| 'margin-right' = width of containing block
| If all of the above have a computed value other than
| 'auto', the values are said to be over-constrained
| and one of the used values will have to be different
| from its computed value.
When you use percentages for 'block-level, non-replaced elements in
normal flow' or 'floating, non-replaced elements', all the percentages
are based on the width of the containing block.
Test the following examples of markup and CSS.
style type=text/css
html { background: white; }
body { background: skyblue; }
div {
background: pink;
width: 100%;
margin: auto 50%;
padding: auto 50%;
}
div div { background: lime; }
/style
divdivInner div/div/div
or
style type=text/css
html { background: white; }
body { background: skyblue; }
div {
float: left;
background: pink;
width: 100%;
margin: auto 50%;
padding: auto 50%;
}
div div { background: lime; }
/style
divdivInner div/div/div
This margin-right: 3% is the percentage that the float is
overflowing the viewport into hidden overflow. Remove the float for
the aside and change these following values.
aside{ width:100%; float: none; /* ADD */ margin: 8% auto 0 3%; /*
CHANGE */ border: 1px solid white; }
Even this approach will bring unexpected results.
Why so? What about this will be unexpected?
John
Because you are going to have overflow of the containing block. You want
the following to add up to 100%.
| 'margin-left' + 'border-left-width' + 'padding-left' +
| 'width' + 'padding-right' + 'border-right-width' +
| 'margin-right' = width of containing block
1. http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#float-width
2.
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#Computing_widths_and_margins
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Detecting Quirks Mode
On 20/12/2013 10:27 AM, Colin (Sandy) Pittendrigh wrote: How does one know when a browser is or is not in Quirks Mode? Sometimes it's obvious. Sometimes it is not. If you right click on the page in Firefox and select 'page info', you will find the following. Render Mode: Quirks mode Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] CSS Media Queries: a singularity with orientation modes
On 1/12/2013 8:12 AM, David Hucklesby wrote:
On 11/30/13, 11:55 AM, Bjoern Hoehrmann wrote:
* Gabriele Romanato wrote:
@media screen and (orientation: landscape ) { /* ... */ }
As far as I know, browsers - even desktop browsers - support the
DeviceOrientation event plus a series of APIs related to orientation.
The
point is that on my Mac I actually cannot rotate my screen!
I have one monitor that could be rotated and I had to change from
landscape to portrait in the OS settings. :-)
Further,
what
have JS APIs to do with CSS? Do they affect indirectly the way a browser
interprets certain rules (like in this case?).
Well, http://www.w3.org/TR/css3-mediaqueries/#orientation the feature
has the
value `landscape` if the `height` feature is smaller than the `width`
feature. It does not have anything to do with APIs or whether you can
rotate
your screen.
I'm not sure about that. I have never had access to a mobile device to
test but I do observe how the flow changes (from top left) depending on
how you hold the mobile device.
I think that's correct. If I change Codepen's results frame width, the text
changes from green to red as the frame moves through the point where the
frame
is a square. I imagine the _device_ orientation is only relevant for
devices
that display the browser at full screen.
No. This is depended on the height to width ratio of the viewport. Load
up the below demo and change the height and width of the viewport and
notice how the color changes from red to blue or visa verso.
style type=text/css
p {
color: green;
}
@media screen and (orientation: landscape) {
p {
color: red;
}
}
@media screen and (orientation: portrait) {
p {
color: blue;
}
}
/style
pThis should be red or blue on a monitor (screen) 'and' a mobile
browser./p
As for the and being a logical relation, I believe that is also
correct. The
color will be green for print, for example.
Correct.
FWIW I have a hard time understanding the W3 specifications too! Relying
more on
the Mozilla Developer Network these days. :)
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Clean fallback for CSS Animation in IE9 etc.
On 21/11/2013 10:15 AM, Richard Grevers wrote:
Hi everyone,
I've just completed my first CSS animation, at
http://www.businessstart.co.nz/index.php?page=test-page
What's a safe way of having non-supporting browsers just display all six
lines of text in front of the first background image? At present, IE 8 and
9 are showing the image only.
It's a CMS, but I can use conditional comments in the template.
I suspect that the script is not appending the class 'no-cssanimations'
to the html tag in IE9. Look at this CSS.
html.cssanimations #animated h2 {
opacity:0;
}
html.no-cssanimations #animated h2 {
opacity:1;
}
None of this is needed for the browsers that support animation.
Does adding either of the following for IE8 and IE9 solve the problem.
html.cssanimations div#animated h2 {
opacity:1;
}
#content #animated h2 {
opacity:1;
}
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Comprehensive CSS Selector Test Without JavaScript?
On 20/11/2013 9:54 AM, Rick Gordon wrote: Has anyone put together a comprehensive test page for CSS selectors, which does not use JavaScript? I'd like to be able to test it in various ereaders, many of which don't support JavaScript. Here some old pages of mine with structural and attribute selectors along with negation. It's 6 pages starting here. http://css-class.com/test/css/selectors/str-pseudo-class.htm Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Checking up on buggy behavior in latest Google Chrome versions.
On 16/11/2013 1:09 AM, Philippe Wittenbergh wrote: Le 15 nov. 2013 à 22:38, Georg ge...@gunlaug.com a écrit : http://www.gunlaug.com/contents/design/q-a-construct.html ...there are 4 separate elements with show/hide function based on INPUT status. For orientation: all 4 are on gray image-background, and with text-shadow that changes on hover. As support and bug check note at bottom of side-column says, this works as intended in most browsers. However, latest Chrome and Opera Dev versions only make the list in main column under demo work, the others don't react much. After spending quite a moment trying to understand what I should see, Same here. Where should I look? the demo appears to work for both the main (LH) column and the right hand side bar. Clicking on those labels triggers the (hidden) span to play show-and-hide as described on the page. Chrome what-appears-to-be 33 dev, Safari 7. Fwiw, not very usable for keyboard users. Philippe -- Philippe Wittenbergh http://l-c-n.com On Window 7, Latest Chrome version. The first one (Simple Notes example:) does not open or work. The second one (Q A about a CSS-only show/hide technique.) has all the option opening when selected with no other item closing. The third and forth one will only show the first option open. None of the other options will open or work. I would suggest pulling it apart into smaller parts. Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] The Simpsons in CSS
On 13/11/2013 5:14 AM, COM wrote: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? I am very impressed by the samples shown… John I have used CSS to demonstrate how CSS works or may work. This demos show how 'transform-origin' can be used. Imagine Bart tumbling over and over or cartwheeling. :-) http://css-class.com/test/css/3/2d-animation/box-turning-on-egde2.htm This demo shows how gradients could be theoretically be animated (only possible by using element() which only works in Firefox~Gecko). http://css-class.com/test/css/3/image/element-gradient-rotate-animation1.htm This demo shows how element() could be used (only works in Firefox~Gecko). http://css-class.com/test/css/3/image/element-water-background-movement1.htm -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] For my own education
On 22/10/2013 2:28 AM, Peredur wrote: I wonder if somebody could take a look at this site: http://www.memoriahistorica.org.es/joomla/ It's not a site I'm working on or associated with, from a development point of view, in any way. However I notice that the page's text content overflows its container and I wondered (in case this should crop up in any site I *am* associated with) why this should be. Specifically, the content of the table: tableclass=blogcellspacing=0cellpadding=0 extends beyond the right boundary of its parent element: divid=ja-content An earlier child: divclass=componentheading does appear to respect the parent's boundaries. I can't for the life of me understand why this should be and so, for peace of mind only, if anyone could solve the riddle for me, I'd be very grateful. Regards Peter It's caused by the table further down having two images side by side (the first is 551px wide and the second is 573px wide ) in two separate columns. This fixed width of 1,124px causes the parent table (with one table cell) to be as wide. Because this outer table is contained by a right float div (see id=ja-contentwrap) of 80% wide, then the content overflows the viewport when the veiwport is narrower than 1405px wide. Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] For my own education
On 22/10/2013 3:29 AM, Peredur wrote: El 21/10/13 17:23, Alan Gresley escribió: It's caused by the table further down having two images side by side (the first is 551px wide and the second is 573px wide ) in two separate columns. This fixed width of 1,124px causes the parent table (with one table cell) to be as wide. Because this outer table is contained by a right float div (see id=ja-contentwrap) of 80% wide, then the content overflows the viewport when the veiwport is narrower than 1405px wide. Alan I love having a definite answer! Thanks Alan. Peter Your welcome. A simple demo below. There more involved but this gives the concept of the madness. Alan div style=float: left; background: yellowgreen; width: 20%;height: 100pxfloat left/div div style=float: right; background: skyblue; width: 80%; some content before wide block in floated right div div style=width: 1124px; background: red; a fixed width div that is to wide/div div style=clear: both;clear/div /div -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] inline-block, overflow hidden and baseline align
On 8/10/2013 9:31 PM, Christian Kirchhoff privat wrote:
My ideas so far are:
- push down the chosen elements by some pixels and by that fake the
baseline align
- set overflow to visible and shorten any text contants that are too
long with Javascript (JA is mandatory for that website anyway)
Below you'll find a short example that should display the problem (the
real site I am working on is intranet and can't be reached from the
outside).
Best
Christian
html
head
style
.inline {
border: 1px solid #000;
display: inline-block;
padding: 8px;
width: 80px;
}
.cropped {
overflow: hidden;
}
/style
/head
body
div
The text within this div is div class=inlinealigned/div to the
baseline of the surronding text.
/div
div
The text within this div is div class=inline croppednot
aligned/div to the baseline of the surronding text.
/div
/body
/html
Hello Christian,
For the overflow hidden inline-block, add a negative bottom margin that
equals the padding and vertical-align: bottom. This will make it close
but it will be out if the border-bottom or padding-bottom are given in
pixels. The below CSS brings all thing into line so to speak.
style
.inline {
display: inline-block;
padding: 0.5em 0; /* value in 'em' or you create another problem */
width: 80px;
border: 1px solid #000;
border-bottom: 0.1em solid #000; /* consider */
}
.cropped {
overflow: hidden;
margin-bottom: -0.6em; /* add, equals padding-bottom (and
border-bottom) */
vertical-align: bottom; /* add to have the border box sit on the
bottom edge of the line box */
}
/style
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Front page breaking in IE8, maybe 9 too
On 9/10/2013 9:40 AM, Theresa Jennings wrote:
http://girlscoutssangorgonio.org
The client just informed me that the Alumnae box is jogging down. I
imagine some sort of older IE padding bug.
I would not know. It is floated right and it has dropped but so has the
div with the class of content-home-right. The later may have just run
out of room.
It's working fine in IE10, FF, Safari, Chrome. I don't have an
installation of IE9, just 10 (Win7 on my VM), and 7 and 8 (on WinXP
on my VM).
F12 tools shows that IE9 is fine (hoping). IE8 and IE7 is doing the same
thing wrong (as described above)
This is a WordPress site, but the front page is its own php file in a
child theme.
I'm pretty certain this can be fixed with a CSS hack. I just don't
know how to do hacks.
CSS hacks are not good if you don't know how to do them. I don't even
use the for IE8.
Can someone give me some guidance, please? And look at it on IE9 and
see if it's breaking there, too? Should there be a hack for 7, too?
Thank you in advance for your help.
Theresa Jennings
Do you have access to this Conditional comment? !--[if lte IE
8].![endif]--
If so, put the following in the embeded style.
#iconsRectangl .wp-image-1102 { width: 300px; }
#homeBottWrapper .content-home-right {width: 73% }
Hope this helps.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Front page breaking in IE8, maybe 9 too
On 9/10/2013 12:44 PM, Theresa Jennings wrote:
I can add a conditional statement to the style sheet in the child
theme. But it's not embedded.
You can not add a condition comment (not statement) in the CSS. Since
both IE8 and IE7 are having similar problems which appear to be slight
rounding issues it best to change the HTML. The below condition comment
[if lte IE 8] means less-than or equal to IE8. This is where the
embedded style is.
!--[if lte IE 8]
style type=text/css media=screen
#content img.size-thumbnail,#content img.size-medium,#content
img.size-large,#content img.size-full,#content img.attachment-thumbnail,
#content img.wp-post-image,img.avatar,.format-chat img.format-chat-icon,
#wrapper,#branding,#colophon,#content, #content .post,
#sidebar_primary,#sidebar_right,#sidebar_left,.sidebar_top,.sidebar_bottom,.sidebar_extra,
#first,#second,#third,#fourth,
#commentform input:focus,#commentform textarea:focus,#respond input#submit {
behavior:
url(http://girlscoutssangorgonio.org/wp-content/themes/weaver-ii-pro/js/PIE/PIE.php)
!important; position:relative;
}
/style
![endif]--
Having to hack around existing hacks is problematic.
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Front page breaking in IE8, maybe 9 too
On 9/10/2013 2:02 PM, Theresa Jennings wrote: I think I'm going to talk to the guy who coded this custom home page, because even though I coded the child theme style sheet by hand, you are talking over my head. Thank you for your efforts. I really appreciate it. What Tom is meaning is that you may have access to the code between head and /head. If so, that's where the embedded conditional comment !--[if lte IE 8] .. ![endif]-- is. A good read. http://en.wikipedia.org/wiki/Conditional_comment On Tue, Oct 8, 2013 at 10:29 PM, Theresa Jennings theresajennings2...@gmail.com wrote: Except, as I mentioned, the images are 308px, not 300. True but it can be changed via the CSS. You may only need to change it to 304px. There are many fixes for what ever problems there are. It a later type of hacking (quite lazy) where you just throw many little tweaks to have IE8 or IE7 render correctly. Since it a WordPress theme, the HTML is already over complex and this makes debugging problematic. You can hack IE8 with CSS alone but I do not recommended it because you are putting extra styling on top of styling and some of the CSS hacking may effect, IE9 and IE10. IE10 does not support conditional comments. If you HTML is friendly and you CSS is not over complex, then it easy to code and only have to hack IE7 or earlier. The recent culture of striving for support of IE7 or HTML5 is adding new problems for the future. So when you do talk with guy who coded this custom home page, you may want to advice him of this. Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Font-size affecting line-height?
On 2/10/2013 11:06 AM, Kyle Sessions wrote:
I've come across some really strange behavior when trying to mix multiple
font-sizes within a single block element. I've built an example page here:
http://kage23.com/line-height.html
Basically, it seems like I'm getting an extra pixel of height and I can't
track down how or why. In my example, the paragraph inside of the first
block is 24px tall, as one would expect from a line of text with
line-height of 24px and no margins or padding.
This is not true. The p in the first box is 20px tall. This is since a
font size of 16px gives a space of roughly 19.5px (rounds to 20px) for
ascenders and descenders.
However, the paragraph
inside of the second block is 25px tall, even though it has a line-height
of 24px.
Correct but it not due to the line-height. The extra 1px is due to the
font-size difference. A font size of 20px gives a space of roughly
24.375 (rounds to 25px) for ascenders and descenders.
The span has a font-size of 20px, so it should still fit within
the line-height.
The line-height will only cause a new line to be positioned on top of
the first line if the line wraps.
(In fact, as I was playing with it, I was still seeing the
same issue, in some cases even more pronounced, when I made the span a
smaller font-size than the rest of the paragraph.)
This only seems to happen when I mess with varying font-sizes within the
same BLOCK-LEVEL element. If, for example, I assign { display: block; } to
.block p span, then the span becomes 24px tall, and the p becomes 48px
tall, as I would expect. So when my span is inline, why does changing the
font-size on the span affect the line-height of the p???
The line-height is on the outer div=block and this value is
inherited by the p and the span. The line-height is not effected by
the font-size. The line-height is 24px for div=block, p and the
span. Don't confused the CSS property line-height with the visual and
computed height.
I've been banging my head against this for a while now. I would greatly
appreciate any thoughts or suggestions!
~Kyle
Eric and Philippe have show some demos. The test case below may also
help. Change the first test to 0 line-height and the select show span
on the first test. In firefox, narrow the viewport so the Oo overlaps
the Xx. Have a play around with the various test.
http://css-class.com/test/css/text/linebox-line-height-011.html
[Please note that the values above is due to my default font for my browser]
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Site check please IE9/10
On 11/09/2013 7:01 PM, Albert van der Veen wrote: Thanks for the feedback, had it fixed. Turned out to be a problem with closing a button tag. I closed it like this: button type=submit title=Search class=searchbutton / which completely(!) messed up the page. Now it's closed this way button type=submit title=Search class=searchbutton /button and everything's fine :) I'm aware of the validation errors, there's a div that's not closed. But that's an error in the Magento code rendering the banner block on the right - have to track that down. Best, Albert Why are you asking for and IE9 and IE10 site check when the default mode is IE9 standards mode? Since the page Doctype is XHTML 1.0 Strict (being serve as text/html), you can only use the ' /' closing on empty element [1]. button is not one of them. 1. http://justinsomnia.org/2005/12/there-are-only-10-legal-xhtml-empty-tags/ Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] RES: RES: child margin affecting parent?
On 13/05/2013 12:20 PM, Philippe Wittenbergh wrote:
Le 13 mai 2013 à 11:08, COM j...@coffeeonmars.com a écrit :
On May 12, 2013, at 7:04 PM, Alan Gresley a...@css-class.com
Also, need to have a top margin value for the header so that I can
position it vertically where I need it to, so am I forced to use
padding for this?
Assuming the header is the first child of body, you could set
some padding-top on the body element.
The CSS got lost in the first few messages. The header is the child of
the wrapper.
#wrapper{
margin:0 auto;
width:940px;
padding:0 20px;
background-color:rgb(220,230,220);
}
header{
margin:20px 0 1em 0;
border:red 1px solid;
}
The vertically spacing can be added by giving the wrapper a margin-top.
I should have mentioned this in my initial reply.
#wrapper{
margin:20px auto 0;
width:940px;
padding:0 20px;
background-color:rgb(220,230,220);
}
header{
margin:0 0 1em 0;
border:red 1px solid;
}
Bare in mind though that the margin-top of #wrapper will collapse
through the default margin-top (of 8px) of body.
..off to read the link you provided
Good. And then create simple test cases to play with. Add a bit of
background colours to the elements in your test cases to see what
goes where. If you don't understand what happens in one (as minimal
as possible) test case, post it somewhere and ask questions to the
list.
Read all the links provided in the thread. You don't necessarily have to
learn hasLayout and IE7- since that is from the past.
Like Philippe, I highly recommend creating simple test cases. It a
collective of such activity that teaches all.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Layouts using multicol vs traditional style layouts.
Hello all, Here are some general questions. 1. Are there layouts that can not be achieved by using multicol [1]? 2. Do people use both traditional style layouts (floats, etc) together with multi-columns. 3. Is multicol still buggy in browsers. I have seen some spectacular ones with flexbox. My first test case shows that column with a valid value on an element establishes a block formatting context (make sense). This means that you can't use multicol for a sidebar and it must be float (or possibly absolutely positioned) and both the float and the multicol element must be given widths so you don't have overflowing of the viewport. 1. http://www.w3.org/TR/css3-multicol/ Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Image and background colour changes on hover.
On 13/05/2013 10:11 PM, Barney Carroll wrote: There are all sorts of ways of achieving this. The tersest is probably using pseudo-elements CSS: http://jsfiddle.net/barney/wBUsa/ If you need to target older browsers that don't support pseudo-elements, you can add extra markup into your list items instead: http://jsfiddle.net/barney/PQhVn/ Regards, Barney Carroll Barney is correct. This can be done with CSS. http://imageshack.us/scaled/landing/703/sdfdsf.png I will attempt a test case. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] RES: RES: child margin affecting parent?
On 13/05/2013 7:47 AM, COM wrote:
sorry for seeming dumb but why would adding padding prove its
collapsing margin?
Since padding on the parent prevents a child's margin to collapse
through. the same applies if you had a border on the parent.
wrapper contains header in this case, plus, I have other child
objects whose top margin value will not do this.
Be interested to know all the properties and values.
is there some special property to the header tag? I realize that's
HTML…
No, you simply have collapsing margins. Just change the value of the top
margin to zero. Like so.
header{
margin:0 0 1em 0;
border:red 1px solid;
}
This test case should shed some light on collapsing margins.
http://css-class.com/test/css/box/margins/collapsing-margins.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] desktop ie/9 windows 7
On 13/02/2013 1:44 PM, David Laakso wrote:
Greetings,
There are 3 spheres on the page and all of them are sort of like
upside-down in ie/9 when compared with ff, opera, safari, gecko, and
chrome. And, yes... the digit[s] should be rotated in all browsers.
Now what I'll do?
markup
http://ccstudi.com/
css
/*sphere and page numbers for #content, nav, and footer */
#content::before,
#page::before,
footer:first-child+div aside::after{background:url(../img/e4.svg)
100% 0 no-repeat;-webkit-transform: rotate(-90deg);-moz-transform:
rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform:
rotate(-90deg);background-size:100%;color:rgb(150,177,218);display:block;font-family:'MuseoSlab300Regular',Georgia,serif;font-weight:normal;line-height:1.4;width:1.4em;height:1.4em;text-shadow:2px
2px 5px #333,1px 1px 1px #ccc,-1px -1px 1px #ccc,-1px 1px 1px #ccc,1px
-1px 1px #ccc!important}
#content::before{font-size:770%;text-align:center;float:left;margin-left:-10%}
#page::before{border-top:10px solid
rgb(150,177,218);font-size:703%;position:absolute;top:600px;left:0;text-align:center}
footer:first-child+div aside::after{font-size:720%;margin:.25em auto
0 auto;text-align:center;}
Thanks.
Best,
David Laakso
IE9 doesn't support CSS transforms.
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] badly broken links on CSS-d wiki
On 7/12/2012 4:21 AM, Ti Strga wrote: Hello! I've been handed a problem with CSS, and was reading over http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex in the hope of learning enough to solve it. The wiki article depends on graphics linked to (not embedded) from that page, presumably showing examples of how layering works. Unfortunately, all of the image links return a 403, and the article is extremely difficult to follow without seeing the effects of the changes being discussed. I visited briefly to the top of the linked-to domain (michael4css.info) but there's no viewable page there, just the raw directory structure (that seems to have not been modified in years, so the site may no longer be maintained). The talk/discussion page for Overlapping_And_ZIndex doesn't exist, so if this has been brought up before, there's no record of it on the wiki itself. Is there somebody with both (a) write access to the wiki, and (b) some idea of where the images might be located these days, who would be willing to fix the broken links? back to staring at firebug, Ti Maybe a edit of that whole section of the wiki will help. The images can be accessed by the directory. http://www.michael4css.info/images/wiki-stacking/ A lot of the confusion originally was due to how IE6 and IE7 incorrectly implemented z-index. These test may also help. http://css-class.com/test/css/visformatting/layers/z-index.htm http://css-class.com/test/css/visformatting/layers/pos-ab-and-pos-rel-layer1.htm Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Opera/12.11
On 24/11/2012 2:55 PM, David Laakso wrote:
On Fri, Nov 23, 2012 at 10:07 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
My error?
Or, an Opera bug?
Possibly moving target but I did find this,
footer {
background:url(../img/e3.svg) 65% 100% no-repeat;
background-size:25%;
clear:both;
margin:0 auto 3.125em auto;
padding-top:1.7em;
width:92%
}
and Opera is showing three spheres.
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Inline media queries?
On 31/08/2012 8:47 AM, Micky Hulse wrote:
Correction:
Better yet, is that a valid idea?
I meant to say valid code.
I've just tested:
div style=height: 20px; background-color: #000; @media only screen
and (min-width: 1005px) { background-color: #eee; }/div
It don't work none. :(
Back to the drawing board! :D
Thanks,
M
Media queries usually contain selectors.
http://www.w3.org/TR/CSS21/media.html#at-media-rule
Could you use embedded style in the head element? Also since you have
inline style, you need to use '!important' to override the inline style.
!doctype html
style type=text/css
@media only screen and (min-width: 1005px) {
div { background-color: #eee !important; }
}
/style
div style=height: 20px; background-color: #000;v/div
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] odd space appearing in IE8
On 9/08/2012 8:58 AM, Philippe Wittenbergh wrote: Le 9 août 2012 à 03:41, David Hucklesby a écrit : Well, this article explains this in terms of a top margin. Bottom margins behave the same way--but not in all browsers, it seems. I admit that this continues to confuse me, too, as the behavior is inconsistent among browsers, as you have found out. http://reference.sitepoint.com/css/collapsingmargins This is a very special case of margin-collapsing in that the affected div has a min-height specified. As I noted in my first reply, this calls for a more complex behaviour. And it is in this very special case that browsers don't really agree on what to do with the bottom margin of that p. Here is a minimal testcase illustrating what is going on: http://dev.l-c-n.com/_temp/min-height_margin-b.html Philippe -- Philippe Wittenbergh http://l-c-n.com This has been discussed and debated on the CSS WG mailing list since 2008. It is CSS2.1 Issue 234 [1] which has now been closed. This will hopefully been dealt with in CSS3. Here is my own testcase (see example 3) [2] and a test case by Bruno Fassino (several of them) [3]. To my knowledge, the CSS WG is leaning toward IE8, IE9 and Opera 11+ behavior (they all behave the same) as being to most appropriate behavior. This would mean that IE8, IE9 and Opera 11+ are doing it correctly. 1. http://wiki.csswg.org/spec/css2.1#issue-234 2. http://css-class.com/test/css/box/margins/collapsing-with-min-height.htm 3. http://www.brunildo.org/test/collminmax.html -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] IE9 stacking opacity bug. Any real solutions?
On 31/07/2012 5:34 PM, Georg wrote: Apparently not. Georg I would most certainly need a reduced test case. I remember your multi-layer templates from the past. I did have a look and a play around and I also checked the latest spec [1] and saw the below words. I not even sure if IE9 is doing it wrong. | Since an element with opacity less than 1 is composited | from a single offscreen image, content outside of it | cannot be layered in z-order between pieces of content | inside of it. For the same reason, implementations must | create a new stacking context for any element with | opacity less than 1. If an element with opacity less | than 1 is not positioned, implementations must paint | the layer it creates, within its parent stacking context, | at the same stacking order that would be used if it were | a positioned element with ‘z-index: 0’ and ‘opacity: 1’. | If an element with opacity less than 1 is positioned, | the ‘z-index’ property applies as described in [CSS21], | except that ‘auto’ is treated as ‘0’ since a new stacking | context is always created. 1. http://dev.w3.org/csswg/css3-color/#transparency -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] border-radius and image corners
On 27/07/2012 12:26 AM, Tim Arnold wrote:
Actually, that's only kind of working. The problem with rounded
corners on images is, if you want to add any kind of border as well,
you're screwed. If you increase the border width on the demo at
http://www.mytechnet.talktalk.net/round-corners.html, you'll see that
the corner of the image will intrude, un-rounded, in to the border
color. It certainly works if you are simply rounding the image
corners, but the only solution I've seen that works reliably to draw a
border around the rounded-corner image is to make the image a
background image and apply your rounding and borders to the container.
Not a great solution for any number of reasons.
Any solutions not involving background images greatly appreciated!!
Tim
Each time you increase the width of the border, you must also increase
the border-radius by a corresponding amount. Like so.
img {
border:10px solid red; /* + 9px */
border-bottom-left-radius:29px; /* + 9px */
display: block;
}
The reason for this is that the curve is applied to the border-box (the
outside edge of the border). This is seen in the image found here [1]
under the initial description for border-radius.
1. http://dev.w3.org/csswg/css3-background/#corners
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] border-radius and image corners
On 27/07/2012 6:01 AM, Markus Ernst wrote:
Am 25.07.2012 14:43 schrieb John:
The code below produces a round-corner in the lower left, but an image
I place inside it doesn't have its lower left corner rounded..why is
that?
Besides the solution approaches already discussed, the why is because
rounded corners of a container do not clip the contents of the container.
I personnally think that this is not a good approach, and that it would
make common use cases easier to handle if the rounded corners of a
container would clip the contents, be it text or an image. If the author
does not wish the clipping, appropriate padding is needed anyway. I do
not see any use cases for not clipping the contents.
But for any reason the people who specify CSS seem to think differently;
I admit that I have not searched the archives of the CSS WG for
discussions on this topic.
Does overflow:hidden not work?
!doctype html
style
h1 {
background: yellowgreen;
border-radius: 50%;
width: 10em;
font-size: 500%;
overflow: hidden;
}
/style
h1This is a header/h1
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] background shorthand definition
On 17/06/2012 9:32 AM, Isabel Santos wrote:
so if I do:
#minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}
Ie9 and Opera 11.64 both get it pretty right,
but Google Chrome 0.3.1, Safari 5.1.7
and most notably Firefox 12 all give me the background:#bab9a9;
Philippe has already provided reasons why this is and a possible
solution but this could also be solved by creating a SVG with no
intrinsic size or ratio. Like so.
http://css-class.com/test/svg/ellipse/intrinsic-none.svg
This would allow you to the SVG is possibly more browsers. It will work
in Firefox but WebKit (Safari and Chrome) does have a bug with SVGs with
no intrinsic size or ratio with background-size that are not auto.
I believe you are attempting to use the slash shorthand as a filter for
browsers that don't support it. Maybe wrong. :-)
I'm getting kind of confused, does this mean the new shorthand only applies
to multiple backgrounds?
No. The can be single backgrounds. Here is one test with multiple
background layers that shows the potential of CSS. Working in IE9 and
Opera 11.64.
http://css-class.com/test/css/3/backgrounds/background-slash-shorthand.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Finding fallback fonts (for Calibri)
On 6/03/2012 6:21 AM, Markus Ernst wrote: On 5 March 2012 11:01, Jukka K. Korpelajkorp...@cs.tut.fi wrote: I tried to play a bit with font-size-adjust, too, but it's apparently still a Firefox-only feature and might not even be suitable for this. Any value seems to either make Arial too small or Calibri too big. If the same value for font-size-adjust leads to different visual experiences for different fonts, I assume that either the calculation of the aspect ratio is not good enough, or there is some fundamental problem with the concept of aspect ratio. Let's hope this will be improved until font-size-adjust will be a standard. FWIW, your discussion inspired me to a suggestion on font-size-adjust in www-style: http://lists.w3.org/Archives/Public/www-style/2012Mar/0085.html Here is a list of common 'serif font' fonts across various OS. http://www.codestyle.org/css/font-family/sampler-Serif.shtml Here is a tool to calculate x-heights over various font-size variations (by Bruno). http://brunildo.org/test/normal-lh-plot.html Here is a tool to compare various x-height of different fonts (by Bruno). Click the header for aspect. http://www.brunildo.org/test/aspect-lh-table2.html Some results that are close: aspect line-h span-h w Pristina 0.460 1.312 1.312 3277 KaiTi0.461 1.142 1.001 3328 Calibri 0.464 1.222 1.222 3346 Candara 0.464 1.222 1.222 3558 Corbel 0.464 1.222 1.222 3581 Cambria 0.467 1.174 1.174 3611 Book Antiqua 0.467 1.244 1.244 3996 Here is a test where you can check common fonts, there variation of x-height and line-height (very unfinished). http://css-class.com/test/css/text/linebox-line-height-011.html -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] IE7 showing gap
On 20/02/2012 2:57 PM, Ghodmode wrote: It's interesting that I can't reproduce this problem in IE9's IE7 mode. I can. Select 'Document Mode: IE7 standards' instead of Browser Mode: IE7'. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Browser Default Style Sheets Aggregate
On 16/02/2012 7:24 AM, Christian Ziebarth wrote: Is there any way to look up all the different default browser style sheets? Or, actually the main thing I am trying to suss out is what style rules have remained consistent through all default style sheets across browser, platform, etc. Has anyone already determined what these are? Christian Z. I can only state that since IE8 has appeared, User Agent Style Sheet Defaults have become almost interoperable between all browsers that I know. The table that I have created has not been checked or updated since 2008. http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm This one has IE6 to IE9. http://www.iecss.com/ -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] IE7 showing gap
On 20/02/2012 1:02 PM, e...@copywritecolombia.com wrote:
Hi thanks phu but that doesn't work, the navigation doesnKt have a gap on ie8
or 9 or ff - only on ie7, according to my 3rd party program:
http://alluresurgerycenter.com/ie7.jpg
Why is there this gap in ie7?
www.alluresurgerycenter.com
Thank you
This should work to remove the gap.
#suckerfishnav li li {
/* width:220px; DELETE THIS WIDTH */
font-weight:bold;
font-family: �Trebuchet MS�, sans-serif;
font-size:14px;
font-weight:normal;
}
If that affects good browsers, use this instead to target IE7.
*+html #suckerfishnav li li {
width: auto;
}
Take note that IE7- do not like Suckerfish menus with certain styles.
Please see these pages to understand why.
http://css-class.com/test/bugs/ie/calculated-offset-bug2.htm
http://css-class.com/test/bugs/ie/recalculatedoffsetbug.htm
http://css-class.com/articles/explorer/sticky/
If you didn't have this style,
#suckerfishnav li li:hover {
background-image:
url(http://www.alluresurgerycenter.com/images/ul_bg.png;);
}
you may have been asking why your menus were sticky in IE7.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] four-sided CSS3 drop shadow?
On 16/01/2012 4:15 PM, Ghodmode wrote:
On Sun, Jan 15, 2012 at 8:58 AM, Alan Gresleya...@css-class.com wrote:
Not so. There needs to be a forth value in the box-shadow string to indicate
spread. Something like this spreads the shadow evenly on all sides.
box-shadow:0px 0px 0.5em 0.5em gray;
The spec goes into some detail in explaining the variations of box-shadow
(see example 29 and 30).
http://dev.w3.org/csswg/css3-background/#the-box-shadow
Unfortunately the webkit variation doesn't support the 4th number:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-shadow
The blur radius will make the shadow appear on all four sides, though.
.box {
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
}
To my memory, all versions of Safari 5 has supported the forth value of
spread. I have found the patch for it here [1] which was landed in late
2010 (over a year ago). A test case.
!DOCTYPE html
style type=text/css
p, div { width: 10em; margin: 3em; font-size: 200%; box-shadow: 0 0 0
1em black; }
div { box-shadow: 0 0 1em 1em black; }
/style
pSome text shadow/p
divSome text shadow/div
1. https://bugs.webkit.org/show_bug.cgi?id=51448
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] four-sided CSS3 drop shadow?
On 15/01/2012 8:16 AM, Tim Climis wrote: On Saturday, January 14, 2012 4:06:30 pm Stephen Britton wrote: I am experimenting with CSS3 drop shadows. Most examples only show it working with two sides - usually the bottom and right or left side. Is there a way to have the shadow cover all sides - top, bottom, right and left? Here is some sample code that I have been working with. It only covers the bottom and right side. -moz-box-shadow: 8px 8px 8px #ddd; -webkit-box-shadow: 8px 8px 8px #ddd; box-shadow: 8px 8px 8px #ddd; You just have to make the spread of the shadow bigger than then offset. box-shadow: 0 0 4px #ddd; Or, with what you have: box-shadow: 8px 8px 10px #ddd; That'll give a 2px top and left shadow, and a 10px bottom and right shadow. ---Tim Not so. There needs to be a forth value in the box-shadow string to indicate spread. Something like this spreads the shadow evenly on all sides. box-shadow:0px 0px 0.5em 0.5em gray; The spec goes into some detail in explaining the variations of box-shadow (see example 29 and 30). http://dev.w3.org/csswg/css3-background/#the-box-shadow -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] CSS3 Opacity Inheritance
On 21/10/2011 2:15 PM, Elli Vizcaino wrote:
It seems like you get what inherit does/mean and and how it differs
from what happens to child elements of a parent with opacity applied.
Would you know how to explain the difference?
Try this code Elli.
!DOCTYPE html
style type=text/css
#parent {
color: white;
background: green;
}
#child {
color: red;
background: white;
border: 10px solid silver;
padding: 1em;
}
#child:hover {
color: white;
background: inherit;
}
/style
div id=parent
Parent
div id=childChild Element ~ hover me/div
Element
/div
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] DIV behind floating element
On 18/10/2011 9:14 PM, Ghodmode wrote: On Mon, Oct 17, 2011 at 4:08 PM, Philippe Wittenberghe...@l-c-n.com wrote: On Oct 17, 2011, at 4:40 PM, Ghodmode wrote: I have a problem where a DIV is behind a floating element. Given the following code, the DIV.banner appears behind the DIV.logo_block at the left edge of the page. I've discovered that setting overflow:auto on div.banner fixes the problem, but I don't know why. Can someone help me to understand why this is happening? 'new block formatting contexts' http://www.w3.org/TR/CSS21/visuren.html#block-formatting That didn't do me any good. It doesn't say anything related to the scenario I've described and doesn't help me understand it. It does have a link to an explanation of the visual formatting model, though. It states the following: The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. To me, this sounds like the edge of the DIV.banner must not overlap the edge of the DIV.logo_block, even though that seems to be exactly what's happening. But, like I said, there's something I don't understand. A DIV is an element in the normal flow that establishes a new block formatting context and its default overflow value is 'visible', right? So the preceding floated element should be cleared and the DIV.banner should be placed adjacent to it because there is sufficient space. So, what do I have wrong? Thank you. Did you read this. | In a block formatting context, each box's left | outer edge touches the left edge of the containing | block (for right-to-left formatting, right edges | touch). This is true even in the presence of floats | (although a box's line boxes may shrink due to the | floats), unless the box establishes a new block | formatting context (in which case the box itself | may become narrower due to the floats). So in your code, the div.banner_placeholder left edge is touching the left edge of the 'initial containing block' so applying overflow: auto makes the later part happen. | unless the box establishes a new block formatting | context (in which case the box itself may become | narrower due to the floats). More precisely, a box with a 'block formatting context' can not flow underneath a float but rather it sits beside it. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] I must be a moron, How to reply to messages
On 18/10/2011 2:15 PM, Michael Fokken wrote: I must be a moron, how do I reply so that it goes under the question in the thread? It did it once, but not the other two answers? I did try looking through the site, but no go. Sincerely, Michael Fokken Do you have an email client that has 'reply' or 'reply to all'. Anyway, you want your replies correctly threaded. If you want to learn more, contact me off list before this thread is deemed off topic. BTW, welcome to the list. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Floating Boxes Text Wrap Help
On 10/10/2011 12:17 AM, Jeff Ferrell wrote:
*Sigh* -- I'm getting nowhere with this and hoping someone can help.
On pages like this http://rchseaglesnest.org/extra/dread-test/ and
this http://rchseaglesnest.org/pumpkin/, I've got some boxes floated
to the right -- one holding an image, and the other, beneath it, that
can potentially hold a list of links. Depending on the size of the
image and the length of the links list, widths and heights may vary.
Right now, I've got both boxes contained in another div, so the
structure's roughly like this:
div#container div#photo /div div#links /div /div
I'd like for the surround text to wrap in around the narrower links
box. But if I take the container div away, the links box ends up a
considerable distance further down the page, all by itself. Can
anyone explain that behavior for me? The only way I've found to keep
both boxes together is to wrap them inside that other div, which
gives me gap in the body text I'd rather not have.
Is there any way to get the text to flow the way I'd like? Or am I
just stuck?
Thanks! Jeff.
I guess you have not noticed the below CSS contained in the selectors on
line 1078 and line 1877.
#review-meta-container, #post-meta-container {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
#post-meta-container {
float: right;
}
It seems to work (text flowing around boxes) if you change the later to
this.
#post-meta-container {
float: none;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Floating Boxes Text Wrap Help
On 10/10/2011 2:54 AM, Jeff Ferrell wrote:
On Oct 9, 2011, at 10:03 AM, Alan Gresley wrote:
I guess you have not noticed the below CSS contained in the
selectors on line 1078 and line 1877.
#review-meta-container, #post-meta-container { float: right;
margin-left: 10px; margin-bottom: 10px; }
#post-meta-container { float: right; }
It seems to work (text flowing around boxes) if you change the
later to this.
#post-meta-container { float: none; }
Ah yes, sorry -- that's some needless doubling-up. (The fact that
there exists a line 1877 in my css is a good indication that I have a
lot of cleaning I need to do!)
I would say so and all those extra style sheet. I couldn't maintain that.
Let me make sure we're seeing the same thing.
Sounds good.
(I'm only looking at
Chrome and Firefox for right now, btw.) When I change the float to
none (actually, I removed line 1877…no need for it), *I* see the
layout that I added the container to try to avoid. It looks like
this: http://ferrellweb.com/temp/no-container.gif -- is that what
you're seeing?
No.
The effect I'm trying to achieve (ideally) is this:
http://ferrellweb.com/temp/desired.gif
Yes, that seem right.
But my floated container div is (predictably) giving me this:
http://ferrellweb.com/temp/container-div.gif
That's what you would expect by floating it. Since you have removed the
CSS starting at line 1877, lets move on to the part beginning at line 1078.
#review-meta-container, #post-meta-container {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
Change it to this.
#review-meta-container {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
If you do that, you don't even need div#post-meta-container but it
doesn't hurt to just be there.
(Whoops. I trimmed off some important bits. Actual page examples in
question again: http://rchseaglesnest.org/extra/dread-test/ and
http://rchseaglesnest.org/pumpkin)
Jeff.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] :: ie 6/7 ::
On 30/09/2011 10:45 PM, Tom Livingston wrote:
The J is entirely visible in ie6, but still cut in ie7. The layout
http://chelseacreekstudio.com/
The letter 'O' is covering the letter 'J'. This hack will work (should
also work in IE6).
*:first-child+html nav P B#c1 {
margin-bottom: -0.25em /* minus value to cater for the extra line
height */
line-height: 2;
}
Tested in IE7 comp mode in IE9.
BTW Bill, IE10 preview 3 is cool but not Win8. Freshly formatted machine
with trusty IE9. :-)
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] IE7 Emulation (WAS IE 7 DROP DOWN MENU HANG CHECK PLEASE)
On 14/09/2011 12:54 AM, Elli Vizcaino wrote: This sticky drop-down menus in IE7 can be turn on and off very easy. You say you have Windows so I can not understand why you would not have at least IE8. If this is correct, you can check IE7 by using IE7 emulation mode in IE8. Forgot to mentioned that I'm on IE9. And I used to rely on the browser sandbox at http://www.spoon.net/Browsers/ - they used to have all versions of IE, inclduing IE6 but they were removed. Now I'm going to have to set something up - though I must admit real techy stuff like that intimidates me lol. That's why spoon was perfect but not anymore. OK, just checking IE7 emulation mode in IE9. This bug, http://css-class.com/test/bugs/ie/recalculatedoffsetbug.htm is not working as it should in IE7 mode in IE9 (it was correct in IE8). There is a IE7 mode that does work in IETester. http://www.my-debugbar.com/wiki/IETester/HomePage Download that and you will get to see IE7 in or it's infamous glory. I have documented quite a few IE7 bugs here. http://css-class.com/test/bugs/ie/ie-bugs.htm -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Drop Down Menu On Hover Testing Please - IE 7
On 12/09/2011 4:33 PM, G.Sørtun wrote:
On 12.09.2011 05:45, Elli Vizcaino wrote:
I would greatly appreciate it, if a number of you would take a look
at this site http://e7flux.com/dfd/ and hover on the word About in
the nav.
In IE7 the dropdown hangs (stays open) if mouse-pointer is moved anyway
but straight upwards, and as the image...
http://www.gunlaug.no/tos/alien/ev/ev-ie7.png
...shows the list-items in the dropdown don't line up properly in IE7.
regards
Georg
IE7 needs a kick along as the current CSS stands to align the menu items
correctly.
*:first-child+html #main-nav li ul#sub-nav li {
float: none;
}
*:first-child+html #main-nav LI UL#sub-nav A {
display: inline-block;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] FF4 and FF5 was (Sticky Footer Cuts Off In FF 4 5 Both Mac Windows)
On 12/09/2011 4:20 AM, Beth Lee wrote: Yes, that helps and there was never any real problem other than that in Mac OS X 10.4 FF/3.6.22. Not true. The problem was showing up in Vista FF/4.something-or-other, and I'm no deviant. I don't think I one either but this talk of FF3, FF4 and FF5 has got me confused. On Windows 7, FF4 was replaced within a week by FF5 and FF5 lasted about 2 months. I now have FF6.0.2 on my machine. There is no mention of which build of Gecko this is. Are you saying that there is only version 4 and 5 of FF on Mac? -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] FF4 and FF5 and FFcomingfast
On 12/09/2011 11:19 PM, Elli Vizcaino wrote: I don't think I one either but this talk of FF3, FF4 and FF5 has got me confused. On Windows 7, FF4 was replaced within a week by FF5 and FF5 lasted about 2 months. I now have FF6.0.2 on my machine. There is no mention of which build of Gecko this is. Are you saying that there is only version 4 and 5 of FF on Mac? No, what I mean is FF 4 5 were the 2 offered for testing on both Windows and Mac via Adobe Browser Labs. I don't understand why. FF4 only got to FF4.01 for general users. I'm still on version 3.6 on my own machine because the upgrade to FF4 was incompatible with Firebug and I didn't want to compromise my development process. Firebug is like a lifeline! lol. Not sure how versions 5 6 are with Firebug. Know anything? Elli There is a way to have multiple profiles of Firefox but when I did that to keep FF4, I broke the task-bar icon for FF5. This has corrected itself by allowing FF5 to auto update to FF6. I do know that using profiles is not as easy on Mac. In my opinion, there is no difference between the rendering of FF4, FF5 and FF6. Depending on how many machines you have, you can always download old versions of FF (copy and paste the link into a browser or it loads in Windows Explorer on Windows). ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/ I have never used Firebug (I use the web developers toolbar) but some versions have support for FF6. http://getfirebug.com/ Please don't ask me why it has Firefox 9 (nightly). -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Drop Down Menu On Hover Testing Please - IE 7
On 12/09/2011 11:25 PM, Elli Vizcaino wrote:
In IE7 the dropdown hangs (stays open) if mouse-pointer is moved
anyway
but straight upwards, and as the image...
http://www.gunlaug.no/tos/alien/ev/ev-ie7.png ...shows the
list-items in the dropdown don't line up properly in IE7.
regards Georg
IE7 needs a kick along as the current CSS stands to align the menu
items correctly.
*:first-child+html #main-nav li ul#sub-nav li { float: none; }
*:first-child+html #main-nav LI UL#sub-nav A { display:
inline-block; }
Alan, this sounds like alot of extra code and is this a hack?
It sure is. The reason that you see this,
kenzi's kids Board
of
directors
in the screenshot by Gorge for IE7 is because the list items are floating.
Shouldn't #main-nav li ul#sub-nav li {float: none;} suffice? I added
float none to the rule.
Not if you wanted it to appear the same as it was before. This has
changed the appearance in all browsers. Now the dotted underline spans
the full width of the list items when you hover. That why I added
inline-block for IE7 on the links 'a' since the causes the dotted
underline only to appear only under the anchor links. inline-block
causes the anchor links to shrink wrap the text.
Can you be so kind and check it to see if
that does it. I just don't believe in adding extra code if not really
necessary.
Thanks! Elli Vizcaino
This is how it appears in IE7 and all other browsers.
http://css-class.com/x/ie7-elli.png
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] IE 7 DROP DOWN MENU HANG CHECK PLEASE
On 13/09/2011 12:43 PM, Elli Vizcaino wrote:
I found this on a possible fix:
http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/
- I added #main-nav li.about:hover { position: static;} Can someone
please confirm that this works in IE7 and the sub menu NO longer
hangs or freezes. http://e7flux.com/dfd/index.html
Much appreciated!
Elli Vizcaino
This sticky drop-down menus in IE7 can be turn on and off very easy. You
say you have Windows so I can not understand why you would not have at
least IE8. If this is correct, you can check IE7 by using IE7 emulation
mode in IE8. The sticky drop-down bug is described here.
http://css-class.com/articles/explorer/sticky/
and just a simple change like background-color,
http://css-class.com/articles/explorer/sticky/stickybug2.htm
can fix the bug.
My article and the article on Built from source is describing a bug that
requires JavaScript for IE6 support. Since I see no JavaScript in your
code, this is not the bug that someone has observed.
I cannot link from this list archives since they stop at the 1st of
September but from my inbox, I can see that it was Chetan that noted this.
In IE7-WinXP, once the drop down menu appears it stays visible even after
moving the mouse outside.
Regards,
Chetan Crasta
Chetan, can yob please described what you observed.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] ID Selector Question
On 10/09/2011 1:38 PM, Mary Villanueva wrote:
Greetings all,
Hello, Yucca has already answered the majority of you questions.
I want to understand this syntax so that I can
be assured that I'm not inadvertently building something that is going to
fall apart in IE8 backwards.
I presume you are referring to IE7 and backwards. IE8 and IE9 has made
great strides in many aspects of standards support. With IE7 you often
have to give it alternative style rules. This is usually achieved by
providing CSS that has a selector with greater specificity.
*:first-child+html #blueDropdowns { ... }
*:first-child+html .About { ... }
And here’s the partial CSS for the dropdown menus. I hope it’s enough to
help. Thanks in advance for your kind assistance! - Mary
#blueDropdowns /* About Us Navbar Menu */
{
margin:0;
padding:0;
height:1em; /* Opera hack - has a width of 100% by default */
}
This hack for Opera is just not needed. If this is the case, then the
styling is fundamentally flawed.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Win IE 6 issues
On 10/09/2011 3:56 AM, John wrote: On Sep 8, 2011, at 10:26 PM, Alan Gresley wrote: John, if you have IE8 or IE9, you can use the developer tools to show IE7 emulation mode. Select the key 'F12' at the top of your keyboard. Here is IE6 (on the left) and IE7 (emulation mode) side by side. http://css-class.com/x/coffee-ie6-ie7.png OK..can I get IE 8 or 9 and still keep the Beloved and Venerable IE 6? Yes. http://www.my-debugbar.com/wiki/IETester/HomePage This reproduces IE6 quite well. What window OS do you use. If you use Windows 7, then you can download IE9. If you have Window XP, your in trouble since I don't think that you can download IE8. also, in both cases you show in that PNG, why does my type get pushed down like that? I just tried eliminating my top head, and making it graphic, and still the center type gets pushed down? only in explorer does this happen. thank you John It does not happen in IE8+ since the layout engine was rebuilt. There are two fixes for IE7. One solution is the one that David has provided. The other solution is to the add clear: left to the div#SideMenuHead_Home. The bug that IE7 is showing is demoed here. http://css-class.com/articles/explorer/floats/floatandcleartest1.htm The bug is shown in Example 2a and the solution is shown in Example 2b. Since you do not seem to have IE7, this is what is happening. The first float (the header) pushes the second float div#SideMenuHead_Home down below it. This is what should happen but this causes trouble in both IE7 and IE6. See the dashed line () as the margin-top (+++ is the margin area) of both the div#SideMenuHead_Home (indicated by menu) and the header (indicated by Featured UX project). This is what is happening now. X X X X X X --- +++ menu+++ +++ +++ Featured UX project This should be what is happening (the margin-top goes under the first float). X ---X X +++X X +++X +++ +++ menuFeatured UX project Now IE6 is doing something else which I do not follow. David fix will help. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Win IE 6 issues
On 9/09/2011 10:14 AM, David Laakso wrote:
On 9/7/11 11:15 PM, John wrote:
re:
http://www.coffeeonmars.com/testing/index.html
/*4ie7*/
*:first-child+html #TextHead_Home { margin-top:58px }
/*4ie6*/
* html #TextHead_Home { margin-top:58px; }
* html #BannerText { position: absolute; top:0; left:67px; }
reference:
http://www.satzansatz.de/cssd/onhavinglayout.html
Best,
~d
This has nothing to do with hasLayout (the static box does not have
hasLayout in the below demo). IE7 will work as it should if there was
one less float (see float 2 in the below demo) in the source where IE6
would still have trouble since overflow: auto does not trigger
hasLayout. Test case.
http://css-class.com/test/bugs/ie/5~7/margin-top-after-floats.htm
John, if you have IE8 or IE9, you can use the developer tools to show
IE7 emulation mode. Select the key 'F12' at the top of your keyboard.
Here is IE6 (on the left) and IE7 (emulation mode) side by side.
http://css-class.com/x/coffee-ie6-ie7.png
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Win IE 6 issues
On 9/09/2011 10:14 AM, David Laakso wrote:
On 9/7/11 11:15 PM, John wrote:
re:
http://www.coffeeonmars.com/testing/index.html
* html #BannerText { position: absolute; top:0; left:67px; }
David, if someone was to have a larger text-size setting in any browser,
that banner text will not be centered vertically within the center of
the header (.UX_Logo). The current positioning of the banner text is
done with this CSS.
margin: 40px 0 0 160px;
This should be removed. The template that I did for John had this,
line-height:100px;
and was IE6 friendly and the banner text would always be centered
vertically even after line wrapping.
The header explosion in IE6 seems to be more due to some escaping float
bug. Please view in IE6.
http://css-class.com/test/bugs/ie/5~7/margin-top-after-floats.htm
The static container (div.CenterColumn_home in John's page) is sitting
below the first float and this is why the banner text is misplaced since
it sitting 40px below the top edge of the container due to the
margin-top of 40px.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Win IE 6 issues
On 8/09/2011 8:58 AM, John wrote:
I have a page which Safari and Firefox (Mac and Win FF) display
correctly but Win IE 6 gets a few things really wrong.
3 BIG things I see: mangles my header type at the top...instead of being
vertically centered to the logo, it pushes the dark gray bar down and
sits at the bottom of that bar, and pushes the other type down.
Please take a look at my reworked code in IE6. The first time tested and
I see that all is well.
http://css-class.com/x/coffee.htm
and finally, Win IE 6 doesn't handle menu states correctly. IE 6 shows
Hover and Active (Mouse Down) but won't let go until another menu choice
is clicked on.
The same thing happens in IE7. IE5, IE6 and IE7 handle the 'active'
state as if it was in 'focus'. Now since neither of the browser support
:focus, I would recommend that you hide such styling from these browsers
if this bothers you. On a side note, active is only seen for a fraction
of a second until you lift your finger from the mouse. You won't see the
active state for long since the page that is linked to begins to load.
Testing with null links ('#') will not fully help.
a href=#Null link with #/a
Can anyone kindly share hacks or workarounds to make this problems
disappear?
The page in question is here:
http://www.coffeeonmars.com/testing/index.html
Thank you!
John
Are you bothered by the scroll-bars in IE6? Are you concerned that the
Featured UX project: Wisconsin Public Radio header is lower in IE7?
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] z-index on menu
On 6/09/2011 11:03 AM, Debbie Campbell wrote: Can someone point out what's covering the left side of the top menu in IE8 in this site? http://www.signwithprestige.com/test/classes/ It's the image below and it only is seen once this image is hovered. I can not track it down in the CSS so this may be an error in the JavaScript. BTW, when JavaScript is disabled, there is overlap due to 'https' link being shown as a URI and not as a text link. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Image causes scrollbars; header gets weird
On 3/09/2011 12:00 PM, John wrote: On Sep 2, 2011, at 5:53 PM, Tom Livingston wrote: Did you fix the second issue? I don't see a problem, other than the lack of semantic elements, like h1 around John A. Johnson: UX... the second issue is still an issue. good to know about the semantic angle; I thought I was good to go choosing my own names, but..I guess not. thank you! J The choice of your names are fine but you are making it harder for yourself. To get the big picture *less is better* CSS and semantic HTML is designed to make your role as a web designer easier. Take a quick look at the word semantics [1]. | Semantics is the study of meaning. It focuses | on the relation between signifiers, such as | words, phrases, signs and symbols, and what | they stand for, their denotata. Now apply this to HTML elements. CSS is solely designed to visually style this semantic structure and this can be done very easy. http://css-class.com/x/coffee.htm Please find the style in the header. BTW, all the TextBodyBlockA_Home, TextHeadOne_Home and other such classes confuses me. 1. http://en.wikipedia.org/wiki/Semantics -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] CSS Organization
On 1/09/2011 7:31 PM, Tim Dawson wrote: On 31/08/2011 17:34, Kevin A. Cameron wrote: The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim On 31/08/2011 19:00, Kevin A. Cameron wrote: I'm guessing that was preprocessors, the likes of LESS or SASS. Kevin Thanks, Kevin. That would be unknown territory for me at present. I expect I'll have to go there eventually. Tim http://sass-lang.com/ | Sass makes CSS fun again. Sass is an | extension of CSS3, adding nested rules, | variables, mixins, selector inheritance, | and more. It’s translated to well-formatted, | standard CSS using the command line tool or | a web-framework plugin. I myself just love to code raw CSS or CSS3. The only processor I use is my brain. On a CSS note, a mutated version of SASS was on the verge of being added to CSS3 [1] until I started considering the parsing nightmare of such CSS and objected [2]. The reason being is that UAs parse CSS in many different ways. One such test series. http://css-class.com/test/css/parsing/escapes.htm That is just using escapes. It is far worse with other CSS tokens and to change the rules of CSS parsing when such UAs are so fragile would do much damage to CSS and backward compatibility. 1. http://lists.w3.org/Archives/Public/www-style/2011Jun/0022.html 2. http://lists.w3.org/Archives/Public/www-style/2011Mar/0553.html -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Off-topic : was IE6, IE7, IE8, IE9
On 26/08/2011 7:39 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: If, at the time of development, no more recent version of IE than IE6 was available, then they may have had little alternative, IMHO. Philip Taylor Very true and off-topic. This debate will also apply to IE7, IE8 and IE9 and could be flame war material for another 10 years. MS itself is doing it best to rid the world of Internet Exploder (IE7-). IE became CSS2.1 compliant with IE8 and finally IE supported a fair bit of CSS3 with CSS3 selectors, CSS3 background and borders, CSS3 color and many other CSS3 modules with IE9 bringing IE on par with other web browsers. IE10 will have much the same support as WebKit and Gecko. Opera is going to be the browser that is behind the pack. Progress can only happen when we (a web community involving users, authors and etc.) are willing to let go of the old. BTW, this debate is off-topic as Philip has indicated. I do not expect any replies to this email since this thread has nothing to do with *can style sheets be too long*. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] IE6 and wirting-mode
On 26/08/2011 7:55 AM, Tim Climis wrote: It depends on your audience. I work primarily with international students, so the 30% of China, and the 17% of South Korea still using IE6 is a major concern. It may not be for your purposes. ---Tim There may be a very good reason for this. Please view this test in IE6. http://css-class.com/test/css/bidi/kanji-test2-extra.htm Uu-prefixed vertical writing-mode has been supported by IE6 for 10 years now. Chinese, Japanese and Korean all have vertical writing modes. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] IE6 almost standard mode and quirks mode
On 26/08/2011 10:02 PM, Geoff Lane wrote: On Friday, August 26, 2011, 12:15:48 PM, bruce.som...@web.de wrote: One can support IE without making use of proprietary features available only with IE. That's never a good idea. While that's easy to say with hindsight, it wasn't so readily apparent at the time and many of us produced applications that: 1. for various reasons, we were commissioned to produce that way; and 2. we had no good argument to counter our customer's requests to do so. [snip] With all that said, this is on topic for CSS discussion IMO as it highlights a very good reason to consider support for IE6 for some time yet. What mode was IE6 in? Almost standards mode or quirks mode (like IE5)? http://hsivonen.iki.fi/doctype/ -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Hidden HRs
On 24/08/2011 4:54 AM, Claude Needham wrote:
On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpelajkorp...@cs.tut.fi wrote:
It would probably be more robust to use a background image that
consists of a horizontal line, positioning it suitably using the em unit, so
that the position gets adjusted by font size. What I mean is
pspan.../span/p, with such background set on thep and with
suitable padding (and solid color background) on thespan.
Jukka, hopefully that is not a background-image containing a URL since
gradients are far superior.
I thought the lines were a fun idea.
But, also had some misgivings about how robust this particular solution was.
I've tried the following and found it fairly stable in the half-dozen
browsers I tested it in. I live in a zero bar geography so no mobile
tests at the moment.
h2 {
border-bottom: 2px solid #00;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h2 span {
position: relative;
top: .45em;
border-bottom: none;
background: #ff;
padding-left: 1em;
padding-right: 1em;
}
Regards,
Claude Needham
No need to add extra elements or position: relative or borders (unless
you want to support 1E9-).
Going to the original page.
http://trentwalton.com/examples/cowpoke/
Replace the style declarations for h1#company and p#tagline with this
CSS based in ems. I do expect it to work consistently.
h1#company {
font-size: 4em;
text-transform: uppercase;
font-weight: normal;
}
#tagline{
font-size: 2em;
background-color:#fefee8;
font-style: italic;
margin-bottom: 0.7em;
background: url(line-background-for-ie9876.jpg) center;
background: -webkit-linear-gradient(left, #fefee8, #fefee8),
-webkit-linear-gradient(left, black, black);
background: -moz-linear-gradient(left, #fefee8, #fefee8),
-moz-linear-gradient(left, black, black);
background: -ms-linear-gradient(left, #fefee8, #fefee8),
-ms-linear-gradient(left, black, black);
background: -o-linear-gradient(left, #fefee8, #fefee8),
-o-linear-gradient(left, black, black);
background: linear-gradient(to right, #fefee8, #fefee8),
linear-gradient(to right, black, black);
background-size: 7em 2em, 100% 0.07em;
background-position: center, center 0.7em;
background-repeat: no-repeat;
}
I call this technique, 'block color gradients'. Here is a demo showing
how it works.
http://css-class.com/test/css/3/gradients/gradient-art.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Vertically aligning two boxes
On 16/08/2011 8:45 PM, thameera...@gmail.com wrote:
I'm a CSS noob and trying out various stuff these days. So please tell me,
how can I vertically align the two boxes in the following layout? (That is I
want the right hand side box to the level of the left one)
http://cssdesk.com/X7YYG
By floating the div.title. Try this.
.title {
font-size:22px;
width:200px;
text-align:center;
/* display:inline; DELETE since floats are always display:block */
float:left; /* ADD */
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Positioning Problems
On 5/08/2011 8:35 PM, Darrin Roenfanz wrote: Good morning fellow listers! The past couple days, I've been toying around with a test design for my yet-to-be-published website. Except for edges not lining up exactly, the design happens to work just about right with my current install of Firefox (I think it's FF6b2) on Win7. While the CSS I've hobbled together seems to get the job done, I don't think it's the most elegant or effective way to do it. I should also mention that the behavior almost works in IE9 as well, but the absolutely positioned elements don't stick where I think they're supposed to stick. Instead of attempting to describe the layout, I've included a link to a snapshot of how it's supposed to look (See: http://roenfanz.info/images/dcr_preview.png ). Since it's a test case, I thought I'd try out some HTML5, which probably causes rendering issues unless equipped with the most up-to-date browsers. (In retrospect, I should stick with my trusty HTML 4.01, but that's out of the prevue of this list.) Could the kind CSS Listers please go over my design and maybe help polish things up? See: http://roenfanz.info/projects/dcr.v2.5/ Thanks in advance, Darrin C Roenfanz I see nothing wrong in IE9. Are you sure you are not in IE8 mode? BTW, Since you are using HTML5, why are you not using type selectors like 'header' or 'nav'? -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] parse error on *html
On 29/07/2011 6:36 PM, Mark Henderson wrote: Philippe wrote: In a decent browser, it won't select anything and nothing though... That hack relies on the fact that the simple little mind of IE 67 ‘thinks’ there is an element that wraps around the root element (html). Of course there is none. And Alan responded: This is not correct. For IE6 and earlier, there is an element outside html. [..] This means that IE6- sees this. root-container html .../html /root-container Perhaps this comes down to interpretation. Putting things in a different light, let's assume that Philippe was talking with regards to the specifications (that's how I took it) and they say that html _IS_ the root. http://www.w3.org/TR/html4/struct/global.html#h-7.3 http://en.wikipedia.org/wiki/HTML_element#Document_structure_elements So it doesn't matter that the IE developers forgot they had implemented some hidden node outside ofhtml, to my mind what Philippe said /was/ still correct. Just an opinion. I should have said that it is not completely correct about there being no node wrapping around html in IE6-. The rest of what Philippe said is correct. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] parse error on *html
On 29/07/2011 12:27 PM, Philippe Wittenbergh wrote:
On Jul 29, 2011, at 9:45 AM, David Laakso wrote:
There should be a space between the star and html:
* html .whatever {...}
Indeed.
This will not make it valid.
Nope. * html {} is perfectly valid (CSS1, 2, 3, 4, and beyond).
In a decent browser, it won't select anything and nothing though...
That hack relies on the fact that the simple little mind of IE 6 7
‘thinks’ there is an element that wraps around the root element
(html). Of course there is none.
Philippe -- Philippe Wittenbergh http://l-c-n.com/
This is not correct. For IE6 and earlier, there is an element outside
html. I received this message offlist (not stating the list) in 2008.
| I mean the fact that
| * html {...}
| Ever applied to anything was a bug. I wrote the
| original selector-matching code that had this bug
| in it. We had a special hidden root container
| node in our element tree for some internal reasons,
| and I forgot to explicitly skip it in the selector
| node matching code. We didn't discover this for
| years. :)
This means that IE6- sees this.
root-container
html ... /html
/root-container
This bug was partly corrected in IE7 but the universal selector '*' was
now selecting the !doctype as if it was an element. This is why a
sibling selecting was needed in the IE7 only hack.
*+html { /* IE7 style */ }
!doctype + html
For anyone following this thread, the below article gives some history
of IE hacks (with links). The article is worded to suit the times of IE8
beta release.
http://css-class.com/test/bugs/ie/ie-hacks.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] 100% height issue, and graphic placement q's
On 26/07/2011 9:06 AM, John wrote:
On Jul 22, 2011, at 7:17 AM, Alan Gresley wrote:
Delete the whole declaration block of _body:after_ and amend these two
style blocks.
.livebar {
width: 770px;
min-height: 100%;
overflow: auto;
margin: 0px auto;
background-color: #626862;
}
* html .livebar {
height: 1%; /* For IE6 since overflow: auto does not trigger hasLayout */
}
Alan: if you don't mind, a few questions about this code? I've been
tinkering and entering what you supplied above a line at a time to get a
feel for what each bit does.
Why'd you go with width: 770px? I was thinking my smallest likely
monitor would be 1024, and if they had a larger monitor and could widen
that, THEN they'd see the lighter background to either side. Just
wondering if yours was an aesthetics decision or had some other
code-based reason?
No, I used the 770px because that was the width that was there and it
seem to be the same width that you had with the original layout here (I
had to search a bit to find the link to the page that this thread was
about).
http://www.coffeeonmars.com/page.html
You could use 1024px but if you do use pixels, you may have trouble with
overflowing content if a very large font-size is used by the user. You
could use min-width: 1024px. BTW, IE6 treats width as min-width due to
the expanding box bug so you CSS would have.
.livebar {
min-width:1024px;
}
* html .livebar {
width:1024px;
}
Also, the *html .livebar bitthat is IE-specific, I'm getting,
I should mention that it is '* html' (with whitespace) and not '*html'
(without whitespace). The former is a valid CSS selector which only
IE5~IE6/Win and IE5/Mac will use. The later in an invalid CSS selector
(there is no element *html) and IE7 will use it. IE7 doesn't need it
since overflow: auto triggers hasLayout.
but
how does one even know what to drop in there? I guess years of getting
knuckles scraped by Explorer? Or, is there a repository of such things?
That is why I added this CSS comment.
/* For IE6 since overflow: auto does not trigger hasLayout */
Since you have floated content, you need to declare on the parent
element a property/value that establishes a block formatting contexts
(BFC) [1] to enclose the floats. Since overflow: auto does not work, we
need to use another hasLayout trigger and sensibly one that will never
be used (a height of 1%). This is known as the Holly Hack (scroll down
to height).
http://www.satzansatz.de/cssd/onhavinglayout.html#prop
Thank you and the others for helping me on this problem. It's been a
huge education!
John
Your welcome.
[1]
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] 100% height issue, and graphic placement q's
On 22/07/2011 2:34 PM, Ghodmode wrote:
On Fri, Jul 22, 2011 at 4:02 AM, G.Sørtungunla...@c2i.net wrote:
On 21.07.2011 20:30, John wrote:
Well, I am getting closer to tackling this issue, yet my playing with
values in the below body:after code didn't fix the issue which can be seen
in the screengrab here:
http://www.coffeeonmars.com/afterResults.jpg
Have more or less lost track of what you're trying to achieve...
I'm getting confused too, but I think I understand what we want to achieve.
So, I applied my original recommendation... I just copied my body:after
block into the stylesheet and this is what I came up with:
http://www.ghodmode.com/testing/coffeeonmars/
It works just like I said it would in Firefox, Chrome, Opera, and
IE9... not so much in earlier versions of IE.
I saw a lot of mistakes in the code like opening tags without closing
tags and stuff that just didn't make sense. I couldn't leave well enough
alone, so I modified it:
http://www.ghodmode.com/testing/coffeeonmars/fixed/
Delete the whole declaration block of _body:after_ and amend these two
style blocks.
.livebar {
width: 770px;
min-height: 100%;
overflow: auto;
margin: 0px auto;
background-color: #626862;
}
* html .livebar {
height: 1%; /* For IE6 since overflow: auto does not trigger hasLayout */
}
#menu {
float: left;
clear: left;
margin: 1em 0 0 0;
background-color: #808580;
width: 130px;
border:solid #424842;
border-width: 1px 0;
}
The layout should work in all browsers consistently. BTW, the below
comment is not quite true.
/* Margins are handled inconsistently on different
* browsers. Since this object is absolutely positioned
* anyway, use the position properties to position it
* instead of the margin.
margin: 10em 0 0 0;
*/
Please view these two test in IE7 comp. mode and you may understand what
is happening with IE7.
http://css-class.com/test/bugs/ie/haslayout-margins.htm
http://css-class.com/test/bugs/ie/floatsandblockelements.htm
And this article.
http://www.satzansatz.de/cssd/onhavinglayout.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] question on space at bottom of page
On 21/07/2011 8:04 AM, Debbie Campbell wrote:
On 7/20/2011 1:35 PM, Maujor (via-gmail) wrote:
In this page:
http://www.redkitecreative.com/projects/paramaya/wgs/dish-network-services/
There's a large image background to footer-container (not yet
completed). There's a small space of about 9px tall below the bottom
of footer-container at the very bottom of the browser window, I'm not
sure where that's coming from. Can someone help?
I changed it, it didn't make a difference...
--
Debbie
Please can you comment inline and not top post.
To begin with, please insert this style.
div#footer-container {
background-color: green;
}
This will give a background to the troublesome element. Now add this.
#footer-container {
overflow: hidden;
}
I presume this is is what you are after. Now delete the above overflow:
hidden; Another way to get the correct layout is this to remove the top
offset from p.copyright which is relatively positioned.
.copyright {
position: relative;
/*top: 10px; DELETE */
margin: 0 ;
padding: 10px 0 20px; /* Add padding-top to create space between
copyright text and div#footer box */
font-size: 13px;
text-align: center;
color: #dbdbdb;
}
You are having these troubles since you are using position:relative to
much without realizing the consequences or behavior that results in
overusing position:relative along with overusing divs. This causes
code bloat in both the HTML and CSS and this in turn makes it harder for
you (and others on this list) to understand what is happening. I have a
motto which is *less is better*. If I was to attempt to recode the
current HTML and CSS, I would begin by removing position:relative from
all elements.
Out of curiously, can you please tell me what the following CSS is for.
/* To prevent jumping */
html {
min-height: 100%;
margin-bottom: 1px;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] [OT] Why no HTML
On 20/07/2011 2:29 PM, Ghodmode wrote: I'm not going anywhere, but you have a point. Some people seem to be disproportionately upset by the topic. The reason that text is used is mainly due to security issues and encoding (mono-space). My email client is permanently set to only show text and send text emails. Another reason is that this list conforms to what is practiced by what I believe are all W3C working Groups. This is text format from the CSS WG open mailing list. http://lists.w3.org/Archives/Public/www-style/2011Jul/0306.html You recently made a comment about the practice for this list to have the To: field not being sent to the list. Any thread where you becomes involved shows a broken thread in this list archives (below) and most email clients. http://archivist.incutio.com/viewlist/css-discuss/116402 There are good reason why things work the way they do. Wondering about where _list-mum_ is since this thread is clearly *off topic*. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] IE7 css issue
On 15/07/2011 11:03 AM, Alex Mitchell wrote:
On Thu, Jul 14, 2011 at 6:17 PM, Laurie Landry
creat...@cartierbaileystudio.com wrote:
Hi,
I am working on a website, and while this works on some browsers, IE7
doesn't quite work.
The website is:
www.centralcaribooarts.com
and the stylesheet being used is
http://www.centralcaribooarts.com/css/base.css
In Firefox and safari, it works well, but in IE7, the wrapper is being
overlapped over the header.
It has been a long while since I last developed a website, so my memory is
foggy. I think it has to do with margins and floats, but I'm hoping someone
here would be able to help pinpoint the issue and give suggestions on how to
fix it.
A helpful way to debug this would be to put a distinct border around the
#contentwrapper and #header divs to show their boundaries. While looking at
the developer tools in IE9 (which happens to include an IE7 emulator) I
noticed that the #header div has a specified height of 10px, and this is, in
fact, causing your issue. The #contentwrapper div is starting where the 10px
header ends. Remove the 10px definition on the #header div,then there will
be some more to play with in regards to positioning the #nav div
specifically for IE6/7
I hope this helps,
Alex
A see Alex has mentioned the core issue. Now the a change for all browsers.
#header {
width: 1000px;
height: 117px; /* CHANGE */
margin: 0;
padding: 0;
padding-bottom: 2px; /* ADD to create space between the menu links
and the border-bottom of this element */
border: thin solid #FFF;
}
A fix for IE7.
*+html #header #logo {
margin-bottom: -116px; /* this allows the div#main_nav to rise */
}
*+html #header #nav #main_nav {
margin-top:96px;
margin-left: 206px;
}
and a fix for IE6 (untested).
*+html #header #logo {
margin-bottom: -116px; /* this allows the div#main_nav to rise */
}
* html #header #nav #main_nav {
margin-top:96px;
margin-left: 206px;
}
Another solution would be to position the menu absolutely from the
bottom of the div#header which should work with the same CSS in all
browsers.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] IE 7 clear:left; not working
On 13/07/2011 11:59 AM, Christopher Wicklander wrote:
http://www.intuidiv.com/test/
Can someone share some advice on how to make this headache go away...:)
Yes. Remove the width (hasLayout trigger) from div.services since this
is causing the element to clear the floated right element div.content_bg
which has a height of 523px.
.services {
/* width: 910px; DELETE */
background-color: #257F2A;
position: relative;
clear: left;
margin: 0 25px; /* CHANGE */
background-image: url(h2_header.png);
background-repeat: no-repeat;
padding-top: 50px;
padding-bottom: 10px;
}
This link will explain hasLayout further.
http://www.satzansatz.de/cssd/onhavinglayout.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] transform-style set to preserve-3d
On 1/07/2011 1:25 AM, Mark Volkmann wrote:
On Wed, Jun 29, 2011 at 10:12 PM, Alan Gresleya...@css-class.com wrote:
Possibly here.
http://css-3d.org/
Note that the branding does not have perspective, thus the occasional
illusion where the cube distorts and spins in the reversed direction (right
to left) before it switches back again.
I checked there, but didn't see an example of what I'm looking for. I
want to see a demonstration of this from the 3D Transforms Working
Draft ... The ‘transform-style’ property defines how nested elements
are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all
children of this element are rendered flattened into the 2D plane of
the element. Therefore, rotating the element about the X or Y axes
will cause children positioned at positive or negative Z positions to
appear on the element's plane, rather than in front of or behind it.
If the ‘transform-style’ is ‘preserve-3d’, this flattening is not
performed, so children maintain their position in 3D space.
I created a basic flip demo where a card flips on hover. There is an
image on the front and three lines of text on the back. The lines of
text all have different z-index values and a transform to different z
locations using translateZ. Here's the CSS for those lines:
#line1 {
transform: translateZ(10px);
z-index: 1;
}
#line2 {
transform: translateZ(20px);
z-index: 2;
}
#line3 {
transform: translateZ(30px);
z-index: 3;
}
When the flip to the text side occurs, the three lines of text appear
to be on the same plane despite the fact that I set
-webkit-transform-style: preserve-3d; for the face that contains the
text.
So I'm looking for an example that demonstrates how the
transform-style value of preserve-3d differs from flat.
OK, here is a very good demo.
http://www.webkit.org/blog-files/3d-transforms/transform-style.html
This was found here.
http://www.webkit.org/blog/386/3d-transforms/
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Background image position
On 30/06/2011 6:31 AM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? Possibly yes and possibly no to the former and later. There is an issue with accessibly where someone who can only use a keyboard. First they must tab to the inner overflow section, scroll down with the arrows and once they reach the bottom of what is hidden in the outer overflow (the viewport), they must tab to get this into focus, use the arrows keys to scroll to the overflowing portion in the viewport, then press tab again to return to the inner overflow so again they can use the arrow key to scroll the inner overflow. Now if the content of the inner overflow is very long, this procedure has to be done over and over. They may even decide to return to the top of the content and in which case they have to do the reverse. It your choice if you think this is wise. Also, do you want this to happen? http://css-class.com/x/tom.png 2) Is there a better way to achieve what is happening? Depends on what you want to happen in respect to the above two issues. The later is solved my using min-width on a container div that contain the header 'div#outer-wrap' and the footer. 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. You need to Google this string 'html5 elements ie8 ie7' (not quoted) or wait for someone to give the solution offlist since it involves JS. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] transform-style set to preserve-3d
On 30/06/2011 8:24 AM, Mark Volkmann wrote: I'm pretty sure I understand what setting -webkit-transform-style to preserve-3d is supposed to do, but I see no difference between that and the value flat. Can someone point me to an example that demonstrates a 3d effect during a flip (rotate) transform? Possibly here. http://css-3d.org/ Note that the branding does not have perspective, thus the occasional illusion where the cube distorts and spins in the reversed direction (right to left) before it switches back again. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Background image position
On 29/06/2011 1:55 PM, John D wrote:
On 29/06/2011 9:01 AM, Tom Livingston wrote:
List,
Is it possible to position a background image on the body of a page so
that the LEFT EDGE of the image is always at 50% of the viewport? Ive
googled a bit but not sure im using the right search terms...
Of course it is possible. put this code for your background:
background: white url(background_image.gif) repeat-y 50% 0;
In the above code everything is self explanatory except the following:
50% === background position x;
0 === background position y;
All that does is positions' the image at the center of the viewport. Tom
wants the _LEFT EDGE_ of the image positioned at 50% of the width of the
viewport. This is possible but you need to also use background-size (or
generated content, see below) which have some unexpected side affects.
The below solutions will work differently but some may or may not be
what you are after. It all depends on what the image is.
body {
background: url(image.jpg) 100% 0% no-repeat;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% 200px;
}
If you are using an image with width and height in absolute values like
pixels and you don't want scaling, then this is another solution.
html::before {
content: url(image.jpg);
position: absolute;
margin-right: -150px; /* equal width of image */
left: 50%;
}
body {
position: relative;
z-index: 1;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Stopping IE6 and 7 clearing a float
On 17/06/2011 8:40 PM, Peter Bradley wrote:
Ar 17/06/11 06:03, ysgrifennodd Alan Gresley:
Yes, override them with specificity in style.css.
div#site-title {
float: none;
width: auto;
}
div#branding {
width: auto;
}
Ah yes. Sorry, I was being more than a little slow there.
I haven't check the site since that has leads me often into creating
IE7- bug cases and knowing IE7, this could take forever. The float in
the above CSS may be OK.
I guess you don't quite understand hasLayout. It's like mixing the
poison and the antidote together. May I suggest to you that you read
this.
http://www.satzansatz.de/cssd/onhavinglayout.html
You're absolutely right. I've tried. Honestly I have, but it's been
beyond me so far. I'll give it another go, though. I owe you that much.
You don't owe me anything. If I desired, I could write hasLayout the
missing manual. Let's break it down a little.
1. IE7- does now how to flow things around floats when floats
drop.
2. IE7- does not paint a page like other browsers and when
part of a page (a box) is higher than 150px, you can have
painting bugs arises like the pee-ka-boo bug and escaping
float bug. In IE6-, you also need hasLayout to remove
white-space from around list-items.
3. When element gain layout, they form a rigged rectangle
box which wraps completely around a child element that
also has layout. You could say that certain things can
not protrude over hasLayout boundaries and any sense of
calculating where something should be is destroyed somewhat.
Here is a simple demo.
!doctype html
style type=text/css
p { background: silver; }
.float { float: left; width: 200px; height: 100px; border: 5px solid blue; }
#wrapper { border: 5px solid green; }
/style
div id=wrapper
div class=floatFloat 1/div
div class=floatFloat 2/div
div class=floatFloat 3/div
pSome text/p
/div
If you narrow the viewport enough (I'm testing in IETester IE6 mode),
you will notice floats dropping but unlike other browsers, the paragraph
and the div#wrapper also drops. Note the space that appears between the
floats as they drop. After the third float has dropped, you will notice
that the green border does not enclose 'Float 2' properly. Now add this
to the CSS.
#wrapper { border: 5px solid green; background: url(go-ie.yeah); }
Now this time as the third float has drops, the green border is intact.
All I did was gave IE7- some garbage and IE7- said cool, thank you. This
give meaning to the words by Molly the cat The absurdity of bugs. Very
wise cat indeed. These pages may help you more.
http://css-class.com/test/bugs/ie/renderingbands.htm
http://css-class.com/articles/explorer/floats/escaping-floats-peekaboo.htm
http://css-class.com/articles/explorer/floats/floatandcleartest1.htm
http://css-class.com/test/bugs/ie/ie-bugs.htm
A word of caution. IE7 emulation mode in IE9 does not have the
pee-ka-boo bug.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Stopping IE6 and 7 clearing a float
On 17/06/2011 3:50 AM, Peter Bradley wrote:
Ar 16/06/11 17:35, ysgrifennodd David Hucklesby:
In your style-sheets, you have these Layout triggers that affect
#site-title -
style.css line 12:
* {
zoom: 1.0;
}
style.css line 21:
#site-title {
width: 500px;
}
style-1.css line 341:
#site-title {
float: left;
width: 700px;
}
You also have hasLayout on the enclosing #branding:
#access .menu-header,
div.menu,
#colophon,
#branding, /* - here */
#main,
#wrapper {
width: 940px;
}
Getting rid of all those triggers fixes it this end.
Thanks David,
First the good news. Your solution works, as you know it does, as you
can see if you visit http://www.stellawhitelaw.co.uk
I have a bit of a problem with it, though. I can get rid of the triggers
in the CSS file you've called style.css with no problem (in fact I
probably should have do so before), but those in style-1.css are not
strictly speaking accessible to me. The reason is that I'm developing a
WordPress child theme, so I import the parent stylesheet (@import) and
then do whatever I need to in my child theme to make it work. The last
two triggers you give above are in the parent stylesheet.
Now, OK, I can alter the parent stylesheet; but it comes with a risk. A
future update to the parent might put the triggers back and break the
layout. So is there a way I can prevent HasLayout being triggered
without messing with the parent stylesheet?
Yes, override them with specificity in style.css.
div#site-title {
float: none;
width: auto;
}
div#branding {
width: auto;
}
As for being a glutton for punishment, I'm not sure why you think that,
but I'll take it as a compliment.
:-)
I guess you don't quite understand hasLayout. It's like mixing the
poison and the antidote together. May I suggest to you that you read this.
http://www.satzansatz.de/cssd/onhavinglayout.html
You could make the changes in the parent stylesheet and insert this.
/* WARNING, beware of the hasLayout genie.
http://www.satzansatz.de/cssd/onhavinglayout.html */
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] IE7 Position Fixed Problem
On 12/06/2011 10:21 PM, John Franks wrote: I am building a website here http://www.thesussexbookkeeper.co.uk I have successfully achieved the website content scrolling up behind the fixed position header in all desired browsers except for IE7 (not supporting IE6 so not worried about that). In IE7, with position:fixed applied the header_div flies off to the right. Here is the CSS (HTML can off course be viewed through the browser) - any help would be much appreciated, thanks. John. It caused by having text-align on the parent of an absolutely positioned with auto offset. Normally auto offset is fine. http://css-class.com/test/bugs/ie/5~7/auto-offset-text-align-bug.htm FYI, IE7- has a bug with text-align that centers block-level elements. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] A question about 2-color borders (grooved, ridge etc.)
On 8/06/2011 11:09 PM, Andrew C. Johnston wrote: While I am tempted to get some popcorn and watch you two bludgeon each other with fancy tech/design words, I think its better to re-focus, and try to explain my point more clearly. I wasn't using any such words. There is basic maths involved. With inset, outset, groove and so on, you choose one color *for each side of the border*, but then the final result is two colors for each side of the border. A darker or lighter color is chosen for me based on the color I choose. So if I made different color sides of the border, including top, bottom, and so on, each using groove for instance, then I would finally have 8 colors in the complete border. Yes. Load this demo up in either Safari or Chrome 12 (now supports 3D animations), http://css-class.com/test/css/3/3d-animation/color-cube4.htm and select Show for Yellow to Blue. What you will notice with the variant colors with these type of borders is that the colors used, all belong to the same hue. These colors of the same hue are formed by a triangle that has it extreme points at blue (#FF or rgb(0,0,255)), white and black in sRGB colorspace. There is 32,763 colors for this hue (he same as yellow, lime, fuchsia, aqua and red). There are 256 hues in total. What I am saying, and I apologize for being unclear, is that I would like to be able to choose the relationship between those two colors in one side of the border, or at least have more options than I do now. Now, I can choose one color for one side of the border, and using groove or ridge will tell the browser to calculate the other color (again, just for one side of the border) based on some formula. I don't see why another formula can't be substituted, or indeed why I can't just specify 2 colors for the one side of the border. There no way to adjust the algorithm. Even if you use inset, outset, groove or ridge, the only solution is to give left and top a different border-color to right bottom. To have them act similar to how they currently work, use a color belonging to the same hue. border-left: 10px groove #7f7fff; border-top: 10px groove #7f7fff; border-right: 10px groove #7f; border-bottom: 10px groove #7f; If you have trouble knowing what color is the same hue, then just use HSL. http://www.w3.org/TR/2011/REC-css3-color-20110607/#hsl-color But just to be serious for a second, I do enjoy the discussion. HTH, Andrew Yeah, I'm really lazy programmer instead of an artist. The truth of the matter is, I'm a fine artist that loved oil paint (usually cadmium based) who now paints with CSS3. http://css-class.com/test/css/3/gradients/gradient-art.htm I don't have to wash my hands in chemicals after painting and I don't have that smell of turpentine and linseed oil lingering around. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] A question about 2-color borders (grooved, ridge etc.)
On 4/06/2011 1:46 PM, Andrew C. Johnston wrote:
Hi All:
In working on a new template, I noticed something about borders that
I find to be very limiting, and wonder if anyone thinks there will be
improvement in the future.
I do not play a real designer on tv or in real life, but I have come
to like ridged, grooved, inset/outset borders, which have two colors
to them. Don't laugh at me, they are cool! I don't care what anyone
else says.
Anyways I was trying to get the look I wanted recently and found that
the darker part of the border was too dark. For all of these types
of borders, I can select the color I want, and the computer uses some
sort of function or algorithm to determine the color of the darker
part (maybe this process can be reversed in some cases, where the
user determines the darker color and the function chooses the lighter
color, but its the same basic process).
[snip]
Am I wrong about this? Am I missing something? Or can I dream of
the day when my control of webpages is just a little more complete?
Kind Rgrds,
Andrew
No, you don't have to wait. Try this test and the algorithm will make sense.
!doctype html
style
#box {
float: left;
overflow: hidden;
margin: 20px;
background: rgb(0,0,255); /* blue */
border: 10px inset rgb(0,0,255); /* blue */
}
div div {
width: 90px;
height: 90px;
margin: 1px;
border-top: 10px solid rgb(0,0,179);
border-left: 10px solid rgb(0,0,179);
border-bottom: 10px solid rgb(127,127,255);
border-right: 10px solid rgb(127,127,255);
}
/style
div id=boxdiv/div/div
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] A question about 2-color borders (grooved, ridge etc.)
On 4/06/2011 8:28 PM, Barney Carroll wrote:
Hiya Andrew,
No solutions here I'm afraid, although I have often experienced the same
thing and wondered why I'm always so far out on my first attempt.
The solution (for inset) is to apply a brighter color (more saturation
and lightness) for top and left borders and a duller color (less
saturation and lightness) for bottom and right borders. Test.
!doctype html
style
#box {
float: left;
overflow: hidden;
margin: 20px;
background: rgb(0,0,255); /* blue */
border: 10px inset rgb(0,0,255); /* blue */
}
div div {
width: 90px;
height: 90px;
margin: 1px;
border-top: 10px solid rgb(0,0,217);
border-left: 10px solid rgb(0,0,217);
border-bottom: 10px solid rgb(63,63,255);
border-right: 10px solid rgb(63,63,255);
}
/style
div id=boxdiv/div/div
Just a few words of opinionated warning (that you shouldn't take too
seriously):
I guess you're learning.
as an ex-full-time designer and someone who now works with
non-technical designers, I've often been cynical of the various ways CSS3
encourages *programmers* to define effects which are then procedurally
achieved by various UAs' rendering engines.
I thought inset and outset borders were in CSS2. Why are you cynical of
CSS3?
The truth is that even for the
most experienced competent designers, trial and error is necessary. The
notion that we can systematically write code to create
procedurally-generated effects to simulate aesthetically sensitive optical
illusions is not one I can stand behind fully: for example I have yet to use
border radius in conjunction with background gradients and box shadows
So if you haven't tested, how is it that you can express such an opinion?
sliding doors CSS and background images allow that bit more control and
pixel-perfection that allow designers to make it look consummately elegant
and convincing rather than functionally embossed.
Can you prove that absolutely?
In short, when you're
talking about optical illusions and a certain level of detail with coherent
aesthetics, I don't believe it's possible to algorithmically generate the
lot based on small input values.
I don't follow what you are saying here.
But I digress. Whenever I've tried to achieve the effect I've done it by
trial, observation and error.The same values of relative darkness or
lightness applied to other colours have never worked, and I've needed to
achieve the effect manually.
…I'd be very interested if anybody were to get this right though!
Regards,
Barney Carroll
Yes, I have. See the example above and the example in my reply to
Andrew. I'm still working on the maths but I believe I have hit the most
aesthetic values.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Separating DIVs vertically
On 5/06/2011 11:05 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: Barney Carroll wrote: Keith, By default. block-level elements occupy the full available width, thus any following block-level elements can only appear directly below. I am unconvinced of this explanation. At http://web-consultants.org.uk/sites/tests/Block-level-elements/DIVs.html you will see two DIVs, each of which is only 33% of the full available width, yet they stack vertically, not horizontally. I would argue that this behaviour has nothing to do with their width, and is entirely a result of their being block-level elements. Philip Taylor It is really do with block flow direction. http://dev.w3.org/csswg/css3-writing-modes/#text-flow | The block flow direction is the direction in which | block-level boxes stack and the direction in which | line boxes stack within a block container. The | ‘writing-mode’ property determines the block flow | direction. What you are observing is what happens in a Latin-based writing mode. If the boxes that have a width of 33% are in LTR inline base direction, the boxes will appear visually stack downward on the left side of the viewport. If the boxes that have a width of 33% are in RTL inline base direction, the boxes will appear visually stack downward on the right side of the viewport. The thing that set the base direction are the attributes dir=ltr or dir=rtl. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Separating DIVs vertically
On 5/06/2011 11:53 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: Alan Gresley wrote: It is really do with block flow direction. http://dev.w3.org/csswg/css3-writing-modes/#text-flow | The block flow direction is the direction in which | block-level boxes stack and the direction in which | line boxes stack within a block container. The | ‘writing-mode’ property determines the block flow | direction. What you are observing is what happens in a Latin-based writing mode. So, what would you expect to happen if the writing mode were top-to-bottom ? Would you then expect the DIVs to stack side by side ? I would not, but of course I am always open to being surprised ! Philip Taylor Do you have IE8, IE9 or IE10? If so, view these test. The first is like Latin-based writing mode with LTR inline direction rotated 90 degrees clockwise. Used for Chinese, Japanese and Korean scripts. http://css-class.com/test/css/bidi/kanji-test1-extra.htm The second is a left to right mirror copy of the above in respect to block flow direction. Use for old Mongolian script. http://css-class.com/test/css/bidi/mongolian-test1-extra.htm Then there is a writing mode that no uses but is like Mongolian vertical but rotated 90 degrees anti-clockwise. http://css-class.com/test/css/bidi/steet-text-test1-extra.htm -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] MQ - min-device-pixel-ratio
On 31/05/2011 10:25 AM, Philippe Wittenbergh wrote:
On May 31, 2011, at 2:12 AM, Kristen Henry wrote:
In IE 9 there is red on the page...
Thanks for checking. I'll have to see for something else to deal with graphics
then. :-(.
Philippe
This has me thinking. IE9 supports this for my display.
@media screen and (device-aspect-ratio: 16/9) { … }
Then I look at this spec.
http://dev.w3.org/csswg/css3-mediaqueries/
I see no mention of device-pixel-ratio. I understand that on a big
display device (1920x1080 res / 16:9 ratio) there may be many more
device-pixels. The thing that I don't understand is how this can be a
ratio of something and how this relate to some minimum threshold.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] can an absolute box inside a relative one expand it?
On 18/05/2011 6:54 AM, sweepslate wrote: Thanks for the links. All these examples use float, and I can't manage to have neither, negetive margin, nor z-index, with float: http://www.geocities.ws/sweepslate/absolute-in-relative/float-test.html My security software forbids any page located at http://www.geocities.ws/ to load. May I suggest a new hosting provider if you want people to look at the code. A pointer about absolute and fixed positioning. The only way to counter elements removed from the normal flow is to add padding to something that equal the heights and widths of positioned elements. In you case, this would be the content div. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] CSS, XML, HTML, valid or bogus was( column help)
On 30/04/2011 9:23 PM, Alan Gresley wrote: CSS just isn't to style HTML. It can style XML (and text/* sub-types) and XHTML as well. One of the most bazaar test I have done. I even invented my own elements, selectors and one attribute. http://css-class.com/test/xml/unicode.xml The CSS validator just throws my CSS completely and the HTML validator demands to have a Doctype to see if the document is valid. By some code sniffing, the HTML validator considers it to be invalid XHTML 1.0 Transitional. IE9 shows the correct source code. Both Firefox and Opera rearrange of the source code where it has RTL script and Safari changes the glyphs all over. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] column help...
On 30/04/2011 12:53 PM, Philippe Wittenbergh wrote:
On Apr 29, 2011, at 11:24 PM, Alan Gresley wrote:
This is not completely true. Firstly the XHTML is traditional so
it's not true XHTML
That doesn't matter, as ID's starting with a leading digit are not
allowed in html4.01.
True. It's not allowed by the spec but that doesn't mean that this can't
be done. In the example that this thread is about, maybe it is wise just
to use 'col1' but many times in my own work it would have been easier if
I could have identified something just with digits or beginning with digits.
Beside, XHTML strict served as text/html is
handled just the same as html4.01 by browsers.
http://www.w3.org/TR/html401/types.html#type-name
I know. Pages with the bells and whistles
(content=application/xhtml+xml) are still served as text/html and
handled as html4.01 by browsers.
and secondly, IDs or classes beginning with a digit that is in an
escape sequence (flowed by one space of whitespace) is valid CSS.
The CSS selector is only valid when the (leading) digit is escaped…
IOW: #4col1 {background: lime;} is invalid (and correctly ignored by
browsers)
Correct.
but #\34col1 {background: lime;} is valid
This is incorrect since this is an identifier. It needs white-space. If
the HTML has this attribute,
id=2a
then it must be selected by this (with whitespace in between '2' and 'a').
#\32 a
A test.
http://css-class.com/test/temp/escape-ident-whitespace.xml
BTW, according to the validator, that document is invalid (4 Errors and
1 warning). The warning is solely due to my server settings. To stop
that warning, I must use the proper .xhtml extension.
http://css-class.com/test/temp/escape-ident-whitespace.xhtml
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Footer placement in FF - FIXED!
On 30/04/2011 6:49 AM, Steve Caramia wrote:
Great! Thanks for cleaning up my code. I'm a little confused, though.
The Sticky Footer page specifically says NOT to add margin values on the
top and bottom.
If the div#wrap has overflow: hidden, then you can have child elements
with vertical margins. The div#wrap itself can not have vertical margins.
Using top and bottom margins inside some elements may push your footer
down by that margin height, perhaps in a header or the wrap or main
div's themselves.
See above.
Instead use padding to create spacing inside the
element. You'll notice this is happening if your page has little content
so that the footer should be on the bottom but you see that your window
scroll bar on the side indicates that it is sitting a bit below the
window bottom. Go find the offending top or bottom margin and switch it
to padding.
But it looks good now!
http://www.lankforddesign.com/
It still not a sticky footer. It's a footer that it always fixed at the
bottom of the viewport. To get this variant of footerStickAlt to work as
a sticky footer, change this CSS,
wrap {width: 960px;margin: 0 auto; min-height: 100%; }
^-- Note no # in your CSS.
#footer {
position: relative;
margin-top: -120px; /* negative value of footer height */
clear:both;
background:url(images_site/bg_footer.jpg) bottom repeat-x;
position:fixed; /* NOTE This causes the footer to be fixed in-respect
to the viewport */
height:120px;
/* width:100%; DELETE block elements are always 100% in width */
bottom: 0px; /* NOTE This is the offset that the footer has from the
bottom of the viewport */
/* display: block; DELETE block-level elements are always displayed as
blocks */
overflow:hidden;
}
to this CSS.
#wrap {
width: 960px;
margin: 0 auto;
min-height: 100%;
overflow: hidden; /* not needed if child elements don't have vertical
margins that can collapse into this element, safe to keep there */
}
#footer {
position: relative;
margin-top: -120px; /* negative value of footer height */
clear: both; /* this is needed if there is floating content such as a
side bar, safe to keep there */
background: url(images_site/bg_footer.jpg) bottom repeat-x;
border-bottom: 1px solid red; /* for testing, remove and adjust
height of footer */
height: 119px; /* for testing, remove and adjust height of footer to
height: 120px */
overflow: hidden; /* not needed if child elements don't have vertical
margins that can collapse into this element, safe to keep there */
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] CSS, XML, HTML, valid or bogus was( column help)
On 30/04/2011 5:24 PM, Philippe Wittenbergh wrote:
On Apr 30, 2011, at 3:19 PM, Jukka K. Korpela wrote:
That doesn't matter, as ID's starting with a leading digit are
not allowed in html4.01.
Right, but this is really a formality - though a validator message
is useful, as it makes the author suspicious. As far as HTML
processing is concerned, browsers don't seem to have problems with
id values starting with a digit, but they raise some issues in
CSS.
I send bogus XHTML on all of my pages on CSS class which the validator
reports as valid XHTML (entitled to use a 'valid XHTML 1.0 icon').
A warning to those following this thread. Do not trust the validator.
Also, do not trust others on CSS discuss to know fully what they are
doing or talking about. Especially me since I'm mainly self learning.
Now to make this part of the thread on-topic for this list.
My commenting on what HTML4.01 says was really nitpicking, in case
you din't notice :-p. Browser don't really care, afaik; and that is
probably one reason why HTML5 doesn't make ID's starting with a digit
invalid.
Philippe. CSS just isn't to style HTML. It can style XML (and text/*
sub-types) and XHTML as well [1] [2].
http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.10
Digits are not forbidden in XML or XHTML.
http://www.w3.org/TR/2002/REC-xhtml1-20020801/#C_8
The CSS selector is only valid when the (leading) digit is
escaped…
Yes, and that makes CSS code somewhat messy, so it's usually best
to avoid id attribute values that start with a digit, if you intend
to use them in CSS.
Sure, I wouldn't advocate it either; I can picture all those flashy
web-apps and friends though, with tons of script generated ID's. Even
then, I would recommend to prefix those ID's.
I see there use for tabular data (ie. databases) which can be script
generated.
but #\34col1 {background: lime;} is valid
Well, technically it is valid, but it does not match id=4col1.
The reason is that since c is a hexadecimal digit, 34c is taken
as a hexadecimal number. To make the selector match id=4col1, you
can write it e.g. as \34 col1 (i.e. with a space after 4).
Right, I intended to type that space there, obviously it didn't go
beyond intention. Blame the weather, or the wave, or something.
Philippe -- Philippe Wittenbergh http://l-c-n.com/
Digits are forbidden at the beginning of id and class selectors since
0~9, and a~f are reserved for hexadecimal notation. This is not because
you can't use CSS to select id and class selector beginning with digits,
since that would make CSS a little less powerful by only working with
HTML. The whitespaces are only needed in identifiers. In other parts of
CSS you can have whitespace or no whitepsace.
http://css-class.com/test/css21testsuite/rgb-colors-escaped-030.xht
I still don't understand why or how CSS can be parsed like this. I
theorized that this may be needed if some precessing of CSS code is
turned into escape sequences.
!DOCTYPE html
style type=text/css
\0064\0069\0076 { \0062\0061\0063\006B\0067\0072\006F\0075\006E\0064:
\006C\0069\006D\0065 }
/style
divThis division should have a lime background since the CSS represent
this codediv { background: lime }/code./div
[1] http://css-class.com/test/svg/svg-within-xhtml.xml
[2] http://onwebdev.blogspot.com/2010/12/linking-css-and-xml-documents.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Borders oddity when page viewed in Chrome
On 1/05/2011 7:16 AM, Keith Purtell wrote: Well, I expect quirks from IE, but I noticed the following problem today when I view my splash page in Google Chrome. The lower borders in the navigation box render normally, but all vertical and topmost borders are too light. I'm baffled. http://www.keithpurtell.com/kthings/chrome.png - Keith Purtell Me too. The borders look the same in both FF 4 and Chrome 10 on Windows 7. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] column help...
On 29/04/2011 11:55 PM, Jukka K. Korpela wrote: Michael Beaudoin wrote: Ok. I have a layout I'm working on and I can't get the middle 4 columns to line up side-to-side. I've floated them left but they don't seem to take on the layout I want. Do I need to put them in a div? Check it here. http://ba-doyn.com/sda/davinci_test/ The relevant id=... attribute values begin with a digit (4), which is prohibited in XHTML and, more importantly, in CSS, so browsers ignore an essential part of the stylesheet. This is not completely true. Firstly the XHTML is traditional so it's not true XHTML and secondly, IDs or classes beginning with a digit that is in an escape sequence (flowed by one space of whitespace) is valid CSS. As mentioned last month by Philippe, HTML5 allows digits in ID or class attributes. These are valid CSS selectors. #\34 col1 #\34 col1 p #\34 col2 #\34 col2 p #\34 col3 #\34 col3 p #\34 col4 #\34 col4 p -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Selecting list archives by month is broken
Hello Eric, I was searching the list archives for an old thread but I wanted to see the initial message of the thread. I couldn't find it so instead I thought I would just select the month from the options and work from the beginning of the month to the end of the month. I discovered that the options drop-down does not work. http://archivist.incutio.com/viewlist/css-discuss/March+2008 The heading shows *css-discuss for March 2008* but the messages are from March 2011. Regards, Alan __ css-discuss [css-d@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] Selecting list archives by month is broken
On 27/04/2011 4:27 PM, Alan Gresley wrote: Hello Eric, I was searching the list archives Apologies to the list. This was meant to be sent offlist to the list chaperon (I selected to wrong email) to report an error in the public list archives. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Incorrect width - Opera Bug?
On 27/04/2011 7:01 PM, Philippe Wittenbergh wrote: On Apr 27, 2011, at 5:09 PM, G.Sørtun wrote: Dunno about IE 9. Nothing yet, AFAICT :-) IE's Ignore font size isn't the same as minimum font size though, so it will be interesting to see how IE will handle transform. Quite well. Ok - I am confused. IE 9 is supposed to support CSS3 2D transforms http://msdn.microsoft.com/en-US/ie/ff468705.aspx#_CSS3_2D_Transforms Oh, hold on, I didn't put the -ms- prefixed one. My bad. Updated the test case. Reports please ? http://css-class.com/test/temp/IE9-transform.png Is Chetan freezing font-sizes again? You have more chance of consistency by using an image. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] getting the TJK design vertical css drop down menu to work
On 26/04/2011 5:17 AM, Sandy wrote:
hey all,
If this looks familiar it's because I changed the subject. I didn't get
any replies to my last email, subject line sub menus show up on hover
but not on focus and I'm stumped. I hope someone out there can help!
I am working on a test page that has a sub menu which displays on hover
but not on focus. How do I get the sub menus (for example the 3 links
under location) to show up when someone tabs to the link the way they
do when someone hovers over it?
http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js
The styles I am using more or less came from
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].
but I seem to have lost a key ingredient when I put this to work in my
page. Any thoughts about how to fix this up?
Thanks!
Sandy
Change this CSS,
#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
to this (li can not gain focus).
#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
As with my menu, Opera shows the best accessibility.
[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Unexpected font-size and top of box change
On 24/04/2011 9:48 AM, J.B. Nicholson-Owens wrote:
I was playing with http://csstest.forestfield.org/fun-with-transitions/
and I noticed that in some browsers (Firefox 4.0, for example) the top
of the border around Place a statue of Dr. Doom in a local park moves
down as the hover transition takes effect. In Konqueror 4.5.5 this does
not happen. This version of Konqueror doesn't show the transition, but I
can see the hover and non-hover state and easily see the top edge of the
box not move.
Yes as the CSS currently stands.
Should the top of the box move down?
Is there a way I can stop the top of the box from moving without
absolutely positioning the element?
Yes.
I'd like to make the box height grow by increasing downward (moving the
bottom edge of the box) as Konqueror 4.5.5 does.
Thanks.
What is happening in FF is that the default margin-top (1em) of p.effect
is growing in height along with the font-size. Give this element an
absolute value of margin-top but not in ems. You can also make the CSS a
lot more simpler by using the shorthand 'transition: all 5s'. Here is
the CSS.
@font-face {
font-family: League Gothic;
src: local(League Gothic),
url(League-Gothic.otf);
}
p.effect {
text-transform: uppercase;
font-family: League Gothic, Courier, sans-serif;
font-size: 200%;
color: black;
background-color: inherit;
margin-left: auto;
margin-right: auto;
margin-top:32px; /* -- Add */
text-shadow: #ddd 10px 10px .5em;
border: 1px solid black;
-moz-transition: all 5s;
-webkit-transition: all 5s;
-o-transition: all 5s;
-khtml-transition: all 5s;
-ms-transition: all 5s;
transition: all 5s;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-khtml-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
p.effect:hover {
color: red; /*-- all
transitional values */
text-shadow: #bbb 10px 10px 0.01em;/* -- all
transitional values */
font-size: 400%; /* -- all
transitional values */
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] Benefits of resetting all divs to position:relative?
On 21/04/2011 11:09 PM, John Jimenez wrote: Hello all, I am looking for the benefits of setting all divs to position:relative. I have come across a number of sites (included some of the ones I work for) that have this reset and I can't find the pros or cons via Google. I ask because this seems to trigger a bug in IE (tested as high as 8) that behaves like the hasLayout bugs but does not get fixed with the standard zoom:1. The only way to fix the issue was to expressly reset the div to position:static. Is the IE issue caused by a doctype that triggers quirks mode [1] perhaps? IE8 should show the same as other good browsers. Anyone here able to provide some insight on the pros/cons of this seemingly increasingly common reset? Thanks! John Jimenez Firstly it's not a reset. A reset only resets the values of the default style sheet [2] in each and every browser. OK, this is what I think is happening with this position: relative appearing in the style sheets of some sites. The coders are coding for the buggy versions of IE. These are IE5.5, IE6 and IE7. Position: relative can be used to fix the peekaboo bug and other IE CSS bugs [4] but at the same time position: relative can cause other IE CSS bugs. If you're coding to standards, you don't need position: relative unless you need it [5] [6] and this is usually for creating a new containing block for absolutely positioned elements. If position: relative is needed to fix a IE7- CSS bug, consider using a CSS hack (with comments about use) or CC so others coders know why it is used in the first place. [1] http://hsivonen.iki.fi/doctype/#handling [2] http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm [3] http://www.positioniseverything.net/explorer/peekaboo.html [4] http://www.positioniseverything.net/explorer.html [5] http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme [6] http://www.w3.org/TR/CSS21/visuren.html#relative-positioning -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@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] Reflection effect
On 16/04/2011 10:08 PM, Ingo Chao wrote: Am Samstag, 16. April 2011 schrieb Philippe Wittenberghe...@l-c-n.com: On Apr 16, 2011, at 4:13 AM, Kevin A. Cameron wrote: This raises an interesting question: the reflected text in HTML or CSS? I'd argue that the reflection is decoration and only decoration, and thus part of the stylesheet. Some hate the effect [1], therefore, it is decoration. Ingo [1] Would someone please mop the floor? http://csscreator.com/node/21265 I believe Kevin asked a good question. I agree with you and him that since the affect is styling or decoartion, then styling should be where it belongs. There are two ways to achieve the affect. Philippe demoed a method with more browser support. Another question is what else is possible with CSS? I presume some would believe that CSS animation with a little JS is outright abuse of CSS. Here is one demo of mine where I hack in a box-shadow and then position it under another element (later in the source) that has a transparent background. I achieved what is forbidden by the CSS spec (a box-shadow seen through a semi transparent background of the element creating the shadow). http://css-class.com/test/css/shadows/box-shadow-borders.htm Seriously, I think CSS and CSS3 is wonderful. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [css-d@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] Dynamic CSS with animation was(Re: Reflection effect)
On 16/04/2011 11:39 PM, Barney Carroll wrote: Alan, a few points to make in response to your post, with inherently dynamic CSS in mind: On 16 April 2011 13:55, Alan Gresleya...@css-class.com wrote: Another question is what else is possible with CSS? I presume some would believe that CSS animation with a little JS is outright abuse of CSS. I sympathise with the notion behind this (for the love of God, let's keep our behaviour and presentation separate!), but the way that came out spanks a bit of zealotry. Are we to take it you are in the market of exclusively targeting that choice demographic of sensible users who download Webkit nightlies and keep scripting turned off? ;) No. You can have a dynamic CSS animation with no JS. With JS, you can make these dynamic CSS animation interactive. I am going to write another email tonight to this mailing list to show by new domain and new demos. Stay tuned. Then you will understand what I'm talking about. It had nothing to do with zealotry. The truth is, CSS is not ideally suited to describing dynamic scenarios by itself: apart from the pseudo-classes, CSS cannot in of itself describe the situations it promises with many of these new properties. Here is a demo done with canvas. This is the demo using canvas. https://mozillademos.org/demos/flight-of-the-navigator/demo.html This is a video if your Graphic Cards does not support the above demo. https://demos.mozilla.org/en-US/screencast/flight-of-the-navigator At 5 minute an 37 seconds to 5 minute an 47 seconds (10 seconds period) you see the a spaceship move leftwards. This is possible with just CSS animation. No JS is required. Some of the other affects in this demo can be done with CSS animation with a few @keyframes. [snip] Here is one demo of mine where I hack in a box-shadow and then position it under another element (later in the source) that has a transparent background. I achieved what is forbidden by the CSS spec (a box-shadow seen through a semi transparent background of the element creating the shadow). [snip] Essentially I'm saying that for a developer to be able to produce this kind of stuff using nothing but HTML and styles is an impressive step forward, but there's no way an exacting designer would let this case study sway them from traditional methods. True. Nevertheless, the future is bright, and it's up to us to forge ahead. Seriously, I think CSS and CSS3 is wonderful. Amen to that. Regards, Barney Time to rock and roll. :-) -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [css-d@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/
