1 reply [Last post]
paruby
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2008-09-14
Posts: 8
Points: 4

I am trying to get the following code to work in Firefox 3:

<html>
<head>
<style type="text/css">
#span100
{
width: 200px
}
</style>
</head>
<body>
 
<span id="span100">This is a span...</span><span id="span100">This is more</span>
 
</body>
</html>

If you look at the same code in IE7, there is a big space between the 2 spans. But in Firefox, it appears as ::

"This is a span...This is more"

If I use div's, each div is on its own line. Basically, I was trying to create a table of sorts. Is this a bug, or am I not doing this correct?

Pete

MikePixel
MikePixel's picture
Offline
Enthusiast
Everett, WA
Last seen: 7 years 13 weeks ago
Everett, WA
Timezone: GMT-7
Joined: 2008-06-20
Posts: 91
Points: 8

inline elements

Inline elements can not have width. If you want them to have a set width you will need to make them block elements. Note that when you make them block elements they will act like a div and will not be side by side. You will then need to apply a float to them.

The only reason your above code worked in IE was you didn't have a DOCTYPE and IE was working in quirks mode. As soon as you put a valid DOCTYPE in your markup you will see that even IE handles the span inline element right.

I hope that helps.