div vs. span

[dakota81]

I know that div has an implied carriage return before & after, while span does not, but what else is different? Or is it simply the web browsers not properly functioning? For example, I want to put a border around a table, so I figured just to this:

<span style=&quot;border:1px solid black;padding:5px;&quot;></span>

around the table. However, the results are unpredictable in latest version of IE, there is no padding, and depending on the border configurations, different sides are visible and others do not appear.

Swapping in DIV instead of SPAN makes this work correctly.

So is this just IE not conforming to css standards? I'll work around this, but just am curious.

 

[clarkin]

Try
Difference between SPAN and DIV tags? (thread215-324535)
DIV and SPAN (thread215-452280)
What does DIV do ?? (thread215-574306)

and the offical documentation:

http://www.w3.org/TR/REC-html40/struct/global.html#edef-SPAN

And perhaps

http://www.brainjar.com/css/positioning/

Basically div is block-level while span is inline.

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[dakota81]

I know what the textbook definitions are, I searched google; wouldn't have asked if I didn't find (or understand) the answer in the docs. I see how <span> works now after doing some more tests. Mozilla completely screws up borders defined by <span>, though, so no one try & figure that out...

When using <span> for borders, the page is completely layed out in the broswer first, as if the <span> tags didn't exist, then the borders are placed into the page without moving anything around. And if that border extends beyond the height or width of the parent element, the border is simply not shown on that edge.

Again, Mozilla completely screws this up & is incomprehensable as to its functionality.

So maybe that's further into the definition of a block-level & inline element; most website docs state the difference being carriage returns before & after & go no further.

 

[ChrisHunt]

Wrapping an inline <span> element around a block <table> element doesn't make sense, and should be rejected as invalid HTML. How browsers choose to treat this is likely to be unpredictable.

<div> and <span> are empty elements, intended to do nothing more than provide something to apply CSS to where no other element is available. To apply a border to a table, you don't need to use a <div>, you can apply the style to the table directly:
[tt]
<table style=&quot;border:1px solid black;padding:5px;&quot;>
[/tt]
A <div> would only make sense if you wanted to put a single border around a succession of tables.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk