Re: [css-d] Streching Divs around Floated Divs
Georg Srtun wrote: Using 'overflow:auto/hidden' for containing floats is a lot of fun, and in many cases it'll actually work. However, it is not a reliable solution, and has to be tested to death across browser-land - in each case. So, I use it (at my own risk) - but I won't recommend it for anything but the simplest cases. Georg, thanks for relieving my headaches. In the end, we'll have another float clearing method with some hacks for IEMac, IE/Win5.5, 6, Opera8, and more. Oh, and IE7. Just business a usual. Or the return of the solid clearer. It's really complex, that spiral. Ingo __ 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] :hover pseudo-class in IE
Alisha schrieb:
I just tried to implement a simple change of background color on a a:hover
but i realized it doesn't work at all in IE
#foot img {
border:none
}
#foot a:hover img {
background: #b55ad4;
}
Alisha, i have answered this in the thread [Re: [css-d] image mouseover
effect with CSS not working] the same day.
hth,
Ingo
__
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] :hover pseudo-class in IE
Bruno Fassino Wrote:
In addition to the advices you have already received, you should also
consider that in general in IE/Win the following doesn't work:
... a:hover descendant-element-of-a { ... }
unless there is also a rule affecting directly
... a:hover { ... }
that is exactly what fixed it. thanks so much. I thought it could've
been something about the set of the rules but I didn't know about this.
Thanks again
*Alisha*
__
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] Streching Divs around Floated Divs
Ingo Chao wrote: Georg Srtun wrote: Using 'overflow:auto/hidden' for containing floats is a lot of fun, and in many cases it'll actually work. However, it is not a reliable solution, and has to be tested to death across browser-land - in each case. So, I use it (at my own risk) - but I won't recommend it for anything but the simplest cases. Georg, thanks for relieving my headaches. You're welcome ;-) In the end, we'll have another float clearing method with some hacks for IEMac, IE/Win5.5, 6, Opera8, and more. Oh, and IE7. IE7 will probably solve itself (more or less) - in quirks mode. Opera, Firefox and Safari are more problematic, as none of them are predictable and stable when given complex layouts. They cut too many corners, and they don't cut the same corners. Just business a usual. That's the fun part... :-) Or the return of the solid clearer. It's really complex, that spiral. Well, yes, it is complex, and hacking around in that mess only makes it worse. Clearing stuff isn't really a problem, but one sure need to know ones way around these browser-specific solutions before releasing problem-solvers into the wild for others to use. Simple test-cases just won't do--unless that's all we'll ever create. Using a *solid clearer* is often the only cross-browser reliable solution - as long as any HasLayout hacks for IE/win are used in a controlled way. Guess that's why I keep the old br / styled as clearer in all my stylesheets--regardless of all the smart solutions that pops up everywhere. However, one can mess up with *solid clearers* too. The closest thing I have found for reliable float-containment is 'floats expands to contain floats'. That one usually only require some minor fixes for IE (win Mac). However, I'm sure someone know how to mess up that one across browser-land too. My general recommendation is: - avoid using CSS-definitions for something they are not *clearly* created for--unless you know exactly what you're doing and how each browser will handle it. - think twice about methods that'll need hacks across browser-land in order to work--unless such hacks are for IE/win only. - don't rely on any browser's handling of anything as the right way--unless it is _perfectly_ in line with the text in the latest revision of the relevant standard. - expect unclear statements in any W3C-standard to be changed in a later revision. Standards rely on actual implementation across browser-land, since W3C can't force any browser to implement anything. regards Georg -- http://www.gunlaug.no __ 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] syntax errors and coding for IE
Dear experts,
As a variation on the underscore hack, I would dearly love to use the
following variation:
#tester{
width : 500px;
[/*ie only*/width: 610px;] or just [width: 610px;]
padding : 50px;
border : 5px solid #ff;
}
or even:
--
#tester{
padding : 50px;
border : 5px solid #ff;
width : 500px;
}
#tester { [/*ie only*/ width: 602px; ] }
-
I find the square brackets to be neat, simple and it makes for readable
and more 'understandable' code. It validates fine and there doesn't
seem to be a problem. However, I do understand that, whereas the
underscore is not reserved for future developments, other characters
such as square brackets are actually considered by the W3C to be syntax
errors at this time (even though, as I said, the markup validates).
Now, I have also been told that the problem will occur when I start to
parse XML - but when is that likely to be? (I have no plans/need to at
this time). If It's going to be five years off, then IE5 and it's kin
will be long gone and I can delete these IE only lines.
So, finally, my question: When do you reckon that using [ ] will be a
problem and in what way, from a practical point of view?
Many thanks,
Bob McClelland
www.gwelanmor-internet.co.uk
__
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] rounded corner problem
I am using CSS and images inspired by a tutorial at alistapart.com to
create rounded box corners for elements on a site I am designing but am
running into problems when I insert content into the box.
Basically, the problem is in FF when I insert content into the divs
controlling the box, it pushes my corners down if the element is a
block-level element. I can get around this if the first item in the
div is a p by applying a left float to the p. However, if the
element is a h2 the float doesn't help and the content is pushed down
anyway.
Any suggestions? Here are the two pages and their relevant code:
http://new.icn.net/hub/index.cfm
div class=contentWrapper style=margin: 15px 0; width: 360px; float:
left; background-color: ##FFF;
div class=content
img class=borderTL
src=#request.images#/whiteOnGreyCornerTL.gif alt=nbsp; width=14
height=14 /
img class=borderTR
src=#request.images#/whiteOnGreyCornerTR.gif alt=nbsp; width=14
height=14 /
p style=float: left; padding-left: 5px;
strongWatch Money Clip/strongbr /
Contemporary silver dial on the Watch Money Clip.
br /
br /
strongFeature Name:/strong blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah
br /
br /
span style=color: red;strongPrice:
$15.00/strong/spanbr /
emSuggested Retail: $35.00/em
/p
div class=roundedCornerSpacernbsp;/div
/div
div class=bottomCorners
img class=borderBL
src=#request.images#/whiteOnGreyCornerBL.gif alt=nbsp; width=14
height=14 /
img class=borderBR
src=#request.images#/whiteOnGreyCornerBR.gif alt=nbsp; width=14
height=14 /
/div
/div
http://new.icn.net/hub/index1.cfm
div class=contentWrapper style=margin: 15px 0; width: 360px; float:
left; background-color: ##FFF;
div class=content
img class=borderTL
src=#request.images#/whiteOnGreyCornerTL.gif alt=nbsp; width=14
height=14 /
img class=borderTR
src=#request.images#/whiteOnGreyCornerTR.gif alt=nbsp; width=14
height=14 /
h2 style=float: left;Watch Money Clip/h2
p style=clear: both; padding-left: 5px;
Contemporary silver dial on the Watch Money Clip.
br /
br /
strongFeature Name:/strong blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah
br /
br /
span style=color: red;strongPrice:
$15.00/strong/spanbr /
emSuggested Retail: $35.00/em
/p
div class=roundedCornerSpacernbsp;/div
/div
div class=bottomCorners
img class=borderBL
src=#request.images#/whiteOnGreyCornerBL.gif alt=nbsp; width=14
height=14 /
img class=borderBR
src=#request.images#/whiteOnGreyCornerBR.gif alt=nbsp; width=14
height=14 /
/div
/div
CSS for both pages
/* ROUNDED CORNERS */
.roundedCornerSpacer {
margin: 0;
padding: 0;
border: 0;
clear: both;
font-size: 1px;
line-height: 1px;
}
/* In the CSS below, the numbers used are the following:
1px: the width of the border
3px: a fudge factor needed for IE5/win (see below)
4px: the width of the border (1px) plus the 3px IE5/win fudge factor
14px: the width or height of the border image
*/
.borderTL, .borderTR, .borderBL, .borderBR {
width: 14px;
height: 14px;
padding: 0;
border: 0;
z-index: 99;
}
.borderTL, .borderBL {
float: left;
clear: both;
}
.borderTR, .borderBR {
float: right;
clear: right;
}
.borderTL {
margin: 0;
padding-left: 1px;
}
.borderTR {
margin: 0;
padding-right: 1px;
}
.borderBL {
margin: -1px 0 0 0;
}
.borderBR {
margin: -1px 0 0 0;
}
/* IE5-5.5/win needs the border scooted to the left or right by an
additional 3px! Why? */
.borderTL {
margin-left: -4px;
ma\rgin-left: -1px;
}
htmlbody .borderTL {
margin-left: -1px;
}
.borderTR {
margin-right: -4px;
ma\rgin-right: -1px;
}
htmlbody .borderTR {
margin-right: -1px;
}
.borderBL {
margin-left: -3px;
ma\rgin-left: 0px;
}
htmlbody .borderBL {
margin-left: 0px;
}
.borderBR {
margin-right: -3px;
ma\rgin-right: 0px;
}
htmlbody .borderBR {
margin-right: 0px;
}
/* To get around a known bug
[css-d] Re: css-d Digest, Vol 31, Issue 31
I am on vacation from 6/17 - 6/26. I will do my best to respond as soon as possible, please be patient as I may not have internet access from my new home at the current time. I will get back to you on 6/27 if nothing else. Thanks, Nick __ 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] Positioning
Philippe - Yes, that is it exactly. Thank you very much. Cheers - george -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Philippe Wittenbergh Sent: Thursday, June 16, 2005 10:45 PM To: CSS-D Subject: Re: [css-d] Positioning On 17 Jun 2005, at 5:19 am, George Smyth wrote: I have a test page at http://usna.com/temp/test/index.htm and have outlined a couple of sections with red and green borders. The navigation is positioned exactly where I want when I test this with Firefox, but Internet Explorer places the navigation to the right. I know that IE has a bug with figurout out what the width should be that causes this to happen but I just cannot figure out the workaround. This is your problem, I think. http://www.positioniseverything.net/explorer/doubled-margin.html Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ __ 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/
Re: [css-d] Problem with links as block-level elements
Hi Tony,
the only way I know to do that is to nest divs and float:right hence:
div id=1
div id=2
a href=foo.htmlfoo/a
a href=fooyootoo.htmlfooyootoo/a!--this is floated right--
/div
a href=fooyoothree.htmlfooyoothree/a!--this is floated right--
/div
If there's a better way to approach this type of layout, I'd really
appreciate hearing about it
The way I'd approach this is with something like:
ul id=navigation
li
a id=FAQ href=faq.htmlspanFAQ/span/a
/lili
a id=FORPRAC href=forprac.htmlspanFor Practitioners/span/a
/lili
a id=PAYME href=paymentcalc.htmlspanPayment Calculator/span/a
/lili
a id=CONTA href=contact.htmlspanContact Us/span/a
/li
/ul
then changing the css such that you add:
#navigation li {
margin: 0;
float: left;
}
and remove any mention of margins on the ids of anchors. I'd probably
move those ids to the li elements as well. I've only had a chance to
test this in FF, but I think you should be able to work something out
on that basis.
Phil
__
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] hiding and displaying table rows FF vs. IE
On 17 Jun 2005, at 10:28 pm, Jason Kohls wrote: Hi all, I'm having issues hiding and displaying table rows contained within a tbody, specifically, Gecko-based browsers. the default value for table rows in Gecko browsers, and Safari, Opera (?) is display:table-row. (not display:block) This works fine in IE; the rendering order is maintained and life is wonderful. In FF, however, the display: none is taking it out of the rendering context (like it's supposed to) so when I change the display/visibility attribute, the now visible tbody/tr's show up last in the rendering order (below the tfoot even). You set the table row to block, meaning it is not part anymore from the table formatting context, and is moved out of the table. In your js function event set it the display value to: '' - an empty string, the default value for the UA would take over. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ __ 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] Multiple columns, equal heights
Alexander Khost wrote: Does anyone know of a way to create a cross-browser compliant three column layout using floats (currently, I'm using the template found at: http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html) that have equal sized heights without using a background image to make it look like they're the same height and not using JavaScript? How stable did you need that to be? I'm not being facetious, but without using images it's going to get dicey and I would look closely at the complexity of the CSS and the scope of the hacks. Obviously you feel that staying away from javascript is important, but it is the most stable solution. So I'll show you an example anyway :-) http://www.projectseven.com/tutorials/css/pvii_columns/index.htm Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ 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] Width issue in IE
On Fri, 17 Jun 2005 12:01:48 -0400, Lincoln Dunn [EMAIL PROTECTED] wrote: I'm looking for an assist on my novice-esque foray into building using CSS, rather than good ol' reliable tables. (And yes, I know I cheated by using a table for the three column layout. Sue me. :) http://leapontheweb.com/rrvsc/ Lincoln [EMAIL PROTECTED] -- http://www.dlaakso.com/ __ 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] broken text in FF
Carsten Peters schrieb:
the Navi on the Site http://www.schulsport-nrw.de/ shows a strange
effect in Firefox 1.0.4.:
The text of the flyout list items is broken at the border of the the
scrolling div underneath.
I think the overflow: auto on the underlying box causes this problem.
By removing the overflow:auto declaration from
.Scroll {...}
#start .Scroll {...}
the problem is fixed. This is of course not a workaround, but maybe a
start to have a look at. It is not triggered by the navigation itself.
Don't know how to stabilize it with overflow:auto, I have changed the
preceding elements of div.Scroll (h2) to have non-fractional
margins/font-sizes with some avail, but the problem reoccurs on another
text zoom.
maybe this is related to the FF overflow:auto flicker someone reported,
but I have no link to follow.
you should definitely try to narrow the trigger down in a simplified
testcase. There is no need for a navigation to reproduce it.
Ingo
__
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] Multiple columns, equal heights
On Fri, 17 Jun 2005 11:39:27 -0400, Alexander Khost [EMAIL PROTECTED] wrote: Does anyone know of a way to create a cross-browser compliant three column layout using floats (currently, I'm using the template found at: http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html) that have equal sized heights without using a background image to make it look like they're the same height and not using JavaScript? Thanks. I believe these can be done without images: http://www.positioniseverything.net/piefecta-rigid.html http://positioniseverything.net/articles/sidepages/jello-piefecta-simple.html Regards, David Laakso -- http://www.dlaakso.com/ __ 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] float problem in FireFox
first of all, here is the document where i experience the problem http://www.alisha.it/cv.htm and here is the css http://www.alisha.it/style.css the problem is that the text doesn't relly flow around the floated image. anyone has any suggestion about it? sorry if i sound so newbie :) *Alisha* __ 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] Dilema FF
I have a weird dilema, I created a simple layout and everything works in IE but it brakes in FF. The top row links and a form. If anyone has a chance to take a look at: HTML: http://www.helmutgranda.com/csstest/ CSS: http://www.helmutgranda.com/csstest/css/nextiocss.css I am going to recreate the layout because I have no idea where it breaks, while I do that I was wondering if some one with more experience and a keen eye could catch the mistake, because I am 0.o TIA! Helmut __ 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] having a problem with z-index
Hello,
I'm creating a navigation piece here at work and I'm close to done.
However, there's a problem that I'm assuming has something to do with
the way z-index is inherited from ancestor elements, but I could be way
off. Our client is only concerned with Internet Explorer. While I would
very much like this to work on both IE and more standards-compliant
browsers, IE is all that really matters to me right now.
First, here's what I have:
http://www.sims.berkeley.edu/~french/css/result.html
Now a description of the problem: the first navigation element, entitled
By Author, has a + icon. Click that to see what I'm trying to do, as
well as the problem I'm having. Clicking the + icon reveals a list of
authors, which is right now just a list of dummy links. The problems are
obvious (when viewed on IE -- there's a ton of other problems when
using, say, Firefox):
1. The containing divs -- in this case .leftNav and
.viewSelectionControls are blowing out to the right.
2. The elements underneath the By Author element are being pushed down.
Instead, the fly out menu that appears after a click of the + should
be rendered on top of everything else. Clicking the + icon calls a
javascript function -- all it does is dynamically set some styles. the
function is here, and is also in the head element of the html document
itself.
function toggleTaxMenu(layer) {
if (document.getElementById) {
var newStyle = document.getElementById(layer).style;
newStyle.display = newStyle.display ? : block;
newStyle.zIndex = newStyle.zIndex ? : 1;
newStyle.left = newStyle.left ? : 208px;
newStyle.top = newStyle.top ? : -27px;
newStyle.backgroundColor = newStyle.background ? : white;
newStyle.border = newStyle.border ? : solid 1px black;
newStyle.width = newStyle.width ? : 500px;
}
}
any clue as to why this is happening would be *greatly* appreciated.
thank you for reading this far!
best regards,
--bill
__
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] CSS button help!
(note: don't look at this in FF or Opera - haven't gotten to them yet- you'll hurl) Hi. My problem: I want a button that looks like this: http://www.steeloaklimited.com/houseplantrends/button.html . Yes - this is a test page of mine, and the button works perfectly. Hover over it - try it. So what's the problem you ask? If you take the button and move it to another page - say this one: http://www.steeloaklimited.com/houseplantrends/tables.html you'll notice what happens - BUT only in IE piece of garbage..When you hover over it, the bottom right background image goes haywire and covers the bottom half of the text in the button. Now, if you press back or forward on IE's browser, and then come back to the page, the problem is gone. If you refresh it, the problem comes back. I was all happy that I actually got the button to look like that. Then I saw that. Ugh.why does it work on one page and not work on the other? The CSS is in with the source for button.html. and my biggest question: how do you make a button like this with divs? I did it, but I resorted to foul trickery - negative margins and such. It might look fine by itself on a blank page, but it leaves spaces and gaps when crammed in with other stuff on the same page. I kinda took some ideas from the sliding doors technique - but I suck. _ Is your PC infected? Get a FREE online computer virus scan from McAfee Security. http://clinic.mcafee.com/clinic/ibuy/campaign.asp?cid=3963 __ 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] Div inside another div not sizing correctly in IE?
The best way to show you the problem is by an example so please refer to the
HTML code below.
Looking at the code below when you resize the browser window so that it is
smaller than the green dashed content div the inner div which is red does not
stay at 100% of its parent (content) div and it resizes to browser windows
client area. On browsers other than IE however the inner div stays at 100% of
its parent content div. Which is the correct behavior? How can I make IE
to also keep the inner red div at 100% of its parent div size?
Thanks
Ben
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
html
head
titleTest: Width and Overflow/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
meta name=author content=J.Tremmel
style type=text/css
body{ color:#040; background:#FFF; font:.9em/1.2 sans-serif;
margin:0; }
table { border:1px solid #888; width:100%; }
td, th { border:1px solid #DDD; white-space:nowrap; }
/* table display format is needed for FireFox to work correctly */
#keepInside { display:table ; margin: 15px 15px 0px 15px;}
#content{ border: 12px dashed #AFA; }
#innerDiv { border: 2px solid red; }
/style
/head
body
div id=keepInside
div id=content
div id=innerDivLorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat./div
br
table
trthA table with a long (non-wrapping) row/th/tr
tr
tdLorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreethellip;/td
/tr
/table
/div
/div
/body
/html
__
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] What display bug is this in IE?
Try adding display: inline to anything that has a float with margins. Sorry, I posted this earlier, but the site was moved to a test folder until it goes live - http://www.yachadindustries.com/test/ The right column is floated over, and in IE 6 there's extra padding being shown there - I've isolated the problematic code, but what is the best way (hack) to fix this? I'm unsure as to what bug is rearing it's head here, so I've been hard pressed to find the solution. __ 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] Dilema FF
David, Thanks for your feedback and for catching the bug. While I was working on this layout I must have left the possition:relative by mistake. Also thank you for your tips and comments. the main navigation will be actual graphics and that is why I havent used a list. Could you elaborate a little more about the difference between XML foo/ and HTML foo. To be honest I never hreard of it and I would like to understand a better. Thanks again! Helmut. - Original Message - From: David Dorward [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Friday, June 17, 2005 5:07 PM Subject: Re: [css-d] Dilema FF On 6/17/05, Helmut HG [EMAIL PROTECTED] wrote: I created a simple layout and everything works in IE but it brakes in FF. The top row links and a form. HTML: http://www.helmutgranda.com/csstest/ First impression: My goodness the fonts are tiny (its usually a good idea to stick to 1em for body text, and avoid px/pt units altogether). Glancing at the source code, the first thing that jumps out at me is you use of XML style self-closing tags (foo/), this is wrong in HTML (where it means something rather different), use plain old foo instead. You have machine detectable syntax errors: http://validator.w3.org/check?verbose=1uri=http%3A//www.helmutgranda.com/csstest/ Why isn't your list of menu items marked up as such? http://css.maxdesign.com.au/listamatic/ Taking the (apparently pointless) position: relative off the #bodyholder seems to fix your problem. I'm not sure why. Possibly a Gecko bug. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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/
Re: [css-d] form submit button taking on css of input
On 6/17/05, Bruce Gilbert [EMAIL PROTECTED] wrote:
the xhtml is:input src=/images/submit.gif alt=Submit
class=submit type=image name=submit /
and the css is:
input img.submit{
width:58px;
height:27px;
margin-left:30em;
}
'input img.submit' means An img tag inside an input tag, where
the img tag has 'submit' as its class. What you want is
'input.submit', which means an input tag with 'submit' as its
class.
--
May the forces of evil become confused on the way to your house.
-- George Carlin
__
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] Flexible (minimal) width. How to make compliant browsers misbehave like IE ?
On 6/18/05, Brian Lowe [EMAIL PROTECTED] wrote:
OK, here's an example I'm trying to get up using nested ULs and example
suckerfish CSS menus.
http://www.pals.nhs.uk/demo/check.htm
http://www.pals.nhs.uk/demo/css/pals.css
http://www.pals.nhs.uk/demo/css/pals-menu.css
I *want* each top level menu item to be as small as possible but to hold its
full text caption.
If I set
width: 2em;
Then IE misbehaves and expands the block element to fit the content, but FF
NS and Op *all* stick with 2em and my menu looks rubbish.
Of course I could set a wider width for those and frig it for IE using
width: 15em;
width: expression(2 + 'em');
But then FF NS and Op all use 15em and my menu still looks rubbish.
If I use
width: auto;
then they all use 100% so I'm screwed again.
So, how do I get the 'compliant' browsers to fail in the same way that IE
does so effortlessly?
Or...
What is the 'correct' syntax to tell compliant browsers that I want the
block to be as wide as the text (+padding) but no wider?
As you have already observed, IE processes width as it ought to
handle min-width (which it totally ignores.
so the following should do what you want::
foo {min-width:2em;} /* used by compliant browsers, ignored by ie*/
* html foo {width:2em;} /* hack - seen only by IE */
You will need to check behaviour on IE/Mac.
--
Richard Grevers
New Plymouth, New Zealand
Orphan Gmail invites free to good homes.
__
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] float problem in FireFox
On 18 Jun 2005, at 6:52 am, Bruno Fassino wrote:
The only workaround that I know is:
li {
-moz-float-edge: content-box;
}
Which *is* a good solution.
which makes the lis to behave correctly in presence of floats.
That's a
Mozilla proprietary property so unfortunately it doesn't validate.
You may
prefer restructuring a bit your markup to avoid this situation. Maybe
there
are other workarounds, I don't know.
Given that there is no padding nor borders, one can also use
li {
width:100%;
}
That worked for me when I originally had to work around this bug.
But you must hide that from older browsers like IE Mac and Win.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
__
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] Re: form submit button taking on css of input
'input img.submit' means An img tag inside an input tag, where
the img tag has 'submit' as its class. What you want is
'input.submit', which means an input tag with 'submit' as its
class.
hmmm. I know have for the xhtml
input class=submit src=/images/submit.gif alt=Submit
type=image name=submit /
and the css is:
input.submit{
width:58px;
height:27px;
margin-left:60em;
}
the button is still not taking on these attributes. What am I STILL
doing wrong??
http://www.inspired-evolution.com/Contact.php
--
::Bruce::
__
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] Re: form submit button taking on css of input
On 6/17/05, Bruce Gilbert [EMAIL PROTECTED] wrote:
'input img.submit' means An img tag inside an input tag, where
the img tag has 'submit' as its class. What you want is
'input.submit', which means an input tag with 'submit' as its
class.
hmmm. I know have for the xhtml
input class=submit src=/images/submit.gif alt=Submit
type=image name=submit /
and the css is:
input.submit{
You said different before. Try:
form.info_request input.submit
It needs to be more specific than the other class.
width:58px;
height:27px;
margin-left:60em;
}
the button is still not taking on these attributes. What am I STILL
doing wrong??
http://www.inspired-evolution.com/Contact.php
--
Justin Patrin
__
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] Background image not appearing in IE5 Mac
Hi all,
I'm struggling to get a background-image appearing in IE5 Mac (it's
fine in every other browser under the sun).
The relevant CSS is
#top {
background: transparent url(images/top.gif) top left no-repeat;
padding: 55px 0 0 0;
}
h1 {
background: transparent url(images/masthead.jpg) top left no-repeat;
margin: 0 0 0 67px;
padding: 260px 0 10px 10px;
}
and the HTML
div id=top class=clearfix
h1Paul Grabowsky/h1
/div
Full CSS: http://www.paulgrabowsky.com/new/pg.css
Full HTML: http://www.paulgrabowsky.com/new/
Any ideas?
Cheers,
Virginia
__
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] CSS Expressions
Question about the Doctype needing to be on line 1 in the source.. With ASP, it is standard practice to set your @Language directive at the top of the page. I believe this causes an empty line to be written in the source. Since that is the first thing I usually do in a page, will that still affect IE's Doctype switching? On 6/13/05, Kelly Miller [EMAIL PROTECTED] wrote: If you put ANYTHING before the Doctype, IE6 will shift to quirks mode (page authors complain to Microsoft about this because the XML prolog, which is SUPPOSED to be first in XHTML, will put IE6 in quirks mode). Don Hinshaw wrote: Al Sparber wrote: I won't debate your personal preference versus mine - they both can achieve good results if handled properly. CSS expressions as advertised sometimes on this list lead to slutions that are not clear about quirks mode versus standards mode and can easily cause a recursive loop in IE 6 - freezing the browser. I have a question about this: if using a DOCTYPE of: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; Is there any way to put IE into quirks mode such that CSS expressions can safely be used? Is it even necessary? I am trying to implement a solution using them and do not want to create more problems. Regards, Don -- 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/
Re: [css-d] CSS Expressions
David Marr wrote: Question about the Doctype needing to be on line 1 in the source.. With ASP, it is standard practice to set your @Language directive at the top of the page. I believe this causes an empty line to be written in the source. Since that is the first thing I usually do in a page, will that still affect IE's Doctype switching? No Thierry | http://www.TJKDesign.com __ 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/
