Re: [css-d] I think I need some hacks for IE...?
Thank you Phillippe, those changes made all the difference to the layout. Now I will work on the top navigation with the file you sent. I really wanted to make the top tab with the navigation expand if or when somebody increased the text size, but I couldn't get it to work. On 4/19/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote: A first problem: you are better off declaring a width for the sidebar (#corkboardnav). setting it to the width of the image (173px) would work fine, I think. Second problem: the main contents area becomes to wide in IE. The reason is the width you have declared on your h2. Deleting that width (leave it to the default) fixes that problem, and the main content area jumps back in place. The 3rd problem I see is that navigation box on top of the page. You rely on a couple of properties (min-height, max-height, max-width) that are not supported by IE windows (nor IE mac). You'll need a different approach for this. like floating the mainbox to the right. I'll sent you a modified file off-list. IE win also does not understand the value 'transparent' for border. You'll need to use the background-color instead. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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/
Re: [css-d] I think I need some hacks for IE...?
When I view the modified file, the navigation buttons get stretched across the entire tab in IE/mac (v 5.2). I am on a Mac, and right now I don't have access to a PC... so I'm not sure if this works on the PC version of IE. It looks fine in Safari and Firefox still. This is the original: http://beesknees.net/Imagine/index_test.html and this is the modified: http://beesknees.net/Imagine/imagine.html I had this problem when I first started writing for this navigation, and ended up doing something that didn't seem to make sense that fixed it, like aligning the text in one of the divs to the right, which kept it from stretching. Now it is fixed for Mozilla, but not for IE! Thanks again, GypsiiRose - attached, a modified html file, I've added some comments, starting with /* phiw: next to the things I changed. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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/
Re: [css-d] I think I need some hacks for IE...?
On Apr 20, 2006, at 3:23 PM, GypsiiRose Baptiste wrote:
When I view the modified file, the navigation buttons get stretched
across
the entire tab in IE/mac (v 5.2). I am on a Mac, and right now I
don't have
access to a PC... so I'm not sure if this works on the PC version
of IE. It
looks fine in Safari and Firefox still.
This is the original: http://beesknees.net/Imagine/index_test.html
and this is the modified: http://beesknees.net/Imagine/imagine.html
Oops, I knew I forgot one.
IE Mac is an old browser, and works according to the CSS 2.0 specs,
which *requires* a float to have width declared [1]. Other, more
modern browsers do some shrink wrapping in this case, but not IE Mac.
This will fix it:
/*\*//*/
#mainnav a {float:left;}
/**/
That weird looking comment on the first line is a kind of filter [2];
only IE Mac can see past it. after the rule, add another comment to
close the filter.
IE win is not affected by this problem.
Put that a the end of your stylesheet, and you'll be good to go.
[1] http://www.l-c-n.com/IE5tests/float2misc/#flwidth
[2] http://www.l-c-n.com/IE5tests/hiding/#anshow
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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/
Re: [css-d] I think I need some hacks for IE...?
Oh my goodness, perfect!
And I very much appreciate all the notes and links you included. I like to
understand why I am doing something. So often, the books I have been
reading don't explain the why behind the code, which is frustrating when I
am trying to apply their techniques to other projects.
One last thought, I have tested this on a Mac, in that old cruddy browser
IE, and in Firefox and Safari, and on a PC in IE (you say it works!) and in
Firefox. is there anything else I should be testing in? Do people still
test for Opera?
Thank you so much,
GR
On 4/19/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On Apr 20, 2006, at 3:23 PM, GypsiiRose Baptiste wrote:
When I view the modified file, the navigation buttons get stretched
across
the entire tab in IE/mac (v 5.2). I am on a Mac, and right now I
don't have
access to a PC... so I'm not sure if this works on the PC version
of IE. It
looks fine in Safari and Firefox still.
This is the original: http://beesknees.net/Imagine/index_test.html
and this is the modified: http://beesknees.net/Imagine/imagine.html
Oops, I knew I forgot one.
IE Mac is an old browser, and works according to the CSS 2.0 specs,
which *requires* a float to have width declared [1]. Other, more
modern browsers do some shrink wrapping in this case, but not IE Mac.
This will fix it:
/*\*//*/
#mainnav a {float:left;}
/**/
That weird looking comment on the first line is a kind of filter [2];
only IE Mac can see past it. after the rule, add another comment to
close the filter.
IE win is not affected by this problem.
Put that a the end of your stylesheet, and you'll be good to go.
[1] http://www.l-c-n.com/IE5tests/float2misc/#flwidth
[2] http://www.l-c-n.com/IE5tests/hiding/#anshow
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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/
[css-d] Table to CSS Challenge...
Hello to all, I am trying to create a layout for the site and I run into the following problem: I want to use div (or other elements) to create the same effect as using this table structure: table tr td width=50% Something /td td width=50% Something else/td /tr tr td colspan=2 Large box /td /tr /table I have tried to use to floating divs, one to the left and one to the right both with width 50%, and a static div. While this look OK on IE, is messed up on Mozzilla :( Do you have any suggestions? Also do you know on an example of display: inline-block I was expecing that 2 inline-block divs with a width of 50% will solve my problem... but it didnt. The width is simply ignored. Thank you all :) __ 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/
Re: [css-d] I think I need some hacks for IE...?
GypsiiRose Baptiste wrote: Is there anything else I should be testing in? Do people still test for Opera? Thank you so much, GR You are fine in Opera on my end, in both XP and Xandros Linux on XP. ~dL PS Is there anything other than Opera? __ 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/
Re: [css-d] I think I need some hacks for IE...?
aaah, thank you! I'm glad it works in Opera. sorry if I offended you, I guess I live a little too close to Mtn View, you know - where the Mozilla offices are! I must be brainwashed... On 4/20/06, ~davidLaakso [EMAIL PROTECTED] wrote: You are fine in Opera on my end, in both XP and Xandros Linux on XP. ~dL PS Is there anything other than Opera? __ 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/
Re: [css-d] Table to CSS Challenge...
I have tried to use to floating divs, one to the left and one to the right both with width 50%, and a static div. While this look OK on IE, is messed up on Mozzilla :( This is an easy effect to achieve. Check out the layoutgala entry: http://blog.html.it/layoutgala/LayoutGala27.html Prabhath -- http://nidahas.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/
Re: [css-d] was look with a PC now: HELP
Terri Chicko wrote:
Thank you Georg very much,
Though every time I change something, something else breaks, now the
footer is floating up in Win IE.
See below.
On Apr 19, 2006, at 2:15 PM, Gunlaug Sørtun wrote:
1: remove margins/paddings from body...
2: you may also add styles to the html element. For instance...
Note that you don't _have_ to put any styles on the html element.
body {margin: 0; padding: 0; background-color: #482c00;}
...is what you need, and...
body { margin: 0; padding: 0; background-color: #482c00; font-family:
georgia, serif; }
...is what I would use.
* html #content {margin-left: 0/* new */;}
Because I removed the contact div, The content div moves all the way
left in PC IE with this code.
Removing something as essential as that is bound to create problems in
IE/win.
Once again; look at the example I created. I made changes to solve
problems - I didn't remove anything essential.
I used * html #content {margin-left: 20%/* new */;} it seems to work,
though not that stable.
No surprise... :-)
Looking at what you've got up now, and there are clear signs that you
are using the 'trial and error' method based on what you see on screen
in single browsers. That's what I regard as 'the quick route to complete
disaster', and not one that I will help you - or anyone else, to follow.
You should go back quite a few steps, and try to make sense of what you
had. The closest thing is still the example I created...
http://www.gunlaug.no/tos/alien/jt/test_3040.html
...which is now updated with cross-browser fine-tuning and a more or
less complete CSS clean-up. Lost quite a bit of weight :-)
The source-code line-up is HTMLTidy's doing - on my ordinary settings.
regards
Georg
--
http://www.gunlaug.no
__
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/
[css-d] Can't Absolutely Position a Horizontal UL in layout
I am a bit perplexed on this and would appreciate some help. Please look at
this site, www.shopthevitaminstore.com/index.php
At the top I have a div called masthead within which I placed some items.
Its essentially the header area. In that div I have an absolutely positioned
ul with an id of tabnav
Here is the css for it -
ul#tabnav {
list-style-type: none;
padding:0;
font: bold 11px verdana, arial, sans-serif;
position:absolute;
bottom:30px;
background: transparent url(../images/nav_bg.gif) 3px 1px no-repeat;
border:1px solid red;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: transparent !important;
color: #FF;
margin: 2px 3px 0 2px !important;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #fff !important;
background-color: transparent !important;
text-decoration: none;
padding: 4px 6px;
}
ul#tabnav a:hover {
color: #f9f906 !important;
}
For some reason I can't get it to sit flush against the left side of
masthead. Can anyone tell me why? Thanks so much. Tom
__
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/
Re: [css-d] I think I need some hacks for IE...?
GypsiiRose Baptiste wrote: aaah, thank you! I'm glad it works in Opera. sorry if I offended you, I guess I live a little too close to Mtn View, you know - where the Mozilla offices are! I must be brainwashed... Probably :-) Civilized Opera-users are not easily offended. They know their browsers are outmaneuvering Mozilla/Fx on almost any task - and the rest doesn't matter all that much ;-) Georg -- http://www.gunlaug.no __ 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/
[css-d] Equal Height Columns / One true layout and # top headaches
Hi all,
I have used the technique from
http://positioniseverything.net/articles/onetruelayout/equalheight to make mu
columns equal in height.
Everything works great unless i try to reffer the users to a specific part of
the document using http://example.com/page.html#specific-part address which in
normal circumstances would first load page.html and then automatically scroll
to that part of the markup which has and ID=specific-part.
Here is an example of the problem:
http://www.topsport.bg/news/id_1200860284
http://www.topsport.bg/news/id_1200860284/#divtl1
My English is not very good so I wont'try to explain what happen on the
screen, but I think it's pretty obvious.
The source of the problem is this rule in my frame.css:
.ts-local-navigation,
.ts-main-content-column,
.ts-commercial-column {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
When I remove it from the CSS everythink works ok exept that the columns are
not equal in height.
I can't think of any way to fix this wrong behaviour. The problem occurs in
both IE6 and Firefox1.5 on Windows, and it doesn't affect Opera 8.54 on Windows.
Please CSS gods, help me.
-
Talk is cheap. Use Yahoo! Messenger to make PC-to-Phone calls. Great rates
starting at 1cent;/min.
__
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/
Re: [css-d] Can't Absolutely Position a Horizontal UL in layout
TMH Design wrote:
I am a bit perplexed on this and would appreciate some help.
Please look at this site, www.shopthevitaminstore.com/index.php
At the top I have a div called masthead within which I placed
some items. Its essentially the header area. In that div I
have an absolutely positioned ul with an id of tabnav
ul#tabnav {
list-style-type: none;
padding:0;
font: bold 11px verdana, arial, sans-serif;
position:absolute;
bottom:30px;
background: transparent url(../images/nav_bg.gif) 3px 1px
no-repeat;
border:1px solid red;
}
Add margin:0; to that list.
In Firefox it makes the white space between the tabs and the
green bar disappear, and I'm guessing in Opera it will eliminate
the left margin as well.
If that doesn't do the trick yet, try left:0; in addition.
--
Els
http://locusmeus.com/
http://locusoptimus.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/
[css-d] Site Horizontal Nav Way Out of Whack in Mac
Would somewith please look at this site,
www.shopthevitaminstore.com/index.php in Safari on a Mac. The navigation
looks ok in my IE6 and FF on my windows pc appears just fine. Here is my css
code for the element. Thanks so much!
ul#tabnav {
list-style-type: none;
padding:0;
margin:0;
font: bold 11px verdana, arial, sans-serif;
position:absolute;
bottom:30px;
left:0;
background: transparent url(../images/nav_bg.gif) 3px 1px no-repeat;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: transparent !important;
color: #FF;
margin: 2px 3px 0 2px !important;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #fff !important;
background-color: transparent !important;
text-decoration: none;
padding: 4px 6px;
}
ul#tabnav a:hover {
color: #f9f906 !important;
}
__
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/
Re: [css-d] Equal Height Columns / One true layout and # top headaches
Georgi There is indeed a problem with equal height columns and anchors in Mozilla and IE. There'll be an update to the article addressing this - hopefully by the end of today. Alex __ 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/
Re: [css-d] CSS validation tool question
On 19/04/06, Terri Chicko [EMAIL PROTECTED] wrote:
However when I went to validate the CSS it's OK but I don't
understand these warnings.
What am I doing or not doing?
Line : 12 (Level : 1) You have no color with your background-color :
#strip
#strip {
background-color: black;
}
Once you throw in browser default style sheets and user stylesheets,
you could end up with black on black.
compare to:
#strip {
background-color: black;
color: white;
}
Line : 24 (Level : 1) Same colors for color and background-color in
two contexts a:visited and h1
a:hover {
color : #a9caaf;
background-color : #005d00;
}
h1 {
color : #005d00;
}
This wouldn't be a problem as you can't have an h1 descending from an
anchor and the anchor + hover selector is more specific, but the
validator doesn't know HTML syntax rules so it can't determine that
you won't have an h1 that is a descendent of an a and thus end up with
#005d00 text on a #005d00 background.
--
David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk
__
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/
Re: [css-d] Equal Height Columns / One true layout and # top headaches
Thank you Alex! But unfortunatelly what you say is that there is no fix for the problem. The case we've been having is even more complicated because we used _javascript to make columns equal and the _javascript makes them equal but only once - when the page is loaded. On some of the pages we have divs that are initally (when the page is loaded) hidden and only after the user interacts with the site interface they show. And then the columns are not equal because the one in which the hidden div was is now higher with the height of that hidden element. And in _javascript one cannot listen for an event like elementResize, because everything we got is resize which works only for window resize. I think we are going to use tables for this particular design. Such a petty. Alex Robinson [EMAIL PROTECTED] wrote: Georgi While the update is not published on the PIE server yet, you can see it on my machine http://www.fu2k.org/alex/css/onetruelayout/appendix/equalheightproblems I'd appreciate it if you didn't pass that url on to anyone since that's the correct permanent url. Best wishes Alex - New Yahoo! Messenger with Voice. Call regular phones from your PC and save big. __ 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/
Re: [css-d] Site Horizontal Nav Way Out of Whack in Mac - vitamin
On 06/04/20 05:52 (GMT-0400) Thomas Hall (TMH Design) apparently typed: Would somewith please look at this site, www.shopthevitaminstore.com/ in Safari on a Mac. The navigation looks ok in my IE6 and FF on my windows pc appears just fine. Here is my css code for the element. Thanks so much! Poor with Linux too http://mrmazda.no-ip.com/SS/thomh3.jpg Mozilla 1.7.12 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050921 Epiphany/1.8.0 Even without zooming enough to read anything but the logo (which IE users can't do due to your CSS font-size rules specified in px), the tab text lays over the tabs in an apparently random fashion. http://hsivonen.iki.fi/units/ Seniors need vitamins too, probably more than most people. So making this site senior friendly would probably be in your client's best interest. Here's a howto checklist: http://www.nlm.nih.gov/pubs/staffpubs/od/ocpl/agingchecklist.html -- Have nothing to do with the fruitless deeds of darkness, but rather expose them.Ephesians 5:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ 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/
Re: [css-d] Equal Height Columns / One true layout and # top headaches
Alex Robinson wrote:
There is indeed a problem with equal height columns and anchors in
Mozilla and IE.
Alex, I hope the problem can be addressed with
/* Hide these from IE6+7 via appropriate CC hacking */
#targetcage {
/* just a block placeholder for the a.p. anchor */
/* do not position:relative me */
}
#target {
position: absolute;
/* do not offset me, use the static position instead */
}
p id=targetcage#target - a id=target href=#topReturn to
top/a/p
Works for me here with
- Fx 1.5.0.2 /Mac/PC
- Opera9RCbeta(3345)/Mac
Doesn't hurt:
- Safari 2.0.3
- Opera8.51/Mac/PC
Didn't test it extensively, though.
Ingo
--
http://www.satzansatz.de/css.html
__
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/
Re: [css-d] Equal Height Columns / One true layout and # top headaches
I'd appreciate it if you didn't pass that url on to anyone since that's the correct permanent url. Or rather, not the correct permanent url. Which will be http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems NB. it doesn't exist there. Yet. As to Georgi's predicament, I'll repeat part of what I said to him offlist. If you don't need the vertical alignment of elements within the columns, you could style up the divs using display:table for the browsers that understand it and use the kludge I suggested for IE. Of course, that still leaves the content in the same order as with a table-based layout, raising the question of whether that makes it a worthwhile exercise... Something like this: http://www.fu2k.org/alex/css/cssjunk/moreequalblah Last thing. If someone sends you a message offlist, please don't respond to the list __ 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/
Re: [css-d] I think I need some hacks for IE...?
On 4/20/06 2:49 AM, GypsiiRose Baptiste [EMAIL PROTECTED] wrote: Do people still test for Opera? Looks good in Opera Mac too. I recommend Opera Mac. Try this version: http://snapshot.opera.com/mac/m90b1.html -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.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/
Re: [css-d] Float problems in Firefox 1.5
Ingo Chao wrote: div style=float: left; height:100px; width:100px; background: yellow;/div div style=float: left; pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam luctus urna non sem./p /div If the window is wide enough, the Lorem ipsum stays next to the yellow float. But if the window is narrowed, the Lorem ipsum does not wrap, it just drops under the float. It wraps in IE. I think it's here: http://www.w3.org/TR/CSS21/visudet.html#q8 The available width for the second float is the width of the containing block. Ingo Ingo- I still don't understand why the second floated div, given enough room, would fail to float up next to the first floated div, given the following from the link you provided: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. [0] I'm probably being obtuse, but it appears that the minimum width needed should be the width of the floated div with all possible line breaks, which should be fairly narrow with normal next. In my case it seems that perhaps the browsers are calculating the maximum width without regard to the padding, and then after applying the padding, discover that they do not have enough room for the div to float next to the previously floated div. I tried adding an explicit width:auto; to the #maincontent div, but the results are the same. Only by setting an explicit numeric width does the float move up into its proper position. I also tried removing the right floated graphic and the graphic headline from the #maincontent div and got the same results. Thanks for looking at this [1]! Regards, Ron [0] http://www.w3.org/TR/CSS21/visudet.html#q8 [1] original page in question: http://tinyurl.com/h4ltr __ 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/
Re: [css-d] top banner image and link - trisms
Hi Felix, I do have Firefox Web Developer. I use it to validate my pages. I continued to have problems with the rightnav, so I have gone down to 2 columns. http://www.trisms.com/New/Max.html http://www.trisms.com/New/2column.css I will try your ideas on changing the widths and margins to ems, and get back with you. Thank-you for your time and help, Mary __ 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/
[css-d] IE floated columns collapsing
Hello all, At http://www.christianmontoya.com, I have some floated columns in the footer. The markup is not pretty, as I had to do a lot of hooks to do multiple background images. The footer has 3 columns, followed by a clearing BR, and then 3 more columns, followed by another clearing BR, but somewhere after the first 3, two of the 3 wrapper divs are collapsing in IE 6, and you can see this because the two images seperating the columns don't go all the way to the bottom. I thought I had an idea as to what the problem is, but I couldn't figure it out. Any help is appreciated. Thanks in advance. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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/
Re: [css-d] Float problems in Firefox 1.5
Pringle, Ron wrote: Ingo Chao wrote: div style=float: left; height:100px; width:100px; background: yellow;/div div style=float: left; pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam luctus urna non sem./p /div If the window is wide enough, the Lorem ipsum stays next to the yellow float. But if the window is narrowed, the Lorem ipsum does not wrap, it just drops under the float. It wraps in IE. http://www.w3.org/TR/CSS21/visudet.html#q8 The available width for the second float is the width of the containing block. I still don't understand why the second floated div, given enough room, would fail to float up next to the first floated div, given the following from the link you provided: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. [0] I'm probably being obtuse, but it appears that the minimum width needed should be the width of the floated div with all possible line breaks, which should be fairly narrow with normal next. I think it doesn't matter how narrow the preferred minimum width is, because this min-width is compared with a max-relationship to the available width: Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).[0] [0] http://www.w3.org/TR/CSS21/visudet.html#q8 meaning that the inner parenthesis max(preferred minimum width, available width) = max (with all possible line breaks, width of containing block) = max (width of the widest word, width of containing block) = width of containing block inserted into the outer parenthesis min(width of containing block, preferred width) = min(width of containing block, all the words from Lorem...vestibulum) = width of containing block shrink-to-fit width = width of containing block in your example. In my example above, it's possible to have the loremipsum right to the yellow float, because it is a short paragraph, which can be narrower than the containing block, if the window is wide enough. shrink-to-fit width = width of all the words And if I am wrong, it doesn't matter, because no one reads a post with more than one formula. Ingo -- http://www.satzansatz.de/css.html __ 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/
[css-d] placing a header image thru CSS?
Hello again, I got some help from this list once before, in order to
position a header image through CSS (rather than have it on every single
page... this image is updated once a month!).
Here's the code that someone was so kind to give to me to try:
#masthead {
background-image:url(../images/craftwebheader_bytara.jpg);
background-repeat: no-repeat;
background-position: center;
}
So I did this, but here's my unfortunate result (it's obviously not live, so
you'll have to look at my screenshot of it):
http://i78.photobucket.com/albums/j86/thadley/web_problem.gif
As you can see, the problem is that the masthead does not have enough
width to accomodate the graphic. What CSS would I use to correct this?
Thank you.
__
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/
Re: [css-d] placing a header image thru CSS?
Tara,
You need to specify the height and width of the #masthead, and possibly put
display: block.
The div is not quite smart enough to know the size of the image unless you
specify it.
Hope this helps.
Thank you!
Neill Harmer
[EMAIL PROTECTED]
www.back40design.com
Back40 Design, Inc.
p. 405/478-4080
f. 405/478-0419
Innovation distinguishes between being a leader and a follower.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Tara Hadley
Sent: Thursday, April 20, 2006 10:49 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] placing a header image thru CSS?
Hello again, I got some help from this list once before, in order to
position a header image through CSS (rather than have it on every single
page... this image is updated once a month!).
Here's the code that someone was so kind to give to me to try:
#masthead {
background-image:url(../images/craftwebheader_bytara.jpg);
background-repeat: no-repeat;
background-position: center;
}
So I did this, but here's my unfortunate result (it's obviously not live, so
you'll have to look at my screenshot of it):
http://i78.photobucket.com/albums/j86/thadley/web_problem.gif
As you can see, the problem is that the masthead does not have enough
width to accomodate the graphic. What CSS would I use to correct this?
Thank you.
__
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/
__
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/
[css-d] Paging Dr. CSS! Paging Dr. CSS!
I'm trying to set up page margins via CSS. Both Cascading Style Sheets: The Definitive Guide (Meyer, 2004) and Cascading Style Sheets (Bos Lie, 2005) mention @page. The examples, however, in both books, however, are contained in style elements. I put this in my external style sheets and it didn't work (I didn't think it would). Is there an equivalent for use with external style sheets? -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ 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/
Re: [css-d] Paging Dr. CSS! Paging Dr. CSS!
On 20/04/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: I'm trying to set up page margins via CSS. Both Cascading Style Sheets: The Definitive Guide (Meyer, 2004) and Cascading Style Sheets (Bos Lie, 2005) mention @page. The examples, however, in both books, however, are contained in style elements. I put this in my external style sheets and it didn't work IIRC, style element default to media=all while external stylesheets default to media=screen, so use the media attribute or @media to make the style sheet apply to print and I think you will be alright. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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/
[css-d] Safari 2.0.3 doesn't see a:hover inside of LI
I have a header that has several top-level links like:
li onmouseover=subNavMouseover('winSubNav');
onmouseout=subNavMouseout();a href=/windows/ id=winMainNavWindows/a
ul id=winSubNav style=display: none;
lia href=/windows/2003/2003/a
a href=/windows/xp/XP/a
a href=/windows/2000/2000/a
a href=/windows/nt/NT/a
a href=/windows/me-98-95/ME/98/95/a
a href=/windows/Windows-All/a/li
/ul
When the user mouse-overs each top-level LI it toggles javascript to show the
appropriate submenu (simply setting proper display: none/block values).
Everything works fine in IE and Firefox, and the toggle/display stuff works
fine in safari. However, the secondary LIs have an a:hover { color: #fff; }
which shows up properly in both IE and Moz. However, Safari doesn't display the
hover color. When you click a sublink the a:active color works fine, and if I
try setting an onmouseover=alert() to the A element, it works fine. Safari
just won't recognize the a:hover element for the header.
I have noticed that it works fine if the menu is set to display: block
initially. If someone hovers over another top-level link and I use javascript
to set sub-level UL to style.display =block, that's when the a:hover doesn't
work.
Any ideas why safari won't show a:hover in a UL set to display: block by
javascript?
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.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/
Re: [css-d] Paging Dr. CSS! Paging Dr. CSS!
The example in Eric's book is: @page { size: 7.5in; margin: 0.5in; }
What would the equivalent external style sheet use?
--
Marc Luzietti
[EMAIL PROTECTED]
Sent by: [EMAIL PROTECTED]
04/20/2006 12:51 PM
To: css-d@lists.css-discuss.org
cc:
Subject:[css-d] Paging Dr. CSS! Paging Dr. CSS!
I'm trying to set up page margins via CSS. Both Cascading Style Sheets:
The Definitive Guide
(Meyer, 2004) and Cascading Style Sheets (Bos Lie, 2005) mention
@page. The examples,
however, in both books, however, are contained in style elements. I put
this in my external
style sheets and it didn't work (I didn't think it would).
Is there an equivalent for use with external style sheets?
--
Marc Luzietti
__
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/
[css-d] IE4 and CS?
I've just been told that the site I'm working on - the target browser is *IE4*. I'm like, you've got to be kidding me. Would anyone here have good links or information on what happens with a pure CSS layout when using IE4? Is it like Netscape 4 when it comes to CSS? I haven't even seen one of these in years - much less have the ability to actually view and code to it's specifics. Any info on the relationship between IE4 and CSS would be really appreciated. ~Shelly __ 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/
[css-d] background images missing in IE
Anyone know what I need to do to get IE to display these background
images? It's the yellow triangle things above the navigation.
TIA
-Christy
http://ee.berkshireradio.org/index.php/main/test/
CSS:
#navcontainer{
text-align: left;
position: absolute;
top: 20px;
left: 550px;
}
ul#navlist{
margin: 0;
padding: 0;
white-space: nowrap;
}
#navlist li{
display: inline;
list-style-type: none;
font: 16px Geneva, sans-serif;
color: #666;
text-decoration: none;
letter-spacing: .1em;
padding: 0 15px;
background: url(i/nav_bkg.gif) no-repeat top center;
padding-top: 22px;
}
#navlist li a{
color: #999;
text-decoration: none;
border: 0;
}
#navlist a:hover{
color: #c03;
}
__
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/
Re: [css-d] Safari 2.0.3 doesn't see a:hover inside of LI
Updated:
The a:hover still won't show at all in Safari for me when the UL/LI the link
sits within was set to display: block by javascript. However, setting a
onmouseover=this.style.color = '#fff' works fine, but is more code than I
want and seems very unnecessary. I tried creating a test page for safari just
to make sure this isn't a bug, and it worked fine. It's something in my code
that somehow only affects safari.
Has anyone ever seen this? I don't see why safari will recognize the
onmouseover, but not the a:hover?
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.com
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Mike Botsko
Sent: Thursday, April 20, 2006 9:57 AM
To: CSS Discuss (E-mail)
Subject: [css-d] Safari 2.0.3 doesn't see a:hover inside of LI
I have a header that has several top-level links like:
li onmouseover=subNavMouseover('winSubNav');
onmouseout=subNavMouseout();a href=/windows/ id=winMainNavWindows/a
ul id=winSubNav style=display: none;
lia href=/windows/2003/2003/a
a href=/windows/xp/XP/a
a href=/windows/2000/2000/a
a href=/windows/nt/NT/a
a href=/windows/me-98-95/ME/98/95/a
a href=/windows/Windows-All/a/li
/ul
When the user mouse-overs each top-level LI it toggles javascript to show the
appropriate submenu (simply setting proper display: none/block values).
Everything works fine in IE and Firefox, and the toggle/display stuff works
fine in safari. However, the secondary LIs have an a:hover { color: #fff; }
which shows up properly in both IE and Moz. However, Safari doesn't display the
hover color. When you click a sublink the a:active color works fine, and if I
try setting an onmouseover=alert() to the A element, it works fine. Safari
just won't recognize the a:hover element for the header.
I have noticed that it works fine if the menu is set to display: block
initially. If someone hovers over another top-level link and I use javascript
to set sub-level UL to style.display =block, that's when the a:hover doesn't
work.
Any ideas why safari won't show a:hover in a UL set to display: block by
javascript?
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.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/
__
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/
Re: [css-d] IE floated columns collapsing
Christian Montoya wrote: At http://www.christianmontoya.com, I have some floated columns in the footer. The markup is not pretty, as I had to do a lot of hooks to do multiple background images. The footer has 3 columns, followed by a clearing BR, and then 3 more columns, followed by another clearing BR, but somewhere after the first 3, two of the 3 wrapper divs are collapsing in IE 6, and you can see this because the two images seperating the columns don't go all the way to the bottom. The innermost div.inside needs layout. zoom:1 seems to fix it via domexplorer. You cannot expect IE6+7 to contain 'such' complex structures like floats in a non-layout box. Ingo -- http://www.satzansatz.de/css.html __ 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/
Re: [css-d] fluid 3 col layout with over-sized content
jack fredricks wrote: Hi all, I've been having problems getting the center column in my 3 col layouts to deal with over-sized content, ie an image with a width of 2000px. I'm about to give up, and when i do... it's time to come here :) I've tried about a dozen well known layouts, and then about 6 'lessor' ones from the wiki, and they all break in some way when this over-sized content is present. So..does anyone know of a layout that meets these requirements; 1. 3 cols 2. fluid center 3. fixed/em side cols, doesnt really matter 4. layout holds when center col is pushed wider by content ( wide image/non-breaking text) Jack, There was a similar thread not too long ago. Here was my response, pointing to some appropriate layouts: http://archivist.incutio.com/viewlist/css-discuss/73051 Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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/
[css-d] Page Break properties
Listers, Are the page-break properties widely supported? Or at least in IE6, Safari and maybe Opera (Win/Mac)? Any resources on their use besides the w3c site? TIA -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.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/
Re: [css-d] IE floated columns collapsing
On 4/20/06, Ingo Chao [EMAIL PROTECTED] wrote: Christian Montoya wrote: At http://www.christianmontoya.com, I have some floated columns in the footer. The markup is not pretty, as I had to do a lot of hooks to do multiple background images. The footer has 3 columns, followed by a clearing BR, and then 3 more columns, followed by another clearing BR, but somewhere after the first 3, two of the 3 wrapper divs are collapsing in IE 6, and you can see this because the two images seperating the columns don't go all the way to the bottom. The innermost div.inside needs layout. zoom:1 seems to fix it via domexplorer. You cannot expect IE6+7 to contain 'such' complex structures like floats in a non-layout box. Thanks, problem solved! -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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/
Re: [css-d] Page Break properties
According to Dreamweaver (and my own experiences), IE6 does not support page-break-inside at all, and doesn't support AVOID for page-break-after or page-break-before (Dreamweaver says an empty entry will achive the same result, however). This is very annoying for me. page-break-before:always does work, though. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 Tom Livingston [EMAIL PROTECTED] Sent by: [EMAIL PROTECTED] 04/20/2006 03:34 PM To: css-d@lists.css-discuss.org cc: Subject:[css-d] Page Break properties Listers, Are the page-break properties widely supported? Or at least in IE6, Safari and maybe Opera (Win/Mac)? Any resources on their use besides the w3c site? TIA -- Tom Livingston __ 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/
[css-d] What are these weird classifiers?
Earlier today, while reviewing the Web site of a potential client, I saw in the HTML source code several classifier names that looked wrong to me. These are copied from the potential client's HTML page: div class=headerLogo pink div class=pseudoH1 white div class=menuItem pseudoH2A div class=float-wrap div class=wide bottom clear Spaces. Is that allowed? That would mean multiple classifiers are being called into play, since div.headerLogo and pink both exist but div.headerLogo pink does not exist on the CSS sheet? Odd use of pseudo-classes (float, wrap, clear?). How well will stuff like this degrade for older browsers? Will it degrade at all? I've noticed some display issues between FF and IE (FF shows coding errors, text overlaps other text in places for example but in IE everything looks 'right'). There are also some MsoNormal tags here there, like someone did a poor job of cleaning them out, missed a couple. Weird. Reese -- Ink Works http://www.inkworkswell.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/
Re: [css-d] What are these weird classifiers?
Multiple classes are not only allowed, they are awesome and powerful. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 Reese [EMAIL PROTECTED] Sent by: [EMAIL PROTECTED] 04/20/2006 04:37 PM To: css-d@lists.css-discuss.org cc: Subject:[css-d] What are these weird classifiers? Earlier today, while reviewing the Web site of a potential client, I saw in the HTML source code several classifier names that looked wrong to me. div class=headerLogo pink div class=pseudoH1 white div class=menuItem pseudoH2A div class=float-wrap div class=wide bottom clear Spaces. Is that allowed? Reese __ 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/
Re: [css-d] What are these weird classifiers?
Reese wrote: Earlier today, while reviewing the Web site of a potential client, I saw in the HTML source code several classifier names that looked wrong to me. These are copied from the potential client's HTML page: div class=headerLogo pink div class=pseudoH1 white div class=menuItem pseudoH2A div class=float-wrap div class=wide bottom clear Those are all valid class names. wide bottom clear refers to three separate classes, named wide, bottom and clear respectively. From the W3C CSS 2 spec [0]: In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. Regards, Ron [0] http://www.w3.org/TR/REC-CSS2/syndata.html [section 4.1.3 Characters and Case] __ 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/
Re: [css-d] What are these weird classifiers?
well, i can give it a shot at least!
On 4/20/06, Reese [EMAIL PROTECTED] wrote:
Earlier today, while reviewing the Web site of a potential client, I
saw in the HTML source code several classifier names that looked wrong
to me. These are copied from the potential client's HTML page:
div class=headerLogo pink
they probably define .headerLogo properties somewhere, and it also
gets the rules of the .pink class.
div class=pseudoH1 white
odds are instead of using a proper h2 tag, they stuck this div in
there instead. this is a guess, but i'd say a better way to do this
is h2 class=white, noting that having a class of white isn't
good itself. oh yes, so this has a class of .pseudoH1 where it
probably gives this div all the rules of a header. it also has a
class of .white.
div class=menuItem pseudoH2A
same thing as before, but i take it this is a menu item since you also
left the a there, and of course i could probably guess from the
class name. O:-) i assume they are using a div for every menu
item, when better coding would be to make each of these a list item,
like so:
li class=menuItema href=menu text/a/li
div class=float-wrap
no idea what they're doing here, unless they think they need to put
every float in a container div.
div class=wide bottom clear
i assume they're clearing a float. they probably specify a .wide
class with width: 100%; somewhere, and .bottom is probably something
like position: absolute; bottom: 0; somewhere. clear probably has
clear: both;. yes you can have all three classes. :)
Spaces. Is that allowed? That would mean multiple classifiers are
being called into play, since div.headerLogo and pink both exist
but div.headerLogo pink does not exist on the CSS sheet?
headerLogo is not a parent of pink. if you want to have them both
specifying a style, you'd need .headerLogo.pink with no spaces. you
could separate all .headerLogo styles from all .pink styles, and when
the two merge on one element, have styles for that too, such as:
.headerLogo {font-size: 1.4em;}
.pink {color: pink;}
.headerLogo.pink {border-bottom: 1px solid black;} /* this is only
picked up by elements that have both headerLogo and pink as their
class */
Odd use of pseudo-classes (float, wrap, clear?). How well will stuff
like this degrade for older browsers? Will it degrade at all?
the names of the classes have nothing to do with whether they degrade
well. at least, they shouldn't unless i missed something (in which
case someone else will let you know, because they won't let that
slide). :)
hth!
__
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/
Re: [css-d] What are these weird classifiers?
From the W3C CSS 2 spec [0]: In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. And from W3C CSS2.1 spec [1] (which should be preferred, despite confusing status): CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. Notably, underscore is allowed too. [1]http://www.w3.org/TR/CSS21/syndata.html Regards, Rimantas -- http://rimantas.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/
Re: [css-d] What are these weird classifiers?
At 16:45 20-04-06, [EMAIL PROTECTED] wrote: Multiple classes are not only allowed, they are awesome and powerful. Okay. I didn't know they were allowed, I can envision how powerful they can be. At 16:50 20-04-06, Pringle, Ron wrote: div class=wide bottom clear Those are all valid class names. wide bottom clear refers to three separate classes, named wide, bottom and clear respectively. As an example of the above multiple classes, right. First time I've seen this, if it's been talked about on this list I missed it. I did not find anything with a quick Google search before posting my query, either. Searched with the wrong terms, probably. At 16:52 20-04-06, cj wrote: well, i can give it a shot at least! ;) You confirmed what I was concluding, so thanks one all! Reese -- Ink Works http://www.inkworkswell.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/
Re: [css-d] Safari 2.0.3 doesn't see a:hover inside of LI
Ok, let me ask this in a simpler way.
Why would safari recognize:
onmouseover=this.style.color='#fff'
but not
a:hover {
color: #fff;
}
?
I've defined a:link, a:visited, a:active in the same css file before defining
the a:hover. The hover works perfectly in both Firefox and IE. The element sits
inside a UL/LI that is set to display: none when the page loads. If you hover
over a navigation menu, javascript sets the UL/LI to display: block.
If this same menu were set to display: block; when the page loaded, everything
would work fine. It seems that the javascript setting
document.getElementById(problemNav).style.display = block somehow prevents
safari from seeing the :hover. Remove the javascript and set it to display:
block, and it works.
Any ideas?
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.com
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Mike Botsko
Sent: Thursday, April 20, 2006 11:56 AM
To: CSS Discuss (E-mail)
Subject: Re: [css-d] Safari 2.0.3 doesn't see a:hover inside of LI
Updated:
The a:hover still won't show at all in Safari for me when the UL/LI the link
sits within was set to display: block by javascript. However, setting a
onmouseover=this.style.color = '#fff' works fine, but is more code than I
want and seems very unnecessary. I tried creating a test page for safari just
to make sure this isn't a bug, and it worked fine. It's something in my code
that somehow only affects safari.
Has anyone ever seen this? I don't see why safari will recognize the
onmouseover, but not the a:hover?
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.com
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Mike Botsko
Sent: Thursday, April 20, 2006 9:57 AM
To: CSS Discuss (E-mail)
Subject: [css-d] Safari 2.0.3 doesn't see a:hover inside of LI
I have a header that has several top-level links like:
li onmouseover=subNavMouseover('winSubNav');
onmouseout=subNavMouseout();a href=/windows/ id=winMainNavWindows/a
ul id=winSubNav style=display: none;
lia href=/windows/2003/2003/a
a href=/windows/xp/XP/a
a href=/windows/2000/2000/a
a href=/windows/nt/NT/a
a href=/windows/me-98-95/ME/98/95/a
a href=/windows/Windows-All/a/li
/ul
When the user mouse-overs each top-level LI it toggles javascript to show the
appropriate submenu (simply setting proper display: none/block values).
Everything works fine in IE and Firefox, and the toggle/display stuff works
fine in safari. However, the secondary LIs have an a:hover { color: #fff; }
which shows up properly in both IE and Moz. However, Safari doesn't display the
hover color. When you click a sublink the a:active color works fine, and if I
try setting an onmouseover=alert() to the A element, it works fine. Safari
just won't recognize the a:hover element for the header.
I have noticed that it works fine if the menu is set to display: block
initially. If someone hovers over another top-level link and I use javascript
to set sub-level UL to style.display =block, that's when the a:hover doesn't
work.
Any ideas why safari won't show a:hover in a UL set to display: block by
javascript?
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.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/
__
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/
__
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/
[css-d] Drop Down Boxs (horizontal alignment with labels above each box)
Hey all, I had a question about laying out drop down boxs http://www.abyss.ws/webdevelopment/css/dropdownlayout.png they are my drop down boxs my initial thought was to put them into a ul list and layout it out with CSS that way with a display:inline; and float:left this did not work - what happened was that the label seemed to align itself next to the drop down box and cascade for each box underneath that Any suggestions as to how i can get the drop down boxs in horizontal alignment with the labels ontop of each box? this only needs to work in firefox as i am waiting until the release of IE 7 to test it in that browswer (yes i know the beta is out but i do not want to install it) Code ul id=DropDownCommands li label for=cmbAllowAccessAllow Access/labelbr / select id=cmbAllowAccess name=cmbAllowAccess option value=NoActionNo Action/option /select /li li label for=cmbAccountActiveAccount Active/labelbr / select id=cmbAccountActive name=cmbAccountActive option value=NoActionNo Action/option /select /li li label for=cmbAccessLevelAccess Level/labelbr / select id=cmbAccessLevel name=cmbAccessLevel option value=NoAction selected=selectedNo Action/option /select /li li label for=cmbRankIDRank/labelbr / select id=cmbRankID name=cmbRankID option value=NoActionNo Action/option /select /li li label for=cmbAwardIDAward/labelbr / select id=cmbAwardID name=cmbAwardID option value=NoActionNo Action/option /select /li /ul Thanks...heaps Abyss __ 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/
[css-d] selects appearing above an a.p. ul
Hello, I'm using Christian Heilmann's pure DOM explorer (http://www.onlinetools.org/tools/puredom/) for part of the navigation in an app that i'm working on. I have a horizontal list, the first li of which contains the submenu. The page will contain generated forms (laid out in a table) for editing a database. The menu appears onclick as expected however in IE (only tested on IE6sp1 so far) the select elements in the form display on top of the absolutely positioned list. I have tried z-indexing to no avail so i'm assuming it's either to do with the floated list items, a negative margin on the containing div or something else to do with the javascript that i wouldn't be able to figure out. I haven't been able to find any references about it, so if anyone has seen anything like it then i'd be interested to know how you fixed the issue. I'm going to experiment some more so i'll post back if i sort it out. Cheers, Rob __ 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/
Re: [css-d] background images missing in IE
Christy Collins wrote:
Anyone know what I need to do to get IE to display these background
images? It's the yellow triangle things above the navigation.
TIA
-Christy
http://ee.berkshireradio.org/index.php/main/test/
Again, IE has a broken inline model. You really should consider using
floats for a horizontal menu.
This time, you'll need
ul#navlist { ... position:relative}
#navlist li a { ... zoom:1 }
and, in addition, you have to delete all the whitespace in the html
between the li's, like so
ul id=navlist
li id=pba href=#programs/a/li
li id=oba href=#organization/a/li
/ul
Ingo
--
http://www.satzansatz.de/css.html
__
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/
Re: [css-d] Paging Dr. CSS! Paging Dr. CSS!
On Apr 21, 2006, at 2:27 AM, [EMAIL PROTECTED] wrote:
The example in Eric's book is: @page { size: 7.5in; margin: 0.5in; }
What would the equivalent external style sheet use?
The same.
The problem: it is only supported by Opera, and iirc PrinceXML
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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/
Re: [css-d] IE4 and CS?
I've just been told that the site I'm working on - the target browser is *IE4*. I'm like, you've got to be kidding me. Good luck with that Shelly. I'd be really interested to see the demographics of prospective IE4 visitors with ~0.5 percent (*) buying power. * http://www.upsdell.com/BrowserNews/stat.htm -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions __ 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/
Re: [css-d] selects appearing above an a.p. ul
Bill Brown wrote: click the toolbar label on my site, it snaps the toolbar into a dashboard or console fixed across the top of the page. Worked great, except in IE, select elements were appearing above the dashboard. The fix I used is included in the ieFixes style sheets and the iframe can be found at the bottom of the code. Hope that helps. Bill Brown Webmaster, MacNimble.com Cheers Bill, I always used to say it but even moreso now, 'everyday is a school day'. I had no idea as to the depths of IEs general ignorance of usability but hey, I've been writing css and xhtml for long enough that nothing surprises me if it doesn't work properly in IE! Thanks for the heads up anyway, the good news is its an internal system so we only use Firefox or sometimes Opera. It's defnitely useful to know though, thanks again. Your pet squirrel is cool an all, i've only ever found a tame one when i nearly trod on it while on holiday in Wales! Rob __ 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/
Re: [css-d] IE wrapped text with bullets
On 4/20/06, RKN Studio [EMAIL PROTECTED] wrote: Why is it that IE wraps text in bullets to align with the bullet and not the text? How can I fix that for IE? using list-style-position:outside (see http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position ) However, I've never seen IE default to anything but the usual 'outside' like most other browsers. -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz __ 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/
[css-d] how 2 position position pureCSS dropdown submenu *relative* to parent? absolute wrt page is OK ...
-BEGIN PGP SIGNED MESSAGE- Hash: RIPEMD160 hi all, i've a pure-CSS dropdown menu. i've only been able to get the dropdown's SUBmenu positioned w.r.t. the parent using ABSOLUTE positioning. (how) can I position simply relative to the parent object's position? my current EXAMPLE is here: http://tinyurl.com/ndn6y to see the dropdown, hover over the rightmost icon in the top bar ... source css are available in ViewPageSource, as usual ... thx for any pointers! cheers, richard - -- /\ \ / ASCII Ribbon Campaign X against HTML email, vCards / \ micro$oft attachments [GPG] OpenMacNews at gmail dot com fingerprint: 50C9 1C46 2F8F DE42 2EDB D460 95F7 DDBD 3671 08C6 -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.2.2 (Darwin) iEYEAREDAAYFAkRITosACgkQlffdvTZxCMZqzACgoNiSV2WjZbRo+X6U0Ya8nOrl EQsAoJEO4EYTR+AsVNf5XcvN27AgpTVc =Ardm -END PGP SIGNATURE- __ 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/
Re: [css-d] IE4 and CS?
Design Groups wrote: I've just been told that the site I'm working on - the target browser is *IE4*. I'm like, you've got to be kidding me. Would anyone here have good links or information on what happens with a pure CSS layout when using IE4? Is it like Netscape 4 when it comes to CSS? I haven't even seen one of these in years - much less have the ability to actually view and code to it's specifics. Any info on the relationship between IE4 and CSS would be really appreciated. ~Shelly Hi Shelly, Is it for a PC-museum, - or do they live in the Wayback Machine? ;-) History of Internet Explorer [...] Cascading Style Sheets (CSS) were also introduced with version 3 of Internet Explorer. [...] *Version 4, released in October 1997, was shipped with Windows 98* and was modified to integrate more closely with Microsoft Windows. It included an option to enable Active Desktop which displayed World Wide Web content on the desktop itself and was updated automatically as the content changed. The user could select other pages for use as Active Desktops as well. Active Channel technology was also introduced to automatically obtain information updates from websites. The technology was based on an XML standard known as Channel Definition Format (CDF), which predated the currently used web syndication formats like RSS. This version was designed to work on Windows 95, Windows 98, and Windows NT, and could be downloaded from the Internet, free of charge. It supported Dynamic HTML (DHTML). Outlook Express 4.0 also came integrated into the browser and replaced the aging Microsoft Internet Mail News product that was released with previous versions. *In September 1998, Microsoft released version 5* of Internet Explorer. Bi-directional text, ruby text and direct XML/XSL support were included in this release, along with *enhanced support for CSS Level 1 and 2*. The actual release of Internet Explorer 5 happened in three stages. Firstly, a Developer Preview was released in June 1998 (5.0B1), and then a Public Preview was released in November 1998 (5.0B2). Then in March 1999 the final release was released (5.0). In September it was released with Windows 98. Version 5.0 was the last one to be released for Windows 3.1x or Windows NT 3.x. *Internet Explorer 5.5* was later released for Windows Me in July 2000, and *included many bug fixes and security patches*. *Version 6* was released with Windows XP in October 25, 2001. It mainly *focused on privacy and security features*, as they had become customer priorities. Microsoft implemented tools that support P3P, a technology under development by the W3C. Thefreedictionary http://encyclopedia.thefreedictionary.com/History+of+Internet+Explorer. = = = Short conclusions by francky: So IE4 was in the early days of using css by Microsoft (as we know what they are making of it nowadays, we can imagine what it has been earlier...). IE4 was launced almost 10 years ago, and within a year IE4 was replaced by #5! Also IE4 must be dangerous, as it is very vulnerable: all security patches of the last 9 years are not in it! In the big world the use of IE4 is neglectable, as already replied by Cem Meric. Unless the target browser is *IE4*. and it is only used in an intranet without connection to the www, it should be appropriate to make a special almost css-less *internal* website or variant. How many of these IE4 pc's do they have? Hundreds? Even then it could be less effort (time, money!) to run along them with a memory stick in the hand, and fast installing IE6, then to try to develop a prehistoric backward compatibility. - Someday the'll have to upgrade anyway! = = = In Microsoft Internet Explorer 4 the most properties of CSS1 and a part of CSS2 are supported. There are still some serious errors. So the style is not inherited in some properties of a table, and the properties width and height are wrong inplemented. COLOR Microsoft Internet Explorer 4.0 t/m 5.5 - INPUT element: poor support. - No support for the IMG element. - support for the HR element, whereas this is wrong. - Abusively not herited in an included table. LETTER-SPACING Microsoft Internet Explorer 4.0 t/m 5.5 - When a relative length unit is used, then abusively the computed value is not given to a descendant element, but the value is computed again. In case the descendant element has a different value for the font-size, the extra spece between the leters is changing. - This property is not supported for the elements SELECT and OPTION. - And again not given through to an included table. and so on, and so on Translated from the Dutch Manual HTML and CSS, the Handleidinghtml http://www.handleidinghtml.nl/index.html. = = = That should be translated completely for you ... :'( I don't know if the conclusion can be made that the css-support in for instance IE5.0 must be the same as in IE4 then. - Perhaps somebody knows? But isn't there
Re: [css-d] how 2 position position pureCSS dropdown submenu *relative* to parent? absolute wrt page is OK ...
-BEGIN PGP SIGNED MESSAGE- Hash: RIPEMD160 hi bill, thx for the comments :-) Your menu works fine in Firefox on Windows XP. I have no access to a Mac OS, so I can't test there for you. fwiw, i'm bldg/testing on FF ... not an issue with working/ not working, rather simply a question abt the ABSOLUTE positioning ... and how to get the submenu positioned relateive to the parent. As expected, IE does nothing since IE doesn't support :hover on anything but the a tag. understood. The menu (as with all css based menus) is impossible to navigate on a laptop with a touchpad due to the strict and finicky on/off nature of :hover. that's a good point to keep in mindd ... thx. While I can't replicate your problem, I could guess that your problem lies in the parent element. Try declaring position:relative on the parent element and see if that helps. Otherwise...I got nothing. i'd done that already. alas, the parent element simply 'vanishes' off the page. haven't figure out where the slippery little sucker gets off to ... again there's no *problem* ... just the question. thx! richard - -- /\ \ / ASCII Ribbon Campaign X against HTML email, vCards / \ micro$oft attachments [GPG] OpenMacNews at gmail dot com fingerprint: 50C9 1C46 2F8F DE42 2EDB D460 95F7 DDBD 3671 08C6 -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.2.2 (Darwin) iEYEAREDAAYFAkRIXWcACgkQlffdvTZxCMYHnACeKuh/fRJW80jvg/+KHArHn01v KvAAoK9arppEfdQhYujV8RTJw/QtUcUj =Gv75 -END PGP SIGNATURE- __ 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/
Re: [css-d] IE wrapped text with bullets
On 4/19/06, RKN Studio [EMAIL PROTECTED] wrote:
Why is it that IE wraps text in bullets to align with the bullet and
not the text? How can I fix that for IE?
example: http://www.rknstudio.com/sites/GWR/about.html
Thanks,
Ron
www.rknstudio.com
Ron,
A couple of things to fix...
1. Looks like you forgot to wrap the offending list in ul tags. Do that first.
2. You're defining your ul and li tags in your stylesheet to
accomodate your menu on the left side of the page. That's fine, but
the list in the main body is inheriting those styles.
Try adding a rule to specify the list in the main body like this:
div#main-list ul {
list-style-type: disc;
padding: 1em;
width: auto;
}
That ought to clear up your problem.
You might also consider adding greater specificity to your menu list,
since it does special, non-normal list stuff. It looks like it's
wrapped in a nice div id=left. You could prepend all of your
left-menu list rules with div#left, and that'd likely clear up the
problem too.
Cheers,
-pete
PS. This is my first post to the list. I hope there'll be more to come.
--
Pete Stuart, Seattle WA
Design Engineer, Trumba Corporation, www.trumba.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/
Re: [css-d] how 2 position position pureCSS dropdown submenu *relative* to parent? absolute wrt page is OK ...
Hi Richard,
I'm not sure I can solve your specific problem, but I can speak to
positioning an object relative to its parent. This was an epiphany for
me when I discovered it (reading and Eric Meyer book, I'm sure).
To put it simply, you must set the parent element to be recognized as
a box. You do this by setting its position to relative or
absolute. The child element's position is then set to absolute. I
know, it's not particularly intuitive.
So, to position div#fbar (the child) relative to the postion of
div#bar (the parent), you do something like this:
div#foo { position:relative; }
div#bar { position: absolute; top: 10px; left: 20px; }
Then, in the xhtml...
div id=foo
div id=barsome content/div
/div
That'll offset the content of bar 10px from the top edge and 20px from
the left edge of foo.
Hope this makes sense and help a bit w/ your trouble.
Cheers,
-pete
--
Pete Stuart
Design Engineer, Trumba Corporation, www.trumba.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/
Re: [css-d] IE4 and CS?
Shelly, Frankly, I'd just lay the whole thing out with old-school tables. Bust out the Nirvana and Pearl Jam cds, dust off the David Siegel book, create a single-pixel gif or 3, and have at it. Think of it as an exercise in appreciation for how far we've come. Seriously, it's for somebody's intranet, right? They've got a whole bunch old computers around, and they're all running IE4? It happens. The CSS gods would forgive you. Good luck, -pete __ 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/
[css-d] IE6 supports white-space: pre; Not.
I am using an ordered list to display some code, like this:
HTML
licode...(some escaped HTML or CSS) .../code/li
CSS
ol {margin-left: 2em;}
code {
font: 100%/1 Lucida Console, American Typewriter, Courier New,
Courier, monospace;
white-space: pre;
}
Implemented here: http://webwiz.robinshosting.com/shadows.html
Sadly, I could not get IE to recognize the white-space: pre; I tried
putting it on the LI, even adding display: block; to the LI. Nada.
Googling for css support white-space pre ie internet explorer and
checking the first dozen relevant hits, all references claimed IE
supports or fully supports white-space: pre.
What am I missing?
Cordially,
David
--
David Hucklesby, on 4/20/2006
http://www.hucklesby.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/
Re: [css-d] how 2 position position pureCSS dropdown submenu *relative* to parent? absolute wrt page is OK ...
-BEGIN PGP SIGNED MESSAGE-
Hash: RIPEMD160
hi pete,
I'm not sure I can solve your specific problem, but I can speak to
positioning an object relative to its parent. This was an epiphany for
me when I discovered it (reading and Eric Meyer book, I'm sure).
To put it simply, you must set the parent element to be recognized as
a box. You do this by setting its position to relative or
absolute. The child element's position is then set to absolute. I
know, it's not particularly intuitive.
So, to position div#fbar (the child) relative to the postion of
div#bar (the parent), you do something like this:
div#foo { position:relative; }
div#bar { position: absolute; top: 10px; left: 20px; }
Then, in the xhtml...
div id=foo
div id=barsome content/div
/div
That'll offset the content of bar 10px from the top edge and 20px from
the left edge of foo.
Hope this makes sense
well described, and you're right -- once the epiphany strikes, lots
becomes clear ...
i'm using this 'standard approach' successfully throughout my site ..
and help a bit w/ your trouble.
iiuc, i _do_ have the 'boxes' correctly defined/laid out. the menu
dropdown are, in fact working 'correctly' as:
div id=topbar_container /* posn: fixed;rel to browser */
div id=topbar /* posn: relative; rel to
parent = topbar_container */
div id=techList /* float: right; rel to
parent = topbar */
ul
linbsp;
ul
li
aspan id=xarayanbsp;/span/a
/li
/ul
/li
/ul
/div id=techList
/div id=topbar
/div id=topbar_container
now, i WANT to have the dropdown submenu positioned relative to its
parent's (techList) 'box', which is floateded right in topbar ...
BUT, the only way i seem to be able to position it AND have it appear in
the browser, is to:
define it as a block
position it ABSOLUTE, relative to the parent TOPBAR ...
i.e.,
#techList ul:hover li ul {
display: block;
position: absolute;
width: 80px;
height: 15px;
top: 15;
right: 14px;
}
the QUESTION is, HOW TO position the dropdown's SUBMENU relative to the
parent ul object, namely the right-floated image ...
cheers,
richard
- --
/\
\ / ASCII Ribbon Campaign
X against HTML email, vCards
/ \ micro$oft attachments
[GPG] OpenMacNews at gmail dot com
fingerprint: 50C9 1C46 2F8F DE42 2EDB D460 95F7 DDBD 3671 08C6
-BEGIN PGP SIGNATURE-
Version: GnuPG v1.4.2.2 (Darwin)
iEYEAREDAAYFAkRIbW8ACgkQlffdvTZxCMbhwACgqroQmyBQn9OeGGwKnp6BXq1m
dXcAoMjfWTWvu+/V3CNoxN4q2i+DItt9
=B1ri
-END PGP SIGNATURE-
__
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/
