SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: Netscape 7 problem
-
Feb 4, 2004, 00:42 #1
- Join Date
- Nov 2003
- Location
- Vancouver Island, Canada
- Posts
- 112
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Netscape 7 problem
Hi all,
Anyone know why this goes all wacky in NN 7.0? www.virtuallycertain.com/tsk/layout.htm
It works great in IE 5.5 and IE 6. Here's the CSS for quick reference:
HTML Code:body { background-color: #669999; margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0; text-align: center; } div { margin: 0px; padding: 0px; } .photo { border: 1px solid #000000; } .BoxHeader { background-color: #663300; margin: 0px; width: 100%; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000000; border-bottom-color: #000000; padding: 10px; font-size: 10px; } #BoxWrapper { width: 88%; margin-right: 6%; margin-left: 6%; margin-top: 14px; margin-bottom: 14px; } #BoxLeft { float: left; } #BoxRight { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #333333; text-align: left; background-color: #FFFFFF; float: left; border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 20px; } .BoxNav { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCC99; background-color: #003333; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; padding-top: 2px; padding-right: 8px; padding-bottom: 2px; padding-left: 8px; } .BoxNav a:link, .BoxNav a:visited { color: #CCCC99; padding: 2px 8px 2px 8px; text-decoration: none; } .BoxNav a:hover { color: #000000; background-color: #CCCC99; padding: 2px 7px 2px 7px; text-decoration: none; border-width: 1px; border-style: solid; border-color: #000000; } #BoxSidebar { background-color: #CCCC99; border: 1px solid #000000; padding: 7px; } .BoxHeaderWrap { width: 755px; } #BoxSidebarWrapper { float: right; width: 200px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #navlist { width: 180px; } #navlist ul { margin: 0; padding: 0; list-style-type: none; /*turns off display of bullet*/ font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #navlist li { margin: 0 0 0 0; padding: 0; } #navlist a { display: block; padding: 2px 2px 2px 24px; border-right: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; width: 200px; background-color: #663300; } #navlist a:link, #navlist a:visited { color: #CCCC99; text-decoration: none; } #navlist a:hover { border-right: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; background-color: #CCCC99; color: #000000; } .TextComment { font-size: 10px; text-align: right; }
Thanks,
-jp
-
Feb 4, 2004, 04:35 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You really need to check in each browser every step of the way otherwise it gets very difficult to sort it out afterwards
There are number of problems and a lot are related to the broken box model. You are designing in quirks mode which uses the broken box model where padding and borders are inside the specified width. In the correct box model as in netscape/mozilla padding and borders are added to the width.
This makes some of your elements to big to fit in the allocated space and overflow. You need to either change the way you add padding to elements by using nested elements or inner elements (without width) or use one of the hacks : e.g.
http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html
Other problems on your page are that floats should have a specified width. So work out what they need to be and apply the width. Also after a float you will need a clearing element to make sure content starts after the float:
Code:<div style="clear:both"></div> <div class="BoxHeader"> </div>
Hope that helps.
Paul
-
Feb 4, 2004, 16:49 #3
- Join Date
- Nov 2003
- Location
- Vancouver Island, Canada
- Posts
- 112
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Help with padding
Thanks, Paul--I'm getting much closer now. I've worked on the widths, and used the
HTML Code:<div style="clear: both;"></div>
Now...Can anyone help me understand the difference between padding in IE and Netscape, or point me to a good article? I'm fairly new to CSS, and I don't understand what is going on with this. I can see that IE is treating my padding very differently than Netscape, and I can't figure out how to get them to act the same.
Also, I can't understand why the sepia-tone image on the left of the page has a 4(ish) pixel break in between it and the BoxRight (white bg with content). It only does this in IE, not in Netsacape. Is this the padding thing that Paul is referring to as well.
www.virtuallycertain.com/tsk/layout_netscape.htm (trying to get the same result in modern versions of IE and Netscape). CSS below:
HTML Code:body { background-color: #669999; margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0; text-align: center; } div { margin: 0px; padding: 0px; } .photo { border: 1px solid #000000; float: left; margin: 0px; padding: 0px; } .BoxHeader { background-color: #663300; margin: 0px; width: 100%; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000000; border-bottom-color: #000000; padding: 10px; font-size: 10px; } .BoxHeaderWrap { width: 700px; } .BoxNav { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCC99; background-color: #003333; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; margin: 0; padding-top: 2px; padding-right: 8px; padding-bottom: 2px; padding-left: 8px; } .BoxNav a:link, .BoxNav a:visited { color: #CCCC99; padding: 2px 8px 2px 8px; text-decoration: none; } .BoxNav a:hover { color: #000000; background-color: #CCCC99; padding: 2px 7px 2px 7px; text-decoration: none; border-width: 1px; border-style: solid; border-color: #000000; } #BoxWrapper { width: 88%; margin: 14px 6% 14px 6%; } #BoxRight { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #333333; text-align: left; background-color: #FFFFFF; width: 65%; float: left; border: 1px solid #000000; padding: 20px; margin: 0 0 0 0; } #BoxSidebar { background-color: #CCCC99; border: 1px solid #000000; padding: 7px; } #BoxSidebarWrapper { float: right; width: 200px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #navlist { width: 180px; } #navlist ul { margin: 0; padding: 0; list-style-type: none; /*turns off display of bullet*/ font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #navlist li { margin: 0 0 0 0; padding: 0; } #navlist a { display: block; padding: 2px 0px 2px 20px; border-right: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; width: 180px; background-color: #663300; } #navlist a:link, #navlist a:visited { color: #CCCC99; text-decoration: none; } #navlist a:hover { border-right: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; background-color: #CCCC99; color: #000000; } .TextComment { font-size: 10px; text-align: right; }
-
Feb 6, 2004, 14:18 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Jp,
I couldn't access your page to see how you're getting on but here's some more info on the box model and why it needs fixing in ie5, 5.5 and ie6 quirks mode.
http://css-discuss.incutio.com/?page=BoxModelHack
Paul
Bookmarks