Margin Top in IE and FF 1

[DaSe]

Hello guys at T.T. I've got a small positioning issue. I've created a small text input ( as a search box ). The text input is the standard one. But when trying to position it with margin-top it differs significantly in FF and IE. I've tried using display:inline but to avail - is there an option before using a separate stylesheets ? Thanks for any comments. The code is below:

P.S. I know there are quite many hacks..so I would appreciate it.
The universal selector *{margin:0, padding:0) doesn't apply. I'm not using it.

HTML:
<input type="text" id="search_text" />

CSS:

#search_text{
margin-top:-20px;
}

 

[Vragabond]

I will guarantee you that the example you provided would render the same in all browsers. The problem must be in the rest of the code, which you didn't show.

Please make sure:

1. that you have a valid and complete doctype in your html document,
2. that your page's HTML and CSS validate;

before posting more questions or applying hacks.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DaSe]

Hey - true the text input is embedded in another div which is below:

#slider {
width: 100%;
height: 100px;
margin-top: -141px;
margin-left:-8px;
margin-right:-8px;
position:absolute;
background-image:url(images/slider.png);

}

The issue is the text input floats right when browser resizes but 2 browsers render margin tops differently and also the text input field skips up when IE is resized to full. It's not the first time I've come across issues with different positioning in FF and IE - I appreciate any comments about the wrong nesting ? Thanks..

P.S. the doctype is the standard - transitional 4.1 HTML.

 

[DaSe]

Vragabond, I think I found the problem - it was a 'white-space:nowrap' declaration in css. Looks it's working fine now when removing it. It used to be ( another div ):

#sliderContent {
margin: 50px 0 0 50px;
/*position:absolute;*/
/*text-align:center;*/
color:#777777;
font-weight:normal;
padding: 7px;
white-space:nowrap; <-( removed now )

}

Thanks a lot !

 

[Vragabond]

Using all the absolute positioning and negative margins seems like an overkill. Are you really maintaining a page that is very complexly designed, or are you making things harder than they should be?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

I have to agree with Vrag. Seems awfully convoluted to be moving things with such large amounts in negative margins around.


If you need to position something that far away form its default position, then something is not right with your html structure.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/