Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 2 FirstFirst 1 2
Results 11 to 18 of 18
  1. #11
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Quote Originally Posted by Webzarus, post: 244837
    The resason for the GAPS, every browser has some default padding and margin settings built in to use in case you don't define them... And they are all different.

    What I try to encourage everyone that is using CSS to do is:

    For every div define the following:

    Height
    Width
    Margin ( even if 0 )
    Padding ( even if 0 )

    Those 4 things will use the browsers default setting ( which are different for each browser ), unless you specifically define them. Hence defining a margin of 0 will save a lot of headaches in the long run.
    Assuming his CSS code is as posted, he actually has the oversimplified CSS reset rule (see the * rule). That alone should mean the issue should be happening.

    In this particular case, since you've got 7 menu elements and they all are the same width, what you can get away with is putting your nav inside of a container div that is 986 pixels wide. Your nav would then be 854 pixels wide (since 122 x 7 = 854), and here's where the fun comes in:

    #nav li {all your other css rules here, then:
    float: left;
    }
    Then...
    #nav li a {display: block;} (not display: inline-block, a CSS property which is flaky at best and doesn't even work at all in IE7.)

    Now...if you're going to do this, make sure to clear your float (I usually create an li element with an id of navclear or something to that effect and assign a CSS clearing rule to it along with a float: none.

    If this doesn't get you to where you want to go, and there's enough where either you should get to where you want to go or end up with at least a different problem, then you've got more going on with your code and you're going to have to disclose more whether you're allowed to or not. What I would suggest you do is to upload a stripped-down version of your page to a free host and then link to it. Make sure there isn't anything identifiable, like say logos or text describing what you do...if you have to, use "link 1, link 2, link 3, link 4, etc."
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  2.  

  3. #12
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,732
    Member #
    5580
    Liked
    718 times
    ead ...

    You really need to have your site uploaded so we can see it.

    Because it will most likely render differently on different browsers,
    we have no way to answer your question without a lot of confusion
    and wasted time. We don't have time to keep guessing what you're doing.

    Subscribe to a cheap webhost for like $50 per year. Use that as a
    place to test your website, pages, files, scripts, etc.

    Otherwise, you'll have to find someone that can sit with you and see it live.
    We love to help people, but (speaking for myself) I don't have time to copy
    your scripting and test it on my browser. Put it online so we can see it.


  4. #13
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    I'm not certain what is oversimplified in the CSS code, so please let me know. Previous to this incident, #nav li had the float: left property, but because the nav items could not be aligned vertically, I switched to using the display: inline and display:inline-block properties...

  5. #14
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    I have just got permission to disclose the website for a limited time. To access it, please click here and type 'user' in the top field and 'qwerty' in the bottom. Any advice would be appreciated.

  6. #15
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The login/password combination doesn't work. Hopefully by "a limited time" you can keep it up for 24 hours.

    Your * rule is the oversimplified rule. It's not your fault...it's the magic reset rule that cures all ills, or at least is marketed as such. It's just a bad rule to get into the habit of using because, among other things, it screws up ordered lists.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #16
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    Quote Originally Posted by TheGAME1264, post: 244843
    The login/password combination doesn't work. Hopefully by "a limited time" you can keep it up for 24 hours.

    Your * rule is the oversimplified rule. It's not your fault...it's the magic reset rule that cures all ills, or at least is marketed as such. It's just a bad rule to get into the habit of using because, among other things, it screws up ordered lists.
    Sorry, the site can be accessed now with the same login and I've applied no time limit to the folder for the time-being.

    I have rid the site of the oversimplified rule now.

  8. #17
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    Myth busted. Stating the float: left property and rescaling the wrapper width based on the width of a navigation item multiplied by the number of nav items to fit solved the problem. It still remains unclear why using the display: inline-block generated the incomprehensible white spaces around each nav item.

  9. #18
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Password doesn't work for me...but no worries.

    Like I said, inline-block was always a bit of a flaky property. I generally avoid using it when there are alternatives that do work. It would be nice if it did what it was supposed to, but that's the problem with a lot of CSS properties.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 2 of 2 FirstFirst 1 2

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com