CSS problem in IE

Dev Shed Forums Sponsor:

March 19th, 2004, 04:50 AM

jamieB

Contributing User

Join Date: Nov 2002

Posts: 596

Time spent in forums: 2 Days 3 h 19 m 33 sec
Reputation Power: 17

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=c...ntpage&Itemid=1 - How can I fix this?

TIA

March 19th, 2004, 06:05 AM

jamieB

Contributing User

Join Date: Nov 2002

Posts: 596

Time spent in forums: 2 Days 3 h 19 m 33 sec
Reputation Power: 17

actually this is happening in firefox too - only opera displays the way I want

March 19th, 2004, 07:31 AM

Shashank

Registered User

Join Date: Mar 2004

Posts: 25

Time spent in forums: < 1 sec
Reputation Power: 0

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

March 19th, 2004, 07:42 AM

jamieB

Contributing User

Join Date: Nov 2002

Posts: 596

Time spent in forums: 2 Days 3 h 19 m 33 sec
Reputation Power: 17

Quote:

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

March 19th, 2004, 12:46 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 41 sec
Reputation Power: 662

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.

March 19th, 2004, 01:57 PM

jamieB

Contributing User

Join Date: Nov 2002

Posts: 596

Time spent in forums: 2 Days 3 h 19 m 33 sec
Reputation Power: 17

thanks a lot, that works

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: