brynn Posted June 11, 2013 Share Posted June 11, 2013 (edited) Hi Friends,Lol, I've started 3 different messages tonight, and each time, I've discovered and solved the problem while writing out all the details to explain the problem. But my luck on that seems to have run out this time. I'm very new to CSS, and have completed the Basic, Styling and Box Model tutorials here. I've made a webpage which is a tutorial, which has a lot of numbered lists. Within some of the numbered lists are nested bulleted lists. For some reason, the font size for those nested lists is different, and I can't figure out why. Would someone please have a look at my code and tell me what I've done wrong? I had it working at one point, but I just can't see the problem. I've removed all the relevant text, and just left some sort of place fillers for text. But you can see that bullet list's text is larger than the rest of the page. Also, the bullet items seem to be indented too far (although that's not a major issue). I'll put my code below. I wanted to attach a screenshot, but it's too big for some reason. So hopefully if someone would be so kind, they could load the code into their own browser, if they need to see the problem. Thanks for your help <!DOCTYPE html><html><head><style>.icbg{background-image:url('image.png');background-repeat:repeat-y;font-size:100%;}.iccont{font-family:Verdana,Geneva,sans-serif;font-size:1.1em;margin-left:7%;margin-right:2%;}p.iccont{text-align:left;}h1.iccont{text-align:center;font-size:1.4em;}h2.iccont{text-align:center;font-size:1.2em;font-weight:bold;}h3.iccont{text-align:left;font-size:1.2em;font-weight:normal;text-decoration:underline;}ol.iccont{list-style-type:decimal;}ul.iccont{list-style-type:disc;}a:link {color:#442178;}#icftn{vertical-align:super;}</style></head><body><div class="icbg"><br><br><div class="iccont"><h1 class="iccont">head1</h1><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><h2 class="iccont">head2</h2><h3 class="iccont">head3</h3><ol class="iccont"><li>list item</li><li>list item</li><li>list item</li><li>list item</li><ul class="iccont"><li>nested list item</li><li>nested list item</li></ul><li>list item</li><li>list item</li></ol><h3 class="iccont">head3</h3><ol class="iccont"><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li></ol><br><h2 class="iccont">head2</h2><p class="iccont">paragraph</p><h3 class="iccont">head3</h3><ol class="iccont"><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li></ol><h3 class="iccont">head3</h3><ol class="iccont"><li>list item<span id="icftn"> footnote1</span></li><li>list item</li><li>list item</li><ul class="iccont"><li>bullet list item</li></ul><li>list item</li><li>list item</li><li>list item</li><ul class="iccont"><li>bullet list item</li></ul><li>list item</li><li>list item</li></ol><p class="iccont"><span id="icftn">1</span>paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><br><br></div></div></body></html> Thanks again Edit -- PS - 1 more question. Why is there an approx 3 to 5 px wide white border around my page, when opened in browser? Edited June 11, 2013 by brynn Link to comment Share on other sites More sharing options...
newseed Posted June 11, 2013 Share Posted June 11, 2013 (edited) You are making overuse of your .iccont class. You already have it defined in your div that is wrapping that whole block of code. The issue is your font-size:1.1em; which is cause the next level to increase the font. It's like math, 1.1 X 1.1 = 1.21. Of course this is just a example but to resolve your current issue is to apply font-size: inherit; to ul.iccont This will prevent it from increasing in size by inheriting the font size from parent level. As for you current work, try to use less ID's and classes thus use a bit of strategy to use less html and css and yet produce the same results. Here's what the code looks like using my suggestion. Look at especially the HTML and how much cleaner it looks. <!DOCTYPE html><html><head><style>.icbg {background-image: url('image.png');background-repeat: repeat-y;font-size: 100%;}.iccont {font-family: Verdana,Geneva,sans-serif;font-size: 1.1em;margin-left: 7%;margin-right: 2%;}.iccont p{text-align: left;}.iccont h1 {text-align: center;font-size: 1.4em;}.iccont h2 {text-align: center;font-size: 1.2em;font-weight: bold;}.iccont h3 {text-align: left;font-size: 1.2em;font-weight: normal;text-decoration: underline;}.iccont ol {list-style-type: decimal;}.iccon ult {list-style-type: disc;font-size:inherit;}a:link {color: #442178;}#icftn {vertical-align: super;}</style></head><body><div class="icbg"><br><br><div class="iccont"> <h1>head1</h1> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <h2>head2</h2> <h3>head3</h3> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item<ul> <li>nested list item</li> <li>nested list item</li> </ul> </li> <li>list item</li> <li>list item</li> </ol> <h3>head3</h3> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> <br> <h2>head2</h2> <p>paragraph</p> <h3>head3</h3> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> <h3>head3</h3> <ol> <li>list item<span id="icftn"> footnote1</span></li> <li>list item</li> <li>list item</li><ul> <li>bullet list item</li> </ul> <li>list item</li> <li>list item</li> <li>list item</li><ul> <li>bullet list item</li> </ul> <li>list item</li> <li>list item</li> </ol> <p><span id="icftn">1</span>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <br><br></div></div></body></html> Edited June 11, 2013 by newseed Link to comment Share on other sites More sharing options...
brynn Posted June 12, 2013 Author Share Posted June 12, 2013 Oh, well there's a reason that I'm using so many classes and ids. The ultimate goal for this code is a website which is built with CSS. If I don't define a class for everything, I run the risk of my code messing with the rest of the site. See another recent topic of mine: http://w3schools.invisionzone.com/index.php?showtopic=47723 which contains a screenshot of what happens if I don't use the classes. As a follow up to that topic, when I contacted support for SMF and Tiny Portal, that's what they told me -- to use classes so that my code doesn't interefere with the code for the site itself. I actually had some code written in that topic, that works perfectly, alone in the browser. But when loaded into that forum's articles feature, compromised the code of the site itself. But, I think I understand what you mean about the doubling of....well, it affects the font size and the margin, apparently. What I'm not sure about is how to resolve it. But with the concept of doubling in mind, I'll see what I can come up with. Let me ask this -- I have classes written "p.class" (because that's how the tutorials show it), while you wrote it ".class p". Do both of those formats have the same result? Or what is the differences of these 2 ways to write the style classes? Link to comment Share on other sites More sharing options...
brynn Posted June 12, 2013 Author Share Posted June 12, 2013 Actually I fixed it pretty easily. I just got rid of the <ul> class style, and <ul> class . The page seems to be working ok with SMF/Tiny Portal. So thank you very much, newseed, for explaining how the values got doubled I still am curious about the different ways of writing the class: "p.class" vs ".class p" though. So if you (or someone) has a chance, I'd be interested to know about it. Thanks again Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2013 Share Posted June 12, 2013 p.class only styles that paragraph tag. The means for each paragraph tag that needs that same style you will have to apply the class name for each. Since you already have a div wrapped around the whole contents, using .class p will tell it to style all the paragraphs within that div that has that class name. Link to comment Share on other sites More sharing options...
brynn Posted June 12, 2013 Author Share Posted June 12, 2013 Oh, yes that works very well! That makes the code easier to read and to write. I don't remember seeing that in the tutorials that I worked on. Oh I see, it's the first lesson in the Advanced section. Nice! And also, the way I had it written, the margins were all doubled. So I had to use very small values for the margins. But this way, I can just use the original values. Thank you very much newseed! I learned a few new things here Link to comment Share on other sites More sharing options...
newseed Posted June 12, 2013 Share Posted June 12, 2013 You can reset all your margins and padding default values and then apply what you need for each element. body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre { margin: 0; padding: 0;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now