Re: [css-d] Margins with nested DIVs in FF
Geoffrey Alan Colbath wrote:
Hey all,
I'm looking for some help with funky margin issues in FF. Amazingly
enough, IE is displaying everything just fine. Here's a link to what I'm
working on:
http://www.id.iit.edu/~colbath/StratCon06/about.html
You can see the div with the more... graphic isn't aligning with the
header div. I had to wrap all the little sidebar divs in a container to
solve some other layout issues... and now I'm getting this funky margin.
This may(?) help, at least in FF:
#sideBarContainer {
position: absolute;
/*top: 100px;*/
top: 92px;
left: 588px;
padding: 0 0 0 0;}
In general, using absolute positioning to layout a page, and setting
height on containers, often proves problematic.Same for the tiny pixel
set fonts and line-height. The page should hold font zoom in all
browsers-- even IE. Those good folks at the Illinois Institute of
Technology Institute of Design Strategy (whatever that means) might go
for your page with colors disabled-- I did, and I'm from Chicago, well I
was from there-- they kicked me out.
-=gc=-
Best,
~davidLaakso
--
Typography exists to honor content.
--Robert Bringhurst
http://www.dlaakso.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-d] Margins with nested DIVs in FF
Hey all,
I'm looking for some help with funky margin issues in FF. Amazingly
enough, IE is displaying everything just fine. Here's a link to what I'm
working on:
http://www.id.iit.edu/~colbath/StratCon06/about.html
You can see the div with the more... graphic isn't aligning with the
header div. I had to wrap all the little sidebar divs in a container to
solve some other layout issues... and now I'm getting this funky margin.
Here's the CSS I'm currently using:
#sideBarContainer {
position: absolute;
top: 100px;
left: 588px;
padding: 0 0 0 0;
}
#sideBar {
width: 117px;
height: 233px;
background-color: #d6e03c;
text-transform: uppercase;
margin-bottom: 10px;
position: relative;
}
#sideBarPast {
width: 117px;
height: 233px;
background-color: #78c2cb;
text-transform: uppercase;
margin-bottom: 10px;
}
#sideBar2 {
width: 117px;
padding: 5px;
text-transform: uppercase;
margin-bottom: 10px;
}
#sideBar3 {
width: 117px;
background-color: #78c2cb;
margin-bottom: 10px;
}
#sideBar4 {
width: 117px;
padding: 5px;
text-transform: uppercase;
background-color: #42382f;
margin-bottom: 10px;
}
Any insight would be greatly appreciated (I have a feeling there's a
simple solution to this that's just escaping me, but I can't for the
life of me figure it out...)
Thanks!
-=gc=-
__
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/
