#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2002
    Posts
    596
    Rep Power
    24

    CSS problem in IE


    Hi, I have a div with a form in it that's not displaying properly in IE. It's meant to display a breadcrumb menu and text input on opposite sides of the screen then followed by a hr, but in IE the input displays below the menu text and interferes with the hr...

    CSS:

    Code:
    	
    
    #contentHeader { 
       margin-top: 2px; 
       font: 11px lucida grande, verdana, arial, sans-serif; 
       padding-top: 2px; 
       clear: all; 
    } 
    
    #pathway { 
       float: left; 
    } 
    #searchForm { 
       text-align:right; 
       float:right; 
       margin-right: 5px; 
    }
    html:

    Code:
    <div id="contentHeader"> 
          <span class="pathway">Home </span>       
    <div id="searchForm"><form action='index.php' method='post'><input class="inputbox" type="text" name="searchword" size="15" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="hidden" name="option" value="search" /></form></div> 
       </div> 
       <hr />
    you can see what happens here - http://jmaid.org/index.php?option=co...tpage&Itemid=1 - How can I fix this?

    TIA
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2002
    Posts
    596
    Rep Power
    24
    actually this is happening in firefox too - only opera displays the way I want
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    25
    Rep Power
    0

    Question


    Hye I'm trying to see ur page but it doesnt show wht it has has nethier in opera nor in IE. pl copy the code
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2002
    Posts
    596
    Rep Power
    24
    Originally Posted by Shashank
    Hye I'm trying to see ur page but it doesnt show wht it has has nethier in opera nor in IE. pl copy the code
    I resorted to a table for now which has desired effect but I'd much rather use css. In IE the form input was on the next "line" down from the breadcrumb and the hr ran into the side of it rather than underneath
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    A couple of things;

    Floats require a width. Div is a block element with default width 100% of its container. The bread-crumb takes all available width so that the search input float must drop below it. Solution;
    Code:
    <style type="text/css">
    #breadcrumb {
        width: 48%;
        float: left;
        text-align: left;
        }
    
    #searchbox {
        width: 48%;
        float: right;
        text-align: right;
        }
    Floats do not occuppy real estate. The containing div does not expand to contain floats. So after the floats, you must clear the floats to expand the div. One possible solution;
    Code:
    <hr style="clear: both;" />
    Read this article on float theory.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2002
    Posts
    596
    Rep Power
    24
    thanks a lot, that works

IMN logo majestic logo threadwatch logo seochat tools logo