Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: not2easy

Message Too Old, No Replies

<SPAN> issues between IE and firefox

Span seems to work in IE but not firefox

     
6:25 am on May 1, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 18, 2003
posts:77
votes: 0


Hi

Usual story, I got my site looking OK in IE and now it looks rubbish in other browsers.

The problem seems to be with all my <span>'s, the width is not being set in FF.

eg:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
Yada yada yada
<link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<form name="myname" action="myaction.php" method="POST">
Yada yada yada
<span class="services"> <input type="checkbox" name="name1"> Check1</span>
<span class="services"> <input type="checkbox" name="name2"> Check2</span>
....
<span class="services"> <input type="checkbox" name="name99"> Check99</span>
<input type="submit" value="Continue">
<input type="submit" name="Reset" value="Reset">
</form>
</div>
</body>

and the css is


body {
color:#006699;
color:#000000;
background-color:#E4CCD9;
margin:0px;
padding:0px;
font:9px verdana, arial, helvetica, sans-serif;
}
.content {
position:relative;
width:auto;
min-width:500px;
height:78%;
overflow:auto;
top:0px;
min-height:420px;
margin:0px 214px 0px 151px;
border:1px solid #9B4F75;
padding:10px;
z-index:3;
}
SPAN.services {
width:130px;
}

I'm lost ... IE puts the checkboxes in neat, equi-spaced columns and FF uses no spacing at all and crams everything together.

Any help would be greatly apreciated.

[edited by: Robin_reala at 7:13 am (utc) on May 1, 2007]
[edit reason] Correcting BB code [/edit]

7:06 am on May 1, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


Heheh, span is not a sizable tag, dude. If IE is sizing it, it shouldn't be.
Also, from the example code you gave me... I see no difference between viewing with FF v1.5011 and viewing with IE6.

Both show the check box, option labels, and buttons all in one row. You say you want it on multiple lines?
You realize that span elements are INLINE styled, meaning they don't do line breaks. You should use a DIV if you want each option on a new line, which is BLOCK styled.
Block-level elements also are resizable, so that's another thing you should like.

Lastly, if you want to control the width of horizontally displayed elements, you will need to set them to float:left or float:right, and still have them as divs.

[edited by: Xapti at 7:16 am (utc) on May 1, 2007]

11:30 am on May 1, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 30, 2003
posts:3719
votes: 0


Usual story, I got my site looking OK in IE and now it looks rubbish in other browsers.

You might want to think about designing your sites in more CSS compliant browsers first and then doing the odd tweak if need be for IE. I`ve found that to be a far better solution these days and code all CSS in Firefox first.

dc

8:29 pm on May 1, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 19, 2004
posts:505
votes: 0


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css" >

body {
color:#006699;
background-color:#E4CCD9;
margin:0px;
padding:10px;
font:.8em verdana, arial, helvetica, sans-serif;
}

#content {
width:500px;
height:78%;
margin:0 auto 0 auto;
border:1px solid #9B4F75;
padding:10px;
}

#content form {
padding: 8px;
margin: 0;
}

#content ul {
list-style-type: none;
margin: 4px 0;
padding: 0;
}

#content ul li {
margin: 0 0 0 10px;
}

</style>

</head>
<body>
<div id="content">
<form name="myname" action="myaction.php" method="POST">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada

<ul>
<li><input type="checkbox" name="name1"> Check1</li>
<li><input type="checkbox" name="name2"> Check2</li>
<li><input type="checkbox" name="name2"> Check3</li>
<li><input type="checkbox" name="name2"> Check4</li>
<li><input type="checkbox" name="name2"> Check5</li>
<li><input type="checkbox" name="name2"> Check6</li>
<li><input type="checkbox" name="name2"> Check7</li>
<li><input type="checkbox" name="name2"> Check8</li>
<li><input type="checkbox" name="name99"> Check99</li>
</ul>
<input type="submit" value="Continue">
<input type="submit" name="Reset" value="Reset">
</form>
</div>
</body>

9:41 pm on May 1, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Doctype, Doctype, Doctype... ;)

The <span> is working just fine!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

is a Doctype which puts IE into quirks rendering [backwards compatible] mode, therefore it [IE] and only it will accept a width on an inline element. A <span>, or even the <input>, is an inline element unless you tell it to float or display:block; - so no widths allowed

if you do want inputs "in neat, equi-spaced columns" then you either have to use a table, as some like to continue doing forms in.. or you can use floats with widths

Suzy

[edited by: SuzyUK at 9:42 pm (utc) on May 1, 2007]

12:33 am on May 2, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


Suzy, if transitional makes IE go into quirks, how would you render IE in non-quirks while still being able to use frames?
7:21 am on May 2, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


it's not the "transitional' Doctype that puts IE into Quirks Mode, it's the fact that it's only the Half Version of it - see this thread for further explanation [webmasterworld.com]

You can use the full version of a transitional DTD and IE will be in standards compliant mode.

btw.. If you're using frames should you be using transitional (full version) or should it be a frameset one - can you use either? - I haven't worked with frames for ages

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

[edited by: SuzyUK at 7:25 am (utc) on May 2, 2007]

1:11 am on May 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 18, 2003
posts:77
votes: 0


Thanks everyone

What I'm after is my check boxes lined up in a grid. (say 4 x 5)

I have no <br>'s, I want the browser to wrap the lines in this bit.

I thought I could set the width of a span.
Xapti, my IE6 (and now 7) both set a width to each span (130px) thus when the line wraps, the next line lines up.
I will try the divs and floats

dreamcatcher ... yes sorry I was having a go at myself rather than the browsers

justgowithit ... thanks for that, but it just places the checkboxes in one column. I'm after multiple columns.

Thanks Susy ... you've got it ... I don't like tables so I'll go for floats.

1:43 am on May 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 18, 2003
posts:77
votes: 0


Thanks again it works

[edited by: Kenton at 1:50 am (utc) on May 3, 2007]

5:21 am on May 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


Oh yeah, the DTD link. I thought it was sort of implied, but it makes sense now that you didn't mention it.

I don't really use framesets, just iframes instead of ssi occasionly, hence I always use transitional.

Frameset doctype is only for when you have <frameset> instead of <body> or something, so is only used with framesets. The pages the frame holds would still be normal doctype I think or something... I don't know :\

[edited by: Xapti at 5:24 am (utc) on May 3, 2007]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members