Re: [css-d] Can't figure this out - Center a div with variable width
On 10/31/06, Mark Wheeler [EMAIL PROTECTED] wrote: to css) - Can you have a div (content) centered inside another div (container) BUT, the content div's width may be different because of content (thus you can't set the width) AND the div width must collapse around the content (so if a border was used, it would collapse around the content)? I can't figure this out. I'm sure there is a simple solution, but I can't seem to get there. Any help would be appreciative. As far as I understand, if you don't set a width for the content div, it will grow to fit the parent's width (in this case the container div). So I'm not sure what you mean by centering it. I'm not an expert in CSS though, so someone might correct me! :) Grey __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Unexplained selector effect
Hi all,
Very strange thing just happened to me. The following description was
picked up by IE but not Firefox:
HTML BODY .homebanner .top .right,HTML BODY .homebanner .bottom .right
{
left: 8px !important;
height: 8px !important;
}
It is not a question of specificity or importance - the FF DOM inspector
did not see this rule at all.
BODY .homebanner .top .right,BODY .homebanner .bottom .right
{
left: 8px !important;
height: 8px !important;
}
My colleague, under the false impression that only IE would recognise
the HTML element as a selectable (effectively confusing my selector with
the star hack), suggested I remove the HTML reference from the
description, and suddenly this works.
I can already predict what the Taliban among us will say about this
unorthodox use of 'important' and a pretty bizarre set of selectors -
but it is worth emphasising that the same stylesheet describes objects
selected via an 'HTML BODY' prefix and these are acknowledged.
Any ideas?
Regards,
Barney
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can't figure this out - Center a div with variable width
A left margin of -50% *kind-of* works. IE has a bizarre way of
calculating things though, especially with percentages. If the child div
has a fixed specific width, then you can hard code that, but if the
contents are variable you may be in trouble... I am currently dealing
with almost exactly this problem (cross-browser method for horizontally
centring scalable objects), so I'll keep you posted if I make any headway.
.h-centredObject
{
position: relative;
right: 50%;
margin-left: -50% /* entropic in IE */
}
#h-centredObject
{
position: relative;
right: 50%;
width: 450px;
margin-left: -225px /* bullet-proof */
}
Hope this helps.
Regards,
Barney
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] one div's margin-top affecting neighbour
Hi there, I have a page that's misbehaving in firefox 2. I am trying to apply a graphical look to my main content divs using a set of images giving them rounded corners and shading. My approach is to use background images on divs absolutely positioned into the corners of the containing div, and z-indexed to go behind the content. Here's a snippet showing the image handling: div id=customerSearchResults div class=testDialogCorner style=top:0;left:0;background:url(c1.jpg) no-repeat top left; /div div class=testDialogCorner style=top:0;right:0;background:url(c2.jpg) no-repeat top right; /div div class=testDialogBorder style=left:0;background:url(bleft.jpg) repeat left;/div div class=testDialogBorder style=right:0;background:url(bright.jpg);background-repeat:repeat;background-position:right; /div div class=testDialogCorner style=bottom:0;left:0;background:url(c3.jpg) no-repeat bottom left; /div div class=testDialogCorner style=bottom:0;right:0;background:url(c4.jpg) no-repeat bottom right;/div div id=customerSearchResultsHeader !-- here is some actual content -- Here's the problem: in firefox 2, the margin-top on customerSearchResultsHeader div is dragging down the background images on the Dialog image-holding divs, which surely shouldn't happen. You can see I need to push the column headings down, but it shifts the image too. Has anyone else come across this? This is the HTML: http://www.gargantus.com/sylvie/flow.htm I discovered a work-around by making the content divs absolute too, but I would rather leave them relative. Thanks Adam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Scrolling horizontal image list
Hi, I am in need of a scrolling horizontal image list, similar to the one in the WordPress admin. Only, wp uses an IFRAME and I need to use a div. The images have captions beneath them. Here is my current HTML |div id=container div id=imageList div class=imageCard label class=imageListItem for=image135 input class=hide type=radio name=images id=image135 value=136 / a href=# onclick=[...]img src=./readBlob.do?id=136 height=135 width=120 border=0 alt=Week Specials - Brochure /Week Specials - Brochure/a /label /div div class=imageCard label class=imageListItem for=image137 input class=hide type=radio name=images id=image137 value=138 / a href=# onclick=[..]img src=./readBlob.do?id=138 height=135 width=239 border=0 alt=Week Specials - Brochure /Week Specials - Brochure/a /label /div /div /div My CSS works in FireFox but not in IE. I gave the container a width of 95% and the imagelist a width of 3000px, and overflow:scroll. In IE the list does have a horizontal scrollbar, but it doesn't update the screen for some reason. When I resize the window, suddenly the scrolling is performed. Ideas? Maybe a reference to a working version/demo? thanks Michiel | __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Conditional comments
Does anyone else have an issue with Microsoft's conditional comments solution? I really don't want to sound like I'm bashing here, I'm really happy that we're getting a more compliant browser from IE, but I'm about to embark on hours of work to fix up sites for which I or previous developers employed the child selector to get around IE's deficiencies which still have not been fixed. I must now decide between IE's conditional comments approach, or use the triple-XXX hack. Neither of these appeal. My main concern with conditional comments is that it pollutes my document with proprietary, bulky markup. I employ filters to feed CSS to different versions of IE. If I followed Microsoft's advice, I would instead have the following in the head of every one of my pages: !--[if IE 5.0] link rel=stylesheet type=text/css href=ie-5.0.css / ![endif]-- !--[if IE 5.5] link rel=stylesheet type=text/css href=ie-5.5.css / ![endif]-- !--[if IE 6] link rel=stylesheet type=text/css href=ie-6.0.css / ![endif]-- !--[if IE 7] link rel=stylesheet type=text/css href=ie-7.0.css / ![endif]-- What about future versions? Am I to continue adding more conditional comments to the head of every page when Microsoft rolls out another verion? IE 7.5? IE 8? IE 9? How many comments should we keep? One of my clients is a government agency, and having moved technologically with the speed of government, is still using static webpages for its site. To the tune of 7000 of them. There is no SSI in the head, no processing directives where I could sneak in these comments. If I am to insert a conditional comment, I will have to do so either programmatically or via a global search and replace for each of the dozens of Frontpage subwebs they use. Either solution is unpalatable. Ever see a global search and replace go wrong? I have, and without the ability to undo, the only option is to do a restore. Wouldn't it be a more elegant solution to put conditional comments in the CSS document itself? Styles for specific browsers could be kept in a central location, with the added bonus of being cached on the client's machine instead of having to push these comments over the wire again and again. Am I over-reacting to this? Does anyone else have an issue with this? Regards, Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Heading tag Sizing
What do I need to do to have the heading tag render the same size cross browsers? Steve LaBadie, Web Manager East Stroudsburg University 200 Prospect St. East Stroudsburg, Pa 18301 570-422-3999 [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] http://www.esu.edu http://www3.esu.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scrolling horizontal image list
I am in need of a scrolling horizontal image list, similar to the one
in the WordPress admin. Only, wp uses an IFRAME and I need to use a
div. The images have captions beneath them. Here is my current HTML
I solved the problem already. I just disabled all style sheets and
started over again. I ended up with
|#container { width: 98%; overflow: scroll; height: 220px; margin:1em 2%
1em 0}
.imageCard { border: 1px solid gray; float: left; padding: .1em; margin:
1em; }
#imageList { width: 3000px; overflow: hidden; }
#imageList a { display: block; margin: 0 auto; padding:.5em }
#imageList img { display: block; float: none; }
#imageList .hide { display: none; }|
The cause is still unknown though.
Michiel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical alignment of text and input
I am wondering about the best way to vertically align text and an input element. For instance: input type='checkbox' / Check this This results in the checkbox vertically higher than the accompanying text. What is the best way to put the bottom of each on the same vertical level? Cheers - george - Eclectic Mix: http://EclecticMix.com One Minute How-To: http://OneMinuteHowTo.com DRiP Investing: http://DRiPInvesting.org Handmade Photographic Images: http://www.GLSmyth.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] the mystery of collapsing margins
francky you wrote - But while margins don't have an own background or other recognizable thing, you cannot say if some part of the combined collapsed margin is belonging to the bottom-part of the first one, or to the top-part of the second one ... ...not sure i get this, seems to me one of the elements' margins has to win out, either largest of: A) the first element's bottom margin - OR - B) the second element's top margin. or else the top element's bottom margin should win out. don't think the browser would 'average' the margins, do you...? ANYWAYS... i appreciate your thorough analysis - many a webmaster thank you i'm sure. thx again - more later! =francis= http://www.fatgraffix.com [EMAIL PROTECTED] mail2web - Check your email from the web at http://mail2web.com/ . __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS and png-24 for IE 5.5+
is there a 'broadly' accepted method for dealing with CSS and PNG-24 files in IE 5.5+ ? I googled for the information and a whole slew of possible solutions emerged. Rather than going through all of them, is there an accepted cross- browser way to handle PNGs? Basically, what method do you guys use? many thanks g __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] h2 tag won't budge
Hi, Need some more help on this template: http://www.digitalmousedesigns.com/new/ In the first column I'm using PVII's Tab Bar Magic ... CSS here: http://www.digitalmousedesigns.com/new/css/TabBar.css I want the page title which is an h2 tag to move over to be left aligned w/the content and I can't get it to budge. I was going to just narrow down the content but to match the h2 tag the content is to narrow and to much of a margin - looks out of place. Thank you! :: Deb | PBC Web Design :: http://www.PBCWebDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help w/content links not behaving please
Hi there, I have this template almost ready to break down into includes and continue w/site development but am having trouble getting the text content links to *not* take on the css style of other links in the page. Page: http://www.digitalmousedesigns.com/new/ CSS: http://www.digitalmousedesigns.com/new/css/4columns.css I've tried everything my meager css knowledge will provide me with. No matter what I do the column link lists take on the same style as I put in the text content paragraphs and I want the links w/in the text content to be different than the column link lists currently in the page. I've input a test dummy link in the first paragraph, second column. I want the other column text links to pretty much do what *is* working in the left most column (different css file) but can't make this work. As always, your help is greatly appreciated. :: Deb | PBC Web Design :: http://www.PBCWebDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Bizarre img margin behavior in IE7
Could someone peek at this page - www.atrachapter.com http://www.atrachapter.com/ in IE7. When the page loads look at the margin on the main image of the page. When I move my mouse over the left hand navigation (ul) the margin on the image disappears. I put a border on the ul and li's and there doesn't seem to be any change in their width that might cause this to happen. Thanks for any feedback. Tom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 - Rendering bug - repeated content
Hi all, I have intermittently experienced a weird rendering bug with IE over the last few years as I've been learning CSS. The bug tends to manifest itself in particularly complicated sections of floated layouts. I have taken some example screenshots and posted them at the following URLs: http://www.jamiecon.net/ierender/eg1.jpg http://www.jamiecon.net/ierender/eg2.jpg As you can see, content seems to be repeated at a point below where it originally appears. Although in the two examples the content 'moves' to a simillar spot, the actal location of the copy is pretty random and in other manifestations it's been in a different location. A strange quirk of the effect is that if you highlight the original text, the copycat text is also highlighted, as if by magic - this is apparent in the second example. My solutions up to now have been to fiddle with the layouts until it goes away - an approach which is beginning to annoy me! I have been unable to pin down either cause or resolution. I've also been unable to find any literature on this exact problem (although a few that are simillar). The bug doesn't appear to occur in IE7. I'd be grateful for any comments about whether people have experienced this problem, and what they found to be the best solution. Many thanks, James __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS validation
I'm trying to get a slideshow (uses microsoft fade) to pass CSS validation. The validator says: * Line: 190 attempt to find a semi-colon before the property name. add it * Line: 190 Property progid doesn't exist : DXImageTransform The code: a id=ss_img_link href=javascript:ss.hotlink() img id=ss_img name=ss_img src= style=filter:progid:DXImageTransform.Microsoft.Fade() alt=Select image to visit this gallery title=Select image to visit this gallery class=slideshow_img /a The transition only works in IE; I got firefox to pass CSS by setting up an IF IE statement, but this not not help it pass for IE. Help? -Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the mystery of collapsing margins
(adding the off-list mails in between) francky wrote: [EMAIL PROTECTED] wrote: okay - and once again you've provided an absolutely precise and detailed explanation of the question at hand. i get it too - in document flow, margins collapse (with the larger margin winning out, correct ? yep (or is it the first element's margin taking precedence over the following element's margin...?) no, don't think so: the maximum of the adjoining margin widths is winning largest wins, not the first one (unless the 1st one is the largest one :-) ). But while margins don't have an own background or other recognizable thing, you cannot say if some part of the combined collapsed margin is belonging to the bottom-part of the first one, or to the top-part of the second one ... * In case of doubt: experiment and make some testpages! ;-) [...] and according to you, floated elements' margins aren't supposed to collapse (or merge) with the element above it - as floats are out of document flow - seems to make sense, professor! you know - this brings up the often overlooked subject of margin collapsing in general... something not often brought up in css discussions. i say this because seems i often run into margin problems - and i notice that not alot of books and manuals (online or print) seem to ever bring it up. [...] well, thanx again sir... On the css-d Wiki there's a special page about it, you know? http://css-discuss.incutio.com/?page=CollapsingMargin = = = = = then [EMAIL PROTECTED] wrote: francky you wrote - But while margins don't have an own background or other recognizable thing, you cannot say if some part of the combined collapsed margin is belonging to the bottom-part of the first one, or to the top-part of the second one ... ...not sure i get this, seems to me one of the elements' margins has to win out, either largest of: A) the first element's bottom margin - OR - B) the second element's top margin. or else the top element's bottom margin should win out. don't think the browser would 'average' the margins, do you...? ANYWAYS... i appreciate your thorough analysis - many a webmaster thank you i'm sure. thx again - more later! =francis= Hi Francis, Yes, I think you're making the right conclusions. What I meant (in a rather abstract way), is easier to illustrate in a html-page than in a mail. So please look on this illustrating page http://home.tiscali.nl/developerscorner/css-discuss/illustration_collapsing-margins.htm. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three Columns
Richard Brown wrote: http://efe-gbnets.com//index.html http://efe-gbnets.com//style.css [trimmed] The question is quite simple! How do I place a gap between the centre column and the two outside ones please? I was thinking of putting another div inside content and padding that. Is that right please? The first question, in my mind, is how can one create a three column layout that works cross-browser? Best solve that first. These captures seem to indicate that what you have is not solving that question. 12 captures: http://www.browsercam.com/public.aspx?proj_id=296901 . At any rate, would you have better luck with one of the three column pages from here : http://blog.html.it/layoutgala/? Or, perhaps, this one: http://www.alistapart.com/articles/negativemargins ? And the gap (I am not quite sure what you mean by that) can come latter. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 container woes
I'm struggling to correct a layout issue in IE7 and not making much progress, I'm hoping y'all could at least nudge me in the right direction. css: http://sinope.capitol-college.edu/styles/main.css example page: http://sinope.capitol-college.edu/newsevents/index.shtml Remove the height from your page DIV. -- Al Sparber - PVII http://www.projectseven.com Extending Dreamweaver - Nav Systems | Galleries | Widgets Authors: 42nd Street: Mastering the Art of CSS Design __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div inside a div, can't give exlusive top margin to the inside div.
itay Malin wrote: I try to give the inside div a margin, what realy happens that the outside div gets it. I can solve it by giving the outside div a padding, but I don't think this is the right solution: It is _one_ of the right solutions for 'collapsing margins'[1], but there are a few others. They all have pros and cons, so you'll have to pick the one that suits your design. I prefer 'floating' myself - whenever possible. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] handheld css
Cem Meric wrote: Would people mind sharing their experiences? Have they found handheld css useful? Is it just not implemented enough among phones for it to be worth any time? I use Opera Mini on my mobile and show customers how their web sites look on a handheld device after our design. They love it. Specially when you show them a competitor web site with no CSS implementation :) Regards, -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions Pty Ltd The website's still in the rough but if you look at http://www.versatilia.com on a mobile it should render quite nicely. That's without a specific handheld CSS file but a global CSS file fed to all media types. Screen styles are kept separate. (if it's broken can you let me know, I lost my phone charger so I've only tested it on ANT so far) Rob O __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] png background not showing in firefox
works fine in IE7.
#right {
background-image:url(../images/middle.png);
width: 510px;
position:absolute;
height:350px;
top:160px;
left:436px;
border:#006699 1px solid;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] design goes vertical in IE
At 02:27 AM 10/29/2006, you wrote: http://www.rioartpack.com some times when clicking the about or contact page ( try clicking the link a few times ), all the elements go vertical instead of floating left. is there a way to fix this problem ? and any idea why it is happening ? I've clicked the about and contact links probably a dozen times each (in Firefox) - no vertical for me. In IE6 just opening the site it's all vertical - no clicking needed. I'm not good enough at this css to try to help w/this but thought I'd mention that I did notice 2 other things - first looks like you don't have a background color (white?) coded in and secondly when your products flyout displays the page moves/jumps. :: Deb | PBC Web Design :: http://www.PBCWebDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Validation error + border glitch
Page is http://www.njlada.com/plus/events/
I'm getting an error message which doesn't match with my code. Please
take a look and see if you can find what the validator is choking on
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fnjlada.com%2Fplus%2Feventswarning=1profile=css2usermedium=all
ALSO
I attempted to code a border which should go around each of the two
sections on this page. The border doesn't appear. What did happen
after I coded in the border on css and html files is that the
backgrounds for each of my two headers drew together. In Safari they
abut each other contiguously now, whereas before they didn't. I would
like to know why this happened. I'm also interested in knowing what
is the proper way to draw two headers together in this fashion, and
how I might make my border appear. Thank you!
Code for the border:
.htwobox {
border: 1px solid #6681aa;
padding: 6px;
}
--
Kim Brooks Wei
1.201.475.1854
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS validation
* Bob Meetin wrote: I'm trying to get a slideshow (uses microsoft fade) to pass CSS validation. That's not possible, if you use the Microsoft 'filter' property, your style sheet is not valid per any CSS specification. -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 - Rendering bug - repeated content
James Condliffe wrote: Hi all, I have intermittently experienced a weird rendering bug with IE over the last few years as I've been learning CSS. The bug tends to manifest itself in particularly complicated sections of floated layouts. I have taken some example screenshots and posted them at the following URLs: http://www.jamiecon.net/ierender/eg1.jpg http://www.jamiecon.net/ierender/eg2.jpg As you can see, content seems to be repeated at a point below where it originally appears. Although in the two examples the content 'moves' to a simillar spot, the actal location of the copy is pretty random and in other manifestations it's been in a different location. A strange quirk of the effect is that if you highlight the original text, the copycat text is also highlighted, as if by magic - this is apparent in the second example. My solutions up to now have been to fiddle with the layouts until it goes away - an approach which is beginning to annoy me! I have been unable to pin down either cause or resolution. I've also been unable to find any literature on this exact problem (although a few that are simillar). The bug doesn't appear to occur in IE7. I'd be grateful for any comments about whether people have experienced this problem, and what they found to be the best solution. Pity you didn't supply a link so we could see for sure - but this may be caused by HTML comment tags. Take them out your mark-up and see what happens! Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Validation error + border glitch
* Kim Brooks Wei wrote: I'm getting an error message which doesn't match with my code. Please take a look and see if you can find what the validator is choking on http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fnjlada.com%2Fplus%2Feventswarning=1profile=css2usermedium=all You have background: #transparent; As the Validator points out, #transparent is not a legal color value; perhaps you mean transparent? -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Bug - but which?
Test page: http://www.webdesign101.dk/x/usenet/cssmenu2.html This pages suffers from a curious effect, which is, when viewed in IE6, all of the content shifts to the left when hovering over the menu the first time. --- Jørgen Farum Jensen http://www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] relative vs floats in Opera9
Hello, please take a look at http://pmplus.org/model.html. It has two divs, relatively positioned inside a container to overlap each other. In FF and IE everything works fine. In Opera9 they can't overlap, and the lower element is shifted. it looks like floats of the child elements cause this, as the example without floats works fine. Is this an Opera bug, or I miscoded something? can you advise different css to achieve the same result, if it's the bug? Thanks in advance, Yegor Moroz aka dspt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Tailor's dummy accessible menu
http://www.uk-web-pros.co.uk/left-menu-bordered-example-1/left-menu-tailorsdummy.html. I've set out this no-hack menu for trainees here who have difficulty understanding box models for accessibility standards compliance. Before writing a detailed article it makes sense to have experts check it. The concept of the menu is to base the model around a tailor's dummy wrapper. Of course, I'm standing on the shoulders of giants here, having based this on excellent articles like http://www.alistapart.com/articles/customcorners2/. It seems to me, though, too many starting out with CSS and coding for accessibility have a difficulty with separating out components. They don't grasp concepts set out in the article referred to. Consequently, they end up with code that may work on browsers but breaks when modifications are made or when technology changes (e.g. IE7 and previous IE hacks!). There's also often an issue as regards accessibility and therefore SEF (not for here). I hope the menu will work across modern browsers. It should expand as zoom/text expands, and remain fluid as browser window size changes. I'd appreciate feedback on errors or ways to improve code. I've deliberately left long cascading elements in CSS for tutorial purposes (and probably been a bit lazy in condensing code) but any feedback is most welcome. I'll post a link to the article written after I complete this stage. Many thanks. Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bizarre img margin behavior in IE7
Thomas Hall wrote: Could someone peek at this page - www.atrachapter.com http://www.atrachapter.com/ in IE7. When the page loads look at the margin on the main image of the page. When I move my mouse over the left hand navigation (ul) the margin on the image disappears. ... The CSS validator is complaining about too many values for .vnav ul and .vnav ul li ... having to do with the opacity specification. I'm not sure why this would cause that symptom, but worth trying. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help w/content links not behaving please
I have this template almost ready to break down into includes and continue w/site development but am having trouble getting the text content links to *not* take on the css style of other links in the page. You can disregard this one as well. Again, it showed up as a post long after the problem was fixed. Thank you. -- Deb | PBC Web Design www.puterbug.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tailor's dummy accessible menu
Mike A wrote: http://www.uk-web-pros.co.uk/left-menu-bordered-example-1/left-menu-tailorsdummy.html. I've set out this no-hack menu for trainees here who have difficulty understanding box models for accessibility standards compliance. Before writing a detailed article it makes sense to have experts check it. ... I hope the menu will work across modern browsers. It should expand as zoom/text expands, and remain fluid as browser window size changes. I'd appreciate feedback on errors or ways to improve code. I've deliberately left long cascading elements in CSS for tutorial purposes (and probably been a bit lazy in condensing code) but any feedback is most welcome. Mention of Zoom left me looking for an alternate zoom style sheet. After I realized you simply meant normal text scaling, I tried in a few browsers. Works in everything I have on my WinXP system, including IE7. Took a look at the CSS and left very quickly. Being an old time programmer, set in his ways, I'm not a fan of needing to scroll horizontally to read code. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Heading tag Sizing
Steve LaBadie wrote: What do I need to do to have the heading tag render the same size cross browsers? The absence of an answer is because there can be many, many, many reasons and you asked a very general question. A more specific question, supported by a test case or code we can examine, will make it easier to answer. Generally, if all browsers have been left with their default font size settings, and there's nothing browser-specific in the CSS, font size should be very close across browsers. However, there are hundreds of ways to change the results. Show us some code and tell us which specific browsers you are concerned about. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Conditional comments
[EMAIL PROTECTED] wrote: Does anyone else have an issue with Microsoft's conditional comments solution? I really don't want to sound like I'm bashing here, I'm really happy that we're getting a more compliant browser from IE, but I'm about to embark on hours of work to fix up sites for which I or previous developers employed the child selector to get around IE's deficiencies which still have not been fixed. I must now decide between IE's conditional comments approach, or use the triple-XXX hack. Neither of these appeal. My main concern with conditional comments is that it pollutes my document with proprietary, bulky markup. I employ filters to feed CSS to different versions of IE. If I followed Microsoft's advice, I would instead have the following in the head of every one of my pages: !--[if IE 5.0] link rel=stylesheet type=text/css href=ie-5.0.css / ![endif]-- !--[if IE 5.5] link rel=stylesheet type=text/css href=ie-5.5.css / ![endif]-- !--[if IE 6] link rel=stylesheet type=text/css href=ie-6.0.css / ![endif]-- !--[if IE 7] link rel=stylesheet type=text/css href=ie-7.0.css / ![endif]-- What about future versions? .. Wouldn't it be a more elegant solution to put conditional comments in the CSS document itself? ... Am I over-reacting to this? Does anyone else have an issue with this? Now that you've got that off your chest :-) Yes, I'm sure you can find a lot of sympathy here. The one thing you WON'T find is a CSS-only solution. As much as we would like, CSS doesn't handle conditionals, and won't any faster than those governmental agencies get to release 5. The approach I'm tempted to take is a single conditional statement for any IE version and all IE hacks in a single CSS file. If you have hacks for all those versions in a single all browser CSS file today, you know them well enough to carry over into a single file for IE without breaking them up into 4, 5, 6 files. Go with !--[if lt IE 8] and (1) hope they'll get it right in 8 (check's in the mail), or (2) lower your opportunity for global search and replace catastrophes. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tailor's dummy accessible menu
Bob Easton wrote: Mention of Zoom left me looking for an alternate zoom style sheet. After I realized you simply meant normal text scaling, I tried in a few browsers. Works in everything I have on my WinXP system, including IE7. Thanks Bob! Took a look at the CSS and left very quickly. Being an old time programmer, set in his ways, I'm not a fan of needing to scroll horizontally to read code. My first reaction was eek - forgot to put code in shape! I do things that way so I can read all in a text editor page. Will do that in about an hour (must go out). Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Heading tag Sizing
What do I need to do to have the heading tag render the same size cross browsers? You need to reset any of the browser default sizes before you can safely define a font size. The YUI provides two style sheets that do this for you and have been tested in all the major browsers: http://developer.yahoo.com/yui/reset/ http://developer.yahoo.com/yui/fonts/ -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Bug - but which?
Jørgen Farum Jensen wrote:
Test page:
http://www.webdesign101.dk/x/usenet/cssmenu2.html
This pages suffers from a curious effect, which is,
when viewed in IE6, all of the content shifts to the
left when hovering over the menu the first time.
Hi Jørgen,
First I thought it would be a Peekabo, but all kinds of {position:
relative}, {height: 1%} and {zoom: 1} didn't help.
It seems to be a Peekabo in combination with a %-bug:
* if I replace the div#menucontainer { margin-left: 2%; } by
div#menucontainer { margin-left: 17px; }, the menu container is
not shifting anymore, but the #indhold still does.
* if I go on giving div#indhold { padding-left: 10px; } instead of
div#indhold { padding-left: 1%; }, then also the #indhold doen't
move anymore.
Testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-cssmenu2.html.
Maybe it also can be solved by an other wrapper construction.
Success and gretings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can't figure this out - Center a div with variable width
Hi Mark, I ran into a similar problem about a year ago. I needed to build a horizontal nav bar that was variable in width depending on the number of menu options. Some users with admin privilege had more menu options than regular users so their menu bar would be wider. Since I did not know exactly how wide the bar would be I could not give it a fixed width. I tried various ideas, none of which I could get to work across all browsers. I may be wrong, but I think the only solution that works across all browsers is to use a table as the containing element. I'm against tables for layout purposes so I chose instead to work around the problem by making the nav menu a fixed width and displaying all the menu choices and just toggling off the choices that the user was not allowed to select. Someone please correct me if I am wrong, but I think those are your two best choices: table or work around the problem other method. HTH, - Ben On 10/31/06, Mark Wheeler [EMAIL PROTECTED] wrote: Hi all, Is this even possible? (I'm sure it is, but I still feel pretty new to css) - Can you have a div (content) centered inside another div (container) BUT, the content div's width may be different because of content (thus you can't set the width) AND the div width must collapse around the content (so if a border was used, it would collapse around the content)? I can't figure this out. I'm sure there is a simple solution, but I can't seem to get there. Any help would be appreciative. Thanks, Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Conditional comments
[EMAIL PROTECTED] wrote: Wouldn't it be a more elegant solution to put conditional comments in the CSS document itself? Styles for specific browsers could be kept in a central location, with the added bonus of being cached on the client's machine instead of having to push these comments over the wire again and again. Am I over-reacting to this? Does anyone else have an issue with this? Well, if you are lucky enough to have the server on your side, then maybe you _can_ control IE5 - 7 separately without touching the source-code in your 7000 pages. I only have a few hundred pages - and I'm deleting old 'conditional comments' instead of adding new ones... http://www.gunlaug.no/contents/wd_additions_12.html ...using an @import hack in the main stylesheet to feed Trident (IE/win) a separate stylesheet. It works as if I had a !--[if IE] link, but from within the main stylesheet. That's one @import, instead of several hundred or thousands. Some have problems getting such an @import hack to work, and _if_ it works than it's about as safe as any other hack that relies on browser-bugs. The whole idea _is_ that such hacks _shall_ break in future browser-version. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Is my explaination right?
?xml version=1.0 encoding=UTF-8? !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html xmlns=http://www.w3.org/1999/xhtml; body a href=a href/a a button style=display:block;a button/button /a /body /html According to the rending result, I tried to explain: block-level element button generates a block box, and according to the containing block's definition in css2.1 spec, it's containing block should be the block box generated for body element; Because a containing block can only contain either block boxes or inline boxes, two anonymous block box should be generated, each wrapping a inline box generated for a elements, so the button box's containing block should be the anonymous block box, right? and what is the second a's inline box? Does it contain the button's block box? TIA. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How do you controll the vertical alignment of text in an li
New to css so I'm just cutting my teeth on this...
I'm trying to create a list of links that look like buttons. I don't want
to create individual
image buttons for each text link element so I thought I would create a list
and then set
the background of each list element to my image button. I can center the
image vertically
and horizontally but I haven't figure out how to do the same with the text.
I can only
center it horizontally.
Could someone tell me how to do this or, if I'm off on the wrong vector, if
there is
a better way to do this? I've included the relavent source below but have
not included
the image. Removing the backgound stuff in the li and simply replacing it
with
border-style: solid will do for the sample.
Thanks,
Dave.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
titleSome Buttons/title
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
style type=text/css
ul {
width: 10em;
list-style:none;
}
li {
height: 2.5em;
width: 10em;
background: url(button.png) no-repeat center center;
background-color: transparent;
text-align: center;
}
a {
color: #ff;
}
/style
/head
body
ul
lia href=#Button1/a/li
lia href=#Button2/a/li
lia href=#Button3/a/li
lia href=#Button4/a/li
lia href=#Button5/a/li
/ul
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you controll the vertical alignment of text in an li
New to css so I'm just cutting my teeth on this... I'm trying to create a list of links that look like buttons. I don't want to create individual image buttons for each text link element so I thought I would create a list and then set the background of each list element to my image button. I can center the image vertically and horizontally but I haven't figure out how to do the same with the text. I can only center it horizontally Hello Dave. If you use line-height in the list item you have center it vertically. Put same value in line-height that in height. www.niquelao.net - Niquelando la Web __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you controll the vertical alignment of text inan li
YES!! Thanks, that did it! Dave - Original Message - From: Jorge Rumoroso [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Saturday, November 04, 2006 9:01 AM Subject: Re: [css-d] How do you controll the vertical alignment of text inan li New to css so I'm just cutting my teeth on this... I'm trying to create a list of links that look like buttons. I don't want to create individual image buttons for each text link element so I thought I would create a list and then set the background of each list element to my image button. I can center the image vertically and horizontally but I haven't figure out how to do the same with the text. I can only center it horizontally Hello Dave. If you use line-height in the list item you have center it vertically. Put same value in line-height that in height. www.niquelao.net - Niquelando la Web __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
