Den 13.08.2017 23.04, skrev Ezequiel Garzón:
What a treat, Georg! THIS kind of insight is what I was hoping for.
I'll try to accept the standards more as a given and not to think too
much about foundational issues, though sometimes these aspects
intrigue me.
I get that. Curiosity is
Den 12.08.2017 20.52, skrev Ezequiel Garzón:
Georg, while I haven't gone over the standard in depth, I assumed the
rendering I saw in all browsers was compliant, and in that sense
logical and expected. I was shooting for something along the lines of
why you think it was defined this way.
.
See: https://www.w3.org/TR/CSS2/visuren.html#block-formatting
regards
Georg
__
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
ex) problem for the relevant container.
regards
Georg
__
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://
To expand on that ... a read-through on the following article may be
useful...
<http://christopheraue.net/2014/03/05/vertical-align/>
regards
Georg
Den 23.09.2016 03:52, skrev Chris F.A. Johnson:
On Thu, 22 Sep 2016, John J wrote:
Yeah..that sounds good. Easy enough to mak
How to further complicate matters...
http://caniuse.com/#feat=css-media-interaction
...once UAs and OSes are up to the tasks.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman
FWIW, here's the basic variants I (still) use...
sup {vertical-align: 0.3em; line-height: 0; font-size: 75%;}
sub {vertical-align: -0.3em; line-height: 0; font-size: 75%;}
regards
Georg
__
css-discuss [css-d@list
With the wide range of screen dimensions and resolutions our designs
(risk) ending up on today, it sounds strange that some are still
limiting their designs to specific pixel measures.
Den 14.10.2015 02:42, skrev Tom Livingston:
If one pixel is causing such big issues, you may have bigger issu
teracts with, so the entire paragraph drops below the image before it
can break up. Use ' ' or control whitespace depending on case.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-di
Seems to function OK - tested only in emulators.
Only potential problem I can see, is that text alongside floating images
may "break up" in not so nice ways as space narrows...
Screenshot: http://www.gunlaug.com/contents/imagefolders/extra/scr-utr.png
regards
Den 04.06.2015 03:13, skrev Karl DeSaulniers:
display:table and vertical-align:middle is one css way
http://www.gunlaug.no/tos/moa_15a.html
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinf
go {top: 0; left: 0}
}
I have only manipulated some of the basic elements, and none of the
break-points or values I have used are anywhere near being perfect or
final. You may also want to add one or two more mediaqueries, to create
finer steps down towards the smallest screens.
regards
.gunlaug.com/contents/design/mobile-first.html>
regards
Georg
__
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 pol
l be
used by most as the base for delivering designs.
I do not see any "ultimate solutions" - with or without CSS - in the
near future that will cover all cases to perfection, and so far I
haven't found the need for one either... :-)
regards
Georg
__
land is usually more important than serving "perfectly valid code".
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.
You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List
;}
...to override the (other) link styles that now turn those links into
'display: block' on hover.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
Lis
, not the image.
If you don't want borders on links with images in them, you can add a
class to those links that states that.
Example:
[a class="img"] [img href="..." alt="..."] [/a]
a.img {bo
Den 02.09.2014 22:20, skrev Tom Livingston:
http://www.tomliv.com/img/button.png
If that's a typical "button", I would think the addition of
'background-size' and adding the "arrow" in with '::after' should be
fle
cases but not in other. Start by learning all implications of
each method, and then select method, or combo of methods, as it suits
each case.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-dis
.
That, or to add a 1px padding that will overlap the gap, seems to be the
best solution.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -
> Only comment I have is that I feel the external link icon on the
social icons in the footer are unnecessary. Otherwise, very nice.
Me think so too - social icons are self-explaining.
Otherwise good overall balance, and looking good.
regards
Ge
device
they use, so it is always the same behavior on each screen to each of
them - unless someone breaks it.
Only we designers/developers/coders compare between browsers on a
somewhat regular basis, and I can't see any real problems going from
"Full-Page zooming" in one brow
tice, as that makes "text-only zooming" pretty useless for end-user.
I only define 'max-width' for images, to make sure they stay within
available space regardless of screen/window/page width, and for this I
use '%' of container w
use 'px' values.
If you mean 'em' use 'em' values.
If you mean _both_ 'px' and 'em' _under certain conditions_, combine
'px' values and 'em' values the right way in the same media query combo.
regards
Georg
width they kick in at varies with
font-size so no point referring to them in CSS pixels.
Setting 'height' on containers with 'overflow: hidden' do lead to lost
content. You should rethink that part.
r
.
For links in each of the 3 containers I would use a "link-cover". Attach
::before or ::after to the actual link, and let it cover the entire
container. Description here...
http://www.gunlaug.com/contents/design/generate
k like,
and what browsers (how old versions) you want to support.
Need more info than that you want to divide a width in 3 equally wide
containers. Only then can we suggest "good", "better", and maybe even
"best" way to do it.
regards
Georg
Den 10.04.2014 12:59, skrev MiB:
What mobile first does is focusing on the content and the essential
presentation of it. Something all web design should be doing already.
That they should, regardless of how they approach visual design.
regards
Georg
asier.
I agree in principle, but guess how much you "play by the market", or
not, depends on whether you are trying to sell something, or not. :-)
FWIW, I have no "first" in mind when designing, only "all"...
http://www.gunlaug.com/contents/design/
WebKit and Blink showing up, I have
also observed minor differences between Blink-implementations in Google
Chrome and Opera. Whether or not that over time will lead to another
engine-split, is too early to tell.
regards
Georg
a 20+ that uses the Blink engine, same as Google Chrome 32+
and with very few differences from this in how it renders anything.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailma
Not sure, but I have a feeling the answer to what is happening can be
found here...
http://www.gunlaug.no/contents/wd_1_03_04.html
If so, it is an old problem that reappears in a new form, caused by the
fact that you start small on font-size and then size up further in.
regards
Georg
is will be a learning experience!
Chech HTML validity first.
Some unclosed elements in there, and browsers' "error-correction" do not
always agree on how to render such things.
regards
Georg
__
css
Den 22.03.2014 22:39, skrev Karl DeSaulniers:
Hey Georg, Thanks again for this example! Had a quick question. For
some reason, if the outer boxes min-width is less then the totall
width of the two inside containers, the two inside containers stack on
top of each other in your example. Any way
Den 20.03.2014 17:34, skrev Karl DeSaulniers:
Link to example:
http://designdrumm.com/boxresize.jpg
Something along these lines might work...
http://www.gunlaug.com/contents/test/shrink-1.html
CSS in source-code.
regards
Georg
1px red;}
...while designing, you will see where and how wide that container is.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-disc
links here...
<http://www.gunlaug.com/contents/design/index.html>
...and also the regular navigation at the bottom of that page. Both
simple unordered lists carrying achors.
regards
Georg
__
css-discuss [css-d@lists.css-d
rder-radius:3px;
background-color:rgb(0,0,0);
}
nav ul li a{
display: block;
line-height:1.65em;
padding:.12em 1em .4em 1em;
}
...and it will work as you intended.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
e ago - that many browsers don't support
anything "fixed" on small devices, because of the problems it
unintentionally may cause. Also too easy to intentionally mess things up
with "fixed".
regards
Georg
_
Den 10.03.2014 00:32, skrev Philippe Wittenbergh:
The box model John. Adding the padding makes the box wider.
Same thing with the border. The 1px border on that image makes it 2px
wider and taller than 100%.
regards
Georg
operty/value that gets the job done, just because we, or
someone else, dislike something about it, does not make sense.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/lis
leZ(1);
transform: rotateY(1deg) rotateZ(-5deg) scaleX(1) scaleY(1) scaleZ(1);}
...and you will.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ --
ke :-)
regards
Georg
__
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
Support
t the bottom of this stylesheet...
<http://www.gunlaug.com/contents/test/Autobarn4%20Index_files/main.css>
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinf
e
overlapping.
Adjust values to taste ... I have only tested in windows from about
1000px to about 4000px in width.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/list
menu and
is inaccessible.
Adding...
#menu {z-index: 1000;}
...seems to do.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css
Again, many thanks to all.
regards
Georg
__
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-discus
os use the same markup and CSS, so if one fails they should all
fail. Clearly they do not.
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-
things once I find practical uses for
the basic method.
regards
Georg
__
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
eal bugs in chrome,
or if it just a local problem with those browser versions - not the
first time browsers do strange things on my laptop.
Will someone please check in latest Google Chrome and let me know if I'm
dealing with
d refer to stats :-)
My present "limited support for old browsers" policy is presented here...
<http://www.gunlaug.com/contents/basics/incompatible.html>
regards
Georg
__
css-discuss [css-d@lists.css-d
padding-top: 30px; height: 0; overflow: hidden;
}
...the .video-container styles will work.
regards
Georg
div#content div div .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
div#content div div .video
On 26.04.2013 14:35, Philip TAYLOR wrote:
Better than "rem", Georg ? Having been forced to use "rem" for this
fix, I am now considering adopting them more widely.
Haven't bothered to test out what's best in bug-cases like this, only
what works and seem to do n
ated content in IE9+
only - hacked in. Seems to work reasonably well.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.in
ug.no/contents/wd_additions_20.html
...with 5 demo pages to show variants, are linked to in that old article.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
On 27.02.2013 18:47, Geoff Pack wrote:
background-image:url('/imgs/layout/icon_emailTEST.jpg')0 0 no-repeat;
Correct. Make it...
background:url('/imgs/layout/icon_emailTEST.jpg')0 0 no-repeat;
...and it will work
haven't had to battle that bug since IE6. Must investigate further.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio
nd fix for yet.
regards
Georg
__
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/p
#page.
To see how all containers relate to each others, test with something like...
div {outline: dotted 1px green;}
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-
rtfolio.php
Adding...
#menu {min-height: 420px;}
...will fix the problem with footer too high on short pages.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wi
atter what gets thrown at them.
Beyond such a high minimum font-size value I have a feeling visitors
with special needs apply 'page zooming' rather than 'text-only zooming',
simply because few browsers can blow the text
the effect of those paragraph margins on your layout.
regards
Georg
__
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 pol
code, and those paragraphs do have margins that mess up the alignment
you are trying to achieve. Once those paragraphs are eliminated you
should have no problems setting suitable margins on the relevant div(s).
regards
Georg
that page.
regards
Georg
__
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
Su
On 15.02.2013 20:44, Janis Rough wrote:
I am trying to understand floats. Please see my demo:
http://janisrough.dyndns.biz/css/float_test.html
See: http://www.gunlaug.com/contents/test/float_test.html
regards
Georg
Opera/12.12 screws up the primary content text "typographic color"
[font-weight] on all pages.
That font looks more "smeared" in Opera than in other browsers at that
size. Don't know what to do about it.
Georg
___
On 24.10.2012 20:47, Brett Goodrich wrote:
Hello and thank you in advance. I'm using IE9.
1. www.913thewalk.com/shows
Keep IE9 from going into "compatibility view", and/or add "hasLayout"
triggers for IE7 and older
padding to mess with the
widths. What’s causing it?
One of the simplest solutions for such a line-up...
http://www.gunlaug.com/contents/test/tp120924.html
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http
the above
will probably also fix your Problem 2.
regards
Georg
__
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 polici
On 03.08.2012 20:34, Tom Livingston wrote:
Sorry about the mis-fire, lets try again and finish the thought this time...
Correct me if I'm wrong, but I think you want 'links in "inline" styled
list-items'...
http://www.gunlaug.com/contents/test/test-5.ht
those who need that crucial bit
of information, and it was just a coincidence that I hooked my response
to your post.
Hope that satisfy your need for answer. If you want more, take it off-list.
regards
Georg
__
css-d
On 01.08.2012 14:41, Tedd Sperling wrote:
As for "good practice", using a tiny amount of code to accomplish something is
better than using more than what's needed.
If you say so :-)
regards
Georg
___
f IE9 bugs related to
generated content, and this may just be another one.
1. http://dev.w3.org/csswg/css3-color/#transparency
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailm
the same in all browser versions the
OP want to support without including some extra steps/info.
regards
Georg
* http://www.gunlaug.no/contents/wd_additions_34.html
...and more recently:
http://www.gunlaug.com/contents/design/applying_h
hether you want to go forward with CSS, or stop at
some point in time where you feel it is "safer", you still have to check
the result in all browser versions you want to secure support for and
maybe add workarounds for rendering d
Apparently not.
Georg
__
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
On 29.07.2012 11:41, Georg wrote:
On 29.07.2012 07:29, David Hucklesby wrote:
Now you made me double-check. :)
Always a good thing ... that I don't do as often as I should these
days ;-)
To make my solution work we have to determine the exact width of the
auto-added white-spac
retty much covers it. Your solution will work for the large
majority of end-users. Whether or not it can be implemented depends on
ability to tailor markup for it, as Philippe told us is not always the case.
regards
Georg
ew
browsers have such options, not how they handle that particular case.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss
On 28.07.2012 13:58, Georg wrote:
Sort of - in a round-about way. The "auto added" space is approx .5em
either side of an inline-block, so by subtracting 1em from margin at
front-side (often means negative front-margin) and offsetting the
blocks (position: relative) to line up 1em
-up variants for the inline-block method
itself - a total of 6 variants listed here...
http://www.gunlaug.com/contents/test/
Have not included the margin tweaking you ask for yet, but may later.
regards
Georg
__
css-disc
being a problem now.
The reason I mentioned "obsolete browsers" is that I have bad memories
about the cross-browser mess we had until only a few years ago, and now
I don't care to check in older browser versions unless I get paid
ten the best alternative.
regards
Georg
__
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-dis
On 27.07.2012 01:52, Tedd Sperling wrote:
You are irritatingly brilliant. :-)
Naa, I refreshed my mind on old methods on...
http://www.brunildo.org/test/index.html
...a few weeks ago. It's all there, just different.
regards
On 27.07.2012 00:46, Georg wrote:
On 27.07.2012 00:18, Boray ERIS wrote:
Is this a joke?
Nope. It's CSS!
...an if you don't bother to test this old float-alternative at your
end, here are a few examples.
http://www.gunlaug.com/contents/test/test-floating-boxes.html
http://www.g
On 27.07.2012 00:18, Boray ERIS wrote:
Is this a joke?
Nope. It's CSS!
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http:
happy with the result.
regards
Georg
__
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-discus
eptions, so my list of rules for text-sizing doesn't
have to contain more points.
(*) high resolution = 900dpi (above which increased resolution won't
achieve much), so half-way would be around 450dpi. They are not quite
there yet :-)
regards
Georg
hange of size
div.searchForm {
width: 248px;
margin: 10px 0 20px;
}
div.searchForm input+input {
float: right;
}
...and see if that works for you. I have not done any cross-browser test
of it.
regards
Georg
__
css-d
f the
header background image. Changing the width to 100% gets the fluid bit
happening, though, the header is unaffected.
#page, header {max-width: 100%; min-width: 1020px;}
...will solve your problem on both points, down to the 1020 in width
your fixed page can handle.
regards
y and will need "a backdoor entry" or
other workaround.
The 'only' keyword will shut out IE8 if used in an @import, and @media I
think (haven't tested), and I have unintentionally shut out some low-end
android browsers using the 'only' key
test page on Opera Mobile Emulator (where resolution can
be simulated), and got none, two or three lines depending on what
resolution I set.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css
On 16.07.2012 00:51, Gates, Jeff wrote:
Thanks Georg. I can see what you're saying. And I started to play around with
increasing the side div percentages. However, what I'd like to maintain is a
somewhat narrow middle column for the text (I'd like the text to be more
vertical
ge is so narrow that center column looks broken.
regards
Georg
__
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 po
-land since there may be more to your case
than you present here.
In cases where old IE versions create problems caused by clearing, I
usually include clearing for all browsers, and override it to 'clear;
none' for t
On 12.07.2012 19:02, Ron Zisman wrote:
i tried looking at the example you sent, but the stylesheets were so
extensive, i couldn't make heads or tails of it.
http://www.ricochet.org/rollover/home.html
I only included the styles that had to be modified or added. You have
left out all the rest
...and if you want to start scaling with more that 2 images
horizontally, change 'max-width' on .nav to a smaller value that sums
up to 100% or less for the number of horizontal images you want.
Georg
__
c
}
.nav a img {max-width: 100%; height: auto;}
.nav a, .nav a:link, .nav a:visited {
display:block;
width: 100%;
height: auto;
}
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.
it.
regards
Georg
__
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.htm
1 - 100 of 136 matches
Mail list logo
