Sidebar pushed over in Firefox

you have several CSS errors that you might want to correct first:
https://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.jamesfive19.com%2Fblog%2F

I already validated the blog with W3C before I started the thread, the blog checked out ok. Do you mean the CSS by itself?

Went to your link, thaKing. Oh boy, it looks like I have a lot of work to do… I’ll validate the CSS first and then ask again if the problem persists. I’ll try not to forget to close this thread if it works, if not then I’ll get back here within a few days I hope. Thanks for the tip!

the only thing you “need” to fix are the errors…the warnings are less critical…

I DO feel good about myself today! I fixed all errors in the CSS (did XHTML before) – and even pasted my trophy W3C buttons into the sidebar. Took a quick look at the warnings, but all is ok, no need to change them.

But the sidebar is still off to the right in Firefox. Confused. I still don’t get it.

ypour content is simply too wide for the fixed width.

For starters look at this page, specifically where the title of that post ought to be:

https://jamesfive19.com/blog/?p=89

either you need adjust your current CSS so that it knows what to do with extra long titles, or you need to shorten that, considerably. Its also an OBVIOUS problem on the front page.

you have major issues on that site beyond what I can figure out.. You do realize that your sidebar is supposed to be on the left, dont you? Atleast thats what I see when I use firefox’s web dev extension.

I can show you an image:

https://www.village-idiot.org/broke/wtf.gif

Amazingly, THAT page only looks that way once Ive turned on the 2 settings in web dev.. looking at it normally shows me a sidebar on the right hand side.

I would set all those posts as drafts, make one post, NOT by copying and pasting, but by typing into the write post box, and see if that small post displays where it should.

If not, youve hosed something up beyond just a simple posting problem.

Ill hazard a guess and say that youve attempted to modify a working theme and have borked things seriously. Best bet would prolly be to reupload the original files, and start again OR find a theme that more closely resembles what you want as a finished product.

I see that the title did mess things up. I’ll have to read up on how to fix that in CSS.

The sidebar is on the left in IE – which I usually use. I only recently started using Firefox and noticed the huge problems.

If you look at the front page of the blog in IE, the title of that post is cut off, but the sidebar is still where it should be. But I’ll get to the CSS now. Thanks.

Instead of messing with the css for titles, I just shortened the title. I found one post that was too wide because of code, so I changed the size. I narrowed the content.

Unfortunately the sidebar is too far to the right in Firefox, its position completely unchanged.

Whooami wrote: “You do realize that your sidebar is supposed to be on the left, dont you? Atleast thats what I see when I use firefox’s web dev extension.”

When I look at the link you gave, I see that the sideboxes are on the left, but that the sidebar and content are ordered up above, below the header image. I still don’t have the foggiest why that is happening.

I may take a look at the original php for suBLUemenal tomorrow.

one thing you have is
#content {
width: 520px;
margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 240px;
}
reduce that last one to say 20 px and that will at least move up your content…or it should….

I fixed the width like you said, thaKing, and found that the text jumped up to the left of the sidebar in Firefox, it was still on the right of it in IE. I then changed the sidebar float from left to right, and adjusted the margins a bit and it seems to work well enough. The look in Firefox isn’t ideal, it still looks better in IE, but at least the sidebar and content are next to each other.

I think that whooami’s suggestion was right, too. The original suBLUEmenal probably has the sidebar on the right, and just couldn’t take a change to the left. I still want it on the left sometime, but am happy that the site looks halfway decent in Firefox now.

I was using the large left margin of the content to force it to the right and the sidebar up to the left, but it just wasn’t the right solution for Firefox no matter what I tried.

I’ll consider the case resolved for now. Thank you thaKing and whooami for your quick and patient support! ??

glad it is working, even if not perfect…

This is 12 months late, but I just worked through almost the same issue, so I thought I’d put it up anyway:

When using CSS for page layout, you need to be careful when using ‘margin’ and ‘padding’ – reason is that IE interprets them differently from other browsers!

e.g. imagine this code:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}

This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.

In IE however, the “border and padding are included in the width” of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em.

(All the above information is from – https://www.codeproject.com/html/css-internet-explorer.asp, which also has a ‘hack’ to work around it!)