Theme working in Firefox but not in IE 7

Try decreasing the width of your content div.

Jeremy thank you for the suggestion.

Ok, here is what I have tried. First in the wrapper div I have tried every number other than 100%, at 99% and below the theme stops working in Firefox and behaves the same as IE. At 100% and above there seem to be no difference.

The content div was lowered 5px at a time from the original 711px to 705px, then to 700px, then 695px and finally 690px. In all cases it made the content narrower but did not move it up into the correct section in IE. In other words Firefox was ok with the changes, but IE didn’t care.

I will continue to search this message board but hope that someone can provide more tidbits to help me resolve this issue.

I am reluctant to put in too much content in until I can get this resolved.

Did you try to adding
float: left
to both div’s (navigation and content)?
Also make sure you have
clear: none;
set to your content div tag.

Also, you should, like jeremy said, might still need to the content width smaller once you add the above code.

skrolikowski,
float: left; was in both #sidebar and #content already. Even took content down to 300px, still not working.

I added the clear: none to #wrapper #content and #sidebar. The only other place a clear directive is given is under #footer_clear where it is clear: both;. I am going to continue searching, but what I am finding is a lot of issues with IE6 or earlier but none with IE7. I will move to another PC to check IE6 to see if it suffers from the same issues.

Sometimes it seems as we are looking at different source code ??

Your html markup starts with this:

<div id="bg">
<div id="bg_top">
<div id="page">

Those 3 divs get closed JUST BEFORE the closing /body tag, so they will define the width of the whole blog!

Now, look at your stylesheet:
bg width = 980px;
page padding = 17px (x2 = 34 > left & right)
980-34=846

sidebar width = 220
846-220=626
626 – this is your remaining space in which you have this:
content width = 680px

According to my books it will not work…

Thank you moshu, as I said I am new to this CSS HTML PHP stuff so I am learning by making mistakes and then trying to fix them. I will play around with the values there to see if I can make it work.

Please note that I was trying to integrate into an existing site, the web was coded for us by someone else and I am pretty sure they never really validated any of their code. I am in the process of fixing all the errors on the existing site, while also integrating new functions. Sometimes it is overwhelming for a non-programmer. Not only do I have to learn PHP, but I have to figure out what the original programmer was thinking too!

Thank you for the assistance.

I double checked your math
980-34=946 not 846 as you wrote above.
946-220=726 which is less than the original #content width: 711px; I had originally.

To be honest, in what I posted above… there is nothing related to validation, php and other “fancy” stuff. Just good old basic math ??
You have one big general container with fixed width.
Inside it there are other elements with their own fixed width (and yes, margins and padding add up, too, as well as boders!) – so the total sum of everything inside cannot be bigger than the width of the main container.

Yes, I agree, the trick is to know where to look for those values.

Yeah, my math skills sometimes suck…
But at least you got the idea ??

Put simply – your width calculations are not stacking up. Ignore the silly typo above the issue is a substantive one. By adding margins and padding to any element where the width is declared it will bork due to the differences in implementation of the box model. So either you need to apply one of a number of ugly hacks or you need to apply Root’s Rule: Do not ever apply padding, margins or borders to any element with the width declared.

Listen to Root (and his rule): I’have learnt a lot from his templates when started to work with WP…

??

Okay, I am working on this as we speak. The tips have already produced some benefits. I was able to fix a display issue with one element of the sidebar by doing some simple math.

Now I am scouring the CSS code to to see where all the padding/margins are. I have looked at implementing an IE specific CSS to resolve the issue. I will mark this thread resolved!

Thanks for the assistance everyone.

I am having this exact issue.. but I know nada about where to check these elements. Can someone simplify this or possibly tell me what the heck is going on? I was doing my whole site in Firefox.. looking great.. first time wordpress user..long time Joomla user.. and was excited by how easy this was.. then, decided to bring it up in IE at home and.. OH NO! What the heck? It’s completely discombulated. Here’s the site. Any ideas?