Line Breaks in IE

[GiffordS]

Ok, I have a strange one. I have a rather large page that works just fine in Mozilla and gets all wonky in IE. I know, normally it's the other way around. Anyway, I have a simple line of text, followed by a <br>, followed by a form element, a button, and then a text link. In Mozilla the input box, submit button, and link all display properly on the same line. In IE it jumps to a new line after the submit button, which really throws off my page. Also, the degree of the jumps is quite significant. I would estimate that we are talking about at least a 10px drop down to the next line, which makes no sense to me. The same is also true of the drop from the first line to the second, again about 10px. Can anyone tell me if, in IE, ending a form or span forces a line break? And if it does, is there a workaround? And why on earth is the gap so big?

 

[cLFlaVA]

different browsers apply default styles to objects differently. for example, create an <h1> element with no explicit styling, and view it in different browsers.

it's very possible ie is applying a padding or margin to the bottom of your form element. try playing with the padding/margin first, and work from there.

it is unlikely your browser is generating the span tag as a block element. in fact, the only way that can be happening is if you indicate in a css or inline style that it should be that way, because spans are inline by default.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[GiffordS]

I have nothing at all in the CSS which deals with padding or margins, and I'm really not sure where to begin dealing with that. I'm a little reluctant to start randomly messing with stuff for fear I'll just screw it up for Mozilla as well. This page, really the whole site, is a nightmare in that I'm working for someone who basically purchased a giant, steaming, block of cyber-dung for cheap and is now wanting to import the logic into a new design. The only problem is that the original is so poorly written, with different pieces of html and php strewn together in a spaghetti bowl of modules that creating a uniform html flow is almost impossible. There are literally cases where one html form, consisting of four lines of display, is pieced out into 3 php modules. I obviously can't put the source on here, but I can paste the output if that will help generate some answers...

<div id="north">
<span id="dkblue11">Keyword searches blah blah blah</span>
<form name="myForm" method="post" action="somescript">
<input type="hidden" name="search" value="Keyword">		
<span id="black14">Keyword Search:  </span>
<span id="dkblue11">
<input type="text" name="needle" value="" size="15" maxlength="120" class="input"> 
<input type="submit" value="Begin Search"  name="submit" class="submit"/></form>		   
<a href="somepage.php">Advanced Search</a></span>
</div>

Anyone?

 

[cLFlaVA]

your HTML is malformed. you close the form before you close the span, even though the span is within the form.

try utilizing the w3 validator: validator.w3.org.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[GiffordS]

Yes, thanks. That fixed one of the problems. Everything is now on the same line at least. But I'm still having the problem of the massive gaps all around in IE. This division takes up maybe 20px in height in Mozilla, which is just about perfect, but it actually eats up nearly 75px in IE, which just looks terrible. Again, I have no padding or margins set anywhere in the CSS. Any thoughts on what could be causing this problem?

 

[cLFlaVA]

read my first post - especially the part about different browsers applying padding/margin differently.

change your form tag to this:

<form name="myForm" method="post" action="somescript" style="padding: 0; margin: 0;">

see the difference?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]