Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts

    list-style not working

    I have the following css code in a html iframe, and I am not able to display the squares on the page:

    Code:
    <style type="text/css">
    body {
    font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 21px;
    }
    h3 {
    color: #666; 
    font-size: 10px; 
    font-weight: 500;
    letter-spacing: 0.1em; 
    line-height: 2.6em;
    text-transform: uppercase; 
    }
    ul {
    padding: 0px;
    list-style: square; 
    }
    a {
    text-decoration: none; 
    color: #1982D1;
    }
    a:hover {
    text-decoration: underline; 
    }
    </style>
    Does anybody know why? Maybe it has something to do with list-style not working with block elements (or inline)?

    Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello joliett89,
    Look at it this way -
    Code:
    ul {
    /*padding: 0px;*/
    list-style: square; 
    }


    ...
    OR like this -
    Code:
    ul {
    	padding: 0px;
    	list-style: square inside;
    }
    Look at this article for an explanation where the li bullet lives.
    Last edited by Excavator; 01-06-2013 at 04:36 PM. Reason: added link
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    joliett89 (01-06-2013)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    I added the "inside" and it is working. I had to add padding because webkit browsers add 40px by default (for some reason). Thanks a lot!

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    I actually have another issue with this. The iframe and the rest of the sidebar are suppose to look the same, but they dont align horizontally (see picture below). The bullets for the iframe list are inside the iframe, and the ones for the sidebar are, for some reason outside of the widget area (which is 188px wide).

    This is the code for the widget (which contains the iframe <188px wide> and also "Archives" and "Meta" elements below):

    Code:
    #secondary {
    float: right; 
    margin-right: 7.6%; 
    width: 18.8%; 
    }
    The code for the iframe is:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    body {
    font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 21px;
    }
    h3 {
    color: #666; 
    font-size: 10px; 
    font-weight: 500;
    letter-spacing: 0.1em; 
    line-height: 2.6em;
    text-transform: uppercase; 
    }
    ul {
    #padding: 0px;
    list-style: square; 
    }
    a {
    text-decoration: none; 
    color: #1982D1;
    }
    a:hover {
    text-decoration: underline; 
    }
    </style>
    <title></title>
    </head>
    <body>
    <h3>pornstar blogs</h3>
    <ul> 
    <li><!--list elements go here--></li>
    </ul>
    </body>
    </html>
    This is the regular Wordpress TwentyEleven theme, and I am working on it at http://office-porn.com (no adult content).

    What do you think would be the best way to get around this issue. Is the only solution moving elements on the bottom to align with those in the iframe on the top?

    Thank you in advance for any info.


  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    First off, it looks like your template is using a reset that's zeroing out the default padding that allows an li's bullets to work.

    If the bit of CSS you used to put those bullets on the inside targets only the ul in your iframe, you will need to be more specific in targeting either all ul's or just the iframe and sidebar ul's when either replacing what your reset removed or putting the bullets inside.

    Did that make any sense at all?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    joliett89 (01-07-2013)

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    Thank you for quick reply. Here is the reset (it is a default Wordpress theme's CSS so I am sure a lot of people out there is using it):

    Code:
    /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
    -------------------------------------------------------------- */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    :focus {/* remember to define focus styles! */
    	outline: 0;
    }
    body {
    	background: #fff;
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    table {/* tables still need 'cellspacing="0"' in the markup */
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	font-weight: normal;
    	text-align: left;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }
    a img {
    	border: 0;
    }
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    The sidebar area is set to 188px (that's what comes out of percentage rule) and I set the iframe to 188px also. I would not want to modify the reset (if I dont have to), and it would be best to make the iframe look like the rest of the them and not the other way around, but I am not sure if it is possible...

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    If you remove those bits in red, all your ul/li's will have their default margin and padding.

    ---------
    That may have too broad an affect for you now that you've built the whole site with that reset in place. You might have to reposition all your ul lists.

    It might be easier to target the two ul's you're having trouble with. Without seeing your markup, I can't tell what id's or classes are already in place that you might be able to use.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    joliett89 (01-07-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •