June 12, 200818 yr A preview of my site appears to work ok with most browsers and platforms, except IE6 where it looks really messy. The white boxes are partly due to three transparent PNG images, the user seems to have disabled Javascript (or is Javascript disabled by default?) so the logo at the top, and bottom, and 'drop-shadow' either side of the page are white, as my PNG transparent "fix" was a javascript work-around. However, there's the alignment issues on the menu, the body text, and the boxes for the navigation bar and top pic. Am going to work through it methodically to see what's happening, but does anything unduly stick out as being obvious? Everything seems to work fine on other browsers (IE7, Firefox [all versions], Opera, Safari, on Windows/Mac/Linux). My code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <style type="text/css"> <!-- body,td,th { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: medium; color: #FFFFFF; } body { background-color: #cbc3ad; margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; } h1 { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: 125%; font-weight: normal; text-align: center; margin-bottom: 20px; margin-top: 0px; } p { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: 95%; font-weight: normal; text-decoration: none; margin: 0px; padding: 0px; } #container { width: 730px; margin-right: auto; margin-left: auto; padding: 0px; margin-top: 0px; margin-bottom: 0px; float: none; } #container #top { margin: 0px; padding: 0px; background-color: #DCD7C9; height: 123px; background-image: url(URL/images/Title.jpg); } #nav { text-align: center; margin: 0px; padding: 0px; } #nav ul { background-color: #9F897D; height: 28px; padding-top: 3px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px; } #nav li { list-style-type: none; display: inline; margin-right: auto; margin-bottom: 0px; font-size: 95%; margin-top: 0px; margin-left: auto; } #nav a { color: #FFFFFF; text-decoration: none; padding-top: 0px; padding-right: 0.2em; padding-bottom: 0px; padding-left: 0.2em; margin: 0px; } #nav a:hover { color: #5E3F34; text-decoration: none; } #LeftMenu { background-image: url(URL/images/ChocolateLeftMenu.png); background-repeat: repeat-x; height: 377px; width: 198px; float: left; margin: 0px; padding: 0px; text-align: left; } #LeftMenuContent { margin-top: 41px; margin-left: 25px; padding: 0px; margin-right: 0px; margin-bottom: 0px; float: left; text-align: left; } #LeftMenu ul { padding: 0px; display: block; text-align: left; margin-top: 14px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: none; list-style-type: none; } #LeftMenu li { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: small; text-align: left; margin: 0px; padding: 0px; list-style-type: none; line-height: 35px; } #LeftMenu a { color: #FFFFFF; list-style-type: none; text-decoration: none; margin: 0px; padding: 0px; } #LeftMenu a:hover { color: #BC9278; } #main { margin: 0px; padding: 0px; height: 693px; width: 730px; background-image: url(URL/images/Chocolate693.png); background-repeat: repeat-x; background-position: center; } #BodyText1 { text-align: justify; width: 478px; float: right; margin-top: 40px; padding: 0px; margin-right: 30px; margin-bottom: 0px; margin-left: 0px; } #BodyText2 { clear: left; float: left; text-align: left; width: 478px; margin-top: 9px; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px; } #BodyText2 a { text-decoration: underline; color: #FFFFFF; } #BodyText2 a:hover { color: #724E38; } #RightPic { height: 297px; width: 198px; clear: right; float: right; } #footertext { background-color: #9F897D; text-align: center; font-weight: bold; letter-spacing: 0.3em; vertical-align: 0%; word-spacing: 0em; padding: 0.5em; margin: 0px; } #footerbar { background-color: #5E3F34; text-align: center; margin: 0px; padding: 0px; height: 9px; } #menuspacer { margin: 0px; float: left; height: 357px; width: 25px; padding: 0px; } .style1 { font-size: 105%; font-weight: bold; } .style2 { font-size: 105% } .style3 {font-size: 120%} #Shadow { background-image: url(URL/images/Shadow.png); background-repeat: repeat-y; padding: 0px; width: 754px; position: static; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; float: none; clear: none; } #top img { padding: 0px; margin-top: 60px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; } #C4Lscript img { height: 34px; width: 183px; margin-left: 50px; margin-top: 2px; } <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> --> </style> </head> <body> <div id="Shadow"> <div id="container"> <div id="top"> <img src="URL/images/Logo.png" alt="AltText" width="238" height="56" /> </div> <div id="nav"> <ul> <li><a href="Actual/index.html">Home</a> |</li> <li><a href="Actual/About/About.html">About Us</a> |</li> <li><a href="Actual/Contact/Book-Appointment.html">Contact</a> |</li> <li><a href="Actual/Upload/Therapies.html">Therapies</a> |</li> <li><a href="Actual/Workshops/Workshops.html">Workshops</a> |</li> <li><a href="Actual/Corporate/Corporate.html">Business Training</a> |</li> <li><a href="Actual/Shop/Shop.html">Shop</a></li> </ul> </div> <!-- End Navigation bar --> <div id="main"> <div id="LeftMenu"> <div id="LeftMenuContent"> <span class="style3">Therapies</span> <ul> <li><a href="Actual/Site/Therapies/Weight-Loss.html"><img src="URL/images/MiniBullet.png" alt="Weight Loss" width="15" height="9" border="0" />WEIGHT CONTROL</a></li> <li><a href="Actual/Site/Therapies/Smoking-Cessation.html"><img src="URL/images/MiniBullet.png" alt="Smoking Cessation" width="15" height="9" border="0" />SMOKING CESSATION</a></li> <li><a href="Actual/Site/Therapies/Pain-Management.html"><img src="URL/images/MiniBullet.png" alt="Pain Managment" width="15" height="9" border="0" />PAIN MANAGEMENT</a></li> <li><a href="Actual/Site/Therapies/Confidence.html"><img src="URL/images/MiniBullet.png" alt="Confidence" width="15" height="9" border="0" />CONFIDENCE</a></li> <li><a href="Actual/Site/Therapies/Relaxation.html"><img src="URL/images/MiniBullet.png" alt="Relaxation" width="15" height="9" border="0" />RELAXATION</a></li> <li><a href="Actual/Site/Therapies/Anxiety-Depression.html"><img src="URL/images/MiniBullet.png" alt="Anxiety & Depression" width="15" height="9" border="0" />ANXIETY/DEPRESSION</a></li> <li><a href="Actual/Site/Therapies/Phobias-PTSD.html"><img src="URL/images/MiniBullet.png" alt="Phobias & Post Traumatic Stress Disorder" width="15" height="9" border="0" />PHOBIAS/PTSD</a></li> <li><a href="Actual/Site/Therapies/Other-Therapies.html"><img src="URL/images/MiniBullet.png" alt="Other Therapies" width="15" height="9" border="0" />OTHER THERAPIES</a></li> </ul> </div><!-- End Left Menu Content --> </div><!-- End Left Menu --> <div id="BodyText1"> <h1>Weight Control</h1> <p><span class="style2">D</span>o you want to lose weight easily? <span class="style2">W</span>ould you like to feel happy with your body? <span class="style2">W</span>ould you like to be able to stop eating as soon as you recognise you?ve had enough to eat? <span class="style2">W</span>ould you like to change your eating patterns and enjoy eating healthy natural foods?<span class="style2"></span></p><br /> <p><span class="style2">T</span>hrough a combination of hypnosis and NLP, we will enable you to permanently change your eating habits and become the size and shape you desire.</p><br /> <p><strong><span class="style2">C</span>hange-4-Life Hypnotherapy</strong> puts you back in control and makes weight reduction so effortless enabling you to enjoy the foods you eat.</p> </div> <!-- End BodyText1 --> <!-- Spacer --> <div style="width: 730; height: 19px; margin: 0px; padding: 0px; clear: both; float: none;"></div> <!-- End Spacer --> <div id="BodyText2"> <p><span class="style2">W</span>hether you prefer to participate in a workshop with others who are also looking to reach their target weight or goal size, or whether you prefer a 1-2-1 consultation, we have the solution for you. </p><br /> <p><span class="style2">H</span>ypnotherapy can enable you to avoid emotional eating by reprogramming the subconscious mind to respond in a new, more appropriate way putting you in control.</p><br /> <p><span class="style2">I</span>f you would like to benefit from weight control hypnotherapy, then call <span class="style1"> 01403 256151</span> or click <span class="style1"><a href="Actual/Site/Contact/Book-Appointment.html">here</a></span> to arrange a consultation now.</p> <div id="C4Lscript"> <img src="URL/images/C4LScript.png" alt="AltText" /> </div> </div> <!-- End Body Text 2 --> <div id="RightPic"> <img src="URL/images/WeightLoss.jpg" height="297px" width="198px" /> </div> <!-- End Right Picture --> </div> <!-- End Main --> <div id="footertext"> Slogan </div> <!-- End Footer text --> <div id="footerbar"> </div> <!-- End Bottom bar --> </div><!-- End container --> </div><!-- End Shadow --> </body> </html> The CSS data is inline inside the document as opposed to being external at present as it's currently just a test page. Thanks Timo
June 12, 200818 yr Hi, first of all, I don't see why you have to use transparent png files. Because the background colour is a solid colour, there doesn't appear to be a need for transparency. Save them as jpegs with the same background colour and that will hopefully solve your png/javascript issues. As for the layout, I'll have a quick look and try to help if I can.
June 12, 200818 yr After a quick look at your code, your <ul> in the left sidebar is floated left with a left margin 0f 25px. IE6 will double this, (margin in the same direction as the float) and cause bother. You could try changing it to padding-left or you could float the sidebar as well as the <ul>. I've only had a quick look but that's your most likely solution. Hope that made sense!!
June 23, 200818 yr Author Hi Elan, thanks ever so much, it narrowed most of the bugs down for me. Really appreciated. Got everything almost sorted now, apart from one tiny aggravating bug left when my page [page] is displayed in IE6. It's where it's horribly split through to the background colour between the top horizontal menu and the main window, and again at the bottom just above the "MAKE A CHANGE" footer bar. The main content is 693 pixels tall, and all the divs and image sizes inside are fully accounted for, so am really puzzled as to what's causing it. My source is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Change-4-Life Hypnotherapy</title> <style type="text/css"> <!-- body,td,th { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: medium; color: #FFFFFF; } body { background-color: #cbc3ad; margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; } h1 { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: 125%; font-weight: normal; text-align: center; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } p { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: 95%; font-weight: normal; text-decoration: none; margin: 0px; padding: 0px; } #container { width: 800px; margin-right: auto; margin-left: auto; padding: 0px; margin-top: 0px; margin-bottom: 0px; float: none; } #container #top { margin: 0px; padding: 0px; background-color: #DCD7C9; height: 123px; background-image: url(http://www.change-4-life.com/images/Sunset.gif); } #nav { text-align: center; margin: 0px; padding: 0px; background-color: #9F897D; } #nav ul { height: 29px; margin: 0px; padding-top: 3px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #nav li { list-style-type: none; display: inline; margin-right: auto; margin-bottom: 0px; font-size: 95%; margin-top: 0px; margin-left: auto; padding: 0px; } #nav a { color: #FFFFFF; text-decoration: none; padding-top: 0px; padding-right: 0.5%; padding-bottom: 0px; padding-left: 0.5%; margin: 0px; } #nav a:hover { color: #5E3F34; text-decoration: none; } #LeftMenu { background-image: url(http://www.change-4-life.com/images/ChocolateLeftMenu.png); background-repeat: repeat-x; height: 377px; width: 198px; float: left; margin: 0px; padding: 0px; text-align: left; clear: left; } #LeftMenuContent { float: left; text-align: left; padding-top: 41px; padding-right: 0px; padding-bottom: 0px; padding-left: 25px; margin: 0px; } #LeftMenu ul { padding: 0px; display: block; text-align: left; margin-top: 14px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: none; list-style-type: none; } #LeftMenu li { font-family: "Century Gothic", "Avant Garde", Verdana, Arial, sans-serif; font-size: small; text-align: left; margin: 0px; list-style-type: none; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; } #LeftMenu a { color: #FFFFFF; list-style-type: none; text-decoration: none; margin: 0px; padding: 0px; } #LeftMenu a:hover { color: #BC9278; } #main { margin: 0px; padding: 0px; height: 693px; width: 800px; background-image: url(http://www.change-4-life.com/images/Chocolate693.png); background-repeat: repeat-x; background-position: center; } #BodyText1 { text-align: justify; width: 548px; float: right; margin-top: 40px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 30px; padding-bottom: 0px; padding-left: 0px; } #BodyText2 { clear: left; float: left; text-align: left; width: 548px; margin-top: 9px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 30px; } #BodyText2 a { text-decoration: underline; color: #FFFFFF; } #BodyText2 a:hover { color: #724E38; } #RightPic { height: 297px; width: 198px; clear: right; float: right; } #footertext { background-color: #9F897D; text-align: center; font-weight: bold; letter-spacing: 0.3em; vertical-align: 0%; word-spacing: 0em; padding: 0.5em; margin: 0px; } #footerbar { background-color: #5E3F34; margin: 0px; padding: 0px; height: 9px; } .style1 { font-size: 105%; font-weight: bold; } .style2 { font-size: 105% } .style3 {font-size: 120%} #Shadow { background-image: url(../Site/Images/Shadow.gif); background-repeat: repeat-y; padding: 0px; width: 814px; position: static; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; float: none; clear: none; } #top img { padding: 0px; margin-top: 33px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; } #C4Lscript img { height: 34px; width: 183px; padding-top: 15px; padding-left: 25px; } <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> --> </style> </head> <body> <div id="Shadow"> <div id="container"> <div id="top"> <img src="http://www.change-4-life.com/images/Change4LifeLogo.gif" alt="Change-4-Life" width="238" height="56" /> </div> <div id="nav"> <ul> <li><a href="http://www.change-4-life.com/index.html">Home</a> |</li> <li><a href="http://www.change-4-life.com/About/About.html">About Us</a> |</li> <li><a href="http://www.change-4-life.com/Contact/Book-Appointment.html">Contact</a> |</li> <li><a href="http://www.change-4-life.com/Upload/Therapies.html">Therapies</a> |</li> <li><a href="http://www.change-4-life.com/Workshops/Workshops.html">Workshops</a> |</li> <li><a href="http://www.change-4-life.com/Corporate/Corporate.html">Business Training</a> |</li> <li><a href="http://www.change-4-life.com/Shop/Shop.html">Shop</a></li> </ul> </div> <!-- End Navigation bar --> <div id="main"> <div id="LeftMenu"> <div id="LeftMenuContent"> <span class="style3">Therapies</span> <ul> <li><a href="http://www.change-4-life.com/Therapies/Weight-Loss.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Weight Loss" width="15" height="9" border="0" />WEIGHT CONTROL</a></li> <li><a href="http://www.change-4-life.com/Therapies/Smoking-Cessation.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Smoking Cessation" width="15" height="9" border="0" />SMOKING CESSATION</a></li> <li><a href="http://www.change-4-life.com/Therapies/Pain-Management.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Pain Managment" width="15" height="9" border="0" />PAIN MANAGEMENT</a></li> <li><a href="http://www.change-4-life.com/Therapies/Confidence.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Confidence" width="15" height="9" border="0" />CONFIDENCE</a></li> <li><a href="http://www.change-4-life.com/Therapies/Relaxation.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Relaxation" width="15" height="9" border="0" />RELAXATION</a></li> <li><a href="http://www.change-4-life.com/Therapies/Anxiety-Depression.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Anxiety & Depression" width="15" height="9" border="0" />ANXIETY/DEPRESSION</a></li> <li><a href="http://www.change-4-life.com/Therapies/Phobias-PTSD.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Phobias & Post Traumatic Stress Disorder" width="15" height="9" border="0" />PHOBIAS/PTSD</a></li> <li><a href="http://www.change-4-life.com/Therapies/Other-Therapies.html"><img src="http://www.change-4-life.com/images/MiniBullet.gif" alt="Other Therapies" width="15" height="9" border="0" />OTHER THERAPIES</a></li> </ul> </div><!-- End Left Menu Content --> </div><!-- End Left Menu --> <div id="BodyText1"> <h1>Weight Control</h1> <p><span class="style2">D</span>o you want to lose weight easily? <span class="style2">W</span>ould you like to feel happy with your body? <span class="style2">W</span>ould you like to be able to stop eating as soon as you recognise you've had enough to eat? <span class="style2">W</span>ould you like to change your eating patterns and enjoy eating healthy natural foods?<span class="style2"></span></p><br /> <p><span class="style2">T</span>hrough a combination of hypnosis and NLP, we will enable you to permanently change your eating habits and become the size and shape you desire.</p><br /> <p><strong><span class="style2">C</span>hange-4-Life Hypnotherapy</strong> puts you back in control and makes weight reduction so effortless enabling you to enjoy the foods you eat.</p> </div> <!-- End BodyText1 --> <!-- Spacer --> <div style="width: 800; height: 19px; margin: 0px; padding: 0px; clear: both; float: none;"></div> <!-- End Spacer --> <div id="BodyText2"> <p><span class="style2">W</span>hether you prefer to participate in a workshop with others who are also looking to reach their target weight or goal size, or whether you prefer a 1-2-1 consultation, we have the solution for you. </p><br /> <p><span class="style2">H</span>ypnotherapy can enable you to avoid emotional eating by reprogramming the subconscious mind to respond in a new, more appropriate way putting you in control.</p><br /> <p><span class="style2">I</span>f you would like to benefit from weight control hypnotherapy, then call <span class="style1"> 01403 256151</span> or click <span class="style1"><a href="../../../Actual/Site/Contact/Book-Appointment.html">here</a></span> to arrange a consultation now.</p> <div id="C4Lscript"><img src="http://www.change-4-life.com/images/C4LScript.gif" alt="Change-4-Life" /></div> </div> <!-- End Body Text 2 --> <div id="RightPic"> <img src="http://www.change-4-life.com/images/WeightLoss.jpg" height="297px" width="198px" /> </div> <!-- End Right Picture --> </div> <!-- End Main --> <div id="footertext"> MAKE A CHANGE... 4-LIFE </div> <!-- End Footer text --> <div id="footerbar"> </div> <!-- End Bottom bar --> </div><!-- End container --> </div><!-- End Shadow --> </body> </html> Any advice would be great, as I've been working on it all day trying all sorts of stuff and syntax to try and narrow it down without luck. Am really hitting my head against a brick wall. Thanks, Tim
June 23, 200818 yr Hi Timo, You could try using a css reset at the top of your style sheet * { padding:0; margin:0; } and see if it makes a difference. It might bugger up other elements of your page though which will need sorting out. I haven't got access to IE6 atm(I've just switched over to my Ubuntu laptop) but if you still have problems, let me know and I'll try to help out.
June 23, 200818 yr Author Hi Elan, thanks for the quick response! Unfortunately your suggestion didn't work. However I think I've located the problem, but I don't know how to get rid of it. I didn't know how to get the bottom-right picture to "sit" and align itself to the bottom of the Main content div, so I created an invisible div called "Spacer" to clear the left hand menu and then push the bottom-right image down by 19 pixels so it rested on the bottom of the main div. The code itself is highlighted in blue, and the Spacer in the design view is also highlighted in blue. I'd noticed the two corners of the pictures looked like they were aligned slightly wrong (circled in red) which made me think the Spacer was causing the problems. Erasing the spacer mends the gaps in the design, but then my content below it becomes all messed up as I'm relying on it to format the rest of the content. I believed "Clear: Both" in the Spacer's CSS would make it so the Spacer would start after the left hand menu window, which it does, and then the bottom right picture was coded to "Clear" the spacer, but I can't see why it's causing the problem as the main window is 693 pixels high - Inside that is 377 for the left hand image, 19 for the spacer, and 297 for the right hand image = 693 pixels. It should fit perfectly without shuffling anything out of the way. Does anyone know what I'm doing wrong? It works great in IE7, Firefox, etc. It's just IE6. Thanks
June 23, 200818 yr Hi, I would try removing the height declaration from #main first. As long as you have a clearing element inside the #main div you shouldn't need to set a height for it. There are a few ways you could tackle the image; Put the image inside the #body-text2 div, getting rid of the right-pic div at the same time. Position the #rightpic div relatively and the image absolutely bottom right. You might need to specify a height for the #body-text2 div. Or you could have the image as a background image bottom right and then specify the height for the #body-text2 div and width for the paragraphs inside #body-text2. I'll have a proper look tomorrow when I'm on the pc.
June 24, 200818 yr Author Hi Elan, thanks again. I decided to split the main window into two halves (divs), with the top half (the left menu, and the body text to the side of it) being one div, and the bottom half (the second batch of text, with the photo of the lady in the wedding dress) being the 2nd div. Unfortunately I still can't get the second half (div) to space itself away from the first half without causing glitches. The new url is: http://www.change-4-life.com/NewFormat.html It's sending me absolutely crazy.
June 24, 200818 yr I'm messing around with it as we speak. (I'm using the version from yesterday though). Hopefully won't take too long
June 24, 200818 yr OK, I've had a rejig of your page and it should now be fine. Instead of posting all of your code again here, I've uploaded it to my server space for you to have a look at. I've removed some unnecessary code from the html, removed some floats, and re-nested some of your elements. I've tested it in Firefox, IE7, IE6, Opera and Safari for Windows and everything seems ok. Let me know if you have any problems. Note that I've changed some of your image paths. Obviously you need to change these back to the original paths. Link here
June 26, 200818 yr Author Elan, you're an absolute star! Can't thank you enough., it works brilliantly. I've analysed it thoroughly and have a few Qs on it to understand things, if possible please. 1) What does the CSS ":after" section do (with regards to main:after), and what is it for? With the values:- clear:both; content: "."; display: block; height: 0; visibility: hidden; 2) I noticed you took out many of the height elements. So, if I understand this, you don't need to specify heights and widths of images within a div (it'll enlarge the div accordingly), but divs with a background image specified do do require height and width values if the background image is not to be simply cropped to fit whatever content is inside the div? 3) You specified the positioning of BodyText2 to be relative. And the RightPic (inside BodyText2) to be absolute. What roles do those positionings play? I thought adding a float:right to the RightPic would align the image to the right side of the div? I tried to position an image using an absolute value myself yesterday, but it seemed to ignore the div it was in and instead positioned the image relative to the whole screen (as if there were no divs)! 4) Nice idea on the footer bar, adding the border to the bottom of the div instead of creating a new one! Cheers Elan (the man!)
July 8, 200818 yr 1) What does the CSS ":after" section do (with regards to main:after), and what is it for? The :after pseudo-element adds content after the element's current content. It's a way of adding content using CSS rather than script. I'm not sure if it's CSS2 or CSS3 (iirc it's CSS3) but it doesn't work in IE7 or lower (in fact IE doesn't support the majority of pseudo-elements and selectors). Personally I wouldn't recommend using :after for anything important without some sort of IE fix, at least not until IE8 becomes the standard web browser. 2) I noticed you took out many of the height elements. So, if I understand this, you don't need to specify heights and widths of images within a div (it'll enlarge the div accordingly), but divs with a background image specified do do require height and width values if the background image is not to be simply cropped to fit whatever content is inside the div? Unstyled DIVs expand-to-fill horizontally 100% of their parent element and expand-to-fit vertically according to their inline content (as long as the content remains within the "flow" of the page - i.e. it isn't positioned absolutely or floated). So yes, you've got the idea down. If you want a background image to display entirely and your content is nonexistant or lacks the height to expand the div vertically, then you will need to give your div a height value. 3) You specified the positioning of BodyText2 to be relative. And the RightPic (inside BodyText2) to be absolute. What roles do those positionings play? I thought adding a float:right to the RightPic would align the image to the right side of the div? I tried to position an image using an absolute value myself yesterday, but it seemed to ignore the div it was in and instead positioned the image relative to the whole screen (as if there were no divs)! Rule: An element positioned absolutely will be positioned relative to the first parent element that has a position other than "static." (Note: static is the default property of position) What this means is that if you position:absolute elementB that lies within elementA, elementB will ignore elementA's position on the page and will instead position itself relative to the <body> (in effect, elementA "leaves the flow" of the page - one way of looking at it is it has left the normal layer of the page and jumped to a new one; note that elementA still remains within elementB in all ways other than visually - it still inherits elementB's styles and whatnot). So the rule of thumb for positioning things absolutely is to assign the parent element position:relative so the current element positions itself accordingly. (Note: "position:relative" acts the same way as the default "position:static" so you don't have to worry about messing up your page's structure) As a side note: remember that an absolutely positioned element "leaves the flow" of the page, so it's height will no longer stretch its container.
Create an account or sign in to comment