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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Bulleted List not indenting...

    On this page that is still in process of being built, for the photos that are on the left, and text on the right, I have a small bulleted list that does not indent from the photo like expected. As you see in the capture below, the text is aligned straight the above text, and the bullets are to the left of that, instead of bullets and text indenting.



    Here is the actual snippet of code w/o that change:

    Code:
    <p> The prices for this print are:</p>
    
    	<ul>
    		<li>12X18 Metal Print: Without Foam Mount Block - $ 98.00; With Foam Mount Block: $110.00</li>
    		<li>16X24 Metal Print: Without Foam Mount Block - $170.00; With Foam Mount Block: $182.00 </li>
    	</ul>
    I did find an article about padding UL and LIs, and it had these instructions:

    In order to avoid this and get some indentation, there are really only three options available to browser implementors.

    Give each li element a left margin.
    Give the ul element a left margin.
    Give the ul element some left padding.
    so I tried the below in CSS(NOTE: I am working in a SmugMug Photo Gallery site, and the HTML code is in the description of the gallery, and I am trying to apply to this gallery only, and that is the reasong for the .gallery stuff in the CSS):

    Code:
    .gallery_21515914 ul{padding-left: 20;
    margin-left: 20;}
    
    .gallery_21515914 li(left-Margin:20}
    That didn't seem to do anything either, but of course my coding may be inaccurate.

    Any suggestions?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    .gallery_21515914 li(left-Margin:20}
    should be:
    Code:
    .gallery_21515914 li{margin-left:20px;}

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Doh!

    You are right.

    I made the change, and it makes zero difference to the site. Bullets still not indenting when picture on left

    Thought we had something there...

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    it sounds like your list-style-position: is set to outside. Try changing it to inside.

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks

    Gave that a try, and it is an improvment. It did move the bullets under the text above.

    Now, the next thing is that none of the text is indenting. I'd like the bullets and text to indent from the text 'The prices for this print are:'. Again, it does work fine if my picture is on the right, and text on the left.

    I tried including the ul inside of p, /p, like this, and no good there either:

    Code:
    	<p> The prices for this print are:
    
    	<ul>
    		<li>12X18 Metal Print: Without Foam Mount Block - $ 98.00; With Foam Mount Block: $110.00</li>
    		<li>16X24 Metal Print: Without Foam Mount Block - $170.00; With Foam Mount Block: $182.00 </li>
    	</ul>
    	</p>
    I put your suggestion in the CSS.

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by ewingr View Post
    Thanks

    Gave that a try, and it is an improvment. It did move the bullets under the text above.

    Now, the next thing is that none of the text is indenting.
    Then there is something else somewhere in your code setting the left margin to 0 and over-riding any margin settings in your css.

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks. You are likely right.

    I have some code statements in the CSS setting margin to 0, and I modified them, and it didn't make any difference. I would think that if the bullets on the same page with same CSS code, do indent, only difference being that the text is is on the left with picture on the right, would also have issues with indention if this was the case.

    JFYI, below is the CSS code for this particular page (gallery):

    Code:
    /* START gallery 21515914 = 'Lighthouse Collection'*/
    
    .gallery_21515914 #smugmug {
    width: 50%;
    margin: 0 auto;
    }
    
    .gallery_21515914 #albumDescription {margin: 0% 10% 0% 10%; border: none;} 
    
    .gallery_21515914 .myPhoto {
        float: right;     /* allows the text to flow to the left*/
        padding: 0 0px 10px 30px;  /* top right bottom left        */
    }                            /* spacing of text around photo */
    
    .gallery_21515914 .myPhoto_left {
        float: left;     /* allows the text to flow to the left*/
        padding: 0 20px 0 0 ;  /* top right bottom left        */
    }                            /* spacing of text around photo */
    
    
    
    .gallery_21515914 .myTitle {
        font-family: Comic Sans MS, verdana; 
        font-size: 150%;
        color: white;
        font-weight: bold;
        text-align: center;
        margin: 0 auto 30px auto;    /* top right bottom left */
    }
    
    .gallery_21515914 .myText {
        font-family: Comic Sans MS, verdana; 
        font-size: 125%;
        color: white;
        font-weight: normal;
        text-align: justify;
    }
    
    .gallery_21515914 .myPhoto_center {
        text-align: center;
        padding: 0 0px 10px 30px;  /* top right bottom left        */
    }                            /* spacing of text around photo */
    
       /* things you can hide on page */
    .notLoggedIn.gallery_21515914 .emptyGallery,   /* if no photos in gallery */
    .notLoggedIn.gallery_21515914 .smugmug_entry,  /* hides photos in gallery */
    .notLoggedIn.gallery_21515914 #albumNav_top,
    .notLoggedIn.gallery_21515914 #albumNav_bottom,
    .notLoggedIn.gallery_21515914 #breadcrumb {display: none;}
    .gallery_21515914 #photos {display: none;}
    
    /* Did not enter .gallelry designation below, as I want this to apply to all galleries */
    ul
    {
    list-style-position:inside;
    }
           /* END gallery 21515914 'LIghthouse Collection */
    This is the page I am testing with.

    Thanks for the help. It is appreciated. I have at least made progress.
    Last edited by ewingr; 03-21-2012 at 06:00 AM.

  • #8
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Code:
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    	margin: 0;
    	list-style-position: inside;
    	list-style-type: circle;
    	padding-top: 0%;
    	padding-right: 0%;
    	padding-bottom: 0%;
    	padding-left: 10%;
    }

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I really appreciate the feedback.

    I pasted the code in my CSS exactly as is. The only thing it changed was the bullet from solid to a circle. Still no indent on the text that is right of photos. Interestingly, on the text that is left of photos, it indented that even more...more than looks good.

    Did this in Firefox, using the Webdav tools.


  •  

    Posting Permissions

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