Help…Firefox Issues

Hi Ben. This is far from an unusual problem. It’s to do with the way that the browsers render CSS. I had a similar problem a way back. I read through many design guides and numerous articles on https://www.alistapart.com for ways to code the site differently, but all of these workarounds left the site looking a little different to how I wanted it.
In the end, I developed my own workaround. Being the kind of geek I am (avoiding a Uni essay) I taught myself some easy JavaScript one night. Then I kept my ‘content breakout’ css stylesheet as it was, but used JavaScript in the main webpage (index.php) to resize the other css div boxes so that the content page never outgrew them.
In pseudo code:
<javascript>
get sidebarlength (x)
get contentwindow length (y)
if y>x
set x to y
</javascript>
This works because the new value for x is in the current document and thus overrides the external CSS length value.
Three problems here. One, I have lost the code. Two, I am not sure if this is smiled upon by CSS puritans, although, in the absence on standard-compliant browsers, I think it’s a nifty hack. Three, you have to learn some JavaScript. Took me about 3 hours, although I was distracted by other things.
If you want other options (non-JavaScript) the best place to look is on CSS support groups and design guides, where this problem regularly features.

This is a CSS positioning question. No javascript is necessary. You have floated both the menu and the content. Fine. You have not defined a footer div in the index.php. If you do that and then style it in the CSS with
#footer {
clear: both;
}
then you should be fine.

i’m not on windows so i cant say how it looks on there (but obviously you have that covered).
run down on mac. safari & firefox – looks fine, the sidebar and the content are different lengths. is that what your talking about? the dreaded mac internet explorer – entirely messed up, top has no background image – in your css declare background-image: url( with either no quotes or double quote (“). also the side bar is right below the masthead and has no color and extends past the page to the right.
i think it all has to do with the css, which can be difficult to tackle. on my site (which isn’t up b/c of cross platform issues like you’re having) i used php to dynamically create the css based on the browser which fixed some inconstancies and personal preferences (mainly win ie not using dotted borders!)
these links may help
gzipping css (php)
css hacks
mac ie5 bugs (yes, some people still use this…)
gluck,nc

Lets take one thing at a time and is not a cross platform / legacy issue at all. The footer wont clear until it is defined in index and styled in the CSS. No hacking needed.

Yes, yes, I agree: define your footer and your problem will be solved. Now, if you wish to have the white background color of the sidebar extend all the way down, you can set the background color on either rap or outer (I didn’t look at your code too carefully, but it will be one of those…)
Have a look at this page for an example. It uses 3 columns instead of two, but the idea is the same.

Nice to see you tcervo. On the design issues as usual. We missed you. ??

It’s good to be back. Been busy with life and other things…

root’s dead on!

thanks

Duh. Okay I figured out how to set the width in wp-layout. But now I have another question. Does anyone know what codes set the bar to the right of the screen? Thanks. ??

You mean the menu ?
This is in your CSS
#menu {
background-color: #3F1217;
border-left: thin solid #160203;
border-top: thin solid #160203;
border-bottom: thin solid #160203;
padding: .25in 10px 10px 10px;
position: absolute;
right: 2px;
top: 0;
width: 2in;
margin-top: 3.35in;
}
I’m not sure about your width setting – can’t say as I’ve seen an ‘inch’ setting in css before. Try px (pixels) or em (the width of one M)
Increase top (in pixels) to drop the menu down.
Shout for help if you need it ??

Yes, the ‘right’ and ‘top’ set #menu at the top right corner of its container.
These two values are only available if #menu is set to ‘position: absolute;’ or ‘position: fixed;’ (the latter is not supported by IE).
If you set it to ‘position: relative;’ instead, you can only use ‘left’, not ‘right’ (you can still use ‘top’ as well, but ‘right’ and ‘bottom’ are only available for absolutely positioned elements).
If you don’t set any position at all, but only write the ‘top: XX;’ part, it won’t do any good, because without a ‘position’ value specified, it’s set to ‘position: static;’, which basically means you can’t move it.
Obviously, if you use ‘right’ or ‘bottom’, it counts from right/bottom edge of the element, not the top/left one…

Thanks everyone. I should have noticed that I hadn’t defined the footer. I will give it a try.

3 hours of javascript for nothing… oh well, nevermind. At least I suppose I can make some annoying moving pop-ups with it.
Don’t worry… that is a joke.

Beware of Geeks bearing gifts ??