13 replies [Last post]
maximus
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2007-02-03
Posts: 6
Points: 0

I afraid I need help with this after trying around for a long time and getting nowhere.

.button
{
margin: 0;
padding: 0;
border: 0;
}

The text input box and the submit button don't align properly in FF or IE. The button is slightly higher than the input box...can someone help me?

site: www.mobilecrown.com (search box)

Thanks.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 4 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

After messing with this for

After messing with this for a while, the only thing that seemed to work was brute force:

.button { position: relative; top: 5px; }

and for IE, a conditional comment. I chose to make it IE6 and up, since the following bit of CSS applies for versions 6 and 7:

.button { top: 3px; }

- Antibland

maximus
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2007-02-03
Posts: 6
Points: 0

Ahh. Could you tell me

Ahh. Could you tell me where to put the conditional comment? I have never heard of those. I tried placing it in the css file, to no avail.

It works in FF now, and in IE it is too far down.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Conditional comments can go

Conditional comments can go anywhere, but for ones containing styles, they should go between the <head></head> tags, just like any other style internal styles.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

maximus
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2007-02-03
Posts: 6
Points: 0

Well that doesn't work. It

Well that doesn't work. It displays the actual code when I put it in between the HEAD tags.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Show us what you've done.

Show us what you've done.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

maximus wrote:Well that

maximus wrote:
Well that doesn't work. It displays the actual code when I put it in between the HEAD tags.


Well if you just copied the code in antiblands post for the CC as written it would as it's wrong Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

maximus
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2007-02-03
Posts: 6
Points: 0

Aha, well I am quite

Aha, well I am quite confused at this point. He gave me the wrong code?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

How about you remove all the

How about you remove all the guesswork, and just show us what code you've got?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

maximus
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2007-02-03
Posts: 6
Points: 0

Tyssen wrote:How about you

Tyssen wrote:
How about you remove all the guesswork, and just show us what code you've got?

What are you talking about? You guys are the ones "guessing". I am obviously using AntiBland's code, as mentioned in his post above.

After messing with this for a while, the only thing that seemed to work was brute force:

.button {
position: relative;
top: 5px;
}

and for IE, a conditional comment. I chose to make it IE6 and up, since the following bit of CSS applies for versions 6 and 7:

.button {
top: 3px;
}

I put the first code into my .css file, and the second as well. The first part works nicely, but in IE it moves the button down too far. Thats what the second piece of code is supposed to be for, but it has no effect. Then I put the second code into the HEAD tags as well..no effect.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Take this out of your CSS

Take this out of your CSS file:

.button {
top: 3px;
}

And then put this in the head of your document:

.button {
top: 3px;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

maximus
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2007-02-03
Posts: 6
Points: 0

Ugh, nothing works. The

Ugh, nothing works. The code you posted displays a blank page with NO content. Im guessing thats because your last STYLE tag is supposed to be after the endif. Tried this:

.button {
top: 3px;
}

Had no effect in IE.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Don't know what it is about

Don't know what it is about this thread - seems to be bringing all the typos out. It should've been:

.button {
top: 3px;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

typo heaven

Laughing out loud typo heaven

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me