firefox css alignment problems
|
| Author | Content |
|---|---|
| devvie Jul 12, 2006 10:15 AM EDT |
I am using css to control a new website.- http://4-sale.com - I decided to build it from scratch. I am having a hard time getting the templates working with firefox.
can someone take a look at he site and let me know what they think might be the sizing solution? IF you load it in IE then you will see what i am trying accomplish. The latest thing i did was to put a page box around everything thats inbetween the bottom box and the top banner and top navs. since i put the main concent, and the left nav bar inside this box, then how in the hell is the bottom box still jumping to the top, and why is the content working its way below the left nav bar in firefox. heres my styles im using so far. 1. body {font-size: 12px; font-family: "Trebuchet MS", Arial, serif;} 2. #bodyBox {width: 760px; margin: auto; border: 1px solid #333333;} 3. div#bodyBox p {text-indent: 8px;} 4. div#bodyBox img {border; 1px solid #333333} 5. #banner { 6. float: left; 7. border: 1px solid #333333; 8. } 9. #topNavs {text-align: center; padding-top: 3px; padding-bottom: 3px; padding-right: 3px; padding-left: 3px; border-bottom: 1px solid #333333;} 10. #pageBox { 11. width: 760px; 12. margin-top: 60px; 13. } 14. #leftNavs {width: 130px; float: left; padding-top: 7px; padding-bottom: 7px; padding-right: 3px; padding-left: 3px; overflow: inherit;} 15. div#leftNavs a {color: #0066FF;} 16. div#leftNavs a:active {color: #0066FF;} 17. div#leftNavs a:hover {color: #0066FF;} 18. div#leftNavs a:visited {color: #0066FF;} 19. .leftNavBox {margin-top: 10px; border: 1px solid #C4E0FF;} 20. .navHeader1 {font-size: 120%;font-weight: bold;} 21. #content {float: left;} 22. .picCap {padding: 0px 2px 0px 0px; margin-right: 3px; padding-top: 7px;} 23. .picCap img {border: 1px solid #cccccc; margin-right: 4px; margin-left: 4px;} 24. .fullBox {margin-left: 10px; margin-right: 0px; margin-top: 7px; margin-bottom: 7px; padding-top: 3px; padding-bottom: 3px; padding-right: 3px; padding-left: 3px; width: 500px; border: 1px solid #333333;} 25. .leftBox {float: left; width: 185px; margin-left: 10px; margin-right: 0px; margin-top: 7px; margin-bottom: 7px; padding-top: 3px; padding-bottom: 3px; padding-right: 3px; padding-left: 3px; border: 1px solid #333333;} 26. .centerBox {width: 185px; float: left; margin-left: 10px; margin-right: 0px; margin-top: 7px; margin-bottom: 7px; padding-top: 3px; padding-bottom: 3px; padding-right: 3px; padding-left: 3px; border: 1px solid #333333;} 27. .rightBox {float: left; width: 185px; margin-left: 10px; margin-right: 0px; margin-top: 7px; margin-bottom: 7px; padding-top: 3px; padding-bottom: 3px; padding-right: 3px; padding-left: 3px; border: 1px solid #333333;} 28. #bottomBox { 29. width: 760px; 30. text-align: center; 31. border-top: 1px solid #333333; 32. } 33. .bottomNav {padding-top: 3px; padding-bottom: 3px;} 34. .bottomDisclaimer {padding-top: 3px; padding-bottom: 3px; font-size: 9px;} I would have places the site code, but its activating the html, or i dont knwo how to include html code in this forum without activating it |
| devvie Jul 12, 2006 2:27 PM EDT |
i had hoped to get a quick answer,
but anyway, for those of you who google this topic, i was able to fix the main problem by adding an overflow: invisible to the #content id, and adding a 130px lefft margin to teh .picCap class i am still having a problem with the bottom box wrapping way up to thye boxes above it for some reason. |
Posting in this forum is limited to members of the group: [Editors, MEMBERS, SITEADMINS.]
Becoming a member of LXer is easy and free. Join Us!