homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
<SPAN> issues between IE and firefox
Span seems to work in IE but not firefox
Kenton




msg:3327107
 6:25 am on May 1, 2007 (gmt 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]

 

Xapti




msg:3327130
 7:06 am on May 1, 2007 (gmt 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]

dreamcatcher




msg:3327262
 11:30 am on May 1, 2007 (gmt 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

justgowithit




msg:3327839
 8:29 pm on May 1, 2007 (gmt 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>

SuzyUK




msg:3327920
 9:41 pm on May 1, 2007 (gmt 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]

Xapti




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

Suzy, if transitional makes IE go into quirks, how would you render IE in non-quirks while still being able to use frames?

SuzyUK




msg:3328300
 7:21 am on May 2, 2007 (gmt 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]

Kenton




msg:3329361
 1:11 am on May 3, 2007 (gmt 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.

Kenton




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

Thanks again it works

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

Xapti




msg:3329471
 5:21 am on May 3, 2007 (gmt 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved