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
cristian.pal...@gmail.comwrote:
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 li right it would logically reverse the
order (first li goes rightmost, etc).
I usually cheat and place the ul in a span and float that right.
Ta,
~Mx
On Jan 30, 2009 10:29pm, Sandy sfeld...@sympatico.ca 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...
http://www.gunlaug.no/tos/alien/sandy/test_09_0131.html
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
da...@chelseacreekstudio.comwrote:
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 :-) .
http://jigsaw.w3.org/css-validator/
~d
--
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] Firefox Weirdness
Sweet :) Learn something new every day...
On Mon, Feb 2, 2009 at 2:31 PM, David Laakso
da...@chelseacreekstudio.comwrote:
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 :-) .
http://jigsaw.w3.org/css-validator/
~d
--
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/
Re: [css-d] :: Absolute Positioning Disappears in IE6 7 :
2009/2/2 Amrinder amrinder.san...@hotmail.com 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 da...@dmcentral.net 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 li right it would logically reverse the order
(first li goes rightmost, etc).
I usually cheat and place the ul in a span and float that right.
Ta,
~Mx
On Jan 30, 2009 10:29pm, Sandy sfeld...@sympatico.ca 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 sfeld...@sympatico.ca:
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 li right it would logically reverse the
order (first li goes rightmost, etc).
I usually cheat and place the ul in a span and float that right.
Ta,
~Mx
On Jan 30, 2009 10:29pm, Sandy sfeld...@sympatico.ca 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...
http://www.gunlaug.no/tos/alien/sandy/test_09_0131.html
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 da...@dmcentral.net 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 /patejans...@gmail.com/* wrote:
From: Patrik Jansson patejans...@gmail.com
Subject: Re: [css-d] vertical alignment question
To: Brett xba2...@zoominternet.net
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/
