[css-d] Selector rules with ID classes issue
Hi List,
I have this strange situation here. I've found a way to solve the issue but
anyway I still whant to know what triggers this problem.
I have two documents with the following structure:
1.
body class=bg
div id=Body class=sunny
/div
/body
and 2.
body class=bg
div id=Body class=cloudy
/div
/body
The only difference is the class of the #Body element.
And have the following css:
#Body {
padding: 20px 0 0 200px;
border-top: 1px solid #fff;
width: 580px;
}
.bg #Body.sunny {
background: url(/img/bg-sb-stars-bg.gif) 24px 45px no-repeat;
}
.bg #Body.cloudy {
background: url(/img/bg-ne-stars-bg.gif) 24px 45px no-repeat;
}
The issue is that the third rule (.bg #Body.cloudy) is not followed by IE and
FF.
If I change the order of the rules in css to
#Body {
padding: 20px 0 0 200px;
border-top: 1px solid #fff;
width: 580px;
}
.bg #Body.cloudy {
background: url(/img/bg-ne-stars-bg.gif) 24px 45px no-repeat;
}
.bg #Body.sunny {
background: url(/img/bg-sb-stars-bg.gif) 24px 45px no-repeat;
}
The third rule (.bg #Body.sunny) still doesn't render.
I've fixed that with the following CSS:
#Body {
padding: 20px 0 0 200px;
border-top: 1px solid #fff;
width: 580px;
}
.bg #Body.cloudy {
background: url(/img/bg-ne-stars-bg.gif) 24px 45px no-repeat;
}
.bg .sunny {
background: url(/img/bg-sb-stars-bg.gif) 24px 45px no-repeat;
}
i.e. removed the #Body selector from the third rule and voila - it worked. But
I don't think that there is something wrong with the previous syntax.
Georgi Varzonovtsev
Interaction Designer
Netage Solutions, Inc
--
63 Shipchenski Prohod Blvd.
Sofia, Bulgaria
T: (359) (2) 960 6940
(359) (2) 960 6939
F: (359) (2) 960 6924
web.netagesolutions.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] 3 images in a ul, is this the best way
I have three images, they are each 189 by 146 and all sit inline, so that's 566 wide. No spaces, no padding, just three images, I could make it one, and use a image map, but they get swapped out so I ca not. Right now, this is suiting me pretty well: table width=566 height=146 tr td img src=/home/three_01.jpg width=189 height=146/td td img src=/home/three_02.jpg width=187 height=146/td td img src=/home/three_03.jpg width=190 height=146/td /tr /table However, I don't want to use a table, and thought, this is a pretty good case for a ul, or it is not proper to put images in the ul? If not, whats the best way, I have been trying to float divs around with little luck as well. -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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] How to style a column of a table?
On 11/10/05, artcoder [EMAIL PROTECTED] wrote: I want to apply a style to a whole column of a table. http://css-discuss.incutio.com/?page=StylingColumns the below code does not work in Firefox. (IE okay) That's a bug in IE. http://ln.hixie.ch/?start=1070385285;count=1 -- 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/
Re: [css-d] 3 images in a ul, is this the best way
Scott, a UL is proper, since these are links.
Also, you don't have to use a UL or a table, put them in a div, and use the
display:inline property, as so:
div img {
display:inline;
}
They'll line up perfectly.
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.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] Width of floats
Derek de Jong wrote: Internet Explorer is including the margin *inside the box width*, while This is what I did'nt know. W3C-spec browsers (rightly) are not. This is why you're getting different results. Carmen would be correct if *both* boxes had a 2% margin, but because only one does (#colright), so this should sum to 100%. The escape character is handy What you can do is add: width: 51%; margin: 2%; w\idth: 49%; Thanks for this and other suggestions. I know about the various hacks (or IE CSS filters to use a nicer phrase), but of course you have to identify what behavior it is that must be corrected. Best regards Jørgen Farum Jensen www.webdesign101.dk __ 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 IR in IE 5.0/Win [Solved]
On 10/11/05 11:35 PM, Thierry Koblentz [EMAIL PROTECTED] wrote:
Jono wrote:
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed
anyway.
Any idea how to fix this for IE 5.0?
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
This technique, as well as the negative text indent technique, doesn't
address the issue of styles ON / images OFF. What about people browsing with
images off?
Also, the font-size declaration seems useless since the text is only visible
with CSS *off*...
While I am am concerned about the few who know how to turn off images, I
have not found a better technique (yet) that works cross-browser - Mac\Win
IE 5.0 - 6.0; Safari, FF, maybe even Opera, etc - that doesn't involved JS,
or the DOM, or something more complicated. I'd also like to be able to add
a link to the image that replaces the text.
Anyone have a suggestion...for an IR technique that works as mentioned?
__
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 IR in IE 5.0/Win [Solved]
Hello Jono, You can have a look at one previous post regarding IR techniques [1] (references to test pages, usefull reviews and discussions) This particular technique [2] seems to fulfill you requirements. Drawbacks: transparent images / massive bump-up of font-size by user [1] http://www.mail-archive.com/css-d@lists.css-discuss.org/msg04488.html [2] http://www.tjkdesign.com/articles/tip.asp Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- While I am am concerned about the few who know how to turn off images, I have not found a better technique (yet) that works cross-browser - Mac\Win IE 5.0 - 6.0; Safari, FF, maybe even Opera, etc - that doesn't involved JS, or the DOM, or something more complicated. I'd also like to be able to add a link to the image that replaces the text. Anyone have a suggestion...for an IR technique that works as mentioned? __ 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] Text sizing in IE
Hi, Could anyone help me out with a problem with relative text sizing in IE (and possibly other browsers)? I have declared the body font-size as 1.0em, p as 0.8em and headings 1.2em etc on my page (http://www.aycee.co.uk) and they all scale correctly in relation to each other, the problem occurs when using IE to change the visible font-size - the size of the text as a whole seems to adjust in big jumps from really large text for largest, down to miniscule unreadable text for smallest. When looking at a page such as Google, changing the text sizes doesn't make as much of a difference, the smallest text is still readable. I've noticed that A List Apart also 'jumps' in big steps like my page does. Has anyone come across this before and can suggest a solution? I want my visitors to be able to adjust the text size but in smaller gradients than is currently happening. I have tried using both ems and % but neither make a difference. Is it something really simple that I'm missing? My CSS is available at http://www.aycee.co.uk/aycee1.css, aycee2.css or aycee3.css depending which stylesheet version is being viewed. Thanks very much, Ali :o) * Alison Lee [EMAIL PROTECTED] http://www.aycee.co.uk * _ The new MSN Search Toolbar now includes Desktop search! http://toolbar.msn.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/
Re: [css-d] Text sizing in IE
Ali Lee wrote: I've noticed that A List Apart also 'jumps' in big steps like my page does. Has anyone come across this before and can suggest a solution? A really old IE/win bug that many still loose out on. ALA sure has it. Set the root-declaration in 'percent' (%), and the bug is gone. For your page that's 'font-size: 100%'. You're free to use 'em' and/or '%' further down. 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/
Re: [css-d] Text sizing in IE
Ali Lee wrote: Could anyone help me out with a problem with relative text sizing in IE (and possibly other browsers)? I have declared the body font-size as 1.0em, p as 0.8em and headings 1.2em etc on my page (http://www.aycee.co.uk) and they all scale correctly in relation to each other, the problem occurs when using IE to change the visible font-size - the size of the text as a whole seems to adjust in big jumps from really large text for largest, down to miniscule unreadable text for smallest. When looking at a page such as Google, changing the text sizes doesn't make as much of a difference, the smallest text is still readable. I've noticed that A List Apart also 'jumps' in big steps like my page does. Has anyone come across this before and can suggest a solution? I want my visitors to be able to adjust the text size but in smaller gradients than is currently happening. I have tried using both ems and % but neither make a difference. Is it something really simple that I'm missing? My CSS is available at http://www.aycee.co.uk/aycee1.css, aycee2.css or aycee3.css depending which stylesheet version is being viewed. Two ways to deal with this: 1-Respect users' wishes as recorded in their prefs. Make your p text 1.0em, by setting no inherited sizes or body size at all. Browser font size prefs are there for a reason, so that users can adjust them according to their wishes and needs. 2-Follow the wiki instructions: http://css-discuss.incutio.com/?page=UsingEms -- Be quick to listen, slow to speak.James 1:19 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ 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] Text sizing in IE
Hello Ali, In addition to what Georg said, I usually set the root-declaration to 100.01% to avoid size inheritance bugs in some versions of Opera, and then use em. http://css-discuss.incutio.com/?page=UsingEms Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- Phone : +32 (0)2 533 97 33 -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- Hi, Could anyone help me out with a problem with relative text sizing in IE (and possibly other browsers)? I have declared the body font-size as 1.0em, p as 0.8em and headings 1.2em etc on my page (http://www.aycee.co.uk) and they all scale correctly in relation to each other, the problem occurs when using IE to change the visible font-size - the size of the text as a whole seems to adjust in big jumps from really large text for largest, down to miniscule unreadable text for smallest. __ 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 IR in IE 5.0/Win [Solved]
Jono wrote: Anyone have a suggestion...for an IR technique that works as mentioned? One can play around with pros and cons for ever. Have a read... http://www.quirksmode.org/dom/fir.html 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/
Re: [css-d] background image on text/search box?
Is it possible to use a background image as a search box? If so, will
the search box outline still be there or can the image be the actual
box?
--CSS--
.searchbox{
background-image:url
(the_image_worthy_of_sacrificing_accessibility.jpg);
width:125px;
height:30px;
padding:2px 10px;
border-width:0px;
}
--HTML--
INPUT type=text class=searchbox ...
How is it sacrificing accessibility?
You have to think about the variety of users that might visit the
page. A user with images turned off would get an invisible input box.
Users that are new to the internet might not understand that your
custom image is an input box; they might expect to see their regular
OS chrome input box. Et cetera...
So while it can be done. It it also incumbent upon you to ask if it
should be done.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A cross browser problem
peter newton wrote:
I've decided to throw down the gloves, give up on tables and give
xml/css a go. Now I'm expecting problems and sure enough I've found
my 1st one.
You'll run into a few more as you go along. Nothing to worry about.
http://devnz.scripterz.org/test2.html
and if you look at it in ie6 what you see is basically what I want.
(ignore the border anomolies) However as soon as I view it using:-
Opera (8.5) Firefox (1.0.7) Netscape(6)
It all goes wrong.
That's because 'standard compliant browsers' need to know what an
'absolute positioned' element relates to. IE/win is sloppy and doesn't
care about such unimportant details as 'standards'.
In your case both '#left' and '#right' relates to '#main', so that's
what we tell the good browsers.
Add:
#main {
position: relative;
}
...and they'll calculate dimensions and positions just fine.
---
Now, there are some weaknesses in your solution. They are pretty common
for starters (I believe :-) ), and a good start is important.
1: 'absolute positioning' take elements out of the flow, which means the
risk of overlapping and lack of adjustment to such elements if they
contain anything but fixed-size images.
Advice: don't use 'AP' for large areas of a page. We usually style large
areas as 'floats' or leave them 'in the flow', depending on what we
want as result.
2: if you use 'absolute positioning', then it would be wise to start by
positioning them; using 'top:nn' 'left:nn', and not just rely on
margins and 'dead in the water' -position.
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] layout problem in FireFox
Hi there, This seems like it should be an easy fix but it is escaping me. If you look at this site: http://www.innovativeconcretesolutions.net/ In FireFox, the P in the content area gets pushed down, seems like below the navigation at left. I cannot seem to figure out why. The CSS is at: http://www.innovativeconcretesolutions.net/ics.css I also have an issue with the dividing line not showing up on some of the nav items. I seem to remember something about relative sizes vs. fixed on this, but again, the solution is escaping me. Any help is appreciated. Thanks! Tom http://www.pixelmech.com/ A man spoke frantically into the phone: My wife is pregnant and her contractions are only two minutes apart! Is this her first child? the doctor asked. No, you idiot! the man shouted. This is her husband! Q: What do you call a muddy chicken who crossed the road two times? A: A dirty double crosser... __ 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] layout problem in FireFox
On 12 Oct 2005, at 9:47 pm, Tom Dell'Aringa wrote:
http://www.innovativeconcretesolutions.net/
In FireFox, the P in the content area gets pushed down, seems like
below the navigation at left. I
cannot seem to figure out why. The CSS is at:
It is actually the h1 tag that goes down in Firefox, Safari, iCab,
Opera8.5. And that is correct according to your stylesheet. IE windoze
does something else, no surprise, because the container div 'haslayout'
due to the width declaration.
h1, h2, h3 {clear:left} is the offending line. Remove that clear left
rule, and it will go back to the top.
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] Floats break containing div
Hi all
I have the following code, and the floats are displaying correctly (as
in they're side-by-side), but the wrapper doesn't extend down...
style
#wrapper {
border-left: 6px solid #FFCC33;
border-right: 6px solid #FFCC33;
background-color: #fff;
}
#wrapper p {
font-size: 9px;
margin: 0;
padding: 3px 10px;
display: inline;
float: left;
}
#wrapper p.test {
text-align: right;
float: right;
}
/style
div id=wrapper
palign left/p
p class=testalign right/p
/div
What am I doing wrong? The wrapper is meant to contain its content no
matter what.
__
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] background image on text/search box?
How is it sacrificing accessibility?
You have to think about the variety of users that might visit the
page. A user with images turned off would get an invisible input box.
Users that are new to the internet might not understand that your
custom image is an input box; they might expect to see their regular
OS chrome input box. Et cetera...
So while it can be done. It it also incumbent upon you to ask if it
should be done.
Actually, if you provide borders for your input box as well as a background
image, you can have an input (search) box that shows up whether the images
are turned off or not. And if you design your background image in a way that
enhances rather than replaces the box, I don't think you'll have any
problems with people understanding the purpose of the box.
Sample code:
input.searchbox {
padding-left:2px;
border: 1px solid;
border-color: #c0c0c0 #fff #fff #c0c0c0;
background-color: #f5f5f5;
width: 15em;
background-image: url(icn_searchbox.gif);
background-repeat: no-repeat;
background-position: left center;
}
live sample of the above code can be found at:
http://www.aurora-il.org/AuroraSite/index.asp
regards,
Ron
__
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] Floats break containing div
Hello Brendan, This is typical with floats. Floated items are removed from the document flow and non floated elements do not take them into account anymore. You can have a look at Eric's article on the subject of float containment http://www.complexspiral.com/publications/containing-floats/ In you case you can force the wrapper to enclose the floats by: Floating the wrapper as well Or Applying a clearing technique http://css-discuss.incutio.com/?page=ClearingSpace Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- Phone : +32 (0)2 533 97 33 -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). Hi all I have the following code, and the floats are displaying correctly (as in they're side-by-side), but the wrapper doesn't extend down... __ 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] Floats break containing div
Hi there. I think you need a block level element after #wrapper element.
I use a couple of hacks to make this work well in different browsers.
Give this a try.
style
#wrapper {
border-left: 6px solid #FFCC33;
border-right: 6px solid #FFCC33;
background-color: #fff;
border: solid 1px red;
}
/* hack for proper expansion of float wrapper */
#wrapper:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {display: inline-table;}
/* Hides from IE-mac \*/
* html #wrapper {height: 1%;}
#wrapper {display: block;}
/* End hide from IE-mac */
#wrapper p {
font-size: 9px;
margin: 0;
padding: 3px 10px;
display: inline;
float: left;
}
#wrapper p.test {
text-align: right;
float: right;
}
/style
div id=wrapper
palign left/p
p class=testalign right/p
/div
__
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] Floats break containing div
Hi there. I think you need a block level element after #wrapper element.
I use a couple of hacks to make this work well in different browsers.
Give this a try.
style
#wrapper {
border-left: 6px solid #FFCC33;
border-right: 6px solid #FFCC33;
background-color: #fff;
border: solid 1px red;
}
/* hack for proper expansion of float wrapper */
#wrapper:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {display: inline-table;}
/* Hides from IE-mac \*/
* html #wrapper {height: 1%;}
#wrapper {display: block;}
/* End hide from IE-mac */
#wrapper p {
font-size: 9px;
margin: 0;
padding: 3px 10px;
display: inline;
float: left;
}
#wrapper p.test {
text-align: right;
float: right;
}
/style
div id=wrapper
palign left/p
p class=testalign right/p
/div
__
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 of floats
On Oct 12, 2005, at 4:07 AM, Jørgen Farum Jensen wrote: Derek de Jong wrote: Internet Explorer is including the margin *inside the box width*, while This is what I did'nt know. Just as well you didn't, as it's incorrect. IE5's broken box model included padding and border in the width, but not the margin. I suspect your issue is with fractions. 49+49+2=100 right enough, but let's apply that to a real-world screen. 49% of a 1005-pixel-wide viewport is 492.45 pixels. The browser can't light up a fraction of a pixel, and the standard leaves the handling of fractional pixel widths to the browser, so some will truncate and some will round up. Hence some browsers will see your layout as 492+492+20=1004 and some as 493+493+21=1007 pixels wide. Moral: let your percentages add up to 99, *not* 100, and you'll always stay within bounds. Have Fun, Arlen -- In God we trust, all others must supply data __ 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] 3 images in a ul, is this the best way
Christian Montoya wrote: Scott, a UL is proper, since these are links. Also, you don't have to use a UL or a table, No, you don't have to put them in ul, but if they are really a list, why not put them in the correct container? Of course, I can't really tell if they are a list since I don't know what those images are -- can you send us a page to look at? If they are a list, you can make them display horizontally by either floating each li to the left or giving each li a value of display: inline. 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Multiple IR in IE 5.0/Win [Solved]
Hello Thierry, Setting aside the debate should we or should we not use IR techniques, I might have not expressed myself correctly in my post. I understand the method and its benefits. I was just stressing that: 1. Problems remain if a user can display images and bumps up font size (either the text shows through (unless you are willing to use extra large images to account for worst case scenario), or the image becomes blurry, even if you specify its size using relative units like you do in another example). Some users I know must increase their font-size to 500% to be able to read. 2. Even if anchors are used instead of images, since take into account the css on/img off scenario, you have a problem if you want to use transparent / partially transparent images to replace your text, since your text must be hidden under the image. Having that said, your method is indeed interesting in many aspects. Thanks for making it available. Cheers, Jérôme Coupé -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- From: Thierry Koblentz [mailto:[EMAIL PROTECTED] Sent: mercredi 12 octobre 2005 15:40 To: jérôme coupé; css-d@lists.css-discuss.org Cc: 'Jono' Subject: Re: [css-d] Multiple IR in IE 5.0/Win [Solved] IMHO, if Jono is using anchors, there are no drawbacks. See the new section in this article about anchors and named anchors. And the technique is not just about transparent images, it's about using the img element. Using real images (not shims) rather than background image has another advantage: there is no flickering in MSIE when the user hovers over the elements. Thierry | 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/
Re: [css-d] Jumping text in IEWin
Seems I've got rid of the problem in IEWin 6 and 5.5 atleast. I added some padding and added overflow:visible;. Working in my situation anyway. Thanks for the reply. On Tue, 11 Oct 2005 19:16:45 -0400, Christian Montoya [EMAIL PROTECTED] wrote: - Use percentages for all columns in the layout - Use Javascript to force IE to apply a min-width and max-width to the layout After this, there really isn't much you can do, other than make certain block level elements clip on overflow, though this probably won't fix your problem. Russ Weakley's presentation: http://www.maxdesign.com.au/presentation/liquid-layouts/index.htm A resources page that might help, includes Javascript technique: http://liquid.rdpdesign.com/resources/ Seems I've got rid of the problem in IEWin 6 and 5.5 atleast. I added some padding and added overflow:visible;. Working in my situation anyway. Thanks for the reply. -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] List with hover background images
Listers...
Here is the code I am using on a list of links:
#content ul.linklist{list-style-type:none; margin:0 0 20px 0;}
#content ul.linklist li{padding:0 0 .3em 40px;}
#content ul.linklist a{display:block; padding:0 0 0 20px; margin:0 0 0
-20px;}
#content ul.linklist a:hover{display:block;
background:url(../images/linklist_rollarrows.gif) top left no-repeat;
padding:0 0 0 20px; margin:0 0 0 -20px;}
div id=content
snip
ul class=linklist
lia href=#ASA DirectsupSM/sup/a/lili
a href=#FASTFUNDsupSM/sup/a/lili
a href=#Guarantee Only Processing/a/lili
a href=#CommonLine Processing/a/lili
a href=#ELM (Education Loan Management)/a/lili
a href=#Sallie Mae Laureate/a/lili
a href=#ASA's Shadow Program/a/lili
a href=#Mapping Your Future/a/lili
a href=#Origination and Operational Consulting/a/lili
a href=#e.clips Signup and Article Archives/a/lili
a href=#Preferred Lender List Services/a/lili
a href=#PLUS on the Web/a/lili
a href=#PLUS on the Phone or Fax/a/lili
a href=#E-signature (Electronic Signature)/a/li
/ul
/div
In some browsers however, my links work across the page, beyond the text,
even over blank space like this:
|-link text--| hover and link work here
The display:block is most likely the cause, right? But I can't figure out
how to achieve another way what I am after with the links, which is to
have the hover bg image _and_ have the links indented the same if they
break to 2 lines.
Any thoughts?
TIA
--
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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 Syntax for ID's
Just curious about differences I've seen in some stylesheets I've downloaded
and studied.
Sometimes people just write their id's as:
#idName {}
Other times I see the div in front such as:
div#idName
Since id's are unique anyway what's the difference here? Does the one
without the div explicitly stated NOT work in some cases?
I've also seen similar with classes, but that seems easier to understand,
although I'm not sure I understand why a person couldn't just state the
class name also then apply it to whatever tag they want instead of being
explicit with it in the CSS rules.
Christopher Akins
Web Coordinator
Public Information Office - City of Springfield, MO
www.springfieldmogov.org
417-864-1118
Everywhere is walking distance if you have the time. - Steven Wright
__
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 IR in IE 5.0/Win [Solved]
Hi Jérôme, Setting aside the debate should we or should we not use IR techniques, I might have not expressed myself correctly in my post. I understand the method and its benefits. I was just stressing that: 1. Problems remain if a user can display images and bumps up font size (either the text shows through (unless you are willing to use extra large images to account for worst case scenario), or the image becomes blurry, even if you specify its size using relative units like you do in another example). Some users I know must increase their font-size to 500% to be able to read. 2. Even if anchors are used instead of images, since take into account the css on/img off scenario, you have a problem if you want to use transparent / partially transparent images to replace your text, since your text must be hidden under the image. Hi Jérôme, I was just pointing out that this technique is not limited to using a shim, that's all (NP with your post at all ;). I agree with you , there are so many issues/parameters to deal with that it's impossible to cover everything. Best, Thierry | www.TJKDesign.com PS: where are you from with all these é and ô in your name? ;) __ 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 Syntax for ID's
Since id's are unique anyway what's the difference here? Readability. You know which element it refers to. I've also seen similar with classes, but that seems easier to understand It might be also about selector specifity. (http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html#resources) -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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] IE Fix Needed
Dear All: I'm having a couple of problems with a page in IE. The page in question: http://janaagraha.org/rahul/John/ Mockup - What I'm trying to achieve: (warning: 100kb) http://www.flickr.com/photo_zoom.gne?id=51803913size=o Problems: 1. I would like the navigation text to have grey padding, similiar to the way it is in the mockup. 2. I'd like the background colour to change on a:hover to another colour. IE-Specific: 3. I've put the text after the coloured boxes for the third and fourth navigation elements. This is causing the text to come on the right, not smoothly go to the next line like I'd like it to. 4. The whole page has shifted a *lot* more to the right in IE, compared to FF, noticeable at resolutions above 800*600. Is this because of the incorrect interpretation of the box model? Opera 8.50: 5. Problem 3 applies here as well. This causes only one of the boxes (news) to drop down to the next line. Firefox so far displays it closest to what I'm trying to do. All other suggestions welcome. I'd appreciate hearing from all of you about what you think of the site (page, really), design, and code. I know I've got too many div tags in there, any suggestions on how to cut them down would be welcome. Thanks a lot, Warmly, Rahul. Note: All browsers XPSP2. -- Rahul Gonsalves Make PNG, not War. -- __ 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] Creating Flexible Menus with CSS
I was asked by a friend to explain one of the designs I did lately in detail. Here is the result: http://icant.co.uk/articles/flexible-css-menu/ Hopefully you can use some of it, too. comments and errors please off-list, as it may be off-topic. regards, Chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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]
Hello, I have a question. I am sort of new to css and I have come upon a problem that I am not sure how to change/fix. I have not yet turned all of my pages over to the css, most of them are still totally built in html tables. The two pages that you would have to look at to see my problem are http://www.cherishscountrystore.com/work.htm And http://www.cherishscountrystore.com/always-kiss-me-goodnight.htm I don't know it if this address matters, but my stylesheet is stylesheet.css Okay.. this is the problem. I have 2 columns. They are my leftnav and content. I need them to be the same length, always, no matter how much content is on either side. You will have to forgive me, I don't exactly know how to ask this question. If you look at work.htm you will se that my content is in the top white box.. I want that white box to go all the way down to the brown bar. It is the light brown color, because I had the opposite problem on the always-kiss-me-goodnight.htm. The navigation bar was white on the bottom so.. we change the whole background to the brown color, but then you see the result on a shorter content page. Also.. I am not sure why it completely works for always-kiss-me-goodnight.htm in internet explorer.. and then when you look at work.htm it is just not right. I don't know why it works and why it doesn't and it Firefox and Opera it is just NOT right I appreciate any help. Have a great day! Cherish Dudley [EMAIL PROTECTED] http://www.cherishscountrystore.com Handcrafted country decor with classic charm __ 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: (setting column lengths) [css-d]
Cherish's Country Store wrote: Okay.. this is the problem. I have 2 columns. They are my leftnav and content. I need them to be the same length, always, no matter how much content is on either side. You will have to forgive me, I don't exactly know how to ask this question. Typically, a div extends vertically only as far as its content, unlike table designs. The following article provides a good solution to simulating the appearance of equal column lengths: http://www.alistapart.com/articles/fauxcolumns Here is a follow-on article that explains how you can extend the concept to liquid (variable-width) columns: http://www.communitymx.com/content/article.cfm?page=1cid=AFC58 HTH __ 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] Please Explain CSS Parser Hacks
I'm reading Eric Meyer's article on Tricking Browsers and Hiding Styles. I
understand what he's saying and that the extra characters in the rules get
parsed in different ways.
But for me to really understand what's happening, though, I sure could use
an explanation of exactly what is making various parsers see various
results.
He says this code:
div#test {
color: red;
voice-family: \}\;
voice-family:inherit;
color: green;
}
Will produce this result in correctly implemented parsers:
div#test {
color: red;
voice-family: } ;
voice-family:inherit;
color: green;
}
The question is why? What is the effect of the \ characters? What are
they in the CSS language?
Can someone provide a character by character trace of this line:
voice-family: \}\;
Thanks in advance.
Christopher
__
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] IE woes: overlapping spans cutoff background image.
Sorry if this is a repeat question...I looked, but found nothing similar. I am pretty sure this is an easy answer and I would love to have just the name of the bug so I can google and fix. Check out: http://www.screwlewse.com/css-d/ and look at the section with the image of the person. There is: 1. A containing div / id: masthead this has a repeating pattern. 2. .mastheadLeft is where the containing div is. this has no background image / pattern 3. .mastheadRight has the mountain image (left bottom) This is the image that moves when you resize. AND gets cut off by IE. The css are in several files but the only ones of question are most likely: layout.css less likely: theme.css Thanks for your help all. Dave Gregory __ 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] Please Explain CSS Parser Hacks
Here's a couple of good links that provide explanation: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm http://css-discuss.incutio.com/?page=BoxModelHack Oh! and look at that - the second one looks kinda familiar, doesn't it? ;) HTH! ~Shelly __ 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] Please Explain CSS Parser Hacks
Akins, Chris wrote: Can someone provide a character by character trace of this line: voice-family: \}\; voice-family: ,escape next character,,),escape next character,,; = voice-family: }; Note that that example is one of the few that may make some kind of sense - although it's a complete absurd case. Some more for deconstructing hacks here: http://www.w3.org/TR/REC-CSS2/syndata.html Basically; understanding hacks is a waste of time. You learn how and where each of them work and how to use them, and make some kinds of notes so you don't have to spend so much time fixing the same issues later. Then you focus on _not using them at all_ if you can avoid it. Hacks rely almost completely on software-bugs, so you may end up deconstructing tons of human errors. No logic in that... http://www.gunlaug.no/contents/molly_1_15.html ...bit it may be fun though :-) 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/
Re: [css-d] IE Fix Needed
For the first two problems try adding:
a {display: block; background-color: #CC;}
a:hover {color:black; background-color: white;}
Change colors to suit.
Jim
On 10/12/05, Rahul Gonsalves [EMAIL PROTECTED] wrote:
Dear All:
I'm having a couple of problems with a page in IE.
The page in question:
http://janaagraha.org/rahul/John/
Mockup - What I'm trying to achieve: (warning: 100kb)
http://www.flickr.com/photo_zoom.gne?id=51803913size=o
Problems:
1. I would like the navigation text to have grey padding, similiar to
the way it is in the mockup.
2. I'd like the background colour to change on a:hover to another colour.
__
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] Please Explain CSS Parser Hacks
From: Akins, Chris [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Wednesday, October 12, 2005 12:56 PM
Subject: [css-d] Please Explain CSS Parser Hacks
I'm reading Eric Meyer's article on Tricking Browsers and Hiding
Styles. I
understand what he's saying and that the extra characters in the
rules get
parsed in different ways.
But for me to really understand what's happening, though, I sure
could use
an explanation of exactly what is making various parsers see various
results.
He says this code:
div#test {
color: red;
voice-family: \}\;
voice-family:inherit;
color: green;
}
If you are new to this, take this opportunity to reconsider using
parser hacks. There are more logical methods available that do not
rely on software bugs as Gunlaug so eloquently stated. If you are
interested, respond offlist as this topic usually gets snuffed on this
mailing list pretty quickly :-)
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] background image on text/search box?
Awesome - thanks fellas.
On Oct 12, 2005, at 9:41 AM, Pringle, Ron wrote:
How is it sacrificing accessibility?
Actually, if you provide borders for your input box as well as a
background
image, you can have an input (search) box that shows up whether the
images
are turned off or not. And if you design your background image in a
way that
enhances rather than replaces the box, I don't think you'll have any
problems with people understanding the purpose of the box.
Sample code:
input.searchbox {
padding-left:2px;
border: 1px solid;
border-color: #c0c0c0 #fff #fff #c0c0c0;
background-color: #f5f5f5;
width: 15em;
background-image: url(icn_searchbox.gif);
background-repeat: no-repeat;
background-position: left center;
}
live sample of the above code can be found at:
http://www.aurora-il.org/AuroraSite/index.asp
regards,
Ron
__
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] First Post. Yay! Browser Discrepancy
Hey all.nice to be here in an effort to increase knowledgeTIA for helping me. I made a site that looks 'right' in Firefox and 'not-so-right' in Internet Explorer. The differences are minimal. http://www.northstar-emerg.com/main6.html #1. the Internet Explorer rendition of the main menu has white lines between the menu linksarg. #2. the Internet Explorer rendition of the Announcemtents box on the left seems to mis-align itself.arg matey. If anyone can make a few suggestions i'd be grateful rollandb (i hope i dont get flamed for using a table!) __ 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] First Post. Yay! Browser Discrepancy
I made a site that looks 'right' in Firefox and 'not-so-right' in
Internet Explorer. The differences are minimal.
http://www.northstar-emerg.com/main6.html
#1. the Internet Explorer rendition of the main menu has white lines
between the menu linksarg.
rollandb
Hmm, it appears that the line is coming from the following bit of CSS:
/*** #navBar link styles ***/
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
I don't know what this hack is fixing, but it appears to be causing the
lines under each menu item. Removing should fix your problem.
Ron
__
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] IE6 and hover - csshover.htc problems
Hi all,
I know this problem has come up repeatedly, I've searched the archives,
but I didn't find any solution that fits my scenario. I've been
struggling with this full time for 2 days and cannot make IE work with
the .htc file.
I wanted a double-rollover effect on hover. Roll over the menu link,
change the appearance of the text, AND change an image within the same
DIV. The image will change for each link. I don't really want to go thru
the javascript method for a double rollover. So, using Eric's Pure CSS
Popups example (the book and his site), I coded my html and css to
mirror his method.
The rollover/popup works famously in Opera and Firefox, IE will NOT
behave. It seems to ignore the .htc file completely and it doesn't
matter whether I use the conditional comment in the html method or put
the behavior into the CSS file itself. Neither works. It won't work on
my PC, and it will not work on our test server either. We have other
sites on the test server that use the same .htc method, and even though
we are NOT using XP SP2, the MIME type for the .htc file has been added
to the IIS server.
The html page, the css and the .htc file are ALL in the SAME directory.
I have no way to post the site on the web, corporate security prevents
us from doing so.
So, I'll paste the code here. The page is a basic 2-column floated
layout. Its actually a modifed version of the Community CMX Vegas
template.
style type=text/css
!--
@import url(dmsr2b.css);
--
/style
!--[if IE]
style type=text/css
body {behavior:url(csshover.htc);}
/style
![endif]--
div id=sidebar
div id=subNav
a href=#About Us/a
a href=#Physiciansimg src=images/menu_images_doc.jpg
width=110 height=225 //a
a href=#Servicesimg src=images/menu_images_girl.jpg
width=110 height=225 //a
a href=#Office Location Parking/a
a href=#Appointments/a
a href=#Insurance Plans We Accept/a
a href=#Patient Forms/a
a href=#Patient Education/a
a href=#Contact Us/a
/div
/div
/* The following selectors control the sidebar/navigational area */
#sidebar {
background: url(images/side_navbar.jpg) no-repeat;
float: left; /* the navigation is floated to the left so that it
can be any length. If it were an AP Div, it would be out of the flow
of the document and could flow off the bottom edge of the page */
width: 200px; /* must have a width value */
height: 477px;
margin-left: 5px;
padding-left: 0px;
padding-top: 25px;
margin-top: 10px; /* this aligns the beginning of the sidebar
content with the main content div */
}
#subNav{
position: relative;
width: 190px;
height: 454px;
z-index: 100;
}
div#subNav a img {
height: 0px;
width: 0px;
border-width: 0px;
}
div#subNav a:hover img{
position: absolute;
top: 225px;
left: 82px;
height: 225px;
width: 110px;
}
div#subNav a {
display: block;
text-align: left;
font: bold 75% Verdana, Arial, Helvetica, sans-serif;
padding: 5px 5px;
margin: 0px;
border-width: 0px;
text-decoration: none;
color: #455560;
background: transparent;
}
div#subNav a:hover {
color: #900a0a;
text-decoration: underline;
}
I'm about to go cross-eyed looking at this and its driving me around the
bend :) Clearly I have something wrong.
Thanks for any help !!
Diane R Tomlins
Dreaming is like defrag for your brain - Me !
__
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] First Post. Yay! Browser Discrepancy
You are correct Ronnow in IE the menu items have huge gaps
between them...ah well.
After looking at the stolen css I used and how simple the menu is, I
think I will start over with something a little less complicated.
thanks tho. Now for the Announcements tab.
rollandb
On Oct 12, 2005, at 3:27 PM, Pringle, Ron wrote:
I made a site that looks 'right' in Firefox and 'not-so-right' in
Internet Explorer. The differences are minimal.
http://www.northstar-emerg.com/main6.html
#1. the Internet Explorer rendition of the main menu has white lines
between the menu linksarg.
rollandb
Hmm, it appears that the line is coming from the following bit of CSS:
/*** #navBar link styles ***/
/* hack to fix IE/Win's broken rendering of block-level anchors in
lists */
#navBar li {border-bottom: 1px solid #EEE;}
I don't know what this hack is fixing, but it appears to be
causing the
lines under each menu item. Removing should fix your problem.
Ron
__
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] Website check. How does it look?
Hello everyone,
I am new to the group, and have enjoyed reading many of the emails
thrown back and forth. There is a site that I am working on, and it is
hard for me to check it out on many different platforms, and browsers.
The site is at http://www.guchdesign.com/pop/
Let me say beforehand that I am using tables for layout (yikes! I
really do understand the accessibility issues related to that, but that
is partially why I'm asking for your help...) in combination with a
trick I found on csszengarden, attributed to Douglas Bowman at
stopdesign.com:
/* using an image to replace text in an h1. This trick courtesy Douglas
Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(/001/h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display:none
}
So, my questions are
1: how does the site look across various platforms?
2: In text-only browsers does the html display OK?
Thank you in advance.
Cheers,
John
__
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] Please help ie box hack question
http://www.ckfswebservices.com/CAS/style2.css
http://www.ckfswebservices.com/CAS/index2.php
You will see the style sheet and page address above.
Yes, I know there is no content those errors are for space holds but the
other problem has to be worked out first.
The css code and html do parse.
I just started doing css sites and the box hack is messing me up.
I have a book that explains the math but one of the problems is I am not
sure how to apply the addressing this particular case.
I have the content set to #content
nav set to #nav
content is a % of a fixed space
Examples I find on the web use this type of coding
.boxmodel {
width: whateverpx;
height: whateverpx;
padding:
border:
margin:
etc.}
Then the hack is applies as
* html .boxmodel {
width : whateverpx;
height: whateverpx;
}
I have #content
is it applied as *html #content ??
Can it be applied to a id and not a class???
Can it be applied to % - I know what % works in IE so can I use the %
there or do I have to calculate the actual px???
My biggest problem is with applying the *html .whatever somewhere in my
stylesheet to correct this problem
Carol Swinehart
__
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/
Need more help Was: [css-d] List with hover background images
On Wed, 12 Oct 2005 10:48:05 -0400, Tom Livingston
[EMAIL PROTECTED] wrote:
|-link text--| hover and link work here
OK I solved the above issue by using display:table-cell and feeding WinIE
display:block inCCs.
But the same fix will not work for this:
#faphomecontent p{margin-right:25px; width:90%;}
#faphomecontent a.subcatlink{display:block; padding-right:3em; color:#999;
background:url(../images/fap/linkone_off.jpg) top right no-repeat;
text-decoration:none;}
#faphomecontent a.subcatlink span{font-family:Trebuchet MS, Arial, Sans,
Helvetica, sans-serif; color:#E5931F; font-style:italic; font-size:1.1em;
text-decoration:none;}
#faphomecontent a.subcatlink:hover{display:block; padding-right:3em;
color:#000; background:url(../images/fap/linkone_on.jpg) top right
no-repeat; text-decoration:none;}
#faphomecontent a.subcatlink:hover span{font-family:Trebuchet MS, Arial,
Sans, Helvetica, sans-serif; color:#9f5e27; font-style:italic;
font-size:1.1em; text-decoration:none;}
div id=faphomecontent
h2 class=subhomehead:: Professionals/h2
pa href=# class=subcatlinkspanLoan Management/spanbr /
Link copy goes here. /a/p
/div
No lists involved with this. All I want is link text with a backgnd image
to show on hover. And ONLY the text should hover/link. The above again has
active blank space within the href... yes, because of display:block; but
I can't get the effect of text-pushed-over-to-allow-for-hover-bg-image w/o
it!
Am I nutz?? Am I asking the impossible?
That window ledge is looking pretty good right now. I'm on the fourth
floor..
--
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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] First Post. Yay! Browser Discrepancy
http://www.northstar-emerg.com/main6.html
#1. the Internet Explorer rendition of the main menu has white lines
between the menu linksarg.
Hmm, it appears that the line is coming from the following bit of CSS:
/*** #navBar link styles ***/
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
I don't know what this hack is fixing, but it appears to be causing the
lines under each menu item. Removing should fix your problem.
You are correct Ronnow in IE the menu items have huge gaps
between them...ah well.
Which is exactly what the hack was fixing to begin with. This is IE
refusing to ignore white space between list items. Adding a
border-bottom is one of the more obscure fixes for the problem. You
can do the same thing by removing the white space between the list
items in the markup. A popular way to do this is to place the
carriage returns inside the li tags, like so:
div id=navBardiv id=sectionLinks
ul
lia href=#Home/a/li
lia href=#About Us/a/li
lia href=#Biographies/a/li
lia href=#Announcements/a/li
lia href=#Health News/a/li
lia href=#Contact Us/a/li
lia href=#Login/a/li
/ulbr /br /
/div/div
A little odd to read at first, but effective and completely avoids
the need for the underline.
BTW, I'd remove those br / tags, too. Use bottom margin or padding
to get the spacing you need.
HTH,
--
-Adam Kuehn
__
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] Avoid Row splitting on two pages in IE
Hi, If I am using IE, my last row in a table gets split on two pages. But mozilla is showing right i.e. not splitting the row. How to avoid row splitting in IE. Thanks __ Yahoo! Mail - PC Magazine Editors' Choice 2005 http://mail.yahoo.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] Hiding table footer in some pages
Is there any way to control the printiing of footer in table to last page only. I am using footer to print the Sum of each column in the last line. I am using display:table for the table. But while IE is only showing the footer on last page, Mozilla shows footer on each page. Thanks __ Yahoo! Mail - PC Magazine Editors' Choice 2005 http://mail.yahoo.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] Strange IE Link behaviour
Evening all, Has anyone seen this before? This page should be valid HTML 4.01 Strict, and the CSS is valid. Which makes me think a funny quirk I have never seen before is responsible. In the middle of the page in the green box, the list of subsections. When you mouse over them the hand does not change to signify a link. Clicking on the images doesnt not trigger the link, only clicking on the text, even though the link started before the image and ends after the text. It works OK for me in firefox. http://cmc.vanguardia.co.uk/products/section-home.asp?SectionID=6 Any help of shedding some light on the problem would be greatly appreciated. Project nowhere near finished, so dont be too worried about any other problems. Thanks in advance, Marc __ 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] IE causes exaggerated div dimensions
resubmitting this problem with stripped code: I am using Roger Johansson's js technique for applying custom borders and boxes (images) in which divs are dynamically added using js. I am using this technique on multiple areas of the site including the main container, content box, and menu. Things look good in FF. As ever, IE is causing trouble. There is too much space between the bottom shadow image and the container. the problem remains until I comment out the '.main .bb' and '.main .bb. div' definitions. any suggestions? Take a look at: http://www.sccs.swarthmore.edu/users/07/jyamada1/cycle/index_debug.html http://www.sccs.swarthmore.edu/users/07/jyamada1/cycle/index_debug.html http://www.sccs.swarthmore.edu/users/07/jyamada1/cycle/main_debug.css thanks. p.s. the menu looks that way because i stripped its definitions. __ 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] IE causes exaggerated div dimensions
resubmitting this problem with stripped code: I am using Roger Johansson's js technique for applying custom borders and boxes (images) in which divs are dynamically added using js. I am using this technique on multiple areas of the site including the main container, content box, and menu. Things look good in FF. As ever, IE is causing trouble. There is too much space between the bottom shadow image and the container. the problem remains until I comment out the '.main .bb' and '.main .bb. div' definitions. any suggestions? Take a look at: http://www.sccs.swarthmore.edu/users/07/jyamada1/cycle/index_debug.html http://www.sccs.swarthmore.edu/users/07/jyamada1/cycle/index_debug.html http://www.sccs.swarthmore.edu/users/07/jyamada1/cycle/main_debug.css thanks. p.s. the menu looks that way because i stripped its definitions. __ 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] 3 images in a ul, is this the best way
on 10/12/05 7:05 AM, Zoe M. Gillenwater at [EMAIL PROTECTED] wrote: Christian Montoya wrote: Scott, a UL is proper, since these are links. Also, you don't have to use a UL or a table, No, you don't have to put them in ul, but if they are really a list, why not put them in the correct container? Of course, I can't really tell if they are a list since I don't know what those images are -- can you send us a page to look at? If they are a list, you can make them display horizontally by either floating each li to the left or giving each li a value of display: inline. I still get some margins, no matter what I try, can someone perhaps show me a example of three same sized images all sitting together to make one image? -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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] Tables
I have been meaning to ask this, and I can not remember the exact case, but
I am sure it is basic to most of you.
If I set a overall font-size, for example:
.wrapper {
font-size: .8em;
}
I then wrap the entire page in that, any table I use, seems to not follow
that font size. Setting the td and table to a specific font size of the
same, I think, if I remember, makes the fonts smaller than the .8em, can
someone tell me whats happening here and how you work around it?
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
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: [was css-d] Strange IE Link behaviour
Guy, Yeah I am sure they are supposed to be! Content is not down to me, though I shall pass it on, thanks. Site has yet to go for QA! :) I am still no closer to solving the problem, though I do know it has something to do with the spans inside the li links, which in turn are inside the li elements. I have another thing that is similar in the admin part, though it doesn't use spans inside the links and it works fine. Marc __ 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] 3 images in a ul, is this the best way
How about:
img {
border:none;
padding:0;
margin:0;
display:inline;
}
and if you use ul :
ul li {
padding:0;
margin:0;
display:inline;
}
li img {
padding:0;
border:none;
margin:0;
}
or better yet, start your day off right:
* {
border:none;
margin:0;
padding:0;
}
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.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] 3 images in a ul, is this the best way
At 02:37 PM 10/12/2005, Scott Haneda wrote: I still get some margins, no matter what I try, can someone perhaps show me a example of three same sized images all sitting together to make one image? Scott, Here's an example of an unordered list used with image tiling: http://alistapart.com/d/multicolumnlists/example7.html In this example, tiles (segments) of one complete image are used to highlight list items on hover, but they fit together seamlessly, no margins, padding, or borders. Paul __ 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 rows and columns
I really don't want to jam this one in a table, but I need 5 divs across,
butted right up against each other, after the 5th one, I need a new row.
The width of each of the 5 items is fixed, the height is not. The below
works, only if I set the height of .wrapper to 40px, which in this case I
can not, .wrapper needs to just grow based on what is in .foo, so the
tallest .foo would be the height.
* {
border:none;
margin:0;
padding:0;
}
.foo {
border: 1px solid red;
width: 40px;
height: 40px;
float: left;
margin: 0;
padding: 0;
}
.wrapper {
border: 1px solid green;
height: 40px;
}
div class=wrapper
div class=footest/div
div class=footest/div
div class=footest/div
div class=footest/div
div class=footest/div
/div
div class=wrapper
div class=footest/div
div class=footest/div
div class=footest/div
div class=footest/div
div class=footest/div
/div
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
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] Way Too Skinny in IEWin
Looks as I want it to in Firefox, but in IE the items are way skinny and
I can't figure out what's happening. Here's the page:
http://www.fresnolibrary.org/stffpcks/
The relevant CSS is:
#picks { position: relative; float: left; }
.pick img { float: left; margin: 0 10px 0 0; }
.pick { clear: left; }
.firstpick, .pick { padding-bottom: 20px; position: relative; float:
left; }
#picks p { margin: 0; padding: 0; }
(located in http://www.fresnolibrary.org/frmain.css)
(I floated #picks left in an effort to avoid clearing the sidebar float
when I clear items within #picks...)
TIA
Sarah
__
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 Syntax for ID's
From: Akins, Chris
Sometimes people just write their id's as:
#idName {}
Other times I see the div in front such as:
div#idName
Since id's are unique anyway what's the difference here? Does the one
without the div explicitly stated NOT work in some cases?
I've also seen similar with classes...
Chris,
I've always been one to use .classname amd #idname
What was revealed to me recently on this or another list was
that using selector.classname or selector#idname is useful
in indicating to others who might work on the site what the
intent of the original style was.
It is sort of self documenting by showing where and perhaps
in what circumstances that rule was intended to be used.
I'm not sure if I would adopt that convention, but I'll be
keeping it in mind for future occasions when it might be
a useful trick to have in the bag.
--
Peter Williams
__
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] 3 images in a ul, is this the best way
On 10/12/05, Scott Haneda [EMAIL PROTECTED] wrote:
I have three images, they are each 189 by 146 and all sit inline, so that's
566 wide. No spaces, no padding, just three images, I could make it one,
and use a image map, but they get swapped out so I ca not.
Right now, this is suiting me pretty well:
table width=566 height=146
tr
td
img src=/home/three_01.jpg width=189 height=146/td
td
img src=/home/three_02.jpg width=187 height=146/td
td
img src=/home/three_03.jpg width=190 height=146/td
/tr
/table
However, I don't want to use a table, and thought, this is a pretty good
case for a ul, or it is not proper to put images in the ul?
As Zoe mentioned, turning this into a list works if indeed this is a
list. If it isn't (for example, if it were simply three pieces of a
header graphic) then it probably isn't a list after all, but perhaps
more like a set of header tags.
Either way, there are going to be difficulties in either scenario. If
you were to make the image-wrapping elements inline (the LI tags for a
list, for example), you'll have to worry about the spaces between the
wrappers. Inline elements act just like text, so the spaces between
them act just like spaces between words.
If you were to make the image-wrapping elements float, you won't have
to worry about the space between the wrappers, but you may have to
worry about things such as Mac IE's insistence on having the wrappers'
widths defined, and PC IE's addition of an unremovable 3px margin on
the edge opposite the direction of the float.
Your mention of mouse-over behavior suggests that we're actually
talking about a table whose cells contain links with image contents,
versus the example you've provided where the images are not wrapped by
links. If that's true, a list may make more sense. In terms of
float-versus-inline, I'd probably choose a float method, because I
don't want to have to mash all of my code together to remove the white
space between the links.
Since each image is a different size, you'll need a different ID to
explicitly define the widths. Once you've done that, you can remove
the 3px provided by IE by sucking in the margins on the side opposite
of the direction you're floating the elements. You would only want to
do this for IE PC, however -- no other browser needs this.
I'd probably do something like this (assuming that navigation
properly describes this element):
ul id=navigation
li id=firsta href=...img src=/home/three_01.jpg.../a/li
li id=seconda href=...img src=/home/three_02.jpg.../a/li
li id=thirda href=...img src=/home/three_03.jpg.../a/li
/ul
#navigation {
width: 566px; /* in an attempt to keep the floats in a fixed area,
so they don't wrap */
}
#navigation li {
float: left;
}
/* hide from Mac IE \*/
* html #navigation li { /* star html hack only recognized by IE */
margin-right: -3px;
}
/* stop hiding */
#first {
width: 189px;
}
#second {
width: 187px;
}
#third {
width: 190px;
}
Another alternative is provided by Dave Shea's image sprites
concept[1]. This is pretty consistent cross-browser, and lets you do
away with image slicing, even including rollovers. This might be
simpler to deal with from a maintenance perspective.
HTH,
Michael
[1] http://www.alistapart.com/articles/sprites
__
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 IR in IE 5.0/Win [Solved]
On 10/12/05 6:28 AM, jérôme coupé [EMAIL PROTECTED] wrote:
...
This particular technique [2] seems to fulfill you requirements.
Drawbacks: transparent images / massive bump-up of font-size by user
...
[2] http://www.tjkdesign.com/articles/tip.asp
-Original Message-
While I am am concerned about the few who know how to turn
off images, I have not found a better technique (yet) that
works cross-browser - Mac\Win IE 5.0 - 6.0; Safari, FF, maybe
even Opera, etc - that doesn't involved JS, or the DOM, or
something more complicated. I'd also like to be able to add
a link to the image that replaces the text.
Anyone have a suggestion...for an IR technique that works as
mentioned?
This appears to be a good solution, and best of all, it is - like you said -
clean:
[quote]
h1a title=Take me home! href=//aCompany Name/h1
h1 {position:relative}
h1 a {
z-index:1;
position:absolute;
top:0;
left:0;
width:538px;
height:1.7em;
min-height:28px;
background:transparent url(/img/helloworld.gif) no-repeat;
border:1px dotted red;
font-size:1em
}
[/quote]
I like the rollover options too. Great for a logo swap on rollover.
Also, I noticed something very small, that you might want to fix? The
acronym's title attribute has a capital T in Styles:
CSS declarations are identicals, only the selectors change:
acronym title=Cascading STyles SheetsCSS/acronym
Very tiny indeed, it's just something I noticed. Also is it Cascading
Style Sheet or Cascading Styles Sheet as you have it? Never really
thought about it, but I always though it was Cascading Style Sheet with a
singular Style? Maybe two tiny fixes?
Thank you for the links! I'll post back on this issue if anything comes up;
for now, I think this can be considered [Solved]...again.
Jono
__
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] Website check. How does it look?
On 10/12/05 3:59 PM, John Gucheman [EMAIL PROTECTED] wrote:
The site is at http://www.guchdesign.com/pop/
Let me say beforehand that I am using tables for layout... in combination with
a trick I found on csszengarden, attributed to Douglas Bowman at
stopdesign.com:
/* using an image to replace text in an h1. This trick courtesy Douglas
Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(/001/h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display:none
}
So, my questions are
1: how does the site look across various platforms?
2: In text-only browsers does the html display OK?
John,
I just finished up a post about Image Replacement titled
Re: [css-d] Multiple IR in IE 5.0/Win [Solved]
You should take a look at the IR technique(s) mentioned here:
http://www.tjkdesign.com/articles/tip.asp
__
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] IE6 and hover - csshover.htc problems
style type=text/css
!--
@import url(dmsr2b.css);
--
/style
!--[if IE]
style type=text/css
body {behavior:url(csshover.htc);}
/style
![endif]--
Did you try:
@import url(dmsr2b.css);
behavior:url(csshover.htc);
basically, no quotation marks.
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.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] Please help ie box hack question
I have #content
is it applied as *html #content ??
Can it be applied to a id and not a class???
Of course it can. Just like this: * html #content { }
Can it be applied to % - I know what % works in IE so can I use the %
there or do I have to calculate the actual px???
It can be applied to %.
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.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] Tables
Setting the td and table to a specific font size of the same, I think, if I remember, makes the fonts smaller than the .8em, can someone tell me whats happening here and how you work around it? You set the td and table to 1em, that makes it 1 em times the page's .8 em which equals .8 em. Rather than .8 em times .8 em which is .64 em. See? Also, have you tried setting the table to font-size:inherit? I haven't tried it, but maybe it will work. -- - C Montoya rdpdesign.com http://rdpdesign.com ... liquid.rdpdesign.comhttp://liquid.rdpdesign.com... montoya.rdpdesign.com http://montoya.rdpdesign.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] IE6 and hover - csshover.htc problems
Christian,
Yes, I've tried double quotes, single quotes, and no quotes - - none of it
makes the slightest difference. :(
I did manage to load the problem page up on my personal web space. The whole
thing is a mock-up so there are a lot of comments in the html and the css,
but that'll be cleaned up later.
The test page is here: http://home.comcast.net/~drt603/dallas/index4.htm
Thanks !
Diane
---Original Message---
From: Christian Montoya
Date: 10/12/05 20:48:19
To: Tomlins Diane
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] IE6 and hover - csshover.htc problems
style type=text/css
!--
@import url(dmsr2b.css);
--
/style
!--[if IE]
style type=text/css
body {behavior:url(csshover.htc);}
/style
![endif]--
Did you try:
@import url(dmsr2b.css);
behavior:url(csshover.htc);
basically, no quotation marks.
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.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/
[css-d] Site feedback please :)
Site at: http://www.alamug.com Would appreciate any feedback. Thanks! :) Lorraine __ 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] Tables
on 10/12/05 6:46 PM, Christian Montoya at [EMAIL PROTECTED] wrote: You set the td and table to 1em, that makes it 1 em times the page's .8 em which equals .8 em. Rather than .8 em times .8 em which is .64 em. See? Also, have you tried setting the table to font-size:inherit? I haven't tried it, but maybe it will work. Nice, both options seem to work just dandy for me. -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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] Site feedback please :)
Would appreciate any feedback. Thanks! Just a few things: For the navigation, I'd use a display: inline; unordered list instead of a table. In your header, I'd use an h1 with hidden text (just to keep with semantics) On a aesthetic note, I'd add a right border in your faux columns (and perhaps some extra padding-right on your content). Also, add some padding-bottom in the sections in your right colum. Overall, nice simple layout (login fields stick out a bit in Opera). \ Nice forum-- this is probably a bit late, but if you want a really clean and customizable forum, take a look at PunBB (http://www.punbb.com/). CSS XHTML strict templates (that should be much easier to modify). Ricky __ 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] Site feedback please :)
Thanks, Ricky- am noting down all your suggestions. Are you on XP? What browser did you view at? We're all Mac here, so would love to get feedback on other browser views ;-) Thanks again Lorraine On 10 13, 05, at 11:19 AM, Ricky Zhou wrote: Would appreciate any feedback. Thanks! Just a few things: For the navigation, I'd use a display: inline; unordered list instead of a table. In your header, I'd use an h1 with hidden text (just to keep with semantics) On a aesthetic note, I'd add a right border in your faux columns (and perhaps some extra padding-right on your content). Also, add some padding-bottom in the sections in your right colum. Overall, nice simple layout (login fields stick out a bit in Opera). \ Nice forum-- this is probably a bit late, but if you want a really clean and customizable forum, take a look at PunBB (http://www.punbb.com/). CSS XHTML strict templates (that should be much easier to modify). Ricky __ 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] Condensed font
Is there any safe condensed font I can use on the web? I can not use the font-stretch as it does not work in Safari, as far as I can tell, but something just a bit more of condensed would solve some issues for me. -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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] Site feedback please :)
Lorraine Nepomuceno wrote: http://www.alamug.com Generally fine, but hard to read parts of it because of small text. Choice of font-size/line-height unit (px) prevents any real improvements at my end. IE6 is dropping the right column on two largest font-sizing steps. Safari, Opera IE6 end up with overlapping text. http://www.gunlaug.no/tos/alien/alamug.png 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/
Re: [css-d] Condensed font
One of my favorite sites: http://typetester.maratz.com/ and about type stretching:.. I use letter-spacing and it does work on safari but it brings out very different results on IE/win. of course, that means using IE conditional css hacks. Thanks Dave Gregory [EMAIL PROTECTED] www.screwlewse.com - Original Message - From: Scott Haneda [EMAIL PROTECTED] To: CSS css-d@lists.css-discuss.org Sent: Wednesday, October 12, 2005 8:39 PM Subject: [css-d] Condensed font Is there any safe condensed font I can use on the web? I can not use the font-stretch as it does not work in Safari, as far as I can tell, but something just a bit more of condensed would solve some issues for me. -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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] Condensed font
From: Scott Haneda Is there any safe condensed font I can use on the web? Scott, Arial Narrow would be a fairly safe choice for Windows visitors, a lot of commonly installed MS home and business applications provide it. Nimbus Sans or Helvetica Narrow seems like a likely UNIX choice. The MS typography pages suggest that Arial Narrow is likely to be available on Mac OS too, but I have no recent experience of Mac type choices. -- Peter Williams __ 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] Site feedback please :)
Howdy Lorraine..
I am on a mac at work and XP at home and for testing.
I totally agree on the navigation.
Here is a site that has some pretty good code for making your inline list
for the top navigation:
http://css.maxdesign.com.au/listamatic/
There are a few ways to go at the navigation.
I would personally make the navigation into a list and use a generic button
image for background and use regular text on foreground.
ul id=nav
lia href=# accesskey=1Contact Me/a/li
lietc.. /li
/ul
This way you could make the css pretty easily
#nav ul { display: inline; width: 750px; list-style: none; }
#nav ul li { background: #eee url(/images/nav_button.gif) no-repeat top
left; color: #222; width: 40px; /* image width*/ height: 20px; /* image
height*/ }
There is more to it than that, but you get the jist.
On XP, the site looks as fine as xp can make it.
Firefox: the layout comes out fine... although I would also add a bit more
padding to the right column.
IE: layout breaks a bit. most likely culprit is IE's box model. (I didn't
bother to check that far. )
( in google: IE box model css )
has to do with widths and padding / borders and how they add up. U will
havta give IE a separate width value on its own.
In IE, the padding on the left column is fine.. but the text to the right of
the middle column overlaps, and spills out on the right column.
all in all.. very nice. ;)
Dave Gregory
[EMAIL PROTECTED] www.screwlewse.com
- Original Message -
From: Lorraine Nepomuceno [EMAIL PROTECTED]
To: Ricky Zhou [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, October 12, 2005 8:24 PM
Subject: Re: [css-d] Site feedback please :)
Thanks, Ricky- am noting down all your suggestions.
Are you on XP? What browser did you view at? We're all Mac here, so would
love to get feedback on other browser views ;-)
Thanks again
Lorraine
On 10 13, 05, at 11:19 AM, Ricky Zhou wrote:
Would appreciate any feedback. Thanks!
Just a few things:
For the navigation, I'd use a display: inline; unordered list instead
of a table.
In your header, I'd use an h1 with hidden text (just to keep with
semantics)
On a aesthetic note, I'd add a right border in your faux columns (and
perhaps some extra padding-right on your content). Also, add some
padding-bottom in the sections in your right colum.
Overall, nice simple layout (login fields stick out a bit in Opera). \
Nice forum-- this is probably a bit late, but if you want a really
clean and customizable forum, take a look at PunBB
(http://www.punbb.com/). CSS XHTML strict templates (that should be
much easier to modify).
Ricky
__
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] Condensed font
The MS typography pages suggest that Arial Narrow is likely to be available on Mac OS too, but I have no recent experience of Mac type choices. Arial Narrow as well as Impact is OK on default OSX 10.4.2 setup. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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] my divs refuse to nest!
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Greetings, I'm trying to create a page [http://tinyurl.com/7k3xx] with a header, 3 columns nested in a container, and footer -- all using divs. When I'm accesing the page with Firefox I can't get the 3 columns to stay in container. I have no idea what it looks like in commercial browsers. When the window is resized too small the footer goes under the colums instead of creating a scroll effect. I think a table would easily solve this issue, but I'm trying to go for a true css design. Thanks. - -- 8^) Laterz- ~Alvin http://CoolAJ86.Havenite.net - --- CoolAJ86: You know what I always forget? SlickC92: I dunno. CoolAJ86: Me neither... -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.1 (GNU/Linux) Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org iD8DBQFDTeZyw7Do1CSoDBARAnfSAJ4iE2z6JRKtms4wHV6w6qMBLCOdCACfbQ6X 5C/Rui94/yO4oLAjwwovjAA= =68ZP -END PGP SIGNATURE- __ 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] my divs refuse to nest!
Alvin A ONeal Jr wrote: http://tinyurl.com/7k3xx] When the window is resized too small the footer goes under the colums instead of creating a scroll effect. I think a table would easily solve this issue, but I'm trying to go for a true css design. CSS can easily solve all issues in that page, but you are not using it to your advantage. The problem: position: absolute everywhere. Nothing can scale properly. Overlapping is unavoidable. Looks like an overloaded 'fixed' layout in Opera, Firefox Safari. Feeding IE6 an unstyled NN4 page is not a nice move. You should find an ordinary 3-column CSS-template and start all over again. Try http://css-discuss.incutio.com/?page=CssLayouts or http://www.alistapart.com/articles/negativemargins 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/
