[css-d] Looking for some layout help...
I am working on a new layout for a promo/landing type page and am having a problem figuring out why my promotion text area is not centering properly in it's content container. The page is here: http://www.xmission.com/~npetersn/test/landing_layout.html It works in IE6, but not firefox and safari?? There also seems to be a two pixel gap in the promotion text area that I can't figure out either. Any help from the good people on this list would be appreciated. Thanks, Nate __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote: I am working on a new layout for a promo/landing type page and am having a problem figuring out why my promotion text area is not centering properly in it's content container. The page is here: http://www.xmission.com/~npetersn/test/landing_layout.html It works in IE6, but not firefox and safari?? You gave dl.roundedBox a margin of 0. Give it margin:auto and it will center. (boxes center if you give them a width and auto left and right margins, or identical left and right margins and an auto width) There also seems to be a two pixel gap in the promotion text area that I can't figure out either. I don't see a gap. Where is it and in which browser? -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am having a
problem figuring out why my promotion text area is not centering properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
Thanks Brett and Els for your quick responses.
I implemented your suggestions and the promotion text area is now properly
centered. Brett your suggestion to change the height to 48px properly
tightened up the gap that I am seeing on firefox and Safari but still exists
on IE6. The gap exists right between the the promotion text area dt and the
following dd tags.
Thanks again,
Nate
Quoting Brett Leber [EMAIL PROTECTED]:
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am having a
problem figuring out why my promotion text area is not centering properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area
that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote:
Thanks Brett and Els for your quick responses.
I implemented your suggestions and the promotion text area is now properly
centered. Brett your suggestion to change the height to 48px properly
tightened up the gap that I am seeing on firefox and Safari but still
exists
on IE6. The gap exists right between the the promotion text area dt and the
following dd tags.
It looks like IE is calculating height as height + padding (both defined
in CSS), thereby pushing the dd element down. (I should probably note
here that your use of dl is fairly non-standard and un-semantic.) More
importantly, getting those two elements to line up vertically correct
might not be possible. It might be better to create a single div to
contain the content, and assign a background image to that.
If you want it to scale, you might want to look into boxes with rounded
corners.
Brett
Quoting Brett Leber [EMAIL PROTECTED]:
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am
having a
problem figuring out why my promotion text area is not centering
properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area
that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote: Thanks Brett and Els for your quick responses. I implemented your suggestions and the promotion text area is now properly centered. Brett your suggestion to change the height to 48px properly tightened up the gap that I am seeing on firefox and Safari but still exists on IE6. The gap exists right between the the promotion text area dt and the following dd tags. It's caused by the line-height in the dt. If you set the line-height to 48px (height of image), the gap disappears. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
Thanks Els! Nate Quoting Els [EMAIL PROTECTED]: [EMAIL PROTECTED] wrote: Thanks Brett and Els for your quick responses. I implemented your suggestions and the promotion text area is now properly centered. Brett your suggestion to change the height to 48px properly tightened up the gap that I am seeing on firefox and Safari but still exists on IE6. The gap exists right between the the promotion text area dt and the following dd tags. It's caused by the line-height in the dt. If you set the line-height to 48px (height of image), the gap disappears. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
