I'm just starting to learn CSS, and I'm having some problems making the layout stick with all computers. My mac shows it target="_blank">http://www.slaughterfiredepartment.com and the site for the css is <!-- m --><a class="postlink" href="http://www.slaughterfiredepartment.com/svfd.css">http://www.slaughterfiredepartment.com/svfd.css</a><!-- m -->. /><br />This is what the site is supposed to look like:<br /><img src="http://www.slaughterfiredepartment.com/images/Picture%205.png" border="0" class="linked-image" /><br /><br />but>Monica Hughes.<!--content-->
you're using a lot of floats and not sure you're clearing them and that might be causing the problem. I've looked at the site in firefix and IE7 and it looks fine, but in IE the content shifts a little to the right.<!--content-->
<!--quoteo(post=19707:date=Dec 17 2007, 20:55:name=Eskymo)--><div class='quotetop'>QUOTE(Eskymo @ Dec 17 2007, 20:55) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->you're using a lot of floats and not sure you're clearing them and that might be causing the problem. I've looked at the site in firefix and IE7 and it looks fine, but in IE the content shifts a little to the right.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />clearing them? What do you mean? Like I said, I just started learning CSS.<!--content-->
well, everytime you use a float you need to clear it like this. <br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#left {<br />float:left;<br />clear:both;<br />}<br />#leftsomethingelse{<br />float:left;<br />CLEAR:LEFT;<!--c2--></div><!--ec2--><br /><br />Links:<br />http://www.w3schools.com/css/pr_class_clear.asp<br />Try this example <!-- m --><a class="postlink" href="http://www.w3schools.com/css/tryit.asp?fil...css_class-clear">http://www.w3schools.com/css/tryit.asp? ... lass-clear</a><!-- m --><!--content-->
<!--quoteo(post=19732:date=Dec 18 2007, 02:11:name=Boyles Web Design)--><div class='quotetop'>QUOTE(Boyles Web Design @ Dec 18 2007, 02:11) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->well, everytime you use a float you need to clear it like this. <br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#left {<br />float:left;<br />clear:both;<br />}<br />#leftsomethingelse{<br />float:left;<br />CLEAR:LEFT;<!--c2--></div><!--ec2--><br /><br />Links:<br />http://www.w3schools.com/css/pr_class_clear.asp<br />Try this example <!-- m --><a class="postlink" href="http://www.w3schools.com/css/tryit.asp?fil...css_class-clear">http://www.w3schools.com/css/tryit.asp? ... lass-clear</a><!-- m --><!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Hmm.. I'm not sure how clear will help me. It seems like it voids the float.<!--content-->
<!--quoteo(post=19733:date=Dec 18 2007, 03:11:name=Monica)--><div class='quotetop'>QUOTE(Monica @ Dec 18 2007, 03:11) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->Hmm.. I'm not sure how clear will help me. It seems like it voids the float.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br /><br />Ok, so I think I figured out part of the problem. I made my frame 800 px and then my 3 div's inside the frame added up to 804 including padding and stuff. So it looks alright in the firefox browser, but in explorer it still shifts everything to the right. Any ideas what's causing that?<!--content-->
IE adds about 10px of padding and/or margin to some elements><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->IE adds about 10px of padding and/or margin to some elements><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->Awesome! Thank you so much. I'll try that.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />So I figured everything out! Thank you all so much for everything! You're all absolutely awesome!<!--content-->
you're using a lot of floats and not sure you're clearing them and that might be causing the problem. I've looked at the site in firefix and IE7 and it looks fine, but in IE the content shifts a little to the right.<!--content-->
<!--quoteo(post=19707:date=Dec 17 2007, 20:55:name=Eskymo)--><div class='quotetop'>QUOTE(Eskymo @ Dec 17 2007, 20:55) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->you're using a lot of floats and not sure you're clearing them and that might be causing the problem. I've looked at the site in firefix and IE7 and it looks fine, but in IE the content shifts a little to the right.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />clearing them? What do you mean? Like I said, I just started learning CSS.<!--content-->
well, everytime you use a float you need to clear it like this. <br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#left {<br />float:left;<br />clear:both;<br />}<br />#leftsomethingelse{<br />float:left;<br />CLEAR:LEFT;<!--c2--></div><!--ec2--><br /><br />Links:<br />http://www.w3schools.com/css/pr_class_clear.asp<br />Try this example <!-- m --><a class="postlink" href="http://www.w3schools.com/css/tryit.asp?fil...css_class-clear">http://www.w3schools.com/css/tryit.asp? ... lass-clear</a><!-- m --><!--content-->
<!--quoteo(post=19732:date=Dec 18 2007, 02:11:name=Boyles Web Design)--><div class='quotetop'>QUOTE(Boyles Web Design @ Dec 18 2007, 02:11) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->well, everytime you use a float you need to clear it like this. <br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#left {<br />float:left;<br />clear:both;<br />}<br />#leftsomethingelse{<br />float:left;<br />CLEAR:LEFT;<!--c2--></div><!--ec2--><br /><br />Links:<br />http://www.w3schools.com/css/pr_class_clear.asp<br />Try this example <!-- m --><a class="postlink" href="http://www.w3schools.com/css/tryit.asp?fil...css_class-clear">http://www.w3schools.com/css/tryit.asp? ... lass-clear</a><!-- m --><!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Hmm.. I'm not sure how clear will help me. It seems like it voids the float.<!--content-->
<!--quoteo(post=19733:date=Dec 18 2007, 03:11:name=Monica)--><div class='quotetop'>QUOTE(Monica @ Dec 18 2007, 03:11) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->Hmm.. I'm not sure how clear will help me. It seems like it voids the float.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br /><br />Ok, so I think I figured out part of the problem. I made my frame 800 px and then my 3 div's inside the frame added up to 804 including padding and stuff. So it looks alright in the firefox browser, but in explorer it still shifts everything to the right. Any ideas what's causing that?<!--content-->
IE adds about 10px of padding and/or margin to some elements><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->IE adds about 10px of padding and/or margin to some elements><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->Awesome! Thank you so much. I'll try that.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />So I figured everything out! Thank you all so much for everything! You're all absolutely awesome!<!--content-->