positioning in ie and mozilla

[solidariti]

Hi,

I'm trying to put a search button with a text field on a page, it displays correctly in mozilla, but it does not display correctly in IE. my css is. Could someone please xplain what !important does aswell please.

#functionMenu .search {
padding:0 2px 1px 450px;
margin:0 0 0 0;
}

the above fits in a mozilla browser, but in IE it displays the button on the line below the text box next to it.

below fits into ie browser, but makes mozilla move it over even more.

#functionMenu .search {
padding:0 2px 1px 420px;
margin:0 0 0 0;
}

Could someone please enlighten me, thank you

[WebJoel]

in your STYLE, include this:

<style>
body, html
border:0; margin:0; padding:0
</style>

This might fix the problem. IE messes-up these because it 'assumes' some value that, when added to anything you create later, makes them 'not right'.

This might be the problem. In any case, it won't hurt anything to declare this. It doesn't affect any 'compliant' browser.

"<!-- important -->" is merely a "comment" tag, there to explain something that the programmer did, or is about to do. It's only a courtesy to help themselves later on understand what they were trying to do. Esp. useful when someone *other than* the original programmer reads the code...

[solidariti]

does it matter where I include that, then? Is that what it is oh right ok, thank you. Is there any other hacks or get arounds for ie for positioning that is worthwhile knowing.

Thank you in advance.

[drhowarddrfine]

Correction:
<style>
body, html
{border:0; margin:0; padding:0}
</style>
does it matter where I include that It must be in your style sheet or between the style tags in your html page.
Is there any other hacks or get arounds for ie for positioning that is worthwhile knowing.There are 258 known hacks for IE and thousands of web pages. One is in my sig below. Another good one is positioniseverything.net

[solidariti]

Thank you!

[CFHutton]

Actually, can't you use the !important to affect the cascade when their are contradictory style rules which apply to one element?

I think I read that somewhere. I got the impression it's rarely used.

CFH

[ray326]

Yes that's a standard hack but hacks are falling out of favor as time passes and people learn to avoid the things that need them.

[felgall]

!important means that the stylesheet takes priority over ones that are closer to the object but which are not so marked. See http://www.felgall.com/cstut12.htm

[solidariti]

I asked some one about 2 days ago about !important, and they said it was a css comment to let other developers know what you are going to do or something??????

I'm Confused

[in1337ened1]

HAHAHA! I get the same problem all the bloody time! I hate IE but like 70% of the web uses it, which is gh3y

[solidariti]

Could you give an example of !important please.

[ray326]

Wow, I could have sworn there was already an example in this thread. Normally you'll see something like this.

div#example {
background: #f00;
border: 2px solid #0f0;
padding: 10px;
width: 100px !important;
width: 124px;
}

[solidariti]

I'm still confused so that !important, makes it use the 100px instead of the 142px in the example above. But why and how???

[ray326]

Because IE incorrectly allows the second one to override the first.

[solidariti]

So it is an IE hack so the width everywhere else will be 124px but in IE it will be 100px?

[ray326]

Just the opposite. But the purpose is for the width to be rendered the same on the screen. IE will render it as 124px wide and put the border and padding "inside" that box. Other browsers will render a 100px wide inner box and put the padding and border on the "outside" of that, resulting in a 124px wide outer boundary.

http://www.w3.org/TR/CSS1#formatting-model