DIV, Span, and Display: Inline

Question

4.00/5 (2 votes)

See more:

I've created a style called "Thumb", which creates a 100x120px box with a curved border for the purpose of providing a thumbnail and a small caption (see HTML code at the bottom).

If I use the DIV tag, it draws them as I would expect, but will only put 1 on a line.

Using Display: Inline on the DIV tag seems to stop the image from appearing

If I use Span, it looks okay on IE, but on Firefox 4 (RC1) the border does not conform to the size I have provided. Opera is the same as Firefox in not retaining size

I'm trying to avoid using tables because it is dynamic, and the number of boxes I want to draw will vary.

Does anybody know how I keep my boxes with my format, but inline (wrapping at the edges) and works in all browsers?

I'm not much of a web developer (mainly for frustrations like this), so if anybody can help, I would appreciate it.

Thanks

CSS

.Thumb
{
    border-top: #cccc99 1px solid;
    border-right: #cccc99 1px solid;
    border-left: #cccc99 1px solid;
    border-bottom: #cccc99 1px solid;
    border-radius: 4px;
    width: 100px;
    height: 120px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

XML

<div class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</div>
<div class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</div>
<div class="Thumb" style="display: inline;><img src="blar.png" width="100px" height="100px"><br>Test</div>
<div class="Thumb" style="display: inline;><img src="blar.png" width="100px" height="100px"><br>Test</div>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</span>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</span>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"> Test</span>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"> Test</span

>

Posted 13-Mar-11 1:47am

MarqW

Updated 13-Mar-11 1:48am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2011-03-13T07:26:00

Welcome to the world of Browser incompatibilities!
You cannot win in all cases. I would try to keep styles as simple as possible; which makes you content rendering much more stable. Remember, you used looks for a Web site for its content, not for decoration. In my opinion, best designer never keeps in mind the idea of impressing anyone with the design but would try to keep design "invisible", focusing on helping readability and functionality.

Additionally, you can play with the styles display:block; display:inline-block;, etc. (See all display styles: http://www.w3schools.com/css/pr_class_display.asp[^].)

It looks like the Mozilla problem is only with the inline display; but not inline-block, which works for me. Instead of attempting one universal .Thumb style, try to create separate styles such as p.Thumb, div.Thumb or span.Thumb.

—SA