inline-block vs. float

[djpic]

I am trying to build a menu layout using a sprite with anchor tags. The problem I coming up with is should I use display:inline-block or display:block then use a floats?

I know with inline-block there are issues with the margins. If there is a ‘white space’ between the two items, it css will add a 4px space. I can solve this problem using margin-right: -4px. I have noticed this works great in Safari and IE 8 but in firefox, the alignment is thrown off.

Should I continue to try and tweak it or just switch to using blocks and floats?

Thanks.

[chrisburton]

display: inline;

[joshuanhibbert]

If you are using sprites you will need to declare a width and height. An inline element won’t accept these values, I would recommend using display: block; and floating each anchor tag.

[chrisburton]

@joshuanhibbert – http://jsfiddle.net/E3QHN/

[wolfcry911]

what are trying to show there? Joshua is right, an inline element will not take a width or height. You’ve set it to float which overrides any display value (inline, block, or inline-block (and others)). There is no need to set to block and then float. There was a need in IE6 to set the display to inline with floats only to kill the double margin bug, but if you know about the bug there are other ways to eliminate it anyway.

@djpic, without seeing what you’re trying to accomplish, I’d float the li (no need for display) and set the anchor to display: block

[Johann]

I’d rather use inline-block and get rid of that space, personally, as inline-block is like cheap floating without having to clear anything. but I guess the result is the same ultimately.

[djpic]

@wolfcry911: First I would like to address a question for you because you mentioned it. Why use a list for the menu? Everywhere I look I see this. Normally, I just use a div and anchor. What advantages are there to using a list for a menu? I take one is because you don’t have set the display?

@ChristopherBurton: I have tried inline on a menu awhile ago and of course it doesn’t work as you can’t specify a height or width.

BUT I did play with the jsfiddle though and it did adjust the size of the li when I made the width and height 150px each? Not sure about that.

@Johann: I am the same I think. For some reason I just think with inline-block, this is what it was designed to do and the float way is a hack (minus having to adjust the margins on the inline-block). But all I want is a way that works on the majority of browsers.

@joshuanhibbert as seen this site before when it wasn’t using any images. Now I have placed the images in.

View current HTML & CSS

Also, if there are any other suggestions about the layout, I am open to them.

Thanks.

[wolfcry911]

There’s no need to use a list – it’s just so commonplace that I expected its use. In fact, in another thread I mention that years ago (I’m dating myself) that it was rarely used (and even frowned upon by some). I do use the list myself – it gives plenty of ‘hooks’ for styling and scripting and some will argue it’s more semantic. I personally don’t think its any more or less semantic to use a list.

Christopher’s jsfiddle works because of the float – the display: inline is ignored. Display block would be ignored as well.

I’m not sure why you think floats are hacks – they’re not. I would use float here and not think twice about it. You can use inline-block, but the correcting for the space seems more of hack to me.

Inline-block works and definitely has its place, but like all things, know its properties and when and where to use it. One thing to know about is the fact that IE 5 (dead),6, and 7 only accept inline-block on default inline elements (which would be fine here given anchors are inline).

It appears you’re just starting out and are learning through testing, which is great. Having and adjusting a live page is the best way to learn in my opinion. A few things of note:

• Practice with sprites is great – but if this sprite is final, is it really necessary? Can’t those be displayed and styled as ordinary text with css?
• Content should be first, then style, then behavior. Semantically mark-up the content.
  • Your nav anchors should really contain the text shown in the images – even if you do ultimately use the image, you can just ‘push’ the text off screen. This will enable screen-readers and web-crawlers to read the page.
  • Divs and spans have no semantic value. They’re important for structure but don’t rely on them to contain content directly (your main content should be in p element within the div).
  • Empty divs and spans are generally frowned upon. There will be times when they’re needed, but try your best not to use them (empty span for spacer is unnecessary).
  • Content in the footer image should be in the html. At the very least add it with an alt attribute to the image.
• Images for design purposes only should really be put in the css as backgrounds, while those that are part of content should be in the html.
• In your css, try to keep things simpler. Using a descendant id under another id is pretty ‘heavy’ for the interpreter (your nav ids). Usually a single id is enough – there will definitely be exceptions to this rule.
• Try to use shorthand wherever possible (background, margin, padding, etc.)

[chrisburton]

Yeah, what @wolfcry911 said. (props for writing all that)

[wolfcry911]

Very quickly, this is how I might mark-up that page:

Dashboard

My Blogs

My Blog List

My Account

Sign Out







This is a test of the content to be added here!








Copyright 2011 | Dale M. Picou, Jr. | The DjPic Network

[chrisburton]

Semantically, I would disagree with that.

[wolfcry911]

For djpic’s sake, why don’t you tell us why?

I personally would use the new html5 elements (I may be mistaken, but I thought djpic said in another thread he didn’t want to use the new elements yet). And I’d have an h1 above the content p, but assuming this is the front page, would still keep the h1 in the header for the site name. Again, this was a quick adaptation of the existing page…

edit// just checked and now I don’t believe it was djpic who didn’t want to use the new elements…

[chrisburton]

@wolfcry911 – “I personally would use the new html5 elements“
Exactly. We should all be using them.

@djpic – Why would you not use HTML5 elements?

[djpic]

@wolfcry911 – that is a lot, thanks! You just answered and confirmed so many things that I have been wondering. But of course opened the door for more questions like most answers do. I have been designing for awhile (10+ years) just recently I have had a chance to revisit it all and break my old style habits of table based layouts. CSS was just getting started when I was playing with it but at the time, wasn’t supported as well so just used it sparingly. Been focusing a lot on other items (networking, work, school, etc.) but now have an opportunity to get back in the game sort of speak.

Actually, the person that showed me inline-block didn’t like/understand float. I felt inline-block was tacky at first as I was using float before. It must just be the definition of inline-block makes it seem like it should be used. I will make the switch back to float (plus easier to use for me). I do have a question though about the float. So are you saying if I use float, then whatever is in the display is pointless? When you define float, does it auto-define it as a block?

In reference to using lists for menus, I think I will stick with my current set-up for now. It works and don’t really see an advantage to using lists.

The sprites are there mainly because of the font and the dashed lines between each menu item. I know about font-face but of course it doesn’t work in a lot of browsers and I wanted to stay as consistent as possible. My first build was actually ALL CSS before adding the images & sprites. I have reposted it here: Click Here for Version 1

Amazingly, I did think of putting the actual text in the anchor tags but don’t know how to ‘push’ / ‘hide’ the text.

As far as the text in the content plane, that was there just as a quick placeholder as I was adjusting the margins therefore wasn’t really formatted yet.

Empty span tags were there for of course to place the spacer (as I used before in table layouts). But when I read what you wrote, I came to a realization that I could do the same thing I did with the content tab. Just export it as a 1px horizontal image and place it as a background. I am trying to adjust my mind set.

With the footer, again used because I needed maintain the font type.

I can see where the layout / design items makes sense to be placed as backgrounds and I like the idea. I could put the footer image element as a background along with the header. Then just export the logo as a standard image which would probably be best. The problem with the footer is I was going to make an image map so when I user clicks the copyright information, it would take them to my site.

It is good to know about the descendant id’s. I have wondered about that. I always want to know which way is more efficient (as you can tell from my previous post: Menus in CSS). I am all about optimizing for CPU and memory on both the client machine and server. Many times I have been told I shouldn’t worry about things like that as the project / site won’t be getting enough hits to matter. My response always is, “but what if it does?” I think it is best to get into the habit of optimizing the application now, and when a major project shows it self, it will just be second nature. I do believe more and more programmers are getting into the mind set of, “our clients have 4GB RAM and quad CPUs, who cares how much memory / CPU our application uses? They won’t notice.” Just because the power is there, doesn’t mean you should write crappy code.

What do you mean, shorthand? Are you talking about the naming convention or can a css file actually contain shorthand elements?

@ChristopherBurton – I am open to using HTML5 elements as long as they ‘fall back.’ I am curious what HTML5 elements are we talking about here? I have looked at the HTML5 form elements, but nothing else. I will be doing a google search on these soon now that you mentioned them.

@wolfcry911 – I will be working on making some of the modifications you have suggested. I will re-post here when the changes have been made.

[djpic]

Ok, I have now updated the layout with the suggestions (See Updates). I made the background for the menu items (instead of using the spans). Put the header as the background and extracted the logo to make it an image siting on top of the header background. Made the footer a background. I did combine these three items into one sprite. Also changed the menu to use block and float.

New Issues:
As you can see, the menu items are not aligned properly. For some reason they are not lined up with the menu div tag. Plus was trying to align them center, but that didn’t work either (I am assuming because of the floats). Plus the space that is now between the menu and content blocks. On a plus side, it looks the same on firefox, safari, and IE.

With the logo (and possibly menu items) should I use exact positioning? Right now I am using padding on the header. And with exact positioning, I could drop the menu sprite and align the items in relation to the background (which has the horizontal guides). But I still won’t be able to have the font-face.

Thanks for the input!

[Author]

Posts