Finally got my new rounded corner layout (<!-- m --><a class="postlink" href="http://www.lettonica.info/test/">http://www.lettonica.info/test/</a><!-- m -->) to work on both IE6, FF1 and Opera 8. Only problem now is the background image and the header text in the banner div - they have to much padding to the sides in IE6, but I can't find the reason why and fix it. Anyone with a heads up?I didn't look into the padding issue yet but I want to ask, what is the thing in the footer before the 2002?
I'll get back to you on the issue you are having.
OK, I see it now. I think maybe the box model hack would help you in this case.
Padding, margins and borders are to be added to the outside of the width of the box they go around but IE wrongly puts them inside. This may be causing your error.
Try this:
#banner {background-color: #eedfc3; background-image: url(<!-- m --><a class="postlink" href="http://www.lettonica.info/pix/top.jpg">http://www.lettonica.info/pix/top.jpg</a><!-- m -->); background-position: 0px 12px; background-repeat: no-repeat; color: #fff; height: 80px;
padding-left: 14px;
padding-right: 14px;
\padding-left: 4px; /* adjust this value for IE */
\padding-right: 4px; /* adjust this value for IE */
p\adding-left: 14px;
p\adding-right: 14px;
}
I don't know if that will work or not but it is worth a try. I hope I did it right. Originally posted by Triumph
I didn't look into the padding issue yet but I want to ask, what is the thing in the footer before the 2002?
Well, I just cut'n'pasted the original code over to this test template and the UTF-8 chars were not kept during that process. It should have been a copyright sign.
I'll try your suggested CSS code.Originally posted by philaweb
Well, I just cut'n'pasted the original code over to this test template and the UTF-8 chars were not kept during that process. It should have been a copyright sign.
I'll try your suggested CSS code.
I always use & copy; (without the space after the & ) for my copyright sign.
©Well, I've uploaded the file with your suggested changes, which doesn't look that different to me.Originally posted by philaweb
Well, I've uploaded the file with your suggested changes, which doesn't look that different to me. Does it look different at all?Well, I changed it back and the result in FF1 and Opera 8 looks different - not IE6. FF1 and Opera 8 looses the padding with your additional code.Originally posted by Triumph
Does it look different at all? I just tried it on my home machine and it does change the position of the text in the header. It moves it closer to the right edge. Is that what you wanted it to do?Originally posted by philaweb
Well, I changed it back and the result in FF1 and Opera 8 looks different - not IE6. FF1 and Opera 8 looses the padding with your additional code. Add a "be nice to Opera" line.
Something likebody>#banner {padding-right: 14px; padding-left: 14px;}I've added both of your code snippets now.
The only difference is that I've flexed the padding back and forth on both FF1 and Opera 8 - no change at all with IE6, and that's the one I want to change.
Any suggestions?Originally posted by philaweb
no change at all with IE6, and that's the one I want to change. I guess you gotta write it like this:#banner {background-color: #eedfc3; background-image: url(<!-- m --><a class="postlink" href="http://www.lettonica.info/pix/top.jpg">http://www.lettonica.info/pix/top.jpg</a><!-- m -->); background-position: 0px 12px; background-repeat: no-repeat; color: #fff; height: 80px;
padding-left: 14px;
padding-right: 14px; }
#banner {\padding-left: 0px;
\padding-right: 0px; }
#banner {p\adding-left: 14px;
p\adding-right: 14px;}
This does move the text to the right in IE only. It should not affect Opera.Originally posted by Triumph
This does move the text to the right in IE only. It should not affect Opera.
Well, I've tried but no reaction.
Thanks for your time. I'll play a bit more with this in the upcoming weekend.
I'll get back to you on the issue you are having.
OK, I see it now. I think maybe the box model hack would help you in this case.Padding, margins and borders are to be added to the outside of the width of the box they go around but IE wrongly puts them inside. This may be causing your error.
Try this:
#banner {background-color: #eedfc3; background-image: url(<!-- m --><a class="postlink" href="http://www.lettonica.info/pix/top.jpg">http://www.lettonica.info/pix/top.jpg</a><!-- m -->); background-position: 0px 12px; background-repeat: no-repeat; color: #fff; height: 80px;
padding-left: 14px;
padding-right: 14px;
\padding-left: 4px; /* adjust this value for IE */
\padding-right: 4px; /* adjust this value for IE */
p\adding-left: 14px;
p\adding-right: 14px;
}
I don't know if that will work or not but it is worth a try.
I hope I did it right. Originally posted by Triumph I didn't look into the padding issue yet but I want to ask, what is the thing in the footer before the 2002?
Well, I just cut'n'pasted the original code over to this test template and the UTF-8 chars were not kept during that process. It should have been a copyright sign.
I'll try your suggested CSS code.Originally posted by philaweb
Well, I just cut'n'pasted the original code over to this test template and the UTF-8 chars were not kept during that process. It should have been a copyright sign.
I'll try your suggested CSS code.
I always use & copy; (without the space after the & ) for my copyright sign.
©Well, I've uploaded the file with your suggested changes, which doesn't look that different to me.Originally posted by philaweb
Well, I've uploaded the file with your suggested changes, which doesn't look that different to me. Does it look different at all?Well, I changed it back and the result in FF1 and Opera 8 looks different - not IE6. FF1 and Opera 8 looses the padding with your additional code.Originally posted by Triumph
Does it look different at all? I just tried it on my home machine and it does change the position of the text in the header. It moves it closer to the right edge.
Is that what you wanted it to do?Originally posted by philaweb Well, I changed it back and the result in FF1 and Opera 8 looks different - not IE6. FF1 and Opera 8 looses the padding with your additional code. Add a "be nice to Opera" line.
Something likebody>#banner {padding-right: 14px; padding-left: 14px;}I've added both of your code snippets now.
The only difference is that I've flexed the padding back and forth on both FF1 and Opera 8 - no change at all with IE6, and that's the one I want to change.
Any suggestions?Originally posted by philaweb
no change at all with IE6, and that's the one I want to change. I guess you gotta write it like this:#banner {background-color: #eedfc3; background-image: url(<!-- m --><a class="postlink" href="http://www.lettonica.info/pix/top.jpg">http://www.lettonica.info/pix/top.jpg</a><!-- m -->); background-position: 0px 12px; background-repeat: no-repeat; color: #fff; height: 80px;
padding-left: 14px;
padding-right: 14px; }
#banner {\padding-left: 0px;
\padding-right: 0px; }
#banner {p\adding-left: 14px;
p\adding-right: 14px;}
This does move the text to the right in IE only. It should not affect Opera.Originally posted by Triumph
This does move the text to the right in IE only. It should not affect Opera.
Well, I've tried but no reaction.
Thanks for your time. I'll play a bit more with this in the upcoming weekend.