[css-d] Anchors not linking
I'm in the process of redesigning my site but have a problem with anchors not linking to different pages. The pages are copied from my existing site which, I believe works as you would expect. This is an original page: http://www.catnaps.org/islamic/isqatold.html and http://www.catnaps.org/islamic/islamic.css and this is where the problem can be seen: http://www.catnaps.org/islamic/test/isqatold.html http://www.catnaps.org/islamic/test/islamic.css If you go to the third paragraph and click on the link 'this' it should take you to pictures on http://www.catnaps.org/islamic/test/gulfarch.html but takes you to the page, not the photographs. What have I done wrong? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchors not linking
Neither of your links are working...? (Requested URL was not found on this server) Arno __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Cross-browser Display Issue / Problem With NOSCRIPT Validation
J Hodge wrote: Thank you, David. I am aware that scaling is problematic, and was thinking the best approach would be to write the CSS so that the content areas become scrollable once the text size is increased. RE: http://www.lostinxlation.net/sandbox3/portfolio/cybernomics1.html We are into areas of personal opinion. My opinion is the content area height should not be constrained, and that on scaling it should drive what is beneatn it from here to Havana. However, upon further consideration, it occurs to me that that it might also be beneficial to scale up the dimensions of the overall layout as well... That is one way of going about it. My /opinion/ is you may want the site to work in any screen window. One way to accomplish this is to set min/max width and provide your favorite workaround for IE6. the particular layout I'm using was one I picked for some practice in source ordering and the use of relative positioning, and it has certainly posed its own little challenges. =0) Nevertheless it is a valid concept. One can, and should (yet another opinion), set to maintain the css disabled/text browser source order: doing so can sometimes pose tricky and difficult css manipulation. And this is where others on the list are better qualified than I am to help bring this particular valid concept to a successful conclusion. (treswife at gmail dot com) Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] fixed div in IE6
Greetings: I hope this is not too trivial for comment, but searching for it in the archive has proved fruitless--it's just too hard to narrow down the search. On a page like http://users.rcn.com/rtberg/Adam/animag1.htm I have a left-column menu (div id=nav) that stays nicely fixed in FF or IE7 (for example), but which will not behave in IE6. It's a big file, but it's not complex HTML or CSS, and in IE6 I simply cannot make #nav hold still (or, for that matter, even show up in the left column). I do not want a second scroll bar on the page. I have tried fixes found on CSS advice websites (like http://divinentd.com/experiments/emulating-position-fixed.html), but at best they give me ugly double scroll bars. The CSS is at the top of the document. Thanks for any help offered. --Bob R. PS: And thank you for not suggesting that I break the file into smaller pieces. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] frames vs. CSS
Hi all, I'm a total neophyte at HTML and CSS programming, but I've been learning fast thanks to the help of the many excellent on-line tutorials. Anyway, here's my situation: I have two websites that I maintain, and one of them uses frames. I've got a top banner, a left menu column, and a main content area in the center. Switching between pages loads new content in the main frame, keeping the banner and menu unchanged. I want to convert the site to CSS, and have figured out how to do the banner, menu, and scrollable content area, but as near as I can figure, the only way to duplicate the content-switching in the main frame with CSS is to duplicate, on each page of the site, the coding for the banner and menu sections, which sort of negates the promise of CSS being so easy to make global changes. So I figure I must be missing something, and there must be an efficient and elegant way to have the frame-switching functionality with CSS. So the question is, how? Thanks for your help, J _ Explore the seven wonders of the world http://search.msn.com/results.aspx?q=7+wonders+worldmkt=en-USform=QBRE __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchors not linking
Not Found The requested URL /islamic/isqatold.html was not found on this server. I think you misspelled the links :) On 9/27/07, John Lockerbie [EMAIL PROTECTED] wrote: I'm in the process of redesigning my site but have a problem with anchors not linking to different pages. The pages are copied from my existing site which, I believe works as you would expect. This is an original page: http://www.catnaps.org/islamic/isqatold.html and http://www.catnaps.org/islamic/islamic.css and this is where the problem can be seen: http://www.catnaps.org/islamic/test/isqatold.html http://www.catnaps.org/islamic/test/islamic.css If you go to the third paragraph and click on the link 'this' it should take you to pictures on http://www.catnaps.org/islamic/test/gulfarch.html but takes you to the page, not the photographs. What have I done wrong? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using a header inline in a paragraph
Chris Ladd Wrote:
h2 {
display: inline;
Hello,
Have you tried this Chris, and did it work? Because according to the rule
book it shouldn't.
Display inline only changes the way an item is displayed in the client
agent, not what it is. EG P is a block element, H is a block element, and
as P is a weird block element that can not contain another block element
this should not work.
One way of emulating this is to use an true inline element span is a good
choice and style it.
.first {
Font-family: ariel
font-co;or:#
font-size:120%
}
Or whatever, that should work (Not Tried it, but see no reason it would
fail) Maybe some could confirm that...
Kind Regards
GM)
To Style with css just be dumb and inventive
Dumb because I/E is and Inventive because FF is
#
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fixed div in IE6
Bob Rosenberg wrote: Greetings: I hope this is not too trivial for comment, but searching for it in the archive has proved fruitless--it's just too hard to narrow down the search. On a page like http://users.rcn.com/rtberg/Adam/animag1.htm I have a left-column menu (div id=nav) that stays nicely fixed in FF or IE7 (for example), but which will not behave in IE6. It's a big file, but it's not complex HTML or CSS, and in IE6 I simply cannot make #nav hold still (or, for that matter, even show up in the left column). I do not want a second scroll bar on the page. I have tried fixes found on CSS advice websites (like http://divinentd.com/experiments/emulating-position-fixed.html), but at best they give me ugly double scroll bars. The CSS is at the top of the document. Thanks for any help offered. --Bob R. Simulating position fixed in IE6 ain't anything but trivial. There are a number of workarounds for emulating position fixed in IE6, including javascript, these are some: http://www.howtocreate.co.uk/fixedPosition.html http://tagsoup.com/cookbook/css/fixed/left/ http://annevankesteren.nl/test/examples/ie/position-fixed.html http://www.doxdesk.com/software/js/fixed.html a very nice working solution -- perhaps Georg Sortun will provide a link to the base layout: http://www.gunlaug.no/contents/toc_7a.html Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using a header inline in a paragraph
[EMAIL PROTECTED] wrote:
h2 { display: inline;
Have you tried this Chris, and did it work? Because according to the
rule book it shouldn't.
Just to clear that one up: it does work when fully implemented.
Example: http://www.gunlaug.no/tos/comments/test_07_0926.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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fixed div in IE6
David Laakso wrote: Bob Rosenberg wrote: http://users.rcn.com/rtberg/Adam/animag1.htm I have a left-column menu (div id=nav) that stays nicely fixed in FF or IE7 (for example), but which will not behave in IE6. Simulating position fixed in IE6 ain't anything but trivial. Right. The problem with most script/IE-expression based solution is that they are mode-dependent, and IE6 (and 7) has two modes - Quirks and Standard. Triggering one mode and scripting for the other, does not work too well in most cases. a very nice working solution -- perhaps Georg Sortun will provide a link to the base layout: http://www.gunlaug.no/contents/toc_7a.html Method: http://www.gunlaug.no/contents/wd_additions_15.html Old test case: http://www.gunlaug.no/tos/moa_8e.html ...which mostly deals with other problems regarding 'position: fixed'. I use a mode-switching (or mode-independent) IE-expression, which works reasonably well in IE6 - as long as the fixed element don't overflow the browser-window. This limitation exists for the real 'position: fixed' too - in any browser, so it isn't much of a problem in itself, IMO. 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE extra space a bug or just me?
Dear All: I am beginning to think I have come across a lovely bug for my layout. It happens in IE6 and 7 (Firefox is fine), and there's about 100-115px of additional white space around one of my divs. Inside it are two floating columns with some more boxes inside. Can someone point me towards a solution to removing the extra space in IE? I really appreciate it. (Please note it's built in a content management system, so it unfortunately doesn't validate in a few places. This should not be affecting this problem though.) http://www.kcscienceinc.org/default.aspx?id=1799 Specific CSS for this page (but I have a few others): http://www.kcscienceinc.org/upload/science/s/science1new3.css -- In peace, Amy M. Drayer Web Interface Designer [EMAIL PROTECTED] http://www.puzumaki.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frames vs. CSS
Jay Rabe wrote: Hi all, I'm a total neophyte at HTML and CSS programming, but I've been learning fast thanks to the help of the many excellent on-line tutorials. Anyway, here's my situation: I have two websites that I maintain, and one of them uses frames. I've got a top banner, a left menu column, and a main content area in the center. Switching between pages loads new content in the main frame, keeping the banner and menu unchanged. I want to convert the site to CSS, and have figured out how to do the banner, menu, and scrollable content area, but as near as I can figure, the only way to duplicate the content-switching in the main frame with CSS is to duplicate, on each page of the site, the coding for the banner and menu sections, which sort of negates the promise of CSS being so easy to make global changes. So I figure I must be missing something, and there must be an efficient and elegant way to have the frame-switching functionality with CSS. So the question is! , how? Thanks for your help, J _ Hi Jay, The answer to your question is that it's best handled with some scripting, which is off topic for this list. I've written to you off-list and will gladly provide some direction. Kind regards, ~Ray __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Margin vs. Padding
I think this is a simple question. And perhaps there is no straight answer. If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Thanks, Scott Need a vacation? Get great deals to amazing places on Yahoo! Travel. http://travel.yahoo.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
Scott Povlot wrote: I think this is a simple question. And perhaps there is no straight answer. If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Hi Scott, I guess it depends on what will be adjacent to the element and how the current element needs to interact with it. In some cases, the visual aspect of margin or padding are identical, but the underlying structure is not. A paragraph within a div which has padding: 20px; declared, will be 20px from the div edge. margin: 20px; will make sure the /div/ is never closer than 20px from an adjacent element. At the risk of stating what's clear, margin pushes the element from it's adjacent cousins while padding refers to the usable space within the element. More info on the box model is avail at w3.org [1] and many other places. I hope this helps. Kind regards, ~Ray [1] http://www.w3.org/TR/REC-CSS2/box.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
On 27 Sep 2007, at 14:04, Scott Povlot wrote: If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Vertical margins collapse; padding doesn't: http://www.w3.org/TR/CSS21/box.html#collapsing-margins Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
Nick Fitzsimons wrote: On 27 Sep 2007, at 14:04, Scott Povlot wrote: If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Vertical margins collapse; padding doesn't: http://www.w3.org/TR/CSS21/box.html#collapsing-margins Regards, Nick. However, vertical margins do not collapse in IE6 (are you surprised) so the big difference when using padding and margin is that margins will collapse most of the time. Also if you are applying any sort of background, the background will spill into the padding but not the margin of an element. -Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] configure full height iframe
Bob Meetin - www.dottedi.biz wrote: is there any way to configure the height of an iframe to expand/contract dynamically with the amount of input? i have tried general things like: height: 100%, height: auto; some various things with divs. If not declaring any height doesn't work, then I would think you are stuck. From what I remember of iframes normally with plain CSS the content will overflow or clip to the iframe and have an interior scroll bar. You would have use some javascript to resize the iframe automatically as the content resizes. -Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE extra space a bug or just me?
Amy Drayer wrote:
I am beginning to think I have come across a lovely bug for my layout.
It happens in IE6 and 7 (Firefox is fine), and there's about
100-115px of additional white space around one of my divs. Inside it
are two floating columns with some more boxes inside. Can someone
point me towards a solution to removing the extra space in IE? I
really appreciate it.
http://www.kcscienceinc.org/default.aspx?id=1799
Looks like one of IE/win's many instabilities - IE simply losing track
of where elements belong.
In that page a 'hasLayout'[1] trigger on #contentbox1 will stiffen up
IE's backbone enough to get rid of any unwanted whitespace...
#contentbox1 {height: 1%;}
A border on that element will also work, so IE's problem may be related
to miscalculated margins, which also is a known problem in that browser.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
On 27 Sep 2007, at 14:40, Mark Story wrote: Nick Fitzsimons wrote: On 27 Sep 2007, at 14:04, Scott Povlot wrote: If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Vertical margins collapse; padding doesn't: http://www.w3.org/TR/CSS21/box.html#collapsing-margins However, vertical margins do not collapse in IE6 (are you surprised) so the big difference when using padding and margin is that margins will collapse most of the time. Also if you are applying any sort of background, the background will spill into the padding but not the margin of an element. -Mark Actually, IE6 _does_ support collapsing margins, but gets it wrong (are you surprised :-) in a number of cases, such as when an element hasLayout and also has child nodes with margins which should collapse with the margins of preceding or following boxes (they don't). Another difference between margin and padding: margins can have negative size; padding can't. Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE extra space a bug or just me?
Dear All:
I have now tried adding the following code with no effect:
#contentbox1 {
height:1%;
border:1px #ff solid;
min-height:275px;
}
#contentbox2 {
min-height:600px;
}
I am unlucky. :-( Can anyone recommend a better way to make this
layout? I really appreciate it.
--
In peace,
Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.com
On 9/27/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Looks like one of IE/win's many instabilities - IE simply losing track
of where elements belong.
In that page a 'hasLayout'[1] trigger on #contentbox1 will stiffen up
IE's backbone enough to get rid of any unwanted whitespace...
#contentbox1 {height: 1%;}
A border on that element will also work, so IE's problem may be related
to miscalculated margins, which also is a known problem in that browser.
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
Thank you so much! When you wrote: Float the entire #menuh right, and _contain_ it. - what did you mean by and contain_it? I had to leave the float:right style on the page. If I moved it to the style sheet it didn't work. I think I remember hearing that to do a float you needed to declare the position, but when I declared the position on the menuh div it still didn't work. So for now I am leaving the float declaration on the page. Thank you again for your help. I did a Google search for the IE6 auto-expansion bug and it appears that maybe you coined the phrase - I am impressed. I will be reading up on it and trying to understand it all. Jennifer JGardner wrote: http://www.jgardnerdesigns.com/web-design-services.htm Per the problems below I made some changes, which I think solved the +1 break, but something caused some extra padding/margin, something in IE6. So now the page has all of this extra which space on the right side. Wrong width on menu, combined with IE6' auto-expansion bug. A lethal combination. IE6 also needs to establish a relation between #menuh-container and #menuh. Also, due to the changes the navigation now is on the left side, I had wanted it aligned on the right side. I can live with it since it is more functional now, but if anyone knows how I can get it to align to the right side of the page that would be a big bonus! Float the entire #menuh right, and _contain_ it. Background color goes on #menuh-container. Example: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html New styles for the relevant elements are found in page-head. Only tested in IE6, IE7, Firefox 2.0.0.7 and Opera 9.23. regards Georg -- http://www.gunlaug.no Luggage? GPS? Comic books? Check out fitting gifts for grads at Yahoo! Search http://search.yahoo.com/search?fr=oni_on_mailp=graduation+giftscs=bz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fixed div in IE6
Julia Perez wrote:
The problem I think is:
body {
behavior: url(csshover.htc);
}
I can see the dropdown menu in IE7 and Firefox Mozilla but not in IE6.
I´ve already put:
csshover.htc
The same example worked in another site and now I use it here and it
doesn´t work. Whay???
The link is:
http://www.padawan.bblogg.com.ar/emsetec/empresa.html
Dunno. Is csshover.htc being found: check the path?
Best,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE extra space a bug or just me?
Amy Drayer wrote: I am unlucky. :-( Can anyone recommend a better way to make this layout? To make sure I understand what you're after: are you saying that IE6 and IE7 are still adding spaces to this copy with the added 'hasLayout' trigger... ? http://www.gunlaug.no/tos/alien/ad-1/test_07_0927.html 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Question about attribute selectors
Hello all,
so i got the idea to play around with attribute selectors for a website...
wanted to serve up transparent png shadowed background images to new
browsers, and server up non-transparent gifs that i constructed to the rest.
rather than place a bunch of hacks on all of my elements that i use for
background images, i figured i'd use attribute selectors and make two rules
with different background images.
tried it out, didn't work, i couldn't figure it out, so i moved on. i
recently bought css mastery by andy budd and he mentions it a couple of
times in there, so i thought i'd go back to it and try to get it working,
but i haven't been able to as of yet.
i do not understand why this isn't working properly.
here's my code:
#accessBar {background-image: url(../images/shadow.gif); }
[id=accessBar] {background-image: url(../images/shadows.png); }
this code won't work, i just get the gifs no matter what browser i use.
i tried using div[id=accessBar] as well as body[id=accessBar] and
neither work. i tried putting single and double quotes in the image urls (i
never use quotes, though perhaps it is the correct syntax and i should be, i
don't know...), also to no avail. i tried using classes instead of divs,
nothing.
the code andy budd lists in his book is
.intro {border-style: solid; }
[class=intro {border-style: dotted; }
now, in css if you make two rules for the same element, like this:
#accessBar {background-image: url(../images/shadow.gif; }
#accessBar {background-image: url(../images/shadow.png; }
the browser will simply apply the the second one because it was the last one
in the css file.
i'm wondering if using attribute selectors they don't know what to do with
two different rules for the same element and the same attribute?
border-style: solid; and border-style: dotted; are two different values for
the attribute, but background-image: url(xxx.gif); and background-image:
url(xxx.png) are actually the same value for the attribute (the value would
be url?) and just different options applied to the value?
i'm thoroughly confused as to why this won't work. i can't see anything in
the rules that would make my code improper. if it works for the
border-style code in css mastery, why shouldn't it work for serving up
different background images.
it better not be a result of my using capital letters in my naming
conventions, because that would just be equally ridiculous.
anyone have any thoughts? is this a common shortcoming of attribute
selectors in css 2.1?
am i just a complete fool and i'm doing something obviously wrong?
take care,
jonmarc
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fixed div in IE6
body {
behavior: url(csshover.htc);
}
El problema esta en que no se ve el desplegable del boton Servicios en IE6 y si
en los demas. Ya tenia puesto el
csshover.htc
El mismo ejemplo lo use en otro archivo y funcionaba (en IE6, 7 , Firefox) pero
al hacerlo en este sitio no funciona en Explorer 6 y si en los demas.
Te paso el link a ver si me podes ayudar.
http://www.padawan.bblogg.com.ar/emsetec/empresa.html
hi! i´m new here!
and I want to be added because I have a question about the same subject in:
http://archivist.incutio.com/viewlist/css-discuss/55643
What do I do?
I´ve tried here lists.css-discuss.org but the e-mail is wrong I think
The problem I think is:
body {
behavior: url(csshover.htc);
}
I can see the dropdown menu in IE7 and Firefox Mozilla but not in IE6. I´ve
already put:
csshover.htc
The same example worked in another site and now I use it here and it doesn´t
work. Whay???
The link is:
http://www.padawan.bblogg.com.ar/emsetec/empresa.html
thanks
Gunlaug Sørtun [EMAIL PROTECTED] wrote: David Laakso wrote:
Bob Rosenberg wrote:
http://users.rcn.com/rtberg/Adam/animag1.htm
I have a left-column menu () that stays nicely fixed
in FF or IE7 (for example), but which will not behave in IE6.
Simulating position fixed in IE6 ain't anything but trivial.
Right.
The problem with most script/IE-expression based solution is that they
are mode-dependent, and IE6 (and 7) has two modes - Quirks and Standard.
Triggering one mode and scripting for the other, does not work
too well in most cases.
a very nice working solution -- perhaps Georg Sortun will provide a
link to the base layout:
Method:
Old test case:
...which mostly deals with other problems regarding 'position: fixed'.
I use a mode-switching (or mode-independent) IE-expression, which works
reasonably well in IE6 - as long as the fixed element don't overflow
the browser-window. This limitation exists for the real 'position:
fixed' too - in any browser, so it isn't much of a problem in itself, IMO.
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
-
Luggage? GPS? Comic books?
Check out fitting gifts for grads at Yahoo! Search.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about attribute selectors
On 27 Sep 2007, at 14:50, JonMarc Wright wrote:
so i got the idea to play around with attribute selectors for a
website...
wanted to serve up transparent png shadowed background images to new
browsers, and server up non-transparent gifs that i constructed to
the rest.
here's my code:
#accessBar {background-image: url(../images/shadow.gif); }
[id=accessBar] {background-image: url(../images/shadows.png); }
this code won't work, i just get the gifs no matter what browser i
use.
i tried using div[id=accessBar] as well as body[id=accessBar] and
neither work.
the code andy budd lists in his book is
.intro {border-style: solid; }
[class=intro {border-style: dotted; }
Andy is using class, not ID; this is the heart of the issue. (Note
that although I've snipped it out here, Andy does mention that it's
the order of those two rules that makes the difference.)
It's a question of specificity. As explained in CSS 2.1 section 6.4.3
http://www.w3.org/TR/CSS21/cascade.html#specificity the possible
sources of specificity are, highest to lowest:
a. style attributes;
b. ID selectors;
c. other attributes including pseudo-classes;
d. elements and pseudo-elements.
It also mentions explicitly that an attribute selector which happens
to select an ID attribute is not treated as an ID selector.
The end result of all this is that the first rule has a higher
specificity that the second rule, and so overrides it; this doesn't
happen in Andy's example because class selectors don't have the
special importance accorded to ID selectors.
To use the four column approach of the spec (this needs to be viewed
in fixed-width text to make sense):
| a | b | c | d |
-
#fred | 0 | 1 | 0 | 0 | = 100;
[id=fred] | 0 | 0 | 1 | 0 | = 10;
div#fred | 0 | 1 | 0 | 1 | = 101;
div[id=fred]| 0 | 0 | 1 | 1 | = 11;
meaning your first rule is at 100 and your second is at 10, so the
higher number wins. This implies that you should get the effect you
want with:
| a | b | c | d |
-
#fred[id=fred]| 0 | 1 | 1 | 0 | = 110
as 110 is greater than the 100 of #fred.
Phew! Fun stuff, CSS, ain't it? :-D
am i just a complete fool and i'm doing something obviously wrong?
Not a fool, and not _obviously_ wrong; matters of specificity have
tripped up everybody at some point, I think. (It still gets me on a
regular basis...)
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
JGardner wrote: http://www.jgardnerdesigns.com/web-design-services.htm When you wrote: Float the entire #menuh right, and _contain_ it. - what did you mean by and contain_it? Contain here means to make the parent element expand (or stretch) to contain floats, and the parent element in your case is #menuh-container. Otherwise the parent-element can't be used for adding background-colors behind and around its floating child - the #menuh. The buggy auto-containment effect in IE/win isn't replicated by any of the good browsers, so we have to tell the good browsers directly that they must contain floats. Of the many ways we can do that (tell them what to do), only a few will actually work in your case because you have a dropdown in that menu. I used 'display: table', which has no negative effects in your case because of how CSS tables work. IE/win doesn't understand that 'display: table' property at all, but this is one of those cases where IE's own 'hasLayout' bug comes to its rescue. I had to leave the float:right style on the page. If I moved it to the style sheet it didn't work. I think I remember hearing that to do a float you needed to declare the position, but when I declared the position on the menuh div it still didn't work. So for now I am leaving the float declaration on the page. Floats should not be given any positions - unless one also want to offset it with 'position: relative'. Absolute or fixed positioning of floats (as found in some stylesheets) simply mean the float-property will be ignored by browsers. I'll check that I didn't miss any of your existing styles. In my demo they are co-existing with my styles since I never touched your stylesheet. I'll be back on that once I have had time to dissect your styles down to the smallest details. Thank you again for your help. I did a Google search for the IE6 auto-expansion bug and it appears that maybe you coined the phrase - I am impressed. I will be reading up on it and trying to understand it all. Do that. FYI: the auto-expansion bug makes any element act like it were an HTML table-element on drugs. It works different on horizontal and vertical dimensions, since it doesn't keep the elements children in check the same way in both directions. Fun :-) Also: since the patch they have used to fix the auto-expansion bug in IE7 often has worse effects than the original bug itself, we may have to deal with that IE/win bug and the buggy patches for a long time. 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE extra space a bug or just me?
Dear Georg: Somehow it works on your server but not mine... I even copied the code for the science1.css you had and it still produced spacing errors on my page. I'm not sure where to go from there. :-( But yes, the layout looks fine when I view it on your server. My server just hates me. If you don't mind, I'm going to try to compare the code from yours to mine... just pressed for time (I have 40 minutes to get this done *sigh*). Thank you very much. :-) -- In peace, Amy M. Drayer Web Interface Designer [EMAIL PROTECTED] http://www.puzumaki.com On 9/27/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: To make sure I understand what you're after: are you saying that IE6 and IE7 are still adding spaces to this copy with the added 'hasLayout' trigger... ? http://www.gunlaug.no/tos/alien/ad-1/test_07_0927.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frames vs. CSS
On Thu, 27 Sep 2007 06:11:56 + Jay Rabe [EMAIL PROTECTED] wrote: area, but as near as I can figure, the only way to duplicate the content-switching in the main frame with CSS is to duplicate, on each page of the site, the coding for the banner and menu sections, which sort of negates the promise of CSS being so easy to make global changes. So I figure I must be missing something Nope, that's the way to do static pages, you are right on track. In a CMS all the tedious stuff is generated (by your scripted rules), and only content is put in into the backend. Gruss, Ingo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Overspill images outside of content area
Hi, and thanks for the reply. The issue with this the solution is that when I increase the width of' #section1 div div' (and #section2) then the rose image starts to hide behind the widened DIV. It seems to have it the way I want, which is to have the stalk of the rose to go behind some of the text then I will need to have the rose image as part of the same DIV, and the best way seems to have it as a background image, and then apply some padding, much like what Walter previously mentioned. I have taken what you showed me as an example and uploaded it to the following location. It now has the BG image as part of the DIV and has the appropriate padding. http://www.trystandsamthewedding.com/test/home4.htm It works ok in IE 7.0 so far, bit do I need to add additional protection to it against IE 6.0 browsers? (isnt there box model issues, or something?) Also, I'd like to know if the approach I am taking is the right one. :) Thanks in advance. Tryst -Original Message- From: Gunlaug Sørtun [EMAIL PROTECTED] To: [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Sent: Thu, 27 Sep 2007 1.31am Subject: Re: [css-d] Overspill images outside of content area [EMAIL PROTECTED] wrote: http://www.trystandsamthewedding.com/home2.htm image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Background images can't spill out of their own container, so you'll have to offset the entire container(s) if you want a stable spill-over effect. Example: http://www.gunlaug.no/tos/alien/try/test_07_0926.html Such an offset will make the page wider, but the main part will center nicely and stay within whatever width you give the main containers. I've used 'width: 720px'. regards Georg -- http://www.gunlaug.no Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Overspill images outside of content area
[EMAIL PROTECTED] wrote: The issue with this the solution is that when I increase the width of' #section1 div div' (and #section2) then the rose image starts to hide behind the widened DIV. ...because I declared a white background on that div. Won't hide anything when the relevant background is made transparent. Check this example again... http://www.gunlaug.no/tos/alien/try/test_07_0926.html ...with changed 'width' and 'background'. http://www.trystandsamthewedding.com/test/home4.htm It works ok in IE 7.0 so far, bit do I need to add additional protection to it against IE 6.0 browsers? (isnt there box model issues, or something?) Yes, as browsers that don't follow W3C recommendations do not add the padding to the width. That means all IE/win versions older than IE6 will use the old model and need corrections/hacks. For IE6 that's only a problem when the document triggers 'quirks mode' in that version - as your page does now. I'm used to battle the box model differences, so my example will appear more or less the same in all versions of IE/win. Also, I'd like to know if the approach I am taking is the right one. It is fine apart from the potential box model problems. Readability isn't good on top of such a background though, so you may have to adjust the rose-images a bit. 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] a css animation?
Hi Everyone, this is more of a thought that a question about 'how to fix my website across browserland' I am pretty new to the land of css however I have done a site here http://www.trishahills.com/home.htmlmy question for discussion is can the 3 second intro page be repeated again and again to create a slow stop frame animation - has this been done before creatively and has anyone got any links also can the pages be sent into the screen from different directions? Apologies if this is basic css, I look forward to the response Regards Phil Turner FREELANCE DESIGNER TEL: 0161 439 1669 Graphic Designer BA Hons [EMAIL PROTECTED] http://www.philturner-uk.com NEW BOOK - YOUR PLANET NEEDS YOU http://www.yourplanetneedsyou.org Please consider the environment before printing this email. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a css animation?
Phil Turner wrote: Hi Everyone, this is more of a thought that a question about 'how to fix my website across browserland' I am pretty new to the land of css however I have done a site here http://www.trishahills.com/home.htmlmy question for discussion is can the 3 second intro page be repeated again and again to create a slow stop frame animation - has this been done before creatively and has anyone got any links also can the pages be sent into the screen from different directions? Apologies if this is basic css, I look forward to the response Regards Phil Turner Phil, I think this has nothing to do with CSS. But, I guess for starters my question is what 3 second intro page as the site is dead in the water. You can use scripting or a timed meta attribute to create an endless loop; but either way, I think the question is off-topic for this list. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] thank you
Colleagues Thank you very much for your help with css layout books and websites. I'm finding Meyer's css and the css anthology book especially helpful. Sincerely, Raumin Ray Dehghan West Chicago Public Library __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a css animation?
On 28-Sep-07, at 4:17 AM, Phil Turner wrote: http://www.trishahills.com/home.html Phil, Is there a reason you are setting 'display: block;' on your #navigation links? It causes them to move disconcertingly. Best, - Rahul. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about attribute selectors
Hi JonMarc,
Add !important directive in order to increase the specificity of the
attribute selector.
Actually the ID seletor rule is overriding the attribute selector rule.
Regards,
Maurício Samy Silva
http://www.maujor.com/
--
- Original Message -
From: JonMarc Wright [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Thursday, September 27, 2007 1:50 PM
Subject: [css-d] Question about attribute selectors
...
#accessBar {background-image: url(../images/shadow.gif); }
[id=accessBar] {background-image: url(../images/shadows.png); }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
As promised, I've gone through the entire set of styles again, and found that the simplest factors are the easiest to miss :-) You have an [if lt IE 7] style-block in the page head, and those styles will of course override what's in the stylesheet and make everything fail in IE6 and older versions. Of course: my first example worked just fine, since I had placed all corrections in a style-block _after_ the [if lt IE 7] style-block. It is a matter of order and specificity - that I overlooked. Again: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html 1: All new styles moved to the stylesheet where they have replaced the old ones... http://www.gunlaug.no/tos/alien/jg-2/nav.css ...and my styles are easy to see since I don't use indentations - a personal preference thing. 2: I've deleted all unnecessary and disturbing styles in the [if lt IE 7] style-block in the page-head, so IE6 gets its corrections but will otherwise follow what's in the stylesheet. It is *important* that you transfer my corrections to your own page, or else it will fail in IE6 again. 3: I unexpectedly found that my contain floats method misfired in one browser - disturbing the dropdown, so I've changed that to the easyclearing[1] method - and tested again. 4: The use of 'font-size: small' on #menuh triggers IE/win's font resizing bug[2], so I changed that to 'font-size: 82%'. Choose another value if you like, but avoid the use of keywords if you want bug-free and somewhat identical font size across browser-land. regards Georg [1]http://www.positioniseverything.net/easyclearing.html [2]http://www.gunlaug.no/contents/wd_additions_13.html -- 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Div not containing other divs
Maybe I`m tired but I can`t work this one out, I have a div called wrapimg (the
one that has a tan border) which is meant to contain the divs: leftcontent,
centrephoto and flashscroll stopping before the footer. I`m trying to set a
containing div so that I can have a cross browser background image at the
bottom of the div and create instead of unreliable bottom borders which don`t
seem to line up horizontally cross browser. Thank you for any help on this one:
Here`s the page and relevant css:
Page:
http://tinyurl.com/2ywavl
CSS:
html, body {
color : #000;
margin : 0;
padding : 0;
}
body {
font : 100% tahoma, arial, sans-serif;
color : #4d4d4d;
text-align : center;
}
h1 {
font-size : 100%;
font-weight : normal;
margin : 0;
padding : 0;
}
a {
color : #7f99ae;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
br.both {
clear : both;
}
br.right {
clear : right;
}
br.left {clear : left;}
..clear {
height : 0;
clear : both;
}
#page {
width : 794px;
margin : 0 auto;
text-align : left;
}
#header {width: 794px;}
#header img { display: block;}
#topnav {
padding: 0 0 3px 0;
margin: 0 ;
background-color: #006600;
text-align: center;
border-bottom: 1px solid #ff;}
/*index css*/
#wrapimg {border: 1px solid tan; }
#leftcontent {border: 1px solid #ccc; width: 178px;
float:left; clear:left; }
#centrephoto {border: 1px solid #ccc;
width: 538px; float:left; }
#flashscroll {
border: 1px solid #ccc;
width: 72px;
float: right;
text-align: center;
}
/* footer */
#footer_home { clear : both;
text-align : center;
padding: 10px 0;
width : 100%;
font-size: 75%;}
#footer_home p {
margin-top : 0;
margin-bottom : 0;}
#footer_home a {color: #a2a2a2; text-decoration: none;}
-
Check out the hottest 2008 models today at Yahoo! Autos.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
