what's with the indent? 3

[cLFlaVA]

hi people...

http://www.empireview.com/contact.php

can anyone tell me why

[ol[li]the select boxes are narrower than the text boxes (ff), and[/li][li]the select boxes indent (ie)[/li][/ol]

this just came back to me after i left the site alone for a couple of months - now i can't figure it out!

Thanks for your help.

Cory

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[LFI]

Hey, Cory.

I noticed in IE (for me) it's the TEXT boxes that are indented... not the SELECT boxes.

Meanwhile, when I changed:

fieldset {
	margin: 0 10px;
	text-align: left;
}

...to:

fieldset {
	margin: 0 10px[red] 0 0[/red];
	text-align: left;
}

...the indent fixed itself.

The INPUT element appears to apply the left and right margin BOTH to the left side, while the SELECT elements correctly applies the style.

Odd!

--Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[cLFlaVA]

very freakin weird. does your fix work in both FF and IE? I can't test now - in a training session, not on my computer...

thanks for your help Dave.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[LFI]

Well, it doesn't hurt in Firefox, but the SELECT's are still narrower than the INPUT/TEXT boxes.

...as they seem to be in IE, now that they both share the same left-alignment. The difference seems to be 4px.

???

Enjoy training!

--Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[cLFlaVA]

so, in conclusion, if i want selects to have the same width as text inputs, i'll need to give the selects 4 more pixels of width?

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

...give the selects 4 more pixels of width?

I'm picking this "magic number" indent (4px) will probably vary from browser to browser too. Maybe get it right for FF/Moz and then do a conditional for IE.

Remember the buzz from MS recently? We're encouraged to use conditionals in IE rather than abuse the hacks we have used in the past.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[LFI]

When I view that site in Opera, they appear okay, but IE and FF seem to need that extra 4px and, in IE, the two-parameter margin style seems to foul up INPUT/TEXT boxes (and who knows what else?).

--Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[cLFlaVA]

GAH!

i'm amazed this has never been discussed before...

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

Jeff,

no, i don't remember the buzz. care to refresh my memory?

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

OK... <memory massage enabled/>

First, I read this blog entry:

http://www.456bereastreet.com/archive/200510/stop_using_css_hacks_now/

That refers to this original blog entry:

http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

The first blog entry was then updated:

http://www.456bereastreet.com/archive/200510/about_using_css_hacks/

And I've been reading fall-out in blog comments at various CSS and developer blogs ever since (as you do)

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[cLFlaVA]

wow..

now that i've had time to take a look...

what i originally wanted was for all text inputs and selects to be indented 10px. apparently, this does not work.

if anyone can see why this is not functional, i'd be greatly appreciative. i'm at a loss.

thanks,

cory

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

update:

i was able to fix this for ie, firefox, and netscape. i have yet to deal with opera, but am less-worried about it.

my fix was:

fieldset, form {
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

input, select, textarea {
	color: maroon;
	width: 225px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .9em;
	margin: 0 0 0 10px;
	padding: 0;
}

select {
	width: 229px;
}

(i removed the separate fieldset style description and added a separate one for the select object)

note: i was unable to find a "hack" that would solely satisfy opera. i know the parent/child hack exists, but that is for tricking IE. i know of the good old box model hack, but that doesn't pertain. i know of the backslash (escaping) scheme, but again, this will only hide something from opera, not apply something ONLY to opera.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

http://www.dithered.com/css_filters/css_only/index.php

Have you tried looking for your answer on this list? I haven't checked if there is an Opera only hack but if it is not there, it might as well not exist.

 

[LFI]

To do something ONLY in Opera, wouldn't you just write what you want in Opera, then follow it with a duplicate declaration, but in such a format as it is hidden from only Opera?

--Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[cLFlaVA]

Dave,

yes, presumably. I was unable to find such a convoluted method. I'll have to look through the dithered page Vragabond linked ^ up there.

Admittedly, I have not tested the layout in any Mac browser. However, I see no clear-cut way of hiding things from ONLY OPERA. I guess I'll have to play around with multiple hiding techniques.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]