SitePoint Sponsor

User Tag List

Page 3 of 5 FirstFirst 12345 LastLast
Results 51 to 75 of 101
  1. #51
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Really? Wth? But if there's another element after .right that clears:both then that will clear everyone right?
    Not in IE if the next element is a float.

    e.g.
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    .left,.left2{
        float:left;
        width:200px;
        height:200px;
        background:red;
    }
    .left2{clear:both;}
    .right{
        float:right;
        width:200px;
        height:400px;
        background:green;
        clear:both;
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="left">Left</div>
    <div class="right">Right float won't clear in IE</div>
    <div class="left2">Left</div>
    </body>
    </html>

    If .left2 was not a float then it would clear as expected. IE just won't allow floats to clear each other when floated in opposite directions.

  2. #52
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I've even run into more clearing issues (though not important to my current design, so I'm still cool for now)! Still need to get these under my belt though for future reference.

    So, I've implemented your version of definition lists. It's very nice. I did run into a little strangeness when I had 2 dd's for one dt. I ended up doing this (which I think will only work when the total widths of the two dd's together does not exceed the available space for any single dd)
    (code changed for clarity)

    Code:
    <div>
      <h3>Thing 1</h3>
        <dl>
          <dt>Something:</dt>
           <dd>Yes it exists</dd>
        <dt>Something:</dt>
          <dd>Yes it exists</dd>
        <dt>Something:</dt>
          <dd>No</dd>
        <dt>Something:</dt>
          <dd>Yes it exists</dd>
        <dt>Something:</dt>
          <dd>Yes it exists</dd>
        <dt>Something:</dt>
          <dd>Yes it exists</dd>
        <dt>Something:</dt>
          <dd>Nope</dd>
        <dt>Something:</dt>
          <dd>Yes it exists</dd>
      </dl>
    </div>
    <div id="extra" class="clear">
      <h3>Extra costs (in )</h3>
      <dl>
        <dt>Something:</dt>
          <dd class="wider">Explanation</dd>
        <dt>Something:</dt>
          <dd>30 <dd>per week</dd></dd>
        <dt>Something:</dt>
          <dd>40 <dd>per day</dd></dd>
        <dt>Something:</dt>
          <dd>Not available<dd>-</dd></dd>
        <dt>Something:</dt>
          <dd>Not available <dd>-</dd></dd>
        <dt>Something:</dt>
          <dd>30 <dd>per day, per person</dd></dd>
        <dt>Toeristenbelasting:</dt>
          <dd>0 <dd>-</dd></dd>
        <dt>Extra bed:</dt>
          <dd>present <dd>per day</dd></dd>
        <dt>Deposit:</dt>
          <dd class="wider">200,00</dd>
      </dl>
    </div>
    Code:
    (divs are floated too to carry h3's and h4's)
    dl {
      width: 30.5em;
      float: left;
      font-size: 1em;
      overflow: hidden;
      background-color: #0f0;<-- for testing
    }
    	dl dt {
    	  font-weight: bold;
    	  float: left;
    	  width: 11.5em;
    	  padding: 0 0 .5em .2em;
    	  background-color: #f00;<--testing
     	  clear: both;
    	} 
    	 dl dd {
    	  width: 16em;
    	  float: left;
    	  padding: .2em;
    	  background-color: #ff0;<--testing
    	  border: 1px solid #000;<--testing
    	}
    (didn't want to stick this in the HTML for certain reasons)
    		* html dl dd {float: none;}
    		*+html dl dd {float: none;}
    
    	#extra dd {
    	  margin-right: 1em;
    	  background-color: #00f;<--testing
    	  width: 6em;
    	  white-space: nowrap; <--wanted to stop some wrapping
    	  float: left;
    	}
    	#extra dd.wider {
    	  width: 16em; <--first dd in this list doesn't have a partner, stops float wrapping
    	}
    I might have done it the long way, but it seems stable and works cross browser. I should have thought this was a possibility in the beginning. Because of the way the code is written, I've needed to add " - " for when the person filling out the form didn't choose anything (is a drop-down menu), because there now MUST be either a second nested dd OR the "wider" class to make sure it takes up enough room. I needed the float to apply to everyone, even IE.

    Also only works when there in fact are no borders or background colours. The nested dd pops out of it's container (what I want) except in IE6 where it wraps the container... the net result looks the same when you can't see the container.

    Still, I would think this would work for anyone else doing the same.

  3. #53
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The last example you posted is invalid because you can't do this:

    Code:
    <dd>30
        <dd>per week</dd>
    </dd>
    You can't nest a lone DD element inside a DD without its surrounding DL structure. You'll have to change that inner DD to a div or some other element and style it appropriately.

    You can nest things in a DD but you would need the whole structure.

    e.g.

    Code:
    <dl>
        <dt>term</dt>
        <dd>
            <dl>
                <dt>test</dt>
                <dd>def</dd>
            </dl>
        </dd>
    </dl>
    Not sure it would make semantic sense though

  4. #54
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ah, damn. But the story ends well: while at some point in my goofing around I needed to nest the dd's, my current CSS works with placing the two DD's back as siblings again : ) No HTML incest needed.
    <dd>30 </dd><dd>per week</dd>

    Seems still okay in the IEs.

  5. #55
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow great piece of informations. The first page is full of resources. Thanks webnauts.

  6. #56
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Reporting Broken Link: http://nemesis1.f2o.org/links

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  7. #57
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by alex
    Reporting Broken Link: http://nemesis1.f2o.org/links
    Thanks for reporting the broken link and if you can now tell me which post it's in I'll remove it

    BTW you could have just pressed the report post button instead for the actual post

  8. #58
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's in the original post starting this thread. I believe it was actually the first link, too. Right near the top of the first page. Sorry I reported wrong, I just noticed it asked to report broken links and didn't know better. Speaking of which, where do you find the report button?

    Edit: Found it.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  9. #59
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Speaking of which, where do you find the report button?
    Look to the left of a post where the posters name is. Look at the bottom of that section (under the avatar). At the very bottom are some icons. The red triangle with the exclamation mark in the middle is the report button and you can report a post from there. It will also ask you for a reason and you can say link broken etc.

    Read the guidelines for more information

  10. #60
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Look to the left of a post where the posters name is. Look at the bottom of that section (under the avatar). At the very bottom are some icons. The red triangle with the exclamation mark in the middle is the report button and you can report a post from there. It will also ask you for a reason and you can say link broken etc.

    Read the guidelines for more information
    Quote Originally Posted by Alex
    Edit: Found it.


    Thank you, Paul.

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  11. #61
    SitePoint Member thurrz's Avatar
    Join Date
    Aug 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These are very valuable resources for me
    I can use it to improved my portfolio

    thanks

  12. #62
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this thread is full of information. Specially good stuff from "Stomme poes" and "Paul O'B".

  13. #63
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sorry, I need to post this somewhere, it cost me waaaay too much time and I almost asked the forums what to do here.

    I have a page/site. While menu lists don't have bullets, I decided to make some in-content lists look nice, I'd add some circle bullets. It looked nice.

    Nothing in IE. Any IE.

    So! To the googles!

    The Googles only mentioned two things: Haslayout and floated lists. I had NEITHER problem.

    The code was originally this:
    (near the top with my basic reset, as I never ever ever want bullets on menus:)
    ul, li {
    list-style: none;
    }

    (I have since discovered that the li setting here which is done for IE is ONLY necessary when IE is in quirks mode which it never is in my case, so later this was changed to just the ul).
    Code:
    ul.capabilities {
      display: list-item;
      width: 15em;
      margin: 10px auto;
    }
    	ul.capabilities li {
    	  list-style: circle;
    	}
    Okay, nobody was floated, and I was explicitly setting a new display for the ul which should have been inherited by the li's. I tried adding
    width: 100% to the li's for haslayout. I tried moving display: list-item to the li. I tried float: none just in case this was somehow magically inherited from eaelier lists in IE. I tried adding padding which made all the Modern browers decide that all the list items had to share a single bullet-- in fact ANYTHING I said about the li's as far as colour, background colour, padding, set this nasty thing off.

    I did a search here since it would be extra super embarrassing to post the question right after it had been asked somewhere. Well, nobody was asking about setting non-background-image bullets in non-floated lists, however I did run across a thread where someone said something about margins cutting the bullets off. Hmmmm, I thought, my bullets are outside by default. I hate the little indentation done with "inside" but I'll try it.

    Worked. The auto-margins must be somehow cutting the bullets off? It shouldn't as this is a 15em-width list and the screen I'm looking at is frickin huge. But stuffing them inside the li's borders seemed to fix it (while adding padding to the left of the li did not).

    Current working code:
    ul {
    list-style: none;
    }
    (way up at the top for most lists)

    ...
    Code:
    ul.capabilities {
      width: 15em;
      margin: 10px auto;
    }
    	ul.capabilities li {
    	  display: list-item;
    	  list-style: circle inside;
             width: 100%;
    	}
    * html ul.capabilities li {vertical-align: top;}
    The width: 100% does stop the text indenting with "inside" in IE6 though it makes a problem with vertical aligning, so I kept it in there.
    Hope this saves someone some hair-pulling time.

  14. #64
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Stomme poes,

    Thanks for posting your findings

    IE has a lot of bugs with lists

    With your method above using "inside" will mean that in Firefox the list text will wrap underneath the bullets which is not usually what you want. You have catered for IE by "applying" haslayout to the list which stops it wrapping underneath but in other browsers the text will wrap under the bullet and stop the alignment.

    When using list that need to be centered I use another approach although it involves 1 line of extra html it is a 100&#37; more reliable and easier to work width and doesn't need any hacks. Simpy apply the widths and centering to a wrapper element and then apply a left padding or margin to the ul in the nromal way to make space for the disc.

    e.g.
    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>
    ul {
        list-style:none
    }
    div.test {
        width:15em;
        margin:10px auto;
    }
    .test ul {
        list-style: circle;
        margin:0 0 0 16px;
    }
    * html ul li {
        vertical-align: middle;/* aligns the bullet in ie even though it shouldn't*/
    }
    </style>
    </head>
    <body>
    <div class="test">
        <ul>
            <li>testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list </li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
    </body>
    </html>
    This leaves the list perfectly aligned and wraps very nicely and works cross browser.

  15. #65
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi Paul,

    With your method above using "inside" will mean that in Firefox the list text will wrap underneath the bullets which is not usually what you want. You have catered for IE by "applying" haslayout to the list which stops it wrapping underneath but in other browsers the text will wrap under the bullet and stop the alignment.
    Yesh, I saw this and at one point I did consider two things, an extra container (since it seemed the width and automargins of the list itself was hiding the bullets) or even the old-fashioned centering method (pos-rel left 50%, margin-left: -halfwidth).

    /* aligns the bullet in ie even though it shouldn't*/
    Yeah I thought it was pretty weird that, with my short width of 15em, I has some wrapping of the li's and IE6 put the bullets at the bottom (wth?) of the li. IE7 didn't so I figured, vertical-align.

    *Edit, I notice you are not explicitly stating display: list-item with the li's. Isn't there a browser somewhere who cannot accept list-style on a li if somewhere earlier you've said All Ul's, list-style: none?

  16. #66
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Edit, I notice you are not explicitly stating display: list-item with the li's. Isn't there a browser somewhere who cannot accept list-style on a li if somewhere earlier you've said All Ul's, list-style: none?
    You haven't changed the display property of the list so why should you need to re-instate it. list-style and display are separate things.

    However you are half right and IE6 will lose the numbering on lists if the element haslayout and adding display:list-item re-instates the numbering.

    <!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>
    ul {
    list-style:decimal
    }
    li {
    width:100&#37;;
    display:list-item;/* without this IE6 displays all numbers as number 1.*/
    }
    </style>
    </head>
    <body>
    <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    </ul>
    </body>
    </html>

    (However there are many other bugs in ie5.x with lists also which may be where you saw the fix before.)

  17. #67
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ah ok. It might have been also on lists where the li was
    display: block (where earlier li's were something else)
    display: list-item;

    because for instance when first menu is floated li's and later a non-floated-li menu comes along and cannot just have float: none.

    I've only recently started caring because I never ever wanted bullets before, but the circle looks kinda nice in boring content lists, and keeps it cleaner-looking and easier to read when each item can wrap multi-line.
    ----
    I used the wrapping div and it looks pretty good, Paul. I didn't try the old-fashioned centering technique though... I'm curious but laziness won out : )

    *I had another post but moved it to Accessibility*

  18. #68
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have this quick tip maybe someone doesnt knows it

    --------------

    when you add a style for INPUT
    it automatically add the same style for the text and button,

    lets say like this:
    input {
    background-color: #000;
    width: 150px;
    }

    but what if you want to add different styles for a button and for the text input you can do this:

    input[type="text"] {
    background-color: #FFF;
    width: 150px;
    }

    input[type="submit"] {
    background-color: #999;
    width: 100px;
    }

    this wont work with IE
    but if you add the ie7 fix http://code.google.com/p/ie7-js/
    - Inelastica.com | Cultura Grafica (spanish design blog)

  19. #69
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Um, you could also add classes on everyone (not nice, but works in IE6 without JS).

    Usually my submits have a class anyway, so I've got

    input.submit {
    stuff;
    }

    works fine. For funky styled forms, I often let those with the better browsers get the cool forms, while IE6 users just get a regular form. No loss, both are functional. I don't think it's worth the extra load of JS for forms but others might have a large-enough IE5/6 audience that it's worth it for them to add the JS (or classes).

  20. #70
    SitePoint Zealot
    Join Date
    Jan 2009
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for these links - exactly what I have been looking for. I am completely self trained when it comes to website creation, and CSS knowledge is somethig I really strive to learn. I am sick of using tables.

  21. #71
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This thread is great thanks!

  22. #72
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks fo the info ... really helpful !!!!

  23. #73
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The #17 link gives a malware warning:

    17. Horizontal Menu using CSS


    not sure if it's real or not... just an fyi.
    Last edited by Paul O'B; Mar 2, 2009 at 17:13.

  24. #74
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yea, after having to remove about 3/4ths of the styles from that error page so I can READ it gave me a page not found .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #75
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by spu View Post
    The #17 link gives a malware warning:

    17. Horizontal Menu using CSS


    not sure if it's real or not... just an fyi.
    Link removed anyway - thanks


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
  •