mar 17 2014 05:10 John j...@coffeeonmars.com:
I think I'm getting closer to understand how to use this new (to me) method
of positioning, but I don't get what it's relative to, such that Firefox
renders it differently from Opera, Chrome and Safari..
Absolute positioning is relative to the
mar 17 2014 08:35 MiB digital.disc...@gmail.com:
mar 17 2014 05:10 John j...@coffeeonmars.com:
I think I'm getting closer to understand how to use this new (to me) method
of positioning, but I don't get what it's relative to, such that Firefox
renders it differently from Opera, Chrome
On 3/17/14 12:35 AM, MiB wrote:
Absolute positioning is relative to the nearest Positioning context. That is the first
parent — going inside out from the current element — that has a position.
In my current page, the parent to the item that misbehaves in FF does
have position:relative
On Mon, Mar 17, 2014 at 7:40 AM, John j...@coffeeonmars.com wrote:
On 3/17/14 12:35 AM, MiB wrote:
Absolute positioning is relative to the nearest Positioning context. That
is the first parent — going inside out from the current element — that has a
position.
In my current page, the
On 3/17/14 5:56 AM, Tom Livingston wrote:
One thing that may be happening is that you are spacing the icons with
ems, which is tied to font sizing. The math involved with the spacing
of the elements in #social is tight enough where browser font
rendering differences may be playing a part.
On Mon, Mar 17, 2014 at 10:09 AM, John j...@coffeeonmars.com wrote:
On 3/17/14 5:56 AM, Tom Livingston wrote:
One thing that may be happening is that you are spacing the icons with
ems, which is tied to font sizing. The math involved with the spacing
of the elements in #social is tight enough
On 3/17/14 7:19 AM, Tom Livingston wrote:
This link to a screen shot is Chrome on top and FF Aurora behind:
https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png
HTH
Yes, that is about what I am seeing. *Why* the discrepancy?
What is the cause of
On Mon, Mar 17, 2014 at 10:22 AM, John j...@coffeeonmars.com wrote:
On 3/17/14 7:19 AM, Tom Livingston wrote:
This link to a screen shot is Chrome on top and FF Aurora behind:
https://dl.dropboxusercontent.com/u/2616576/Screen%20Shot%202014-03-17%20at%2010.12.56%20AM.png
HTH
Yes, that
On 3/17/14 7:24 AM, Tom Livingston wrote:
Sorry. I'm not sure what the discrepancy is. They look pretty similar to me.
your screengrab shows them closer than my FF version, but why should
there BE a discrep?
Or better, am I using the wrong method to get those text bits to line up
as I want
On Mon, Mar 17, 2014 at 10:29 AM, John j...@coffeeonmars.com wrote:
On 3/17/14 7:24 AM, Tom Livingston wrote:
Sorry. I'm not sure what the discrepancy is. They look pretty similar to
me.
your screengrab shows them closer than my FF version, but why should there
BE a discrep?
Or better,
I see the same thing as in the screenshot Tom posted.
I would recommend re-thinking how you execute your layout. Absolute and
relative positioning are completely unnecessary in this case, and you're
only setting yourself up for more 'top: this' and 'left:this' when you want
to make this
On 3/17/14 8:14 AM, Chris Rockwell wrote:
I would recommend re-thinking how you execute your layout. Absolute and
relative positioning are completely unnecessary in this case, and you're
only setting yourself up for more 'top: this' and 'left:this' when you want
to make this responsive. In
This is a shell mock-up with *a lot* less CSS. Granted, I've only looked
at it in Chrome but this should get you started. I cleaned up the markup a
bit, namely what you were using to markup the menu that contained About,
Women's, etc. - use nested ul's :).
On 3/17/14 9:20 AM, Chris Rockwell wrote:
http://codepen.io/chrisrockwell/pen/gFsiH/
Pay no attention to the seemingly arbitrary class names and ID's - I use
snappy snippet to take it from the inspector to codepen and it does that.
Again, this should get you on your way to something*much*
Den 16.03.2014 05:06, skrev John:
my social media icons, top right respect my wrapper in FF, but in
Chrome, Safari and Opera, the whole group moves outside the wrapper
to the right by 1 icon...
Can someone explain why this is?
You are absolute positioning in thin air ... not given browsers
On 3/16/14 12:13 PM, Georg wrote:
You are absolute positioning in thin air ... not given browsers a
starting point for positioning.
That makes browsers guess what you mean, and one browser's guess is
as good as another's.
Adding...
#social { top: 0; left: 0;}
...as starting points, will make
On Sun, Mar 16, 2014 at 8:07 PM, John j...@coffeeonmars.com wrote:
On 3/16/14 12:13 PM, Georg wrote:
You are absolute positioning in thin air ... not given browsers a
starting point for positioning.
That makes browsers guess what you mean, and one browser's guess is as
good as another's.
Le 17 mars 2014 à 09:07, John j...@coffeeonmars.com a écrit :
this fixed things for Safari, but all the other browsers are showing things
pretty much wherever the spirit moves them. Is there something else I've left
up for grabs in this? The whole design appears to be exploding
On 3/16/14 5:52 PM, Philippe Wittenbergh wrote:
solution: position them from the right…
#social {
display:inline-block; /* —- remove this, makes no sense with an absolute
position element */
position:absolute;
top:0;
left:47em; /* ———- change this to right: 0; */
}
Philippe;
this helped
On 3/16/14 7:04 PM, John wrote:
Now all the browsers are showing things correctly, except Opera, which
has my aside down lower and in the middle..it appears to be influenced
by section, but I'm not seeing what the connection is...
My bad, again..I had no idea that my version of Opera was,
I think I'm getting closer to understand how to use this new (to me)
method of positioning, but I don't get what it's relative to, such that
Firefox renders it differently from Opera, Chrome and Safari..
It's the same code, but obviously FF interprets it differently. Can
someone explain why
my social media icons, top right respect my wrapper in FF, but in
Chrome, Safari and Opera, the whole group moves outside the wrapper to
the right by 1 icon...
Can someone explain why this is? I've spent my time developing in FF,
then decided to check in the other browsers and got a few
22 matches
Mail list logo
