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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile I AM having trouble styling lists - NOW CHILD (or child-like mind) FRIENDLY!

    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; 02-09-2004 at 07:32 PM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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."

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    While you pray for me, I will pity you.

    .....Willy

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"

  • #6
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 02-09-2004 at 07:34 PM.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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

  • #8
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 02-09-2004 at 09:15 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 02-09-2004 at 09: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"

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 02-10-2004 at 03:09 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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