Web Analytics Made Easy -
StatCounter dern you lists! DERN YOU! - CodingForum

Announcement

Collapse
No announcement yet.

dern you lists! DERN YOU!

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • dern you lists! DERN YOU!

    http://www.esultants.com/c/camden/

    I've gotten a lot mroe comfortable with CSS-P in a short amount of time. Something which makes me happy and confident.

    However, you're never all the way there, on the web, of course, so I've still got some weird issues I can't reconcile.

    Mainly, the unruly bahavior of lists. This is something that I initially thought was the fault of the default stylesheets for particular browsers overriding my rules, despite my best efforts. But it seems to happen on all browsers, so I'm not sure what I need to do. Here is an example:

    http://www.esultants.com/c/camden/members.cfm

    This page has extra padding and/or margins that I can't seem to account for. Here is the markup(with only on LI for space in the post here) and style rules for that list:

    Code:
    <ul id="members">
      <li>
        <h2>President</h2>
        <img src="images/members_dummy_avatar.gif" alt="No picture available." class="member_avatar" />
        <p><strong>Thomas Bain</strong><br />
        Minneapolis, MN<br />
        612.521.1186<br />
        <a href="javascript:;">Send me email!</a></p>
      </li>
    </ul>
    Code:
    #members ul {
    	margin: 10px 0px;
    	padding: 0px;
    	list-style: none inside;
    	background: #FFF;
    }
    
    #members li {
    	padding: 0px;
    	margin: 10px 0px;
    	font-size: .8em;
    	list-style: inherit;
    }
    
    .member_avatar {
    	float: left;
    	margin: 0px 5px 5px 0px;
    	border: solid 1px #666;
    }
    Last edited by coder_seth; Feb 9, 2004, 02:32 PM.

  • #2
    Your subject title is completely inappropriate!
    The shouting is bad enough, but your use of profanity...

    Next time, please think about our younger viewers.
    Hopefully a MOD will shortly come by and fix your foopah....

    .....Willy

    Comment


    • #3
      Oh please..

      You've clearly forgotten how to perceive correctly! Your filters are in need of calibration! You've missed the point in favor of focusing on a completely irrelevant and inconsequential detail!

      I am truly sorry that simple synonyms, simple words of the language, can arouse such an infantile reaction in you. Haha, and "think of the children," he says..

      I will pray for you.

      That aside, are there any reasonable people that can contribute to this?

      P.S. The term is "faux pas."

      Comment


      • #4
        While you pray for me, I will pity you.

        .....Willy

        Comment


        • #5
          Since this thread gone south already .....
          My contribution would be "Bad dancer blames his balls for getting in his way"
          If your title read "I am having trouble with styling lists", people may be more inclined to help you....
          Vladdy | KL
          "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

          Comment


          • #6
            I apologize. I gave you guys the benefit of the doubt, and assumed a certain amount of reason on your parts. My mistake.

            Now that these gentlemen have adequately illustrated their relevance to this community, I will ask again.. are there any reasonable folks that can give some productive feedback?
            Last edited by coder_seth; Feb 9, 2004, 02:34 PM.

            Comment


            • #7
              well... I thought it was the funniest post heading I've seen in some time. Come on, guys, have a sense of humor...

              Anyway. I'm pretty sure the problem is coming from the "float:left;" you're using for the <img> in the list. It takes the element out of the "flow," so to speak, and that's why the next <li> starts so far to the right. I ran into the same problem on my website on this page and used this to fix it:
              Code:
              #whatever li   {
                   clear:both;
                   }
              Hope this helps...

              -Rich
              drums | web

              Comment


              • #8
                Thanks, Rich. I actually did that exact same thing for another list where I was having similar issues and it solved my issue there.

                Here however, that doesn't seem to help. There is still what appears to be an extra default margin or padding on the entirely list itself.

                Comment


                • #9
                  If you're not sure where extra space is coming in, add a simple border to the various elements so you can see which element is bringing in the extra space. Then you'll be able to focus on the right element.
                  Check out the Forum Search. It's the short path to getting great results from this forum.

                  Comment


                  • #10
                    Yup, a technique I am familiar with. And actually, us enlightened Firebird users have the added benefits of the INVALUABLE Web Developer Toolbar extension, which can be found here:

                    http://texturizer.net/firebird/extensions/

                    At least, it should be, but attempts to bring up the page just now returned "Not Found". Hopefully it's just a temporary server issue.

                    At any rate, here is a screen capture of my browser window after selecting "Outline Block Level Elements".

                    http://www.esultants.com/c/camden/unruly_list.jpg

                    As you can see, my UL box appears to fill its container as it should. And the LI content fills the LI box as well. But there remains either some default padding on the UL or margins on the LI that I can't seem to get around for some weird reason.

                    Comment


                    • #11
                      Looks like a case of bad specs: You have a rule #members ul { } which means any ul inside whatever tag has the id of members. You should have #members { } without the ul since you want that tag to apply to the tag with the id of members and not some additional tag nested inside it.
                      Last edited by Roy Sinclair; Feb 9, 2004, 04:15 PM.
                      Check out the Forum Search. It's the short path to getting great results from this forum.

                      Comment


                      • #12
                        If you think that this:
                        Code:
                        #members ul {
                        	margin: 10px 0px;
                        	padding: 0px;
                        	list-style: none inside;
                        }
                        styles this:
                        Code:
                        <ul id="members">
                        you are wrong

                        Sometimes it helps to add a line:
                        background: #f00;
                        just to see if you got your selectors right...

                        EDIT: Roy posted the reasons why....
                        Last edited by Vladdy; Feb 9, 2004, 04:19 PM.
                        Vladdy | KL
                        "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

                        Comment


                        • #13
                          Oh yeah:

                          Good for you, you're coding valid pages.

                          Shame on you, you can express frustration without resorting to even mildly off color language. Yes, most people don't think about using such langauge these days but what's the use of having language that can be shocking if everyday usage removes all of it's shock value? We also cater to an international audience which may not even be aware of certain colorful expressions so your title might read as: "object to hold water back" you lists! "OBJECT TO HOLD WATER BACK" YOU!
                          Check out the Forum Search. It's the short path to getting great results from this forum.

                          Comment


                          • #14
                            ah yes! ain't this always the way it goes.. small little oversights. especially persnickity when you're copying and modifying rules from other sites. my lists were in a div with an ID before.

                            gah! thanks for helping me find the retardedly simple solution to this "problem".

                            as for the language.. GET OVER IT ALREADY! geezus..

                            a sincere THANKS to all who HELPED, however.

                            Comment


                            • #15
                              that last comment about context is just laughable..

                              for one, because if anybody is going to be reading a site in English, and they don't know English.. well, that's not my problem, regardless of the vocabulary i employ.

                              but mostly it's funny because you're example is useless since "****" and "***" are two completely different words. homonyms, yes, but you've apparently forgotten that this is the web, where the homonym is meaningless as far as rendered text goes...
                              Last edited by sage45; Feb 9, 2004, 10:09 PM.

                              Comment

                              Working...
                              X