EMG

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!

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.

Sorry I’m late in getting back to you; had computer problems that required some registry surgery.

Because I can’t load your site in IE without IE crashing, I can only give you some suggestions on possible problems that might be making your site go all funkadelic.

If you can kindly screenshot me the problems, I might be able to point you in more specific directions.

– Problems with floats // IE is notorious for adding extra spacing (or sometimes deleting spacing/margins/padding) between side-by-side elements and if the elements are floated, the problems tend to become more marked

– Since your main content expanded hugely, look at the widths for all the elements in your main content block. Is someone at 100%? Does someone not have a width specified at all? To render properly in IE, IE needs numbers to widths and heights if you want to float or stack items in the right direction, right order, and with the right appearance.

It CAN use percentages, but the percentages MUST be calculated RIGHT. Padding and borders add to the dimensions of an element, so if you specify two elements to be contained in a block with one at 75% and the other at 25% width and one of the blocks has a border or padding, IE WILL shift the rightmost block to the next space with the available room because the border and/or padding made the blocks larger than the 75% or the 25%.

– With that said, if you have the situation I described above and you didn’t specify/make the right specifications on the widths for the elements/content blocks within the 75% main content block, you might end up with a hugely expanded block. This is why I partially suspect that somewhere in your coding for the content block, your numbers aren’t quite adding up ‘right enough’ for IE to render it correctly.

– Same with the sidebar if the sidebar became hugely expanded.

– Is your code validated? If it isn’t, validate it and it might help narrow down your problems a bit.

Is this happening with any and all other WP-generated sites as well?

I don’t know if maybe this might be related, but:

Last night, I was experiencing a stupidly weird bug where Opera 9.6.4 would crash out in the middle of loading blogs that had WP content in them.

Never experienced that before until last night. I was wondering if maybe it was just my own computer that was being crash-happy and so I just rebooted my machine and gave up on Opera 9.6.4 and went back to 9.6.3.

Also, have you ever been able to check your CPU and RAM usage prior to crash out?

Way cool – thank you so much! I found my answer in the first three links offered up by Google.

I don’t know why I didn’t think to Google my subject matter as I always Google pretty much everything I have questions for.

I guess I was expecting to see a post in the Codex/Documentation about the Sticky Post functionality (like how there is a page in the Codex about formatting different templates) and somehow made a connection that no post in the Codex means no information elsewhere online – whooops.

Speaking of which: Will there ever be a Sticky Post documentation by any chance?

When I looked up Sticky in the Documentation, all the information I found about Sticky Notes (that they were a new function, and that’s it) was in the release notes for WP 2.7.

Thanks again for the link!

Mmmmm…

I know I’ve seen a lot of people theme their own WPs to have multiple sidebars, but I don’t think I’ve personally seen a public theme released that featured that specifically.

But I’ve definitely seen a lot of articles on how-to do it and I’ll link you:

Here

Here

Sorry I couldn’t point you to any public themes in particular.

Do you mean the whole dark blue section?

Here’s the code in your .css file that you have to change to change the background image on:

#header{
	margin: 0 0 10px;
	float: left;
	width: 904px;
	height: 250px;
	background: url(images/bg_header.gif) no-repeat left bottom;
	color: #333;
}

To change your header, just change out the ‘background’ information to reflect your header.

In case you’re interested, this is the header image that they use for the theme:

https://tips4weightmaintenance.com/wp-content/themes/digg-3-col/images/bg_header.gif

Alternatively, you can keep the main header and just layer on another image on top (the blue area like you said).

#pagetitle{
	clear: both;
	width: 904px;
	height: 155px;
}

To do that, add coding for a background into that block of code.

Never used it myself, but try this guy’s theme:

https://www.wp23.com/multiple-widgets-wordpress-theme/

When I opened your site in IE6, your site crashed out my browser by giving me 2 Java runtime errors (what are you doing with Java?) and problems with accepting cookies from snap.com.

I couldn’t even finish loading your site; you might want to look into that.

Awesomeness! I’ll go and try it out – thanks for the reply! ??

EDIT: Is there any way to put a notice on the sticky post to notate it as a sticky post? I could just post an image along with the post and stylize and position it or something, but if there’s another way to notate the post as Sticky, I’d love to know. *goes to check the Codex*

Not a mod or a staff member, but I would suggest keeping a hard copy of the zipped up theme and then removing those suspicious strings from your working theme copy and seeing what happens.

Removing them shouldn’t be a problem.

I have to run, but I wanted to drop a line and say:

If your code is validated and renders properly in Firefox (have you tried Safari yet?), then my guess would be that your code is suffering from a case of collapsing margins or overextended or invisible padding.

That is one of the most common problems experienced when it comes to browsers rendering spacing differently.

Maybe you should look into that?

I’ll come back and see if I can help you troubleshoot further once I get my errands run.

And it appears my original post disappeared. Here’s a rehash of the first post I made:

Change your current footer and footer content coding to:

.ende {
	clear:both;
	height: 200px;
	background: #0c1216 url('images/footer2.jpg') no-repeat;
	background-position: 50% -5px;
	display: block;
	padding-left: 0px; /* padding affects width, which can affect appearance */
        margin: 0px; /* set your margins to 0px to make sure there isn't random space being added to your margins by the browser */
        width: 924px; /* you didn't specify a width size, which means the browser might take liberty to move things around a bit */
}

.ende2 {

	height: 40px;
	width: 880px;
	margin: auto;
	padding-top: 7px;
	font-size: 0.85em;
	color: #666;
}

Oh by the way, when I looked at the ende div block on your site, my browser told me that the width of the entire block was/is 1007 pixels wide.

Also, I just noticed this, too:

You declared your .ende2 div twice. Was there any reason for that or was it an accident?

Your footer content more than likely should be coded like this:

<div class="ende"> <!-- declares the start of your footer block -->

	<div class="ende2" > <!-- declares the start of your footer content -->

Chili loves <a href="https://www.wordpress.com/">Wordpress</a><br />
Theme ? 2009 <a href="https://www.rockinchili.com">rockinchili.com</a><br />
RockinCHILI.com is a modification of the <a href="https://www.daburna.de/blog/2007/08/17/wordpress-blueblog_de-skin/">blueblog_DE Theme by Oliver Wunder</a>  

<br /> <!-- puts a break between your footer content and your iframe -->

<iframe src="https://blog.rockinchili.com/wp-mail.php" name="mailiframe" width="0" height="0" frameborder="0" scrolling="no" title=""></iframe>
        </div> <!-- end of ende2 footer content -->

</div> <!-- end of footer block -->

Provided all the math is/was done correctly when calculating widths and heights and padding and such, divs usually misalign due to some issue with browsers rendering widths in conjunction with alignment, margins, and paddings.

So my suggestion is to change this:

.ende {
	clear:both;
	height: 200px;
	background: #0c1216 url('images/footer2.jpg') no-repeat;
	background-position: 50% -5px;
	display: block;
	padding-left: 2px;
}

.ende2 {

	height: 40px;
	width: 880px;
	margin: auto;
	padding-top: 7px;
	font-size: 0.85em;
	color: #666;
}

to this:

.ende {
	clear: both;
	height: 200px;
	background: #0c1216 url('images/footer2.jpg') no-repeat;
	background-position: 50% -5px;
	display: block;
	padding: 0px; /* you added padding to your footer, which adds width to your block size */
        width: 924px; /* you neglected to specify a width, which can allow browsers to move your blocks around */
}

.ende2 {
	height: 40px;
	width: 880px;
	margin: auto;
	padding-top: 7px;
	font-size: 0.85em;
	color: #666;
}

And see if that does the trick.