[css-d] !DOCTYPE, position:relative, and rendering problems! oh my!
Hello all, I'm pretty new to this group, and to CSS in general. I'm a quick learner but I'm stuck at a couple of things. First off, whenever I use a !DOCTYPE tag in my pages, they stop rendering properly. I've tried both strict and transitonal, to no avail. Specifically what goes bad is my background image stops repeating as it should, and I get only a portion of the image displayed once at the top of the page. The tags I'm using to get the centered repeat are background-repeat:repeat-y; bacckground-position:center. Any ideas? Second, to get a centered page, I'm using text-align:center for the body, and position:relative for the container module. This renders perfectly in IE6, but in Firefox the container module aligns right. Are these problems related, and what can I do? Thanks in advance for any tips you can toss my way. Here are the links in question in case you want to review my code: http://www.legacyofpainguild.com http://www.legacyofpainguild.com/master.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] !DOCTYPE, position:relative, and rendering problems! oh my!
Wow, Writing CSS for a WOWIII website? Cool! (Do you play?) (I am a CSS developer. I also play WOW and now Guild Wars. ) There is a strict use of code for each unique doctype. Would you post the full doctype to the group? Also know that IE does not render background images the same way that FireFox (Mozilla) does. Check unitypond.net in Mozilla and IE to see the differences. I used the background image in the header. In one browser you see a boat on a lake, and in the other browser, you just see some funky (if you're lucky) text, and a plain background. As for your text-aligns, there are several things going on here. I am sure one of the experienced people on this list can give you the specifics, but let me point to a few places for you to start: 1. You have positioned body and container differently. This is is where your two browsers are going to react differently. In Mozilla Firefox, the page has done exactly as you have instructed and positioned the banner image top:0, left:0. The clever part is in IE when it didn't listen to your instruction, but rather listened to your intention and stayed within the div. 2. I believe you are missing character encoding or something in the html/head tags. Check the W3C spec for details. 3. Your code is very orderly and impressive - should make it very accessible to the pros to help you - good job! 4. If that guild is accepting "noobs" I might check them out. My Id is MyOldNavySweatr and my alternate email is [EMAIL PROTECTED] ;-) Cheers and good luck - stay motivated on the CSS - there is a ton to learn and it can be very rewarding! Kate http://urlygrl.com - Original Message - From: "Dan Gooch" <[EMAIL PROTECTED]> To: Sent: Tuesday, October 04, 2005 5:02 PM Subject: [css-d] !DOCTYPE, position:relative, and rendering problems! oh my! Hello all, I'm pretty new to this group, and to CSS in general. I'm a quick learner but I'm stuck at a couple of things. First off, whenever I use a !DOCTYPE tag in my pages, they stop rendering properly. I've tried both strict and transitonal, to no avail. Specifically what goes bad is my background image stops repeating as it should, and I get only a portion of the image displayed once at the top of the page. The tags I'm using to get the centered repeat are background-repeat:repeat-y; bacckground-position:center. Any ideas? Second, to get a centered page, I'm using text-align:center for the body, and position:relative for the container module. This renders perfectly in IE6, but in Firefox the container module aligns right. Are these problems related, and what can I do? Thanks in advance for any tips you can toss my way. Here are the links in question in case you want to review my code: http://www.legacyofpainguild.com http://www.legacyofpainguild.com/master.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] !DOCTYPE, position:relative, and rendering problems! oh my!
I got a couple of other responses basically telling me that my text-align:center isn't supposed to work, and that's what was causing the problem. I ended up getting it working by going back to margins and stacking the columns with float:left. Thanks for the advice! I guess the doctype makes a much bigger difference than I thought... And yes, the guild is recruiting. Check out the forums or message one of the officers. ;) Dan Kate Shorey - Comcast wrote: Wow, Writing CSS for a WOWIII website? Cool! (Do you play?) (I am a CSS developer. I also play WOW and now Guild Wars. ) There is a strict use of code for each unique doctype. Would you post the full doctype to the group? Also know that IE does not render background images the same way that FireFox (Mozilla) does. Check unitypond.net in Mozilla and IE to see the differences. I used the background image in the header. In one browser you see a boat on a lake, and in the other browser, you just see some funky (if you're lucky) text, and a plain background. As for your text-aligns, there are several things going on here. I am sure one of the experienced people on this list can give you the specifics, but let me point to a few places for you to start: 1. You have positioned body and container differently. This is is where your two browsers are going to react differently. In Mozilla Firefox, the page has done exactly as you have instructed and positioned the banner image top:0, left:0. The clever part is in IE when it didn't listen to your instruction, but rather listened to your intention and stayed within the div. 2. I believe you are missing character encoding or something in the html/head tags. Check the W3C spec for details. 3. Your code is very orderly and impressive - should make it very accessible to the pros to help you - good job! 4. If that guild is accepting "noobs" I might check them out. My Id is MyOldNavySweatr and my alternate email is [EMAIL PROTECTED] ;-) Cheers and good luck - stay motivated on the CSS - there is a ton to learn and it can be very rewarding! Kate http://urlygrl.com - Original Message - From: "Dan Gooch" <[EMAIL PROTECTED]> To: Sent: Tuesday, October 04, 2005 5:02 PM Subject: [css-d] !DOCTYPE, position:relative, and rendering problems! oh my! Hello all, I'm pretty new to this group, and to CSS in general. I'm a quick learner but I'm stuck at a couple of things. First off, whenever I use a !DOCTYPE tag in my pages, they stop rendering properly. I've tried both strict and transitonal, to no avail. Specifically what goes bad is my background image stops repeating as it should, and I get only a portion of the image displayed once at the top of the page. The tags I'm using to get the centered repeat are background-repeat:repeat-y; bacckground-position:center. Any ideas? Second, to get a centered page, I'm using text-align:center for the body, and position:relative for the container module. This renders perfectly in IE6, but in Firefox the container module aligns right. Are these problems related, and what can I do? Thanks in advance for any tips you can toss my way. Here are the links in question in case you want to review my code: http://www.legacyofpainguild.com http://www.legacyofpainguild.com/master.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
