[css-d] Odd placement of input element in IE. Why?
I have run into an odd bug where an input element is placed strangly when it is inside a div, but only when it is viewed in IE. I have been able to produce a small test example that exibits this bug. It is located at http://www.coaching-life.com/css/gallery.html for you to look at. I have validated this file for markup and css. This works as I expect on Mozilla and several linux browsers. It fails on at least two versions of IE. I would love to know why, and how to get around it. Here's what the bug looks like. I have an outer div, a form and an inner div. Inside the inner div is an input field. The outer div has a wide left margin. On IE, the input seems to take on this wide margin inspite of (or perhaps in additon to) the margin setting that is on the input field itself. IE renders the input with an inexplicable wide left margin. On every other browser the input is flushed left as I would expect. Does anyone have any idea what is going on here? I have been working on this kind of stuff for over a year and have never seen anything like this. Thanks, -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Setting height to 0 does not work on IE6
Right you are, Kelly, a line-height of 0 did indeed fix it. Thank you. -- Will > -Original Message- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] Behalf Of Kelly Miller > Sent: Wednesday, June 29, 2005 10:54 PM > To: Will Merrell > Cc: css-discuss > Subject: Re: [css-d] Setting height to 0 does not work on IE6 > > > IE treats height like it were min-height (well, not exactly, but in this > situation...). Because you put a non-breaking space in the , IE > enlarges the to the size of line-height. That means you can't > just say height: 0; you have to add line-height: 0 as well (at least, I > think that's the fix. Anyone care to elaborate?). > > -- > http://www.mozilla.org/products/firefox/ - Get Firefox! > http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Setting height to 0 does not work on IE6
Hi Folks,
I'm floating some elements on a page, so I am adding a div after to clear
them so they stay in the container. The clearer div looks like this:
and the css for it looks like this:
.clear {
display : block;
clear: both;
height: 0em;
margin : 0em;
padding: 0em;
}
Here's the problem: on Firefox the clearer div occupies no vertical space.
No suprise there. But, under IE6, guess what, the clearer div occupies a
full line.
So ... ,
Does IE6 use the height property?
Does anyone know how to get this div to show up as zero height on IE?
Thanks,
-- Will
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Floating 2 divs side by side that go underneath each otherwhen browser screen shrinks
stu wrote: > Does anyone know if it is possible to float 2 divs next to each > other taking up 50% of the screen each, until the screen size > starts to shrink, then they list vertically (like on top of each > other). This would happen say when the user gets to 800x600 > resolution or something. > > Its a tough one, as far as i can see, because when od you want > the divs to flip underneath each other instead of being side by side You can see my best solution to a closely related problem at http://coaching-life.com/css/sample.html. It does do the wrapping thing when the screen gets small enough, but I don't know any way to control when it will wrap. This whole techique is very subject to font size, and behaves differently on different browsers. The big problem is that I cannot get the elements to add up to 100%. If they total 90% or less the behavior is pretty predictable for most font sizes and screen sizes on both Firefox and IE6. Anything more that about 97% destroys the affect and the boxes just wrap. In between, it works at some combinations of font and screen sizes and then fails at others. My best guess at this point is that margins and padding settings affect the calculations since almost any margin setting desrtoys the effect at a lower percentage. I have posted two questions to this list, but so far no one has answered either. So maybe someone has some ideas and has not yet chimed in. HTH, -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] padding and cell sizes
Eliana Berlfein wrote: > Here's a link to the site: http://www.itea-school.com > > If you look at it on a Mac I'm pretty sure everything looks the way I > want it. If you look on a PC it's totally messed up. Looks fine on Firefox 1.0.4 and IE6 on Win XP. -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] a:hover border-bottom not showing up in IE?
Jason Baker wrote: > i have a few problems with a personal page that renders okay in firefox > but not so well in IE 6. my first problem is as follows: i want my links > to look like boxes with a black solid border on all sides and when the > user hovers over a link i want the border style to change to dashed. the > following example works fine in firefox but in IE the bottom border > doesnt change to dashed style. I tried your site and found: 1) There are some errors in your markup. You have an extra html tag and your image tage is not closed. 2) In Firefox the nav boxes are on top of the picture and so have a colored background, but in IE6 the picture occupies only about half of the screen so the boxes are floating on a black background. 3) In IE6 I changed the text ize to larger and the dashes appear on the bottom of your boxes. I suggest you first validate your code, then try to get your boxes to position the same on both browsers. That may be all you need to do. HTH, -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floating form elements dont stretch the way I need them too
Hi all, This is the same issue that I posted yesterday, but I have posted the file on a server so people can take a look. Its at http://coaching-life.com/css/sample.html. I have checked this for validation and it passes for the markup and the css. It works the same on Firefox and IE6. Both have the same problem, if I set the width wider than about 46%, they wrap. If I set them to 45 or below, I get a large right margin. My goal is to get these to fill the whole container and stay resizable. Any Ideas? -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why cant I get full width on this form?
I have been working on a table-less form style for some time. The sample
I've included below comes close to what I'm looking for. But I can't get it
to stretch to full width.
What I am trying to do is create forms that allow me to have a liquid
presentation that scales well when the font size is changed or the browser
is resized. I also want to put multiple fields on the same row. Plus, of
course, I want it to be browser independant and degrade well. The sample
below almost achieves all of these goals.
The problem is that the side by side look is lost if the side by side
elements are sized larger than about 45%. (See width on the fieldset or the
label elements.) At 50% they always wrap. This is not suprising. At 49% it
rarely works, at 48% it works when the font size is small and screen is
large. By 47% they work for most situations but still get funny when the
screen size gets real small. This last is ok, but what's not ok is that when
I use 47% I get large right margins that don't look good.
I have two questions for the list:
1) Can anyone tell me why the styling I've used does not work when the width
is set to fill the whole width of the container?
2) Can anyone suggest a way to get liquid, stretchable, sizable side-by-side
form fields that actually fill the whole width of the container?
Thanks,
Will Merrell
CIO TeamTrack Communications
Sample Code Follows:
---
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en" >
Form Test
<!--
body {
background: #FF;
color: #00;
font: 1em Arial, Helvetica, sans-serif;
margin: 0em;
padding: 1em;
}
form {
position:relative;
float: left;
width: 100%;
background-color: #ff;
}
fieldset {
position:relative;
float: left;
width: 47%;
margin : 0em;
padding: 0.1em;
}
legend {
background: #99;
color: #66;
margin : 0em;
padding: 0em 0.2em 0em 0.2em;
border:0.05em solid #ff;
}
label {
position:relative;
float: left;
background: #99;
color: #66;
width: 45%;
text-align: left;
margin : 0em;
padding: 0.125em 0.25em 0.125em 0.125em;
border:0.05em solid #f0e066;
}
input {
position:relative;
font-size: 1em;
text-align:left;
width:100%;
margin : 0em;
padding: 0em;
border: 0.05em inset #c0c0c0;
}
button {
margin: 0.5em;
}
.clearer {
display : block;
clear: both;
height: 0em;
}
.hidden {
display:none;
}
-->
Set 1
Field A:
Field B:
Set 2
Field A:
Field B:
Submit
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
