/    Sign up×
Community /Pin to ProfileBookmark

Position problem in old IE versions..

Hello everyone! I am new here and a student of webdevelopement, and on my last project i need some help to fix some small “bugs problem”.

This is the website for my project:[url]http://bhsphp.utb.hb.se/~S083805/Website3/index3.php[/url]

So i am having a search field/button as you see on the right top there.
It looks fine in IE8 and in Mozilla Firefox but in older versions, like IE7 the search field along with the button moves some inches outside the div container to the right and slightly about “1 inch” downwards. If someone has the option to see this you will notice what i mean ?.

I was told it something in the css that needs some changes, with position or float i think, but as i am not sitting on a computer with older IE version i cannot see if i have fixed the problem, and i am not sure of course if i have fixed it here on my own PC.

this is the css for the search field and button:

#top_links {
position:relative;
font-family:Franklin Gothic Heavy, Arial;
left:57px;
top:162px;
float:left;
font-weight: normal;
font-size:0.875em;
color: #2B2B2B;
}

#search {
position:relative;
float:right;
right:-64px;
top:0px;
}

The #search is the div including the search form, and #top_links is the menu links to the left of the search field.
So how do i change this into being on the same spot on all IE versions?
Thank you for any help!

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@BaxxterauthorJun 07.2010 — Anybody, Fang? maybe i have messed up a little in explanation :S....

Anyway to make something more clear, i was told that i need to change something about "position" or "float" in the css code i put up there.

#top_links is for the menulinks to the left of the searchfield, and #search is for the searchfield and button.

And i also need to say, that this is actually of no importance for the grade i want, so it is ok wether i "fix" this or not. Also basically since it works fine in new IE8- and firefox so..
Copy linkTweet thisAlerts:
@FangJun 07.2010 — form {display:inline; margin-left:55px;}
<div id="container">
<div id="header">
<div id="top_links"><span class="vslink">HOME</span>   |   <a
href="http://bhsphp.utb.hb.se/%7ES083805/Website3/buy3.php">BUY</a>   |   <a
href="http://bhsphp.utb.hb.se/%7ES083805/Website3/media3.php">MEDIA</a>   |   <a
href="http://bhsphp.utb.hb.se/%7ES083805/Website3/faqs3.php">FAQS</a>   |   <a
href="http://bhsphp.utb.hb.se/%7ES083805/Website3/links3.php">LINKS</a>   |   <a
href="http://bhsphp.utb.hb.se/%7ES083805/Website3/contact3.php">CONTACT</a>
<!-- <div id="search"> -->
<form name="input" action="searchresults.php" method="get">
<input class="searchfield" name="user" type="text">
<input class="searchbutton" name="submit" value="search" type="submit">
&lt;/form&gt; <br/>
&lt;!-- &lt;/div&gt; --&gt;
&lt;/div&gt;&lt;/div&gt;
Copy linkTweet thisAlerts:
@BaxxterauthorJun 07.2010 — Ok thanks Fang, your the master! ?

Just 2 questions:

Why have you written this div: <!-- <div id="search"> --> and this: <!-- </div> --> as comments to me?

And why did you just change place for "type" and "name" in the input classes? Meaning you just changed place like putting "type" last and "name" before in "searchfield, and the same at searchbutton, you put "type" last as it is as now is before "value" in the original htmlfile. Does the searchfield/button depend on this...?

Other then that i guess for the "form" you mean my #search in the css and to put this:

{display:inline; margin-left:55px;}

in there would fix it right?

Anyway thank you, i will check upon this on another computer in tomorrow or the other day to see if it works. Maybe you allready know and given me the right code, but i will have to check it and put it right there so?, final touch...
Copy linkTweet thisAlerts:
@FangJun 07.2010 — The #search div is unnecessary.

you put "type" last as it is as now is before "value" in the original htmlfile[/QUOTE]That's how Firefox saves your file. IE would capitalize the html.
"form" you mean my #search in the css[/QUOTE]No, as given, a rule for the form element.
Copy linkTweet thisAlerts:
@BaxxterauthorJun 07.2010 — Ah i see, so i replace the div search - #search to > form {display:inline; margin-left:55px;} right?

Oh ok, did not knew firefox saves it like that. I myself usually just open the source-file to check ?.

Greets Fang!
×

Success!

Help @Baxxter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...