Re: [css-d] Opera problem with footer
hi
#footer .logo-footer {
left:0;
margin:55px 0 0 12px;
position:absolute;
width:196px;
or use
#footer .logo-footer {
left:0;
line-height:14em;
margin-left:12px;
position:absolute;
width:196px;
}
naveen
91-9818534636
On Sat, Jan 31, 2009 at 7:48 PM, Cristian Palmas
wrote:
> Hi all,
>
> I have a problem on a client's site at the address http://www.tecnicaed.it
> .
>
> The footer has a div.logo-footer which has these properties:
>
> #footer .logo-footer {
>width: 196px;
>float: left;
>margin-left: 12px;
>margin-top: -12px;
>position: absolute;
>top: 50%;
> }
>
> The intention is to make it always be in the middle height of the footer,
> even if a user increase the font-size properties of the browser (I tested
> it
> using 16px).
> This simple solution works for IE7 & 6, FF3.0.5, Chrome 1.0.154.46 and
> Safari 3.1.2, all of them on WinXP SP3.
> But in Opera 9.61 it does not work: the .logo-footer is position at the top
> and half cut.
> Could someone tell me why?
> Thanks in advance.
>
> --
> ~ Cristian Palmas ~
> http://www.cristianpalmas.it
> __
> css-discuss [cs...@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-discuss [cs...@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] IE 6/7 issues
Hi all, The following validates (before and after form submission), but (as usual) IE 6/7 are making my head hurt. http://www.cprtools.net/calc All is well in FF/Safari/Chrome/Opera. The first thing I noticed is that the two radio buttons and their labels aren't rendering as expected in WinIE6. This looks ok in IE7 After the form is submitted and the results are rendered, the 'summary' fieldset is (in IE6 and 7) set off to the right while I expected and wanted it to be centered. Any kicks in the right direction would be greatly appreciated. TIA, -Ray -- Non scholae sed vitae discimus __ css-discuss [cs...@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] gettings lists to align right
> I don't know if anyone has replied yet but this is was I've come up with
> so far.
>
> I've opened this in FF, IE7, and IE6 and yes it does reverse its order.
> As I've found out from Googling it would seem this is the correct method
> as per CSS spec.
> I cannot seem to find your hacks in the HTML or CSS code, only test3.css
> - where are you loading them?
>
> Since you are floating each right it would logically reverse the
> order (first goes rightmost, etc).
> I usually cheat and place the in a and float that right.
>
> Ta,
>
> ~Mx
>
>
> On Jan 30, 2009 10:29pm, Sandy wrote:
> > hey all,
> >
> >
> >
> > there is a problem I hope you can help with - I am pretty much at the
> >
> > end of my rope.
> >
> >
> >
> > I have a page where I would like some things to line up on the right,
> >
> > and it's working in the browsers I've tested except for IE6 and 7.
> >
> >
> >
> > I've got it more or less looking right in 7, if you don't look too
> >
> > closely. To get the two lists in the menu to align right, I have an ie7
> >
> > specific style which reads
> >
> >
> >
> > .menu ul li {
> >
> > float : right;
> >
> > }
> >
> >
> >
> > now - this is good except that the links are now in the opposite order
> >
> > than I want them.
> >
> >
> >
> > http://www.caut.ca/ugfa/test/test3.html
> >
> > http://www.caut.ca/ugfa/test/js_css/test3.css
> >
> > http://www.caut.ca/ugfa/test/js_css/ie7-hacks3.css
> >
> > http://www.caut.ca/ugfa/test/js_css/ie6-hacks3.css
> >
> >
> >
> > thanks in advance.
> >
> > (also apologies if I've sent this twice - a little email trouble)
hi Mx,
Thanks for looking at my problem.
Georg sent me this, and it works. I have been able to delete the hacks.
best regards, Sandy
from Georg:
1: delete the mentioned IE-only styles.
2: replace existing styles for the relevant elements with the following...
.menu {
clear : both;
width : 780px;
margin-right : 10px;
font-size : .9em;
font-family : arial, sans-serif;
font-weight : normal;
letter-spacing : .03em;
background-color : transparent;
padding-top: 40px;
}
.menu ul {
padding : 0;
margin : 0;
clear : left;
color : #5d7e25;
text-align : right;
list-style-type : none;
background-color : transparent;
text-align: right;
}
.menu ul li {
display : inline;
}
...and all major browsers will agree (with you) on how to render it...
The problems with IE7 and older are related to "right-floats and
clearing" bugs, so the solution is to avoid "right-floats" and rely on
'text-align' instead. Even IE supports that bit of CSS pretty flawless.
regards
Georg
__
css-discuss [cs...@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] gettings lists to align right
hi,
i didn't see this in the site.
.menu ul li {
float : right;
}
perhaps fixed already?
virgil
http://www.jampmark.com
__
css-discuss [cs...@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 issues
Ray Leventhal wrote:
> http://www.cprtools.net/calc
> The first thing I noticed is that the two radio buttons and their
> labels aren't rendering as expected in WinIE6. This looks ok in IE7
>
> After the form is submitted and the results are rendered, the
> 'summary' fieldset is (in IE6 and 7) set off to the right while I
> expected and wanted it to be centered.
>
> Any kicks in the right direction would be greatly appreciated.
Try adding...
* html br {clear: left;}
div#results {text-align: center;}
div#results fieldset {margin: 0; text-align: left;}
html:lang(en) div#results fieldset {margin: auto;}
...will kick IE6 and 7 in the right direction. That last line gives
other browsers - including IE8 - back the original auto-centering that
older IE versions fail on.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@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] Firefox Weirdness
Thanks for the tips. Out of curiousity, how does that 100%/1.4 work? That's
legit css?
On Mon, Feb 2, 2009 at 10:15 AM, David Laakso
wrote:
> Jerod Venema wrote:
>
>> You guys rock. I dropped off the opacity setting and it works like a
>> champ.
>> It wasn't a large amount anyway, so I'll just drop it off.
>>
>> Thanks a ton!
>>
>> -Jerod
>>
>>
>>
>>
>>> http://frozenmountain.com/team.aspx
>>
>>
>>
>>
>
> Following up somewhat on Felix's suggestion, consider ditching the 10px
> mousetype and enable your good friends and associates in Redmond to scale
> their fonts easily, too-- try:
> html, body
> {
> font: 100%/1.4 "Helvetica Neue", Arial, sans-serif;
> margin: 0;
> padding: 0;
> }
> and use percent throughout the remainder of the style sheet...
> BTW, font-scaling shoves those blue bars right through your chest :-) , and
> your photo images are a no-show in IE/6..
>
> --
>
> A thin red line and a salmon-color ampersand forthcoming.
>
> http://chelseacreekstudio.com/
>
>
--
Jerod Venema
Frozen Mountain Software
http://www.frozenmountain.com/
919-368-5105
__
css-discuss [cs...@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] :: Absolute Positioning Disappears in IE6 & 7 ::
Hi, I have done HTML/CSS of a design here: http://demo.awayback.com/ashton . Everything is fine in firefox, safari, opera but IE 6,7 are not letting things my way. The top sub navigation and search div are not displayed in IEs. Please help asap. Regards, Amrinder __ css-discuss [cs...@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] Firefox Weirdness
Jerod Venema wrote:
> Thanks for the tips. Out of curiousity, how does that 100%/1.4 work?
html, body
{
font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
100% percent is user default font-size. 1.4 is line height expressed as
a raw number (no unit of measure).
> That's legit css?
Ask the w3c CSS Validation Service :-) .
Re: [css-d] Firefox Weirdness
Sweet :) Learn something new every day...
On Mon, Feb 2, 2009 at 2:31 PM, David Laakso
wrote:
> Jerod Venema wrote:
>
>> Thanks for the tips. Out of curiousity, how does that 100%/1.4 work?
>>
>
> html, body
> {
> font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
> }
> 100% percent is user default font-size. 1.4 is line height expressed as a
> raw number (no unit of measure).
>
> That's legit css?
>>
>
> Ask the w3c CSS Validation Service :-) .
>
Re: [css-d] :: Absolute Positioning Disappears in IE6 & 7 :
2009/2/2 Amrinder > Hi, > > I have done HTML/CSS of a design here: http://demo.awayback.com/ashton . > Everything is fine in firefox, safari, opera but IE 6,7 are not letting > things my way. The top sub navigation and search div are not displayed in > IEs. > Please help asap. > > Regards, > Amrinder > asap: http://www.brunildo.org/test/IE_raf3.html Ingo __ css-discuss [cs...@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 issues
Gunlaug Sørtun wrote:
>> the right direction would be greatly appreciated.
>>
>
> Try adding...
>
> * html br {clear: left;}
>
> div#results {text-align: center;}
> div#results fieldset {margin: 0; text-align: left;}
> html:lang(en) div#results fieldset {margin: auto;}
>
> ...will kick IE6 and 7 in the right direction. That last line gives
> other browsers - including IE8 - back the original auto-centering that
> older IE versions fail on.
>
> regards
> Georg
>
As usual, Georg...dead-on accurate. Thanks a bunch!
-R
--
Non scholae sed vitae discimus
__
css-discuss [cs...@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] Firefox Weirdness
On 2009/02/02 14:09 (GMT-0500) Jerod Venema composed: > Thanks for the tips. Out of curiousity, how does that 100%/1.4 work? That's > legit css? http://www.w3.org/TR/CSS21/fonts.html#font-shorthand -- "Do not let any unwholesome talk come out of your mouths, but only what is helpful for building others up." Ephesians 4:29 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [cs...@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] Firefox Weirdness
Works fine here too. FF3.0.5 on winXP PRO SP2 virgil http://www.jampmark.com On Mon, Feb 2, 2009 at 9:04 PM, David McGlone wrote: > On Sunday 01 February 2009 7:19:25 pm Gunlaug Sørtun wrote: >> Jerod Venema wrote: >> > http://frozenmountain.com/team.aspx >> > >> > in FF (3), and check out the "Length of Service: 9 Years", you'll >> > notice that the "s" is slightly cut off. >> >> Seems to be OS related one way or another. >> >> FF3.0.5 on win2K - no problem. >> FF3.0.5 on winXP - is cut off. >> FF3.1b2 on Vista - is cut off. >> FF3.0.5 on Ubuntu - no problem. >> >> All on same resolution. >> >> Haven't observed such "last-letter clipping" in FF before. > > Works fine here on Kubuntu FF 3.0.4. > > -- > David M. > __ > css-discuss [cs...@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-discuss [cs...@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] Firefox Weirdness
Jerod Venema wrote:
> You guys rock. I dropped off the opacity setting and it works like a champ.
> It wasn't a large amount anyway, so I'll just drop it off.
>
> Thanks a ton!
>
> -Jerod
>
>
>
> http://frozenmountain.com/team.aspx
>
>
>
Following up somewhat on Felix's suggestion, consider ditching the 10px
mousetype and enable your good friends and associates in Redmond to
scale their fonts easily, too-- try:
html, body
{
font: 100%/1.4 "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
}
and use percent throughout the remainder of the style sheet...
BTW, font-scaling shoves those blue bars right through your chest :-) ,
and your photo images are a no-show in IE/6..
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [cs...@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] gettings lists to align right
Hi Sandy,
I don't know if anyone has replied yet but this is was I've come up with so
far.
I've opened this in FF, IE7, and IE6 and yes it does reverse its order. As
I've found out from Googling it would seem this is the correct method as
per CSS spec.
I cannot seem to find your hacks in the HTML or CSS code, only test3.css -
where are you loading them?
Since you are floating each right it would logically reverse the order
(first goes rightmost, etc).
I usually cheat and place the in a and float that right.
Ta,
~Mx
On Jan 30, 2009 10:29pm, Sandy wrote:
> hey all,
>
>
>
> there is a problem I hope you can help with - I am pretty much at the
>
> end of my rope.
>
>
>
> I have a page where I would like some things to line up on the right,
>
> and it's working in the browsers I've tested except for IE6 and 7.
>
>
>
> I've got it more or less looking right in 7, if you don't look too
>
> closely. To get the two lists in the menu to align right, I have an ie7
>
> specific style which reads
>
>
>
> .menu ul li {
>
> float : right;
>
> }
>
>
>
> now - this is good except that the links are now in the opposite order
>
> than I want them.
>
>
>
> http://www.caut.ca/ugfa/test/test3.html
>
> http://www.caut.ca/ugfa/test/js_css/test3.css
>
> http://www.caut.ca/ugfa/test/js_css/ie7-hacks3.css
>
> http://www.caut.ca/ugfa/test/js_css/ie6-hacks3.css
>
>
>
> thanks in advance.
>
> (also apologies if I've sent this twice - a little email trouble)
>
>
>
> Sandy
>
>
>
> __
>
> css-discuss [cs...@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-discuss [cs...@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] gettings lists to align right
Cool :) Glad you got it sorted!
I thought I was going mad as I didn't see your hacks lol
~Mx
http://www.mxdx.co.uk
2009/2/2 Sandy :
>
>> I don't know if anyone has replied yet but this is was I've come up with
>> so far.
>>
>> I've opened this in FF, IE7, and IE6 and yes it does reverse its order. As
>> I've found out from Googling it would seem this is the correct method as per
>> CSS spec.
>> I cannot seem to find your hacks in the HTML or CSS code, only test3.css -
>> where are you loading them?
>>
>> Since you are floating each right it would logically reverse the
>> order (first goes rightmost, etc).
>> I usually cheat and place the in a and float that right.
>>
>> Ta,
>>
>> ~Mx
>>
>>
>> On Jan 30, 2009 10:29pm, Sandy wrote:
>> > hey all,
>> >
>> >
>> >
>> > there is a problem I hope you can help with - I am pretty much at the
>> >
>> > end of my rope.
>> >
>> >
>> >
>> > I have a page where I would like some things to line up on the right,
>> >
>> > and it's working in the browsers I've tested except for IE6 and 7.
>> >
>> >
>> >
>> > I've got it more or less looking right in 7, if you don't look too
>> >
>> > closely. To get the two lists in the menu to align right, I have an ie7
>> >
>> > specific style which reads
>> >
>> >
>> >
>> > .menu ul li {
>> >
>> > float : right;
>> >
>> > }
>> >
>> >
>> >
>> > now - this is good except that the links are now in the opposite order
>> >
>> > than I want them.
>> >
>> >
>> >
>> > http://www.caut.ca/ugfa/test/test3.html
>> >
>> > http://www.caut.ca/ugfa/test/js_css/test3.css
>> >
>> > http://www.caut.ca/ugfa/test/js_css/ie7-hacks3.css
>> >
>> > http://www.caut.ca/ugfa/test/js_css/ie6-hacks3.css
>> >
>> >
>> >
>> > thanks in advance.
>> >
>> > (also apologies if I've sent this twice - a little email trouble)
>
> hi Mx,
>
> Thanks for looking at my problem.
> Georg sent me this, and it works. I have been able to delete the hacks.
>
> best regards, Sandy
>
> from Georg:
>
> 1: delete the mentioned IE-only styles.
>
> 2: replace existing styles for the relevant elements with the following...
>
> .menu {
> clear : both;
> width : 780px;
> margin-right : 10px;
> font-size : .9em;
> font-family : arial, sans-serif;
> font-weight : normal;
> letter-spacing : .03em;
> background-color : transparent;
> padding-top: 40px;
> }
>
> .menu ul {
> padding : 0;
> margin : 0;
> clear : left;
> color : #5d7e25;
> text-align : right;
> list-style-type : none;
> background-color : transparent;
> text-align: right;
> }
>
> .menu ul li {
> display : inline;
> }
>
> ...and all major browsers will agree (with you) on how to render it...
>
>
>
> The problems with IE7 and older are related to "right-floats and
> clearing" bugs, so the solution is to avoid "right-floats" and rely on
> 'text-align' instead. Even IE supports that bit of CSS pretty flawless.
>
> regards
>Georg
>
__
css-discuss [cs...@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] Firefox Weirdness
On Sunday 01 February 2009 7:19:25 pm Gunlaug Sørtun wrote: > Jerod Venema wrote: > > http://frozenmountain.com/team.aspx > > > > in FF (3), and check out the "Length of Service: 9 Years", you'll > > notice that the "s" is slightly cut off. > > Seems to be OS related one way or another. > > FF3.0.5 on win2K - no problem. > FF3.0.5 on winXP - is cut off. > FF3.1b2 on Vista - is cut off. > FF3.0.5 on Ubuntu - no problem. > > All on same resolution. > > Haven't observed such "last-letter clipping" in FF before. Works fine here on Kubuntu FF 3.0.4. -- David M. __ css-discuss [cs...@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] vertical alignment question
How can I vertically align elements? I have an image gallery in which I
want all images to be centered vertically and horizontally. The
horizontal part is easy, but I can't figure out how to center
vertically. Here are my styles:
#pictureWrapper {
position:relative;
background-color:#CC;
height: 363px;
width: 363px;
}
#mainpic {
height: 320px;
width: 320px;
position:relative;
margin:auto;
}
#mainpic img {
margin:auto;
display:block;
}
#mainpic is the first child of #pictureWrapper and I want it to be
centered vertically. But I also need to have the #mainpic img
vertically aligned too, because when the image is landscape oriented
there is a huge amount of space below. Is it possible to align vertically?
__
css-discuss [cs...@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] Firefox Weirdness
You guys rock. I dropped off the opacity setting and it works like a champ. It wasn't a large amount anyway, so I'll just drop it off. Thanks a ton! -Jerod On Mon, Feb 2, 2009 at 8:21 AM, Virgilio Quilario < virgilio.quila...@gmail.com> wrote: > Works fine here too. > FF3.0.5 on winXP PRO SP2 > > virgil > http://www.jampmark.com > > On Mon, Feb 2, 2009 at 9:04 PM, David McGlone wrote: > > On Sunday 01 February 2009 7:19:25 pm Gunlaug Sørtun wrote: > >> Jerod Venema wrote: > >> > http://frozenmountain.com/team.aspx > >> > > >> > in FF (3), and check out the "Length of Service: 9 Years", you'll > >> > notice that the "s" is slightly cut off. > >> > >> Seems to be OS related one way or another. > >> > >> FF3.0.5 on win2K - no problem. > >> FF3.0.5 on winXP - is cut off. > >> FF3.1b2 on Vista - is cut off. > >> FF3.0.5 on Ubuntu - no problem. > >> > >> All on same resolution. > >> > >> Haven't observed such "last-letter clipping" in FF before. > > > > Works fine here on Kubuntu FF 3.0.4. > > > > -- > > David M. > > __ > > css-discuss [cs...@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-discuss [cs...@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/ > -- Jerod Venema Frozen Mountain Software http://www.frozenmountain.com/ 919-368-5105 __ css-discuss [cs...@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] vertical alignment question
On 3.2.2009 0:28, Brett wrote:
> How can I vertically align elements? I have an image gallery in which I
> want all images to be centered vertically and horizontally. The
> horizontal part is easy, but I can't figure out how to center
> vertically. Here are my styles:
>
> #pictureWrapper {
> position:relative;
> background-color:#CC;
> height: 363px;
> width: 363px;
> }
> #mainpic {
> height: 320px;
> width: 320px;
> position:relative;
> margin:auto;
> }
> #mainpic img {
> margin:auto;
> display:block;
> }
>
> #mainpic is the first child of #pictureWrapper and I want it to be
> centered vertically. But I also need to have the #mainpic img
> vertically aligned too, because when the image is landscape oriented
> there is a huge amount of space below. Is it possible to align vertically?
>
Hi,
What works for me is to use
top:50%;
and a
margin-top:-1/2xdiv height;
so on your example the margin-top for #mainpic would be
margin-top:-160px;
Like here: http://www.mondiara.com/test/graphics/valign.html
This is because top:50% sets the top of div to the middle, so the
negative margin-top compensates that.
hope it helps,
--patrik
__
css-discuss [cs...@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] vertical alignment question
Sorry! I've been messing around with my own tests too much... here's the
public one:
http://www.mondiara.com/graphics/valign.html
sorry again,
--patrik
On 3.2.2009 1:09, Rod Castello wrote:
> Patrik,
> Your site requires sign-in information.
>
> Rod Castello
>
> --- On *Tue, 2/3/09, Patrik Jansson //* wrote:
>
> From: Patrik Jansson
> Subject: Re: [css-d] vertical alignment question
> To: "Brett"
> Cc: css-d@lists.css-discuss.org
> Date: Tuesday, February 3, 2009, 12:01 AM
>
> On 3.2.2009 0:28, Brett wrote:
> > How can I vertically align elements? I have an image gallery in which
> I
> > want all images to be centered vertically and horizontally. The
> > horizontal part is easy, but I can't figure out how to center
> > vertically. Here are my styles:
> >
> > #pictureWrapper {
> > position:relative;
> > background-color:#CC;
> > height: 363px;
> > width: 363px;
> > }
> > #mainpic {
> > height:
> 320px;
> > width: 320px;
> > position:relative;
> > margin:auto;
> > }
> > #mainpic img {
> > margin:auto;
> > display:block;
> > }
> >
> > #mainpic is the first child of #pictureWrapper and I want it to be
> > centered vertically. But I also need to have the #mainpic img
> > vertically aligned too, because when the image is landscape oriented
> > there is a huge amount of space below. Is it possible to align
> vertically?
> >
>
> Hi,
> What works for me is to use
> top:50%;
> and a
> margin-top:-1/2xdiv height;
> so on your example the margin-top for #mainpic would be
> margin-top:-160px;
>
> Like here: http://www.mondiara.com/test/graphics/valign.html
>
> This is because top:50% sets the top of div to the middle, so the
> negative margin-top compensates that.
>
> hope it
> helps,
> --patrik
> __
> css-discuss [cs...@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-discuss [cs...@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] vertical alignment question
On 3.2.2009 1:21, Brett wrote:
>
>
> Patrik Jansson wrote:
>> On 3.2.2009 0:28, Brett wrote:
>>> How can I vertically align elements? I have an image gallery in
>>> which I want all images to be centered vertically and horizontally.
>>> The horizontal part is easy, but I can't figure out how to center
>>> vertically. Here are my styles:
>>>
>>> #pictureWrapper {
>>> position:relative;
>>> background-color:#CC;
>>> height: 363px;
>>> width: 363px;
>>> }
>>> #mainpic {
>>> height: 320px;
>>> width: 320px;
>>> position:relative;
>>> margin:auto;
>>> }
>>> #mainpic img {
>>> margin:auto;
>>> display:block;
>>> }
>>>
>>> #mainpic is the first child of #pictureWrapper and I want it to be
>>> centered vertically. But I also need to have the #mainpic img
>>> vertically aligned too, because when the image is landscape oriented
>>> there is a huge amount of space below. Is it possible to align
>>> vertically?
>>>
>>
>> Hi,
>> What works for me is to use
>> top:50%;
>> and a
>> margin-top:-1/2xdiv height;
>> so on your example the margin-top for #mainpic would be
>> margin-top:-160px;
>>
>> Like here: http://www.mondiara.com/test/graphics/valign.html
>>
>> This is because top:50% sets the top of div to the middle, so the
>> negative margin-top compensates that.
>>
>> hope it helps,
>> --patrik
>>
>>
>
> Patrik,
>
> Thank you. That centers the #mainpic div but not the img inside. The
> images are either landscape or portrait and this works fine on the
> portrait images but still leaves a lot of space below on a landscape
> image. Of course the landscape image height will differ from image to
> image, so there is no way to set a fixed height and therefore I cannot
> use the same technique for the img.
>
> Any other ideas?
>
> Brett
>
Hi,
Stupid me. I've just been studying css's display:table -properties and I
didn't figure out that the answer lies in there! So forget the
previous... :)
This time try setting the #pictureWrapper
display:table; with a fixed border-spacing (couldn't find, in this time,
find another way to center #mainpic)
and set #mainpic
display:table-cell; with a
vertical-align:middle;
like this: http://www.mondiara.com/graphics/valign.html , css is
embedded in the code
good luck,
--patrik
__
css-discuss [cs...@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] IE6 and positioning
Hello,
I'm having some trouble with IE6 -- which last time I tested the site,
I don't remember having this problem, so I am not sure why this is
happening.
In IE6 the #nav is pushed down 100px.
To fix this I added in ie.css:
#branding {position: absolute;}
#nav {padding-top: 360px;}
But I would love to know why this is happening and hopefully remove
these 2 rules.
Would anyone know where the culprit is?
Page is at: http://designbyelle.com.au/mq/
Thanks,
Elle
http://designbyelle.com.au
__
css-discuss [cs...@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 positioning
Elle Meredith wrote:
> I'm having some trouble with IE6 -- which last time I tested the
> site, I don't remember having this problem, so I am not sure why this
> is happening.
> In IE6 the #nav is pushed down 100px.
> Page is at: http://designbyelle.com.au/mq/
IE6' "auto-expansion bug" at play. IE6 doesn't respect declared
dimensions on a container if IE6 "thinks" the content, for whatever
reason, doesn't fit inside that container.
In my test-files from earlier I simply added...
* html #branding, #nav {overflow: hidden;}
...to prevent "auto-expansion". In a case like yours, such a restricting
of overflow is much safer and stable than your A:P solution.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@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/
