Support » Themes and Templates » CSS IE Issue

  • I’ve just installed WordPress on my site and have tweaked the CSS. Actually I got a 3 column template from Alex King’s site called Dots but the more I played with it the more I wanted it to be like the old layout of my site. Now I have problems. I do all my stuff using Macs and decent browsers, and when I get to check my sites using IE on Windows it’s all a mess. My old site looks bad in IE and now so does my new WP blog. The header is definitely a problem. I’m not a CSS expert and so do not know what exactly it is that I need to do to have IE (Oh God do I hate IE) render it somewhat like the other browsers. Any help is much appreciated.
    http://www.tomburgess.net/blog/
    http://tomburgess.net/blog/wp-layout.css

Viewing 9 replies - 1 through 9 (of 9 total)
  • It’s due to the length of your search field, which is overriding the width of the menu in IE (thanks, Bill!). Try to bring it down to 7-8, or better yet set a width value for that input in your css (that way you can get more granular in the size, and avoid issues with it being too small on the Mac side).

    I just reduced it, made it 120px but still the same problem.

    Does anyone else have an idea? I keep trying but cannot figure this out.

    I see a couple of differences, but with IE / FF that will nearly always be the case. Can you describe in more detail just what is wrong from your point of view ?

    In #header, try getting rid of the margin line and replacing it with this:
    margin-left:10px;
    I can’t test that effect in IE now, but I think it’s a box model problem what with all the margins / padding around there.

    Thanks podz. I just tried your suggestion but alas it hasn’t altered anything. I have borrowed a machine running Windows 98 (uggh!) and in IE the problem is that the header repeats itself by about 30%. So instead of a nice little gap inbetween the header and the two content boxes what happens is the header reapeats itself and runs underneath the menu and content for about 100 pixels or so. Weird, bloody annoying, and I cannot figure it out.

    What you could do is download Gemini and just use that to study how the image in the header is controlled – or if you’ve got FF and the webdev bar, mess with my css (I use Gemini)
    I think it’s a combination of the height / margins and possibly padding..
    Gemini download: http://pinksocks.co.uk/gemini.zip

    Thanks for the help here. I have just done the same thing as you suggested and added that piece of code to my css but it hasn’t made a slight bit of difference to the header which is the problem. The header is still going too far down the page in Windows IE, at least in IE on Windows 98. IE on a Mac (who uses that anyway?) it is almost perfect, there’s just a couple of pixels on the bottom and the right edge of the header that have space between the image and the border.

    Ha ha! Done it! It was the padding on the #header a which for some reason was set at a ridiculous 205px from the top. Yowza! Cool.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.