Bevan Christians wrote:
> Hi, I'm a bit new to CSS.
> and i've tried googling but i may getting the search terms wrong.
>
> Question:
> I have 3 divs in a row with a parent div.
> in Firefox they align up perfectly (horizontally), yet in IE the
> #slider_track div pushes lower than the other two DIVS
> so it looks like:
> __ __
> |__| ________ |__|
> |________|
>
>
> Is there any particular reason for this?
>
> Thanks alot :D
>
> The Code and CSS is below:
> ------------------------------------------
> <div id="slider_holder">
> <div id="slider_minus">-</div><div id="slider_plus">+</div>
> <div id="slider_track"><div id="slider_handle"> </div></div>
> </div>
>
> with the following CSS:
>
> #slider_holder
> {
> width: 150px;
> margin-left:5px;
> margin-right:5px;
> margin-bottom:5px;
> padding:0;
> z-index: 996;
> text-align:center;
> }
>
> #slider_holder #slider_minus
> {
> width:20px;
> height:10px;
> display:block;
> float:left;
> margin:0;
> padding:0;
> border: 1px solid #000;
> text-align:center;
> vertical-align:middle;
> }
>
> #slider_holder #slider_plus
> {
> width:20px;
> height:10px;
> display:block;
> float:right;
> margin:0;
> padding:0;
> border: 1px solid #000;
> text-align:center;
> vertical-align:middle;
> }
>
>
> #slider_holder #slider_track
> {
> background-color:#C0C0C0;
> width:100px;
> height:10px;
> border: 1px inset #000;
> z-index: 996;
> margin-bottom:5px;
> margin-left:24px;
> margin-right:24px;
> margin-top:5px;
> display:block;
> clear:none;
> }
>
I don't know the answer to your question. This is one way of doing
something similar. It may, or may not, work as you want.
HTML
body { background-color: #fff; color: #000; font: 100%/normal arial,
sans-serif; }
div.c1 { border: 1px solid #000; float: left; width: 20px; }
div#slider { background-color: #ddd; color: inherit; border: 1px solid
#000; float: left; height: 1.2em; width: 100px; margin: 0 3px; }
p {line-height: 1.2; margin: 0; padding: 0; text-align: center; }
CSS
<div class="c1"><p>+</p></div>
<div id="slider"><!-- --></div>
<div class="c1"><p>-</p></div>
Best,
~dL
--
http://chelseacreekstudio.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
