Hi! I posted about the Div wrapping issues yesterday. I managed to fix the issue on all pages except for 3 of them. I can't figure out why these 3 pages everything shifts to the left of the page leaving a huge gap down the right side. I think I have these pages set up the same way as the others, however, these 3 pages contain forms (not sure if this is related to the issue). The pages I'm referencing are "Contact", "Order a Transcript" and "Schedule a Court Reporter".
Also, I am getting the 3 pixel text jog issue on most of the pages. I have the .mybuggyelement rule in there with the zoom set to 1, but I could be using it incorrectly. Any help is very much appreciated. Here is the test link:
Thank you! That fixed the shifting problem on the 3 effected pages. I'm still getting the 3 Pixel Text Jog error when I run the validator. Do you know how I can fix it?
@charset \"UTF-8\"; body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #333333; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; background-image: url(images/bcknd_800.jpg); background-repeat: repeat-y; background-position: 50% 0; } .twoColFixLtHdr #container { text-align: left; /* this overrides the text-align: center on the body element. */ max-width: 800px; margin-left: auto; margin-right: auto; width: 800px; } .twoColFixLtHdr #header { background: #ffffff; padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } .twoColFixLtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixLtHdr #sidebar1 { float: right; /* since this element is floated, a width must be given */ width: 217px; background-image: url(images/legalpad.jpg); background-repeat: no-repeat; padding-left: 10px; display: inline; overflow: hidden; margin-left: 10px; } .twoColFixLtHdr #mainContent { margin: 0 250px 0 0; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ padding: 0 0px 0 30px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ z-index: 1; padding-top: 25px; }.twoColFixLtHdr #mainContentwrap { padding-top: 25px; padding-left: 25px; float: left; overflow: hidden; margin-right: 0px; max-width: 774px; width: 760px; padding-right: 0px; margin: 0; } .twoColFixLtHdr #footer { padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ background:#DDDDDD; } .twoColFixLtHdr #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 20px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } .mybuggyelement { z-index: 1; }
Also, I am getting the 3 pixel text jog issue on most of the pages. I have the .mybuggyelement rule in there with the zoom set to 1, but I could be using it incorrectly. Any help is very much appreciated. Here is the test link:
http://gregorycourtreporting.com.s62344 ... index.html
Here is my css
Just found this:http://www.communitymx.com/content/article.cfm?page=4&cid=F41AE
Here is my link and css
http://gregorycourtreporting.com.s62344 ... index.html