Problem Aligning Search Form Field in IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Paul - 24 Dec 2007 04:08 GMT

Hello,

I'm having a CSS positioning problem and hope someone can help me out please?

If you take a look at this test page:
http://www.greenflagaward.org.uk/home/beta

In Safari 3.0 and Firefox 2.0 on the Mac, the header links for
'Sitemap' and Text Only' align perfectly next to the Keyword Search
box. But I've just checked it out in IE6 (I don't have IE7 installed
on the PC so don't know about that) and found that the Search box is
aligned to the top of the page rather than next to the 'Sitemap' and
'Text Only' links.

I'd appreciate any ideas on how to remedy this please?

Thanks in advance,

Paul

Reply to this Message

Edward Hass - 24 Dec 2007 12:42 GMT

Your rule: #header_links ul { } might be the problem. (why define a rule
with an empty declaration block?) It's possible that IE has a different
default for ul margins and/or padding than does the rest of the group. Try
defining margins or padding for that selector, and see what happens.

Good luck,
Edward Hass

> Hello,
>
[quoted text clipped - 15 lines]
>
> Paul

Reply to this Message

Paul - 24 Dec 2007 22:34 GMT

Hi Edward,

Thanks for the reply.

I've just removed that empty declaration (it was there from when I did
have parameters in there and forgot to delete it) but that didn't seem
to be the issue as the search box is still flush against the top of the
page (and strangely, I have a bit horizontal scroll bar too, which was
also there before I removed this declaration.

Do you have any more ideas?

Thanks,

Paul

> Your rule: #header_links ul { } might be the problem. (why define a rule
> with an empty declaration block?) It's possible that IE has a different
[quoted text clipped - 23 lines]
>>
>> Paul

Reply to this Message

GTalbot - 28 Dec 2007 02:35 GMT

> Hi Edward,
>
[quoted text clipped - 39 lines]
>
> >> Paul

Paul,

Like Edward told you
"IE has a different
default [values] for ul margins and/or padding than does the rest of
the group. Try
defining margins or padding for that selector, and see what happens. "
I believe you should investigate closely this margin and padding for
list and list items. I recommend

Consistent List Indentation
http://developer.mozilla.org/en/docs/Consistent_List_Indentation#Conclusion

Regards, Gérard

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007

Problem Aligning Search Form Field in IE