Problem with DIV box overlapping post content

I suggest you try to get it to validate first, right now there are too many errors effecting layout.

I checked the validation errors, and most of them dealt with the affiliate codes on the site. I’m working on validating those codes, but that should not affect the div box’s position, right?

Does anyone else know a way to fix this? Thanks!

I just viewed it in firefox 1.5.0.4 on a Mac, and it appeared to be fine. Have you fixed this?

I just changed it to a float, but I’m running into a new problem of the div box looking fine in IE, but the margins are off in firefox and safari. I tried making it look right in firefox, but it overlapped in ie.

Does anyone know how to change the settings depending on the browser? If not, I’ll just leave it because over 60% of my readers use Internet Explorer.

IE interprets the box model incorrectly. Basically, you need to include a conditional comment, so that you can have separate rules just for IE.

Basically, if you do something like this in your header.php file in your theme:

<!--[if IE 6]>
<style>
div.logo {
margin-left: 10px;
}
</style>
<![endif]-->

Then only the stuff in the style tags will be applied to ie6. You can also use the following

<!--[if IE]>
<!--[if IE 5.0]>
<!--[if IE 5.5]>
<!--[if IE 5]>
<!--[if lt IE 7]>

So, you can make your style.css work for firefox, then put the code bits that will work for Internet Explorer in your header.php file (within the head tags, but after where your style sheet is called) using the above conditional comment system.

Oh, one reason you might not want to use just IE is because when IE7 comes out, it might not work right. Until it becomes final, we don’t really know how ie7 will render the css box model (and plenty of other things). For this reason, I generally refrain from using only IE. I’ll get specific, and start with IE6. Checks your logs to see if anyone is even using older than 6. You might not need to worry about ie5. You’ll notice that last one in the list uses a lt. Basically applies to lower than version 7. You can use that if the rules are good for every version of ie before 7.

And I’ve finally found the page where Microsoft discusses the official way to do hacks to accommodate their browsers with conditional comments. https://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

manstraw,

Thanks so much for all of your help. I checked my log and almost everyone uses IE6 and I after adding the code, it renders perfectly in safari, ie, and firefox.

I really appreciate all your help. Thanks again and God Bless!

glad you’re sorted, you’re welcome!