SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    google custom search bar playing havoc

    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.

    Code:
    .container{
    border:1px solid #999999;
    width:92%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    }
    
    #header {
    background-image:  url(imagebar.gif);
    background-repeat: no-repeat;
    background-position: left top;
    text-decoration: none;
    width:100%;
    height:150px;
    margin-left: auto;
    margin-right: auto;
    }
    
    .Gsearchbar {
    float:right;
    width:400px;
    height:125px;
    padding:10px 10px;
    
    }
    
    .Menu ul {
            position:relative;
            width:95%;
            list-style:none;
            padding:75px 0 0 0;
            margin: 0 auto;
        }
    
    .Menu ul li {
            display:inline;
            list-style:none;
            padding:0px 0 0 0;
        }
    .Menu ul li a {
    vertical-align: middle; color:#FFFFFF; text-decoration: none;  padding-left: 15px; padding-right: 15px; font-size: 13px; font-weight: 600; text-transform: capitalize; font-family: Arial, Helvetica, sans-serif;
        }
    .Menu ul li a:hover {
    vertical-align: middle; color:#FFFFFF;text-decoration: underline;  padding-left: 15px; padding-right: 15px; font-size: 13px; font-weight: 600; text-transform: capitalize; font-family: Arial, Helvetica, sans-serif;
        }
    Declared as:
    Code:
    <div class="Mmenu"><ul>
        <li><a href="addressdothtm1">link</a></li>
         <li><a href="addressdothtm2">link2</a></li>        
         <li><a href="addressdothtm3">link3</a></li> 
         <li><a href="addressdothtm4">link4</a></li>  
    <li><a href="addressdothtm4">link4</a></li></ul></div>
    Have tried, which I though would limit the prior div's
    Code:
    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.

    Would appreciate suggestions.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    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.

    Try removing the width and use margins.

    Code:
    .Menu ul {
        position:relative;
        list-style:none;
        padding:75px 0 0 0;
        margin: 0 2.5%;
    }
    If that isn't stable then you'd probably need to have the background on the parent item and then let the ul be content width only.

  3. #3
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

  5. #5
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    All for a menu bar???
    Maybe will have to not do this as a list but simply list the links.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

    - Do much appreciate the posts here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •