Grow your CSS skills. Land your dream job.

Really annoying problem… can’t figure it out!

  • # June 4, 2009 at 10:38 am

    Okay… So, I have a website that I’m in the process of converting to WordPress. Here’s the link to the live website: http://drlapiana.com It works fine in all browsers.

    Here’s the link to the WordPress version in progress: http://drlapiana.com/blog It works fine in all browsers except IE. In IE, it’s not centered, no min-height in the content, logo and phone number at the top aren’t in the correct position and a spacer I have on the sidebar is (i’m thinking line-height?) thick.

    I’ve been trying to figure it out for like 2 days… I’ve been comparing the CSS and I can’t figure it out. Any help would be appreciated!

    # June 4, 2009 at 5:41 pm

    No one has any ideas? : (

    # June 4, 2009 at 10:41 pm

    Anyone know any other forums that have people that may know how to fix my problem, because no one has had an idea and it’s been posted for like a day :(

    # June 5, 2009 at 1:21 am

    haha amazing, posted for JUST over 24 hours, and that’s not good enough.

    1) Try validating it

    2) I have no idea if this would have any effect, but you shouldn’t need it anyways, remove the "text-align:left" from #container and "text-align:center" from body

    3) I can’t particularly find anything on the centering issue, everything looks fine

    4) IE6 doesn’t support min-height

    I don’t have access to ie6 right now, as I’m at home, so that’s as far as I go.

    # June 5, 2009 at 8:58 am

    It doesn’t work in IE8, that’s all I have to test it with from IE.

    Yeah, I just entered the text-align: lefts trying to fix IE problems with centering after text-align: centering the body. It centered the container, but everything in it still has problems.

    Thank you for taking a look at it

    # June 5, 2009 at 9:57 am

    A little patience is called for. Here are some ideas for the logo centering issue up top – use absolute positioning. Give your container div position: relative and then position both the logo and phone number where you want them with position: absolute; left: 300px; top: 20px; or what have you. It ain’t the most elegant of solutions, but it’ll do the trick. Also, the font-align: center is doing nothing for you up there either.

    More alarming is the accordion menu in IE7 – it looks awful. IE7 is inserting scroll bars on each category, and the hover effects are terrible – it looks like the content slides up and expands. I know this is what’s actually going on, but you shouldn’t be able to watch it happen! It looks fine on the regular site but dreadful in wordpress, so there’s got to be some conflict happening between wordpress and jquery. I’d bet there’s a wordpress plugin that has much the same functionality, but I’m not the wordpress expert. You may want to post this in the PHP forums too.

    One final tip – let Google’s AJAX API serve the jquery master file and jquery ui file; odds are good that your site visitors will already have them cached and it’ll save your server some sweat. http://code.google.com/apis/ajaxlibs/documentation/index.html

    Good luck!

    # June 5, 2009 at 10:00 am

    I would position the logo and phone number absolutely.
    I would hazard a guess that your problems there are caused by having the phone div inside the logo div and then giving the logo div a width that is less than their combined width. If anything it’s a surprise that it centers in any browser.

    # June 5, 2009 at 10:37 am

    Thanks for replying guys.

    This is pretty frustrating. It’s probably something with the PHP… This is my first WordPress theme. I’ve gone through the CSS for both the real site and the blog and the CSS for each property and element are the same.

    I tried positioning the header relative then positioning the logo absolute and manually positioning it in the center and that worked, but it started to overlap the top of the nav. Fixing the overlap on the nav is easy, but I think I’m just going to leave it how it is and try to get some help from some WordPress pros, because the header isn’t the only broken thing, the sidebar and content height are also messed up, most likely they all are messed up because of the same thing.

    By the way, what do you guys use to test it in different IE browsers?

    Thanks for taking the time to take a look.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".