Fix some css issues with my custom template WordPress
Ok, I admit... I am not yet good enough to solve the css issues I am having with this template. I'm pretty sure my problem has to do with the IE7 bug about overflow:hidden combined with position:relative divs. However I don't quite understand the fix. Who knows, it could be a single line of code or many,
I can say that my code is very well laid out and should be quite easy to read. It is highly organized. If needed I can provide the actual template files used, however I do believe that most of the problems lie within the css.
Here is the link:
http://live.wptumble.com
Current template setup:
1. the header is fixed position
2. the left sidebar is fixed position
3. the footer is fixed position
4. the 'center area' is relative position so that the content can scroll properly.
Other factors:
1. Ipad hates position:fixed, so I am using a script to force fixed position on the header, footer, and sidebar while on the ipad.... (this kind of works, still investigating the best solution)
Problems:
In FF4x the template 'appears' correctly, at least that is what I am after. There is only a single scrollbar on the left side, and the comments align as expected. The submit comment button is below the input form.
IE7
1. I end up with double scroll bars on the right hand side
2. the comments are completely messed up.
IE8
1. the comments loose their container background color
2. the submit comment button is aligned right instead of below the input box
Safari4
1. submit comment button is aligned right instead of below the input box.
Requirements:
1.Clean up my mess so that the final output looks proper, much like it does in FF4.
2.Maintaining the fixed header, footer, and sidebar is a must.
3.Keep all of my html5 tags throughout the theme. The entire point to this process for me was to learn proper coding standards in html5.
bonus:
I will double the bid if someone can come up with a solution that works properly on the ipad. I have looked into iscroll4 http://cubiq.org/iscroll-4 but was not quite able to figure it out so I tried a rather generic vs. of that code. I just want the user experience on the ipad to be perfect. What I have now is a bit of a mess.
*The only templates I have worked on so far are the header/footer/index/single templates. There was no point in continuing on this project until I get the underlying problems solved.
thanks
[edit]
changed link to point to homepage, first post has large image i need to remove [/edit]
[edit2]
here is a zip download [[LINK href="http://dl.dropbox.com/u/2045194/theme.zip"]]http://dl.dropbox.com/u/2045194/theme.zip[[/LINK]]
[/edit2]
Answers (2)
Christianto answers:
Link doesn't work :(
at least on my side..
shawn comments:
sorry, page had 1mb image on there, removed image so it should work, if not try the home link
http://live.wptumble.com
Christianto comments:
Still doesn't work, It doesn't load at all. The server block my IP. :D
Let someone below me help you... :D
I try to find proxy server first...
shawn comments:
sorry, I have zero idea why that would happen. I have a number of people who have seen the site with no problems.
Can I ask what country you are in? --maybe that is related?
If you can do a traceroute, then I can forward that to the datacenter tomorrow and see what is happening.
thnx for trying though
Christianto comments:
Dont worry, I'm on proxy server now.
Look awful in IE, have you enabling HTML5 on IE?
shawn comments:
Yes, in the header I have:
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
shawn comments:
sorry link is actually
http://live.wptumble.com/wp-content/themes/working/includes/js/css3-mediaqueries.js
Christianto comments:
On IE, The double scrollbar can be easily fixed by set overflow:hidden on <html> tag
The comment part I should check futher..
shawn comments:
I tried that earlier, and it makes the scrollbars disappear. I set it again so you can see the problem.
give me a few mins and i'll zip up the theme so you don't have to keep going back and forth. it may make it much faster to fix
shawn comments:
[[LINK href="theme download"]]http://dl.dropbox.com/u/2045194/theme.zip[[/LINK]]
hope that helps everyone
Christianto comments:
I test it on my local server, the comment style on your site vs on my localsite is completely different on IE7.
Please check the screenshot attacment