Re: [css-d] display:inline-block differences in browsers
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 nearest Positioning context. That is the first parent — going inside out from the current element — that has a position. Just position:relative; is enough for the positioning context element. Without a positioning context you are effectively positioning relative to the body element. All of this is of course Elementary CSS Layout. __ 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] display:inline-block differences in browsers
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 and Safari.. 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. Just position:relative; is enough for the positioning context element. Without a positioning context you are effectively positioning relative to the body element. All of this is of course Elementary CSS Layout. http://css-discuss.incutio.com/wiki/Absolute_Layouts :-) __ 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] display:inline-block differences in browsers
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 Shouldn't this be enough information for all browsers to render the children with position:absolute;top:x;right/left:x; correctly? So, I don't get why FF is doing something different with that information compared to the other browsers. Thank you, John __ 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] display:inline-block differences in browsers
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 parent to the item that misbehaves in FF does have position:relative Shouldn't this be enough information for all browsers to render the children with position:absolute;top:x;right/left:x; correctly? So, I don't get why FF is doing something different with that information compared to the other browsers. Thank you, John 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. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. This is just my gut feeling here. No science to back it up. HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] display:inline-block differences in browsers
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. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. Thanks, Tom..I will address that... But I'm seeing that in FireFox, down below, 2 chunks: Hours Monday-Saturday: Sunday: and 10am-6pm Closed don't have the same positioning as they do in Safari, Chrome and Opera..which baffles me, if they are using the same origin point relative to top and left, why should Firefox show those 2 text hunks in different positions from the other browsers? Thank you! John __ 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] display:inline-block differences in browsers
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 where browser font rendering differences may be playing a part. Spacing those elements with px (you can use px more safely here because they are imgs) may bring results that are more similar. Thanks, Tom..I will address that... But I'm seeing that in FireFox, down below, 2 chunks: Hours Monday-Saturday: Sunday: and 10am-6pm Closed don't have the same positioning as they do in Safari, Chrome and Opera..which baffles me, if they are using the same origin point relative to top and left, why should Firefox show those 2 text hunks in different positions from the other browsers? Thank you! 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 -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] display:inline-block differences in browsers
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 this difference in Firefox, as opposed to how Chrome, Opera and Safari show that exact same part? Thank you! John __ 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] display:inline-block differences in browsers
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 is about what I am seeing. *Why* the discrepancy? What is the cause of this difference in Firefox, as opposed to how Chrome, Opera and Safari show that exact same part? Thank you! John Sorry. I'm not sure what the discrepancy is. They look pretty similar to me. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] display:inline-block differences in browsers
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 them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John __ 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] display:inline-block differences in browsers
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, am I using the wrong method to get those text bits to line up as I want them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John I personally would have gone with floats. I've gotten used to it so I'm comfortable with it. Make your columns separate divs, float them and make sure the math works for all widths. I usually don't fit things 100%. Leave some wiggle room for the child elements. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] display:inline-block differences in browsers
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 responsive. In addition, you're using position:relative on at least one element and then 'positioning' it with margin-top whereas on another element in the same group, you're using 'top'. It's just a bit messy. Chris On Mon, Mar 17, 2014 at 10:33 AM, Tom Livingston tom...@gmail.com wrote: 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, am I using the wrong method to get those text bits to line up as I want them to? I reached out for inline-block and position: absolute to avoid the snarkyness of using float and clear but it seems *much* trickier by quite a bit. I am hoping it is learning pains. Thanks! John I personally would have gone with floats. I've gotten used to it so I'm comfortable with it. Make your columns separate divs, float them and make sure the math works for all widths. I usually don't fit things 100%. Leave some wiggle room for the child elements. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/ -- Chris Rockwell __ 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] display:inline-block differences in browsers
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 addition, you're using position:relative on at least one element and then 'positioning' it with margin-top whereas on another element in the same group, you're using 'top'. It's just a bit messy. OK..how far up should I go in this re-execution? just the footer area that's being snarky for me, or the whole entire layout? I've poured a delirious amount of time into this method of positioning on the strength of the idea that it avoided problems of the float left float right clear both method. Perhaps its time spent learning..something..but I don't have any more time to squander on experiments...I sure don't need even more problems when it's time to make this buzzard responsive THanks for you input __ 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] display:inline-block differences in browsers
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 :). 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* cleaner, more maintainable, and easily adaptable to narrower devices via media queries. Good luck! On Mon, Mar 17, 2014 at 11:45 AM, John j...@coffeeonmars.com wrote: 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 addition, you're using position:relative on at least one element and then 'positioning' it with margin-top whereas on another element in the same group, you're using 'top'. It's just a bit messy. OK..how far up should I go in this re-execution? just the footer area that's being snarky for me, or the whole entire layout? I've poured a delirious amount of time into this method of positioning on the strength of the idea that it avoided problems of the float left float right clear both method. Perhaps its time spent learning..something..but I don't have any more time to squander on experiments...I sure don't need even more problems when it's time to make this buzzard responsive THanks for you input __ 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/ -- Chris Rockwell __ 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] display:inline-block differences in browsers
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* Thank you, Chris; I was aware that both my css and markup were a couple of rats' nests...getting harder and harder to look at my own code..perhaps that's a signal that the approach in question ain't so greatI appreciate your offering another way of how to attack this situation. I'm going to try to complete this page, responsive and make one other from it, today. John __ 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] display:inline-block differences in browsers
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 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 browsers agree.
If you also add...
#social { outline: solid 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-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] display:inline-block differences in 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 browsers agree.
If you also add...
#social { outline: solid 1px red;}
...while designing, you will see where and how wide that container is.
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
thanks for any clues...FYI, I validated the code first:
http://coffeeonmars.com/W200/test/DTake_Index.html
John
__
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] display:inline-block differences in browsers
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.
Adding...
#social { top: 0; left: 0;}
...as starting points, will make browsers agree.
If you also add...
#social { outline: solid 1px red;}
...while designing, you will see where and how wide that container is.
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
thanks for any clues...FYI, I validated the code first:
http://coffeeonmars.com/W200/test/DTake_Index.html
John
Removing margin-right on header ul got them all on one line for me in
Chrome, without them crowding the rule at the edge of wrapper.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] display:inline-block differences in browsers
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
thanks for any clues…FYI, I validated the code
first:http://coffeeonmars.com/W200/test/DTake_Index.html
Guess it all depends on how wide the window is…
Your wrapper:
#wrapper {
margin:0 auto;
padding:0 20px 0 20px;
max-width:940px;
border-style:dotted;
}
will be as wide as the window, and once that window is wider than 940px, the
wrapper has a fixed width.
Your social icons are positioned with an offset of 47em from the LEFT, thus
when the window is narrower than 940px, those icons will move out of the
wrapper…
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
--
Philippe Wittenbergh
http://l-c-n.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] display:inline-block differences in browsers
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 enormously...heh..you are right..I had no business having
display:inline-block with position:absolute;
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...
what is different in Opera's eyes compared to the other browsers?
Thank you..
John
__
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] display:inline-block differences in browsers
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, let's say, a bit older. V. 20 for OS X shows the page correctly. Thank you! John __ 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] display:inline-block differences in browsers
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 this is? Thank you! John __ 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/
