Hey all, this is sort of a repost but it's a bit more specific... I recently built a site using ems in hopes of getting a fully scalable site, and it almost works perfectly. The only problem I seem to be having is that I've got two main floats - a left and a right. These are enclosed in a container (although that fact is negligible, since the problem happens with or without). Upon using the enlarge feature in either browser, the site looks great. When I decrease the size, the left side navigation gets knocked down under the body.
The code is structured so that the main content comes in the code before the menu, then the content floats right and menu floats left - I've had it the other way too. The container has a width on it, and I've also tried width on the body but that doesn't seem to do anything. It's almost like the content tries to run too far over and knocks the menu down, but i just want it to stay in place!
Please help! The site is almost ready to launch and this is my last real bug fix
Check out <!-- w --><a class="postlink" href="http://www.unifiedbarcode.com/newtest/barcode-products.php">www.unifiedbarcode.com/newtest/barcode-products.php</a><!-- w --> and decrease the size to see the result. All tips are appreciatedYou're mixing width and padding units; the absolute padding units do not shrink while all other widths do.
#sidenav {
float: left;
width: 22.5em;
z-index: 3;
margin: 0px;
padding: 10px 0 0 0.5em;
background-image: url(images/brown-pixel.jpg);
background-repeat: repeat-y;
background-position: right top;
}I fixed all the CSS and i still get the knockdown, but according to standards that's what happens with floats when they run out of room. I added a little more space in between so it can scale up and down significantly without getting knocked down.
The only problem I seem to be having now is that IE is screwing up the gradient on my site in giving it a few extra pixels on the left - <!-- m --><a class="postlink" href="http://www.unifiedbarcode.com/newtest/rfid-tags.php">http://www.unifiedbarcode.com/newtest/rfid-tags.php</a><!-- m --> - works just fine in Firefox. So close to having this site complete!
Thanks for all your help, guys.
The code is structured so that the main content comes in the code before the menu, then the content floats right and menu floats left - I've had it the other way too. The container has a width on it, and I've also tried width on the body but that doesn't seem to do anything. It's almost like the content tries to run too far over and knocks the menu down, but i just want it to stay in place!
Please help! The site is almost ready to launch and this is my last real bug fix
Check out <!-- w --><a class="postlink" href="http://www.unifiedbarcode.com/newtest/barcode-products.php">www.unifiedbarcode.com/newtest/barcode-products.php</a><!-- w --> and decrease the size to see the result. All tips are appreciated
You're mixing width and padding units; the absolute padding units do not shrink while all other widths do.#sidenav {
float: left;
width: 22.5em;
z-index: 3;
margin: 0px;
padding: 10px 0 0 0.5em;
background-image: url(images/brown-pixel.jpg);
background-repeat: repeat-y;
background-position: right top;
}I fixed all the CSS and i still get the knockdown, but according to standards that's what happens with floats when they run out of room. I added a little more space in between so it can scale up and down significantly without getting knocked down.
The only problem I seem to be having now is that IE is screwing up the gradient on my site in giving it a few extra pixels on the left - <!-- m --><a class="postlink" href="http://www.unifiedbarcode.com/newtest/rfid-tags.php">http://www.unifiedbarcode.com/newtest/rfid-tags.php</a><!-- m --> - works just fine in Firefox. So close to having this site complete!
Thanks for all your help, guys.