I'm very disappointed to check out this well styled theme in IE. For the hell, it has been better to try it out in all browsers before starting. Now I hope anyone can fix the bug. I'm going to try it tomorrow. If I get success with it I will post it here, right on this place.
Comments
Comment #1
Jaslo commentedHere's the report how to fix the bug with IE6 on Windwos. This solution is tested in IE6, FF2 on Windows and FF, Safari on OS X.
If you have problems with the header or content divs of the gagarin theme try this out.
First I must mention that usage of 'px' gives a better solution than 'em' for font-size. IE and FF interprets the 'px' in similar visualisations.
Second I must tell you, that the float element doesn't work in most cases. You can use it sometimes but the more the complexity rises the less it will fit in the different browsers. The solution is to use 'position:' instead of floating the elements. For this theme it works. For other themes you'll have to try it out. Use the position:absolute without any left or top declaration. Take the margin to position your element relative to the centered body. If you use left or top, your elements will run out of border.
Third you can fix the bug in the content area right in a second. Change the margin to padding and the padding to margin in the #right style. Just watch it below.
Copy the styles below and replace them with the aposite styles in your css file.
themes/gagarin/style.css
[..]
#header {
font: 1,2em arial, verdana, sans-serif;
height:190px; /* new */
width: 900px;
margin: 0 auto;
background: #505050 url(images/header_bg.gif) no-repeat;
}
[...]
#logo {
margin: 30px 0 0 30px;
height: 60px;
width: 210px;
/* float: left; this does'nt work */
position:absolute; /* new */
margin-left: 30px; /* new */
}
#primary {
font: bold 14px arial, verdana, sans-serif; /* better use px for FF and IE */
float: right;
padding: 42px 0 0;
margin: 0 18px 18px 0px; /* new, previously margin:0 18px 18px */
display: inline;
}
[..]
#intro {
font: 14px arial, verdana, sans-serif;
/* clear: both; // */
position:absolute; /* new */
height: 95px;
margin: 90px 0 0 290px; /* new, previously margin:0 */
padding: 5px 0 0 0px; /* new */
color: #ccc;
}
[..]
#right { /* here you can fix the overfloating borders in IE */
padding: 15px 30px 20px 30px; /* new, previously margin */
margin: 0; /* new, previously padding */
float: right;
width: 580px;
}
[...]
If you have any questions feel free to ask.