Custom theme broken in IE

Ok thanks, I’ll try again tomorrow.

ARRGHHHHHHH

This is ridiculous. I’m about to give up on the site if I can’t fix this problem. I’ve tried everything…EVERYTHING…I’ve googled for hours, tried all the different “fixes”, but NOTHING helps. I’ve tried deleting all content from the content area and the sidebar, and the sidebar still displays below the content area.

I’ve tried every damn thing and its still not working. Could anyone PLEASE look at the iestyle.css stylesheet and tell me what I need to change.

Sorry I haven’t been able to get back to you right away; malware infected my main computer and I’ve had to do surgery on my registry to clean it all out and then reformat.

Two possibilities:

1) Float your sidebar like I said to for the IE stylesheet and see what happens/if the sidebar aligns with your content. If not, screenshot me.

Float it left:

#sidebar {
	padding: 10px 0px 0px 10px;
        margin-left: 0px;
	width: 173px;
        float: left;
        clear: left;
	}

or float it right:

#sidebar {
	padding: 10px 0px 0px 10px;
        margin-left: 0px;
        float: right;
        clear: left;
	width: 173px;
	}

2) Go look at your source code (the XHTML) and look for this block right before your #sidebar div.

</div>
    <div><img src="https://www.shouldibotherwith.com/wp-content/themes/sibw/images/contentbot.jpg" alt="content bottom" width="600" height="19" align="left" /></div>

	<div id="sidebar">

See the </div> at the top? Move that </div> to AFTER the image div so that it looks likes this:

<div><img src="https://www.shouldibotherwith.com/wp-content/themes/sibw/images/contentbot.jpg" alt="content bottom" width="600" height="19" align="left" /></div>

    </div> <!-- move to here -->

	<div id="sidebar">

And see what happens.

—

Choose ONE OR THE OTHER and see what happens. If you see progress and your sidebar does indeed move to the right and align next to your content, combine the two ideas I gave you (enclose that image block into the content div and float your sidebar to the right and clear left).

My guess is that since your image aligns left, your sidebar – without floats specified or clearance specified in your IE style, ended up aligning left – like it should! – with your image block.

Since IE is finicky, you might have to try both options before you find out which culprit it is. But I am 99% sure that your image block alignment combined with a lack of positioning/floating for the sidebar in your ie stylesheet made it go ‘AH HA! Align with that nice image block there!’

Do everything step by step and if you want/need more support, screenshot your progress in trying out each of the options I listed and I’ll try to help you fix it.

Oh god…I dunno what to say. You’re a damn genius. Floating right and moving that </div> moved the sidebar up where it should be – now there’s some margin/width issues that I’ll have to sort out but as long as the sidebar stays up there then I should be able to fix that easily.

Thank you so much for helping, if I didn’t fix the site today then I was gunna quit the whole thing.

Only way I can think of thanking you is like, a link on my site or whatever, in the About page i’ll mention that without you the site wouldn’t exist, so if you have a website or anything then tell me and I’ll link to it.

Seriously though, THANK YOU.

Ha, I feel bad, but one more thing…

Moving the image inside that <div> area has meant it now has the content area margins/padding working on it. So in firefox there’s 10px (i think) padding on the left thats pushing the image out of place. I’m sure there’s a simple way of either getting it to ignore that padding or just getting it to show in the right place without it appearing inside that <div> or something, but I can’t work it out.

Anyone know the css for that?

EDIT

I fixed it by making the image a background image that sticks to the bottom of the content area. Now I upload and find out IE doesn’t recognise that CSS or something…

Ha, nope, making that image a background image actually fixed all the padding/margin issues in IE too, so it looks perfect.

^_^ Im so happy.

*sigh* Well that didn’t last long.

I upgraded to IE7, expecting it to work fine on there using the default style, but it is completely screwed. The header is all over the place, everything is overlapping, its a mess. Then I tried to make it use the other IE stylesheet, but its a mess too, the header disappears, there’s a gap between the sidebar and content area.

So I’ve had to make ANOTHER stylesheet for IE7+, which I’m not trying to edit, but can’t get the header in the right place.

https://www.shouldibotherwith.com/wp-content/themes/sibw/iestyle7.css

Thats the stylesheet I’m not trying to edit so it works in IE7, but if no one can be bothered to look then I aint blame you. I bet whatever I do in this stylesheet won’t work in IE8 anyway.

EDIT…AGAIN

No idea what I’m doing, trial and error, but I’m fixing it myself slowly so..yeah, ignore that I guess.

One of THE most frustrating things to deal with in regards to coding for IE is that IE6 and IE7 and IE8 all render the same code differently, depending on how exactly the code was/is written.

Say you think you fix a problem in one place, but because of a code ‘exception’ (exceptions in my book are codes that are known to be interpreted differently by different browsers, especially when used in conjunction with other codes), you may now have a new problem to contend with.

… Which is what seems to have happened with you.

Since you were able to fix the issue mostly, here is the best advice that I can give you:

If AT ALL POSSIBLE, use the most cross-browser compatible coding possible and THEN code for IE exceptions later to make fixes.

The floats and image div changeup that I suggested is probably the most ‘proper’ way to fix your problem all around as all browsers – with a little tweaking – will render it properly.

So for both your stylesheets, use the same floating and moved-image-div structure and see what happens when you load your page in the newer IEs.

I only have IE6 on this machine, so I unfortunately can’t view your page, but if you can screenshot me images of what your page looks like in the other IE browsers, I might be able to further help you.

Learning coding is hard work.

Learning how to code right and then how to apply ‘fixes’ is harder work because it requires patience, a willingness to learn, and a willingness to research and ask around and experiment.

I recently ran into a weird Opera rendering bug myself that I had never before ecnountered and it made me go WTF, so you’re not alone and I’ve been at this for quite a few years now. ??

Don’t give up!

Forgot to mention: The float method and the moving of the image div method is probably going to work for almost all browsers because logically speaking, THAT is the ‘right’ way to do it.

IE6 rendering your sidebar aligned to your image div WAS correct.

Firefox and Safari made the assumption to ignore the image div alignment and so aligned itself to your content block with the help of a negative margin.

Don’t use the negative margin because you don’t need it.

Use that float method I described earlier along with the clear and it should work mostly fine in all browsers.

IE7 is chewing up parts of mine too. I can’t seem to get the top nav (div#pages) to line up correctly, though it does just fine in every other browser. I’m sure it’s an easy fix. Any ideas?

https://roychristopher.com

Thanks in advance.

Never mind. Fixed it (it was an easy fix).

Peace everyone.

As far as I know (I don’t have IE8 so can’t check in that, but very few people have it so far anyway so it doesn’t matter much) the site is working everywhere. I’ve tried in Safari, Firefox, IE6, IE7 and portable iPhone browser, and it looks perfect.

So thanks for the help everyone.

Awesomeness! ??

Glad you could get it all sorted out! Remember the things I told you about IE discrepancies and it will help you avoid the same problems in the future.

And you’re completely welcome.

Hi I am having a problem witha background image it is not showing up in safari it does show up in firefox, maybe it is the way I wrote the css the link: https://www.sylvainmeret.com/sylvainmeret

thanks for the help,

Ilaria