Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
Thread: CSS float too far right in Ie7
08-04-2011, 11:25 AM #1
- Join Date
- Jul 2010
- Thanked 0 Times in 0 Posts
CSS float too far right in Ie7
Displays fine in ie8, safari, chrome, ff, etc.
In ie7 the find us section is floating too far right and the
navigation is aligned to the left (the padding doesn't seem to be working)
CSS for Find Us Section
border: 2px solid #fdea9d;
08-04-2011, 11:46 AM #2
- Join Date
- Jul 2011
- Thanked 57 Times in 56 Posts
Try to adjust padding/margin
08-04-2011, 01:42 PM #3
- Join Date
- Oct 2008
- Some say it's everything.
- Thanked 397 Times in 390 Posts
First thing's first when trying to wrestle with fine-tuning CSS: validate your page. There are currently 17 errors and 4 warnings. You have invalid ID names and ID's being used more than once in a page. Cleaning those up might not fix what you're seeing here, but it's still best to get your IE out of quirks mode.
Now for solving this specific issue, I'm guessing that this is a problem with margins/padding/overall width of your #layoutinfo not playing well with the width of your #rightcol div.
Your "box model" is out of whack. Your #layoutinfo div has a base width of 235px, plus 10px padding each side, plus 2px border each side, plus right margin of 10px. (235+10+10+2+2+10=269px of overall width, but #rightcol is only 250px wide). So you're trying to cram 269px of contents into a 250px box. IE7 is starting the content on the left edge of #rightcol and letting the overlapping width run out of the right-hand side of the container. Other browsers are giving more consideration to the right-hand margin you gave to #layoutinfo, and that's why the appearance is different across different browsers.
Just for fun, let's try increasing the width of the #rightcol div to accommodate
teststyle.css (line 139):
Last edited by Rowsdower!; 08-04-2011 at 02:01 PM. Reason: cleaning up code referenceThe object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS:
Seek and you shall find... basically: validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting