IE coding hell. Please help.

[torifile]

I'm in the process of customizing wordpress to run my site. It looks fine in Safari and FF (of course), but my static pages are screwed up in IE for Windows. The static page templates were made by customizing the blog templates. Unfortunately, the blog part of the site looks right. I think I may have deleted or added a <div> here or there in the static templates. Of course, I can't figure it out.

Could someone help? www.dbt-u.com/wordpress/

The problem is that the sidebar is pushed down. It looks like it's after the <div> for the body text. Thanks in advance. :)

Wrong:
http://homepage.mac.com/torifile/.Pictures/iesux.jpg
Right:
http://homepage.mac.com/torifile/.Pictures/iesux2.jpg

[Brad]

Off to the Nook! *punt*

[Brad]

That said, here's a guess without looking at your code because I've seen one particular problem like that many times with IE. Check the CSS code for any "margin" declarations. There's a well-known bug in IE that doubles margin values. A workaround it to do something like this:


.myclass{
margin-right: 20px;
_margin-right: 10px;
}


The preceding underscore makes the second statement illegal and ignored by all modern browsers except (you guessed it) Internet Explorer. So, halving the margin in the special IE-only case fixes it.

Like I said, though, I haven't looked at your actual code yet.

[Brad]

update:
maybe it's the 5px margin in "p.sidebar-footer" or the 0.6em in ".comment-footer em" -- I don't have IE handy to test, though.

[torifile]

Could be either of those, but I know that I didn't touch those when making mods to the templates. So they *should* work the same. :confused: Any more ideas?

[torifile]

Come to think of it, it could be my CSS. I did alter the width of the the main content. Lemme swap that file out with the CSS of the page that works.

[torifile]

That did it. So I've narrowed it down to my CSS. :( That's too bad. I thought I had finally rounded a corner when it comes to understanding what the hell I'm doing. Oh well. Back to the drawing board.

Thanks, Brad. :)

[torifile]

Yet another problem. Different site. I think it may be the peek-a-boo bug I read about with CSS and IE, but I don't know how to get around it.

It looks like this:
http://homepage.mac.com/torifile/.Pictures/bugie.jpg

It should look like this (and does after re-sizing the window):
http://homepage.mac.com/torifile/.Pictures/fixedie.jpg

The site is tadbit.psydesigns.com if someone wants to have a look at it. Color-scheme is a work in progress so don't ream me too much on it. :)

[drewprops]

The peekaboo bug is the most annoying one there is.

Also, I've learned to take two side-by-side DIVS and put a nice red border around them during development to nail down how wide they REALLY are in IE. It's a stupid cheat but it helps me as I remember to ding all the bells to make CSS work with all the popular browsers (regardless of how brain dead they are).

Whoever thought that this XHTML/CSS stuff was cool must have had a LOT of free time on their hands. How did I ever get talked into fiddling with this stuff?

Oh yeah, check out Veerle's newly redesigned website (http://veerle.duoh.com/)... slick chick. Jon Hicks, Veerle, Dan Cederholm, all those folks have site designs that I aspire toward.

[Brad]

Also, I've learned to take two side-by-side DIVS and put a nice red border around them during development to nail down how wide they REALLY are in IE.
Heh. :) I do something similar. I set backgrounds to really obnoxious bright colors like red, green, and yellow so I can immediately tell what div is showing where. Once I have the layout working, then I go and apply the prettier colors/images.

[torifile]

Heh. :) I do something similar. I set backgrounds to really obnoxious bright colors like red, green, and yellow so I can immediately tell what div is showing where. Once I have the layout working, then I go and apply the prettier colors/images.
I've been known to do that too. :) The things we do for our craft. :lol:

[torifile]

Alright, found the CSS that was creating the formating for that line:

ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
height: 1.3em;
font-size: 1.2em;
border: purple 3px solid; /*border for ugliness - menubar*/
}

Any thoughts?

[torifile]

I may be on to something.

#topMenu {
margin: 0px;
padding: 0px;
background-color: #333 !important;
background-image: url("Fade2Blue-Images/tmbg.gif") !important;
background-repeat: repeat-x;
line-height: 1.2em;
clear: both;
border: teal 3px solid; /*border for ugliness - this is the box around the top menu - doesn't show up in IE*/
}

This border doesn't show up in IE. But it does in Safari and FF.

[torifile]

Found it.

.hidden {
display: none;
visibility: hidden;
}

This was in the template to hide certain elements. Now it works, but the elements that were supposed to be hidden are not. :\ I wonder if they're necessary...

[torifile]

Nevermind. False alarm. :mad: What the hell? I thought I had found it, started cleaning up the borders again, and then the menubar disappeared again. Stupid fucking IE. :no: Perhaps a redirect to a more simple style would do if there are still people with IE visiting...

[drewprops]

If you're still stuck tomorrow I'll take a whack at it...

[drewprops]

So it looks like it's working.... yes? I spent the day wrestling with Flash video... arrrrrrghhhh.

[torifile]

So it looks like it's working.... yes? I spent the day wrestling with Flash video... arrrrrrghhhh.
Nope. Not yet. I'm really clueless. The original template works fine in IE, but there's something about what I've done that broke it. I have no idea what that was because so far I hadn't really done ANYthing to the css but make a few color adjustments. No layout changes to speak of. I'm thoroughly confused (and disgusted). :\

[drewprops]

I assume the HTML is what's already on your site? If not can you give us a link? Also need the CSS file.

[torifile]

I assume the HTML is what's already on your site? If not can you give us a link? Also need the CSS file.
Yes, the HTML is on the site http://tadbit.psydesigns.com

The CSS file you can get from here (http://homepage.mac.com/torifile/.Public/tadbit.css). Thanks in advance. :) BTW, I've renamed the CSS file to one something shorter and without spaces so that it's easier to type.

I'll also upload the original here (http://homepage.mac.com/torifile/.Public/fade2blue.css).

[torifile]

Alright, I'm this close >< to giving up on this template. I decided to see if the original css (which seems to work in IE at www.4null4.de ) works with just the one graphic I made - the masthead image. Nope. WTH??!? It's sized perfectly, as far as I can tell. The one difference is that the masthead on the original page was larger than mine, but the visible area is the same. Maybe that's causing the problem? Hmm...

[drewprops]

Oy, I wish you hadn't renamed the CSS because I'm not sure about the associated graphics files, can you tell me which CSS and Graphics combo I should grab from here:

http://tadbit.psydesigns.com/wp-content/themes/WP-Binary-Blue-v100/schemes/

better yet, can you zip the graphics and post it?

[torifile]

I'll zip both the original and the modified one.

Original (http://homepage.mac.com/torifile/.Public/original.zip)

Modified (http://homepage.mac.com/torifile/.Public/new.zip)


Thanks, drew. I'm hoping that you'll have better luck. (If you want, you can download the entire theme here (http://www.4null4.de/wp-content/WP-Binary-Blue-v101.zip))

But before you do that, lemme try the new version of it. 1.0.1 just came out and in the changelog it says that it fixed some IE 6 problems. So I'm going to check out the new theme first.

[torifile]

Oy, I wish you hadn't renamed the CSS because I'm not sure about the associated graphics files, can you tell me which CSS and Graphics combo I should grab from here:

http://tadbit.psydesigns.com/wp-content/themes/WP-Binary-Blue-v100/schemes/

better yet, can you zip the graphics and post it?
Just so you know, it's the topbanner.jpg (within the images folder) and the oldscheme.css file for the problematic set. The original topbanner isn't in that directory because I overwrote it.

[drewprops]

Well I downloaded the things but couldn't get the bug to show up, then I realized that the peekaboo bug is a Windoze thing and that my PC laptop is at the office... lot of help I am this weekend... :(

[torifile]

Well I downloaded the things but couldn't get the bug to show up, then I realized that the peekaboo bug is a Windoze thing and that my PC laptop is at the office... lot of help I am this weekend... :(
No problemo, drew. I decided not to go with that template and went to the K2 template it was based off of. It works fine. Now to make my tweaks....

[drewprops]

:lol: glad to be of service.... errrrmmm, sorry