Without the search bar, both IE7 and FF display the ‘Menu’ (horizontal line of links) at the same height, where it can be adjusted against the background image bar. The ‘Menu’ appears right after the ‘Gsearchbar’ which attempts to put a rein on the bar.
Adding the Google search bar and IE7 drops the ‘Menu ul’ alone out of sight.
Have tried, which I though would limit the prior div’s
position: relative;
overflow: hidden;
Please note, will be adding another line of links right below this main one, an ’ SMenu’ (submenu)
Also, chose to name as ‘Menu ul’ since ‘#header ul’ would apparantly cause IE7 to split my background image in half, duplicating the upper half. Quirky.
Awkward to tell from that snippet but I’m guessing your problem in IE7 will be because the ul has a width which exceeds the space available and unlike other browsers won’t allow the float inside.
That helps, at least for placing the Menu links up in to the header section.
But IE7 chops the Menu links on encountering the Gsearchbar selector, no matter how the Gsearchbar height is set or if it is omitted.
BTW - all css names are now set lower case.
If the #Menu is pulled out of the #header, placed in its own div container it seems the background image will have to go in the maint container/parent item. But adding another div…
The real problem seems to be the G searchbar / form height.
I’ll need real code (html css and images) to play with to understand the problem fully. Do you have a link?
The reason that the search bar doesn’t fit is as I have already said and the menu’s 95% width won’t allow anything to sit next to it in IE7 and under.
In your example above you could have added the background to .menu and then just float the ul to the left without a width and then float the searchbar to the right but both contained within .menu. Your above code doesn’t actually show the searchbar html anyway so I’m guessing at your placement.
Of course you need to adjust the forms margins if you are seeing a small difference as IE applies a large margin to form elements.
The reason that the search bar doesn’t fit is as I have already said and the menu’s 95% width won’t allow anything to sit next to it in IE7 and under.
The width had been removed with the margin added as you suggested.
About the background, it contains not just the background for the menu links but the upper left logo as well, all in a single gif. Its tall, and I’ve tried to keep it this way – maybe I need to spit the logo from the menu background?
I’ve tried adjusting the form margins, nothing. And right now, I can’t even get IE7 to preview locally (something about activex) and it wants to not display the site when put on the server…keeps saying connecting…then gives error message after seeing it for long enough to discover it is that right float on the G searchbar selector. Very strange.[I]
All for a menu bar???[/I] Maybe will have to not do this as a list but simply list the links.
JUST from your snippets, I’m suspecting you have several unnecessary DIV in your code - #header, #menu, etc… In the CSS you seem to be redeclaring multiple values for no reason, and on the whole I suspect you are taking something simple and making it needlessly complex.
Though as Paul said, we’re guessing wildly here without seeing the actual page in question. Snippets do not give the entire picture, and often lead to more questions, not answers.
Solved this by placing the Menu links (below the search form) in their own container, outside of the header div, yet inside the main parent container.
Which has me thinking about the advantages and disadvantages of placing the footer outside of this parent container. If outside, alignment comes to mind with certain browsers, since I don’t want to test in all browsers, just the main ones. But I’m looking for ways to help simplify/clarify, mainly for editing (besides commenting).
