I have the layout of my site looking like I want in IE. I opened up Firefox 0.8 to take a look, and it wasn’t pretty. The main problem is that the content area extends past the footer of the page. For those with Firefox, you can see what I mean here: http://www.culturecritic.com/bbtest
Is there an obvious fix to this?
Thanks in advance.
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 http://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 pseudo code:
get sidebarlength (x)
get contentwindow length (y)
set x to y
This works because the new value for x is in the current document and thus overrides the external CSS length value.
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)
mac ie5 bugs (yes, some people still use this…)
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. 😉
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
border-left: thin solid #160203;
border-top: thin solid #160203;
border-bottom: thin solid #160203;
padding: .25in 10px 10px 10px;
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.
Don’t worry… that is a joke.
- The topic ‘Help…Firefox Issues’ is closed to new replies.