SitePoint Sponsor

User Tag List

Page 4 of 5 FirstFirst 12345 LastLast
Results 76 to 100 of 101
  1. #76
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Lessee, just ran into a browser default I was unaware of...

    I had this code:
    ul {
    list-style: none;
    }

    later...

    Code:
    #account ul.bullets {
      text-align: center;
      padding-left: 22px;
    }
    	#account ul.bullets li {
    	  display: list-item;
    	  list-style-type: disc;
    	  margin: .5em 0;
    	}
    So the ul's a block of course, and the li's are blocks and list-item, and the anonymous inline boxes inside the li's (the text) are centered.

    In most browsers (Geckos, Opera, IE7 and below) the bullets were right next to the li's text. In Safari, Chrome, and, according to browsershots, IE8, they were way to the left.

    Playing around with it, I now have this code:
    Code:
    #account ul.bullets {
      text-align: center;
      padding: 0 2px;
    }
    	#account ul.bullets li {
    	  display: list-item;
    	  list-style: inside disc;
    	  margin: .5em 0;
    	}
    The defaults for Opera, Gecko and IE under 8 was list-style-position: inside, while Saffy-Chrome and IE8 were defaulting to "outside". Specifying the position (which I don't think I've ever done before) made everyone act the same (also if I set it to "outside" everyone then correctly set the bullets out to the far left side).

    The IE bug where bullets are hidden doesn't show up here because the ul has no side margins.

  2. #77
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    This isn't a bug I think. People can correct me of course...

    Browsers add the margin/padding to allow space for the bullets to appear. If you remove the side margins there is no place for it to appear. Since IE/FF use a different way of providing space it seems logical that if you zero out one of them, the browser won't show the bullets. I bet any version of IE would do that.

    Just my 2cents (I'm probably off).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #78
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This had nothing to do with margins or bullets not showing, merely their placement.

    Correct, it is not a bug, but a browser default (like the default margins etc they have) which I was unaware of, and now am, and wanted to share. I did not know that Gecko Opera and IE6 and 7 were defaulted to list-style-position: inside while IE8, Saffy and Chrome were defaulted to list-style-position: outside (which is all it was).

    *edit I should post screenshots... but they should be here on SP and not my server I think...


  4. #79
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I did not know that Gecko Opera and IE6 and 7 were defaulted to list-style-position: inside
    They don't they all default to outside

    What you are seeing is the browsers interpretation of where bullets should be placed which isn't explicitly defined. If the text is centered should the bullet be centred also? Some browsers think yes and some think no.

    Setting the display to inside sets the bullet marker to behave as an inline element and then it stays with the text but the text wrapping will be different. If you try with lots of text you will see that the behaviour with inside is different to outside on those centred lists.

  5. #80
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I thought "outside" meant "outside the li element". In my screenshots, the red border and green background were added only to show where the li's were-- so I saw bullets inside the green and figured, that's "inside".

    Dang I hate stretching the page with those large shots, but when I made them smaller they got so blurry you couldn't see what was going on.

    but the text wrapping will be different. If you try with lots of text you will see that the behaviour with inside is different to outside on those centred lists.
    Lemme guess, like inlines they'll wrap when they need to, meaning sometimes a bullet won't necessarily stay with its list item.

  6. #81
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    inside and outside refer to the principal box.

    outside The marker box is outside the principal block box. CSS 2.1 does not specify the precise location of the marker box. inside The marker box is the first inline box in the principal block box, after which the element's content flows. CSS 2.1 does not specify the precise location of the marker box.
    like inlines they'll wrap when they need to, meaning sometimes a bullet won't necessarily stay with its list item.
    Yes the text will wrap under the bullet at the end of each line and if the window is closed small enough the bullet and text also part company.

    There are other anomalies like the one you see with Safari and if you have a list adjacent to a float you may lose the bullet under the float or at the side of the float.

    Lists and bullets haven't really been that well implemented mainly because the specs are ambiguous at these points.

  7. #82
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #83
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Turning a list into columns without using floats or relative positioning

    If you have a list of items which are just too long to display vertically or tabular data that you want to convert with css, you can divide them in columns.
    How? By using negative margins without using any floats or relative positioning.

    Here’s an example:

    Col1

    Access Key
    1
    2
    3
    4
    5
    6

    Col2

    Resulting action
    Skip Navigation

    Home

    Laboratory

    Tutorials

    Templates

    Accessibility

    The result is to get col1 and col2 next to each other, nicely lined up.

    You could use tables to display the list but it’s also possible with just Css, but without floats or relative positioning. The advantage is that you don't run into float bugs or/and having to use hacks for IE6.

    Let's start first with the HTML:

    Code HTML4Strict:
    <ul class="test">  
       <li class="col1 title">Access Key</li>  
       <li class="col1">1<li>  
       <li class="col1">2<li> 
       <li class="col1">3<li> 
       <li class="col1">4<li> 
       <li class="col1">5<li> 
       <li class="col1">6<li> 
       <li class="col2 top">Resulting action<li>  
       <li class="col2">Skip Navigation<li> 
       <li class="col2">Home<li>  
       <li class="col2">Laboratory<li>  
       <li class="col2">Tutorials<li>  
       <li class="col2">Templates<li>  
       <li class="col2">Accessibility<li>   
    </ul>

    The Css goes as follows:

    I assume you already have reset the paddings and margins on your lists.

    Code CSS:
    .test li {
    line-height:1.5;
    }
     
    .col1{
    margin-left: 1em;
    }
     
    .col2 {
    margin-left:7em;
    } 
     
    .top {
    margin-top:-11.5em; 
    margin-bottom: 1em;
    }
     
    .title {
    margin-bottom: 1em;
    }

    Let's go over it step by step:

    Step 1: setting line-height

    Setting a line-height on the li is needed because we’ll use that to calculate the height of the column in step 3.

    Code CSS:
    .test {
    line-height:1.5;
    }

    Step 2: Indenting col1 (depending on the layout) and making room for the second column
    I guess this doesn’t need much explanation.

    Code CSS:
    .col1{
    margin-left: 1em;
    }
     
    .col2 {
    margin-left:7em;
    }

    Step 3: pulling the second column in place and creating some space.
    We pull the second column in place so everything lines up perfectly.
    We do this by using negative margins.

    Code CSS:
    .top {
    margin-top:-11.5em; 
    margin-bottom: 1em;
    }

    The value for the negative top margin is calculated as follows:
    The number of items x line-height = height of col2.
    This should gives us a negative value of 10.5em. (7 x 1.5)

    But you'll notice that in our example it's 11.5em.
    The reason for that is because of the vertical space i wanted to create between the first li of each col and the other li's.
    Depending on your lay-out you may or not need it.

    So, because .top has a bottom margin of 1em, you need to increase the negative margin by the same amount: 10.5em becomes 11.5em.

    Setting the same vertical space between each li for col1 is also done with a bottom margin of 1em:

    Code CSS:
    .title {
    margin-bottom: 1em;
    }

    Checked in Opera, IE6,IE7,IE8, FF,Safari and Chrome.

    End result

    Have fun
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #84
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The advantage is that you don't run into float bugs or/and having to use hacks for IE6.
    Floats Rule!

    I can do the same layout using floats without any running into any bugs or needing any hacks for IE.

    By using a dl I can also do it without breaking the relationship between the column items.

    Tested in Opera, IE6-8, FF,Safari (I assume Chrome works too)

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Two Column DL</title>
    
    <style type="text/css">
    body {
        font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
        margin:0;
        padding:0;
        background: #2F0000;
        color: #F48222;
    }
    dl {
        overflow:hidden;/*contain child floats*/
        width:18em;
        margin:1em;
        padding:.5em;
        line-height:1.5em;
    }
    dt {
        float:left;
        clear:left;
        width:7em;
    }
    dd {
        float:left;
        width:10.5em;
        margin-left:.5em; 
    }
    .top {
        clear:none;
        margin-bottom:1em;
        font-weight:bold;
    }
    </style>
    
    </head>
    <body>
    
    <dl>
        <dt class="top">Access Key</dt>
        <dd class="top">Resulting Action</dd>  
        
        <dt>1</dt>
        <dd>Skip Navigation</dd>    
        
        <dt>2</dt>
        <dd>Home</dd>    
        
        <dt>3</dt>
        <dd>Laboratory</dd>    
        
        <dt>4</dt>
        <dd>Tutorials</dd>  
        
        <dt>5</dt>
        <dd>Templates</dd>    
        
        <dt>6</dt>
        <dd>Accessibility</dd>
    </dl>
    
    </body>
    </html>

  10. #85
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Seeing as this is a free-for-all now

    Use an ordered list.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
        margin:0;
        padding:0;
        background: #2F0000;
        color: #F48222;
    }
    ul.test {
        margin:10px;
        padding:0;
        list-style:none;
    }
    .test li.top {float:left;}
    .test li h3 {
        font-size:100&#37;;
        width:10em;
        float:left;
    }
    .test ol {
        list-style:decimal;
        margin:10px 0;
        padding:0 0 0 2em;
        clear:both;
    }
    .test span {padding-left:8em;}
    </style>
    </head>
    <body>
    <ul class="test">
        <li class="top"><h3>Access Key</h3></li>
        <li><h3>Resulting action</h3>
            <ol>
                <li><span>Skip Navigation</span></li>
                <li><span>Home</span></li>
                <li><span>Laboratory</span></li>
                <li><span>Tutorials</span></li>
                <li><span>Templates</span></li>
                <li><span>Accessibility</span></li>
            </ol>
        </li>
    </ul>
    </body>
    </html>
    Although I think that a table is actually the most semantic element this time around as there are definitely two columns with headings

    (Luki_be did you mean to post this in the tips section?)

  11. #86
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Seeing as this is a free-for-all now
    Well, he did say "Have Fun".
    Although I think that a table is actually the most semantic element this time around as there are definitely two columns with headings
    Nice use of the nested ol Paul. Yes, a table would probably be best suited here.

    Three-Column-Inline-Layout

    I don't think Luki likes floats.

  12. #87
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Rayzur: i don't have anything against floats
    But i was thinking it came in handy for those who are against it lol.
    And i know there are several different ways to do it lol

    @Paul: indeed it was meant to show up in the tips section. Dunno what happened.

    In short, the meaning was to 'prevent' using floats because many seem to have problems with it. Besides, i thought it was a nice way to show what one can achieve with just negative margins :-)

    Can anybody here move this to the tips section?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #88
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry this is replying to a 91 month old post but link 10 is broken

  14. #89
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks Willie0 - link fixed now.

    This thread really needs updating as it is quite old now.

  15. #90
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Florida, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron.martone View Post
    Ok this is a Tips and TRICKS thread, right?

    Here's a fun trick to play on other web developers, if you get the chance. Open up their CSS file and add

    b,strong { font-weight: normal; font-style: italic; }
    i,em { font-weight: bold; font-style: normal; }
    u { text-decoration: none; border-top: 1px solid blue; }

    Tons of fun.
    its not working with me.....what the fun in it?

  16. #91
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jannet1 View Post
    its not working with me.....what the fun in it?
    It makes bold appear italic, italic bold, and underlined text with a line over the top instead of below. Ha ... ha ... ahem.

  17. #92
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Radius Border

    .content{
    float:left;
    width:250px;
    border:1px solid #ccc;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-border-radius:5px;
    }
    Shadow
    .content{
    float:left;
    height:100px;
    background:#fff;
    border:1px solid #ddd;
    width:250px;
    heigh:250px;
    background:#fff;
    box-shadow:3px 3px 3px #999;
    -moz-box-shadow:3px 3px 3px #999;
    -webkit-box-shadow: 3px 3px 3px #999;
    }

  18. #93
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kenneth_Da View Post
    Radius Border
    box-shadow:3px 3px 3px #999;
    -moz-box-shadow:3px 3px 3px #999;
    -webkit-box-shadow: 3px 3px 3px #999;
    Shadow

    Note that the real property and not the vendor extension should be last in sequence to avoid conflicts.
    Code:
    -moz-box-shadow:3px 3px 3px #999;
    -webkit-box-shadow: 3px 3px 3px #999;
    box-shadow:3px 3px 3px #999

  19. #94
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Note that the real property and not the vendor extension should be last in sequence to avoid conflicts.
    Code:
    -moz-box-shadow:3px 3px 3px #999;
    -webkit-box-shadow: 3px 3px 3px #999;
    box-shadow:3px 3px 3px #999
    Oh, Thanks you

  20. #95
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

    26. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

    13. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.


    ​All not found.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #96
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

    26. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

    13. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.


    ​All not found.
    Thanks Ryan - links removed.

  22. #97
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Giving back to the CSS community

    Hey everybody,
    I've learned a lot from the CSS community on-line, and now I'm visiting forums letting people now about a tool I created to give something back.

    I used to use my own software to catalog my favourite CSS snippets I found across blogs and forums. Recently, I decided I'd upgrade it and open it up to the public as a web application. The site is called CSSPop.com and the premise is simple: find handy CSS snippets or submit your own.

    I've designed it in a way that everyone can benefit: seekers can find beautiful CSS to use in their work and submitters can promote themselves and their skills.

    My hope is that this will be a valuable extension for the CSS community, allowing more people to learn from example, showcase their work, and promote/advertise their skills.

    Oh and to the moderators, if this post violates any forum rules please let me know -- or do as you wish with it :P.

    Thanks All.

  23. #98
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is like a CSS version of snipplr.com?

  24. #99
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Jakarta Raya, Indonesia, Indonesia
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello, I'm new here and want to learn about css.
    I have a problem with the css but I do not know how to remove it, the fault lies in my blog entitled <snip>Link deleted</snip> and if viewed by right-clicking the source code will be visible irritation at his css.

    looks like this:
    </script>
    <style type="text/css">
    .wf-inactive h1.post-title, .wf-syncopate-n4-loading h1.post-title, .wf-syncopate-n4-inactive h1.post-title, .wf-inactive h4, .wf-syncopate-n4-loading h4, .wf-syncopate-n4-inactive h4, .wf-inactive h1.post-title a, .wf-syncopate-n4-loading h1.post-title a, .wf-syncopate-n4-inactive h1.post-title a {
    font-family: sans-serif;
    }
    </style>

    is there someone who can show where the location code is not working should I delete?
    Thanks for help.
    Last edited by molona; Jul 11, 2012 at 00:21. Reason: link deleted

  25. #100
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,269
    Mentioned
    251 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by belinotebookbeka View Post
    hello, I'm new here and want to learn about css.
    I have a problem with the css but I do not know how to remove it, the fault lies in my blog entitled <snip>Link deleted</snip> and if viewed by right-clicking the source code will be visible irritation at his css.

    looks like this:
    </script>
    <style type="text/css">
    .wf-inactive h1.post-title, .wf-syncopate-n4-loading h1.post-title, .wf-syncopate-n4-inactive h1.post-title, .wf-inactive h4, .wf-syncopate-n4-loading h4, .wf-syncopate-n4-inactive h4, .wf-inactive h1.post-title a, .wf-syncopate-n4-loading h1.post-title a, .wf-syncopate-n4-inactive h1.post-title a {
    font-family: sans-serif;
    }
    </style>

    is there someone who can show where the location code is not working should I delete?
    Thanks for help.
    I have removed your link because it didn't provide much help and your question could not be answered, anyway. You need to be a bit more specific, and tell us what exactly doesn't work so we can have a look at it. Then, I will open a new thread and I may allow you to post the link (no keywords, please )


Bookmarks

Posting Permissions

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