There are a number of problems I see with this theme:
- Using tables for layout.
- Invalid XHTML 1.0 Strict and CSS 2.1.
- Same CSS rules imported twice due to implementation of Color module.
- Alpha transparency of PNG logo in IE6 shows as white background.
Method:
I needed to find a way to work on this theme without having the luxury of a proper local installation. I found the Firefox Save Complete plugin:
https://addons.mozilla.org/en-US/firefox/addon/4723
This allowed me to download the pages I needed to work on (the homepage and a forum page) as a HTML file with all imported stylesheets. It was then just a case of dropping them in my local htdocs and working out the issues.
I have the Web Developer Tool for IE7 installed but I don't find it much use compared to Firebug so I tend to debug IE by trial and error. I use Firebug to quickly see the CSS rules that are being applied to an element and then use experience, trail and error and lots of refreshing to find the most elegant solution. I have synergy2 installed as server on my Macbook Pro and client on my PC so I use a single mouse and keyboard to control both computers, the mouse jumps between Mac and PC so this makes debugging in IE much easier.
Problem:
The main cause of problems with the layout (apart from the use of tables) is that padding is being added to the table cells rather than the elements within the cells. The table cells have explicit width/height values so using padding on these elements was effectively increasing the size of the box and messing up the display in IE and Safari.
Solution:
Add this to the bottom of style.css:
/* various fixes by psynaptic */
#home .panel-col-last {
width: 49%; /* fixes panel on front page in IE6/7 */
}
#home .panel-col-last .more-link {
padding-right: 2.4em; /* moves more link back to original position */
}
#header #site_name,
#site_search,
#logo {
padding: 0; /* remove padding from table cells */
}
div#search {
margin: 10px 20px 0 0; /* reposition search box */
}
#menu-2, #menu {
line-height: 1.6em; /* fix chopped off text in IE6/7 */
}
#logo a {
display: block;
padding: 10px 0 0 10px; /* reposition logo */
}
#site_name h1 {
padding: 12px 0 0 5px; /* reposition site name */
}
#home .item-list ul li,
#home .item-list ul li {
font-size: 1em; /* set font size for list items in homepage panel to 12px */
}
.forum-comment .links {
float: none; /* fix border bottom bug in forums */
}@henns20: The first selector #home .panel-col-last targets the right of the two columns in the panel on the homepage. The rule decreases the value of the width property to 49%. This is a common issue with Internet Explorer where content gets pushed down due to not enough room being available for the full width of all elements on the page. It usually happens when using borders or padding and this is a common way to fix your panels issues.
futurist requested a larger font-size for the panels lists on the homepage so I changed them back to 1em (12px), seems to look better to me.
There are two stylesheets added by the theme that are identical apart from ~80 lines:
- sites/all/themes/pixture/style.css
- files/color/pixture-b9f28df3/style.css
Apart from making the theme harder to debug it also adds needless bandwidth usage and slightly increased download times for new visitors to the site. There are ~1300 redundant lines of CSS due to this. Turning on CSS aggregation would help if you don't have time to fix it properly.
I added a fix for the border bottom issue mentioned by Ryan further up this thread.
All-in-all I think it fixes all the issues mentioned in this thread without changing the positioning of anything in Firefox (I tend to use Firefox as a baseline).
Joined: 08/28/2007