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!
haha amazing, posted for JUST over 24 hours, and that’s not good enough.
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.
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
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
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.
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".