Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

firefox and luna template set (leftsidebar)

Quote Reply
firefox and luna template set (leftsidebar)
Does anyone know why i have an issue with my leftsidebar (luna template set) with firefox. I set the margin-left: -270px; but it doesnt display properly on firefox. i had to set it to a much higher number for it to appear like i wanted.

Thanks,

Steve
Quote Reply
Re: [stevenwolf] firefox and luna template set (leftsidebar) In reply to
It has to do with a bunch of things, but if you get the web developer plugin for it (Iforget what it's called) you can show the boxes and areas ,and get a better understanding of what it is doing, vs MSIE.

Brewt uploaded the "boxes" post showing how the various div's overlayed and nested. It does help. It's in that sticky post.

I seem to have it working on the TFPModels.com site. Only on the home-page though (I didn't want it on other pages).

I know I played around with it for awhile, because it's sort of working backwards, and I'm not sure how I was making it work, but it looks the same (on my machine) on MSIE and FireFox.

for me, that was a major accomplishment <G>

There are some "quirks" in the layout that if changed slightly seem to work with both firefox and MSIE (I got my headers to nest, and images to align, etc without the extra spaces firefox was adding.)


PUGDOG´┐Ż Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [stevenwolf] firefox and luna template set (leftsidebar) In reply to
Do you have your site up so I can take a look?

Adrian
Quote Reply
Re: [stevenwolf] firefox and luna template set (leftsidebar) In reply to
In Reply To:
I set the margin-left: -270px; but it doesnt display properly on firefox.
[/quote]
luna.css (default)
Code:
#leftsidebar {
margin-left: -200px;
padding: 10px 0px 10px 10px;
width: 190px;
float: left;
position: relative;
/* hide the left sidebar by default */
display: none;
}

I think the trick is to set the border-left on the ocwrapper
to a number larger than the negative offset of the leftsidebar,
and then unhide the left sidebar.
Code:
/*---------*\
|* content *|
\*---------*/
#ocwrapper {
/* background colour of left sidebar */
border-left: 200px solid #e2e1eb;
/* background colour of right sidebar */
border-right: 190px solid #ffffff;
padding-right: 20px;
background: #e2e1eb;
}

#leftsidebar {
display: block;
padding: 10px 0px 10px 10px;
}

Are you shooting for a 3 column layout like this?

Chris
RGB World, Inc. - Software &amp; Web Development.
rgbworld.com