Troubles with spacing using CSS inline-block

9 replies
  • WEB DESIGN
  • |
I have noticed that while building my site in responsive and using the div/css inline-block in css that there is space at the bottom of the div? Has anyone else noticed or had this issue and have a solution to this problem?
#css #inlineblock #spacing #troubles
  • Profile picture of the author harkon
    Originally Posted by AprilMSU View Post

    I have noticed that while building my site in responsive and using the div/css inline-block in css that there is space at the bottom of the div? Has anyone else noticed or had this issue and have a solution to this problem?
    I haven't experienced such a problem. Check your bottom margin and padding. Try to use negative margin, for example.
    I usually float elements instead of displaying them in inline-block.
    {{ DiscussionBoard.errors[9205496].message }}
  • Profile picture of the author RobinInTexas
    The first thing I would look at is did you include a reset stylesheet to remove any unwanted spacing,

    If that's not the case, try the negative margins as mentioned previously.
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[9205708].message }}
    • Profile picture of the author AprilMSU
      How interesting you just posted that because I was finding that the paragraph tag was causing the mystery space in my subfooter. As for why it was occuring in my div wrapper trying to hold image and content one left/one right is beyond me. Has space at the bottom of the div. Adding negative margins did not work. I ended up removing the wrapper div and just floating the image/content individually.

      The other thing I am a little confused about is that I am using the Dreamweaver template system. This is only temporary until we get the site moved to a content management system but for now it is our best option. When I create a new web using the nested template, it appears as if the css is resetting itself. In other words, the master css some of the settings are ignored like headers or paragraph and such.

      I am very new to DW templates so I am not familiar with how and why it behaves like it does. I am finding that things will behave one way in the master template but another once I create a new web page with the master. (Shrugs)

      Then again, maybe I am insane and not seeing what I should. As for reset, do you think I need to add reset to every new web/css created? Not sure about using it in the master template or would you suggest that?

      Originally Posted by RobinInTexas View Post

      The first thing I would look at is did you include a reset stylesheet to remove any unwanted spacing,

      If that's not the case, try the negative margins as mentioned previously.
      {{ DiscussionBoard.errors[9206113].message }}
  • Profile picture of the author RobinInTexas
    I haven't looked at DW, there are several ways to clear all browser defaults/ i.e. reset. I've seen it done in just a few lines, and also with a reset.css sheet included before any other css. DW may do some of that in their templates.

    I think it's just a good idea, that way you don't have any styles applied unless you explicitly set them.
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[9206134].message }}
    • Profile picture of the author AprilMSU
      I had to think this over and we (my partner and I) voted against the reset in the master css. Reason? We have 10,000 web pages using the master template and css and do not want to be reseting the headers, paragraphs and other styles over and over. I have decreased the header margin bottom to I think 1 em (can't remember) and we need it to be consistent. We did however, agree that it could come in handy when creating new pages within subdomain/directories we may need to reset the styles then remove what needs to be global such as headers and what not. Not sure how practical that is but it beats having to reset the style of certain things over and over.

      Originally Posted by RobinInTexas View Post

      I haven't looked at DW, there are several ways to clear all browser defaults/ i.e. reset. I've seen it done in just a few lines, and also with a reset.css sheet included before any other css. DW may do some of that in their templates.

      I think it's just a good idea, that way you don't have any styles applied unless you explicitly set them.
      {{ DiscussionBoard.errors[9206364].message }}
  • Profile picture of the author thatjc
    I try to avoid ever using DW templates. At least for me they always seem to cause issues. Of course sometimes you really need them.

    In building divs, be careful about any "size" parameters - they may be too large for mobile devices.

    I try to avoid divs and find that I rarely need them when I use inline CSS for the Paragraph tag instead. Depends on what you're trying to do of course.

    These days, I'm usually dealing with WordPress, not Adobe Dreamweaver.

    Anyway, you often have to set the div to:
    Code:
    "margin-bottom: 0;" or "padding-bottom: 0:"
    Then set the next element to a zero or negative top margin or top padding.
    Signature
    "You can count the seeds in an apple, but you can't count the apples in a seed."
    Online Visual Communication expert
    Visual Marketing Info signup: Visual Marketing Online
    {{ DiscussionBoard.errors[9206166].message }}
    • Profile picture of the author AprilMSU
      I have built tons of sites on fixed sizes and since getting hired by the school I had to quickly learn responsive design. Let's just say that has been a huge challenge trying to work with divs and sizing since I started last summer.

      I find it more difficult to work with Dreamweaver template because it has to be set in the root of the site. Because the site is so big, we have them broken down to behave as subdomains and set them up individually through dreamweaver as individual sites, including the home/root pages. I tried creating the template in the home folder but unfortunately DW did not like that and kept the local path which it could not find the home web folder on the server. I then had to set up the root on DW to create the template and css for it. What a mess that is, it works, not the most stable. The biggest downfall is that when you change anything on the master or nested template, it takes 20 minutes for DW to cache all files! I wish it would allow me to select which files use that template...

      So giving that I am still trying to sort out random bugs here and there and the master is set on the root which holds over 10,000 + pages has been giving me a massive headache. I find most of my sizing/space issues come with the inline-block... There must be a better way, so research will be needed how to set up web contents without nesting divs inside divs... *sighs* It's only Tuesday and its been a long week already.

      Originally Posted by thatjc View Post

      I try to avoid ever using DW templates. At least for me they always seem to cause issues. Of course sometimes you really need them.

      In building divs, be careful about any "size" parameters - they may be too large for mobile devices.

      I try to avoid divs and find that I rarely need them when I use inline CSS for the Paragraph tag instead. Depends on what you're trying to do of course.

      These days, I'm usually dealing with WordPress, not Adobe Dreamweaver.

      Anyway, you often have to set the div to:
      Code:
      "margin-bottom: 0;" or "padding-bottom: 0:"
      Then set the next element to a zero or negative top margin or top padding.
      {{ DiscussionBoard.errors[9206357].message }}
  • Profile picture of the author harkon
    If you provide some code, maybe we can help. Otherwise we will have to wait for a clairvoyant.
    {{ DiscussionBoard.errors[9206168].message }}
  • Profile picture of the author samolabams
    learn to use plugins like firebug or web inspect to further know whats going on with your codes from your browser
    {{ DiscussionBoard.errors[9210592].message }}

Trending Topics