PDA

View Full Version : IE align differs from FF



Goo
Mar 4th, 2008, 04:52 AM
Thats probably an extremely ambiguous title, but i did most of my html coding in notepad before CSS was popular, and i enjoyed tables and frames. I know that is not very popular now, so i'm learning :)

I have attached a screen shot of just the area in question in IE , and a screen of the same thing in FF with Firebug assistance for CSS content.

FF shows it the way i want it to, IE doesn't

rangana
Mar 4th, 2008, 05:09 AM
Could you show us your codes..It's difficult to point how to fix what just by seein a pic :D

Goo
Mar 4th, 2008, 05:54 AM
have a look in the FF screenshot, i have included the Inspection from Firebug which should include all the relevant CSS

rangana
Mar 4th, 2008, 06:04 AM
I don't know what gives you hesitation on showing the code. Anyway, without seeing your code, and relying on your firebug's screenshot. I would assume that adding float:right; in your #content div will do the fix.

See if it helps :D

jlhaslip
Mar 4th, 2008, 06:26 AM
I can't read that image. We need some code, please. Or a link would be better.

Goo
Mar 4th, 2008, 06:35 AM
sorry - the only reason i was posting the screenshot was i was trying to include any relevant CSS because Firebug has a neat inheritance thing.

I have attached the CSS

With the float: right, Now Firefox shows the textbox in the middle! argh :)

I have added borders to the right (black) and mainheader (red) div's , check out the difference! IE is weird

Top of the HTML :


<body onClick="hideSuggestions();" >
<!-- For non-visual user agents: -->
<div id="top">
<a href="#main-copy" class="doNotDisplay doNotPrint">Skip to main content.</a>
</div>

<!-- ##### Header ##### -->

<div id="header">
<div class="mainHeader">
<div class="left">
Link 1
</div>
<div class="right">
<div id="content" onclick="hideSuggestions();" >
<form action="search.php" autocomplete="off" name="search" method="post">
<input title="test" onFocus="focusSearch();" onBlur="blurSearch();" type="text"
name="s" id="s" maxlength="70" size="54" onkeyup="handleKeyUp(event)" value="" />
</form>
<div id="scroll"><div id="suggest"></div></div></div></div>

</div>
</div>

_Aerospace_Eng_
Mar 4th, 2008, 06:38 AM
HTML helps too...

You do know you CAN post your code directly on the forum using the http://www.codingforums.com/images/editor/code.gif button.

A link to the site would be best. Just post all of your code like we asked rather than beating around the bush and having us download stuff.

Goo
Mar 4th, 2008, 06:45 AM
Sorry the site isn't publicly accessible - i'll see if i can get that changed

I would have thought posting ~ 10k of code in a thread would have been bad! I realised i was missing the HTML so i have edited my post and added it

Goo
Mar 4th, 2008, 07:01 AM
Ooh i added

width: 40px;

to this :



.mainHeader .right {
width: 40px;
position: absolute;
border: dashed black 2px;
right: 1.5mm;
top: 0.40ex;
text-align: right;
color: white;
background-color: transparent;
text-decoration: none;
font-size: 91%;
margin: 0;
padding: 0 0.5ex 0 0.25ex;
}


and now its in the right place in IE but it's off the screen in FF :(

rangana
Mar 4th, 2008, 07:08 AM
I thought deleting text-align:center; in the content div would place the input box to the right.

See if it helps :D

Goo
Mar 4th, 2008, 07:10 AM
GOT IT! :)

I fixed it by forcing the width of the RIGHT div to be the same as the width of the content div from the suggest.css. It seems Firefox assumes the minimum width of the elements within and IE assumed 100% of the page. Thanks guys! :)




.mainHeader .right {
width: 239px;
position: absolute;
border: dashed black 2px;
top: 0.40ex;
text-align: right;
color: white;
background-color: transparent;
text-decoration: none;
font-size: 91%;
margin: 0;
padding: 0 0.5ex 0 0.25ex;
}


See attached for end result! :thumbsup:

rangana
Mar 4th, 2008, 07:15 AM
Good to hear that you find the fix all by yourself..
Good Luck to your site..:D