Re: [css-d] specificity problem only in IE7??
Olá Luc,
on Thursday, July 12, 2007 at 17:22 Luc wrote:
Good afternoon list,
In my footer i have links that in the hover state are underlined.
Works in Opera, FF, Moz but not in IE7. For IE6 i had to add an
aditional rule to make always show underlined (i can live with that),
but i was wondering if it's a specific IE7 problem?
http://www.dzinelabs.com/projects/MPT/Pages/index.php
http://www.dzinelabs.com/projects/MPT/Styles/MP.css
I can't catch what you really want to do...
There are lots of css rules affecting your footer links:
/*Adding background transparent messes links up in IE*/
a:link {
color: #bfbfbf;
text-decoration: underline;
}
This makes all links have underlines in all browsers.
a:visited {
color: #66;
text-decoration: none;
}
This one resets the underline for visited links. So the active page is
visited and hasn't got the underline. (Note that it is bad practice to
set a link to the current page.)
p a { color: #FF; text-decoration: none; }
Next you reset the text-decoration inside of p elements. and your
#footer is a p element.
p:hover a {
color: #ff;
text-decoration: underline;
}
Then you add it again when the pointer is over the p element (not the
a) IE6 cant't show this effect.
* html #footer a {
text-decoration: underline;
}
This rule should set the underline on every link inside the footer for
IE6.
If you want to style the links in the footer way different from the
rest, use:
#footer a:link { .. }
#footer a:visted { ... }
#footer a:hover { ... }
I guess that the visited state is confusing you. Clear the IE7 cache!
regards
Martin
__
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] Semi-transparent PNGs as background images in IE6 - documentation wanted
Peter! You'll probably already know this page: http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp The element to which this filter shall be applied must have layout.[1] The filter will not create an background-image. The filter image lies behind the background, so you have to set the background-color to transparent and disable the original background-image too. Ingo has also made some affords to document this property: http://www.satzansatz.de/cssd/tmp/alphatransparency.html Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? There is a htc for img-Tags. http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html This may be of interest too: http://www.pi-phi.de/t3v4/55.html (german) But I don't know an unobstrusive JS solution that automagically corrects the behaviour of IE =6. Maybe Dean Edwards has something like that in his IE7 scripts? Ingo's doc is probably the most complete. I hope you'll have some time to extend that ;-) regards, Martin [1] http://www.satzansatz.de/cssd/onhavinglayoutrev07-20061019.html on Friday, April 13, 2007 at 13:15 Peter-Paul Koch wrote: Hello, Yesterday I talked to a web developer who passed me a technique for using semi-transparent PNGs as background images even in IE6 and lower. The technique works, up to a point. See my test page at http://www.quirksmode.org/css/png/png.html . I already had a private conversation with someone who knows this technique and drew my attention to a few bugs (can't use CSS height; links/form fields may become unclickable unless they have a z-index). Before continuing my investigation, though, I'd like to know whether this technique has already been described. Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration? Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? Despite several Google searches I didn't find a real explanation/description, although several articles described several aspects of this solution. If there turns out to be no full description (including bugs) available, I'll have to write my own. Since I don't have too much time right now, I'm hoping that someone can point me to a description so that I can continue my real work. Thanks, __ 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] menu troubles
Jake, on Friday, April 13, 2007 at 16:25 Jake Churchill wrote: I have a page with a navigation menu across the top with a single level dropdown and a sub-nav menu on the left sidebar. My problem (IE only) is that the dropdown from the main navigation menu appears under the side navigation menu. In firefox it works correctly. This project is very time-sensitive so I'm trying to work through this as quickly as possible. Try to set a z-index on #header. I can't test it now, but it'll probably work. More on z-index an IE here: http://www.aplus.co.yu/lab/z-pos/ regards Martin __ 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] Do this here but not there...
Bruce,
on Friday, February 23, 2007 at 12:27 Bruce MacKay wrote:
#myDiv p, #myDiv table, #myDiv li {
margin-left: 10px;
}
However, sometimes the li elements are within a table within
#myDiv. I'd appreciate some guidance on how to write my CSS so that
those li elements (within a table within #myDiv) are not given a left
margin of 10px?
1.)
#mydiv { padding-left: 10px; }
2.)
#mydiv table li,
#mydiv table p { margin-left: 0; }
regards
Martin
__
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 * selector rules processing
Barney,
on Thursday, January 18, 2007 at 15:42 Barney Carroll wrote:
Weird behaviour on my hands. I have the following CSS:
code
// DITAbase site stylesheets
//
// universal.css - Universal visual information
*{margin:0; padding:0;}
body{font-size: 76%;}
/code
This is in FF. Any idea why this is?
What happens when you use css comments:
/*
DITAbase site stylesheets
universal.css - Universal visual information
*/
* {margin:0; padding:0;}
body {font-size: 76%;}
regards
Martin
__
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] 2. alternating coloured rows in dynamic website (IanYoung)
Ian, on Wednesday, December 13, 2006 at 12:27 Ian Young wrote: You could try defining a class for even rows -- then add something like that to your code: tr ?=$par++%2?'class=even':''? Already tried that -I can do it in php, but want a css solution. There is no css-only way until browsers will support css3. You should go the php way and generate different classes for the alternating rows. For further reading on css3 selectors: http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#structural-pseudos regards Martin __ 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] Triangles with content
Richard, on Thursday, November 9, 2006 at 14:43 Richard Pierce wrote: That would work if I could predefine the color triangles I want. Unfortunately, I can't- the colors need to be a user defineable option. I suppose I should have clarified- the colors of the triangles, as well as the text floating on top- all need to be dynamic. Maybe I didn't understand what you want... div style=position:absolute; display:table-cell; background: blue; padding:5px; div style=width:0px; height: 0px;border-top:200px solid red;border-right:200px solid red;border-left:200px solid green; border-bottom:200px solid green; div style=position:absolute; top:0px; left:0px; width: 200px; height: 200px; Floating Text/div /div /div I guess this will show you the floating Text above the triangles, right? The problem is that this solution isn't dynamic because you can't set the borders to 50% or similar. But what if you compute the size of the floating text by javascript and change the values of the border size/colours according to your users choices. Would that meet your criterias? regards Martin __ 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] z-index relative positioning
Matt, on Tuesday, August 29, 2006 at 17:29 matt1027 wrote: Is there a good tutorial on this that tells how to hack the different browsers? Did you read the wiki? http://css-discuss.incutio.com/?page=OverlappingAndZIndex regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index relative positioning
Matt, you may want to read the following articles too: http://www.aplus.co.yu/css/z-pos/ http://www.satzansatz.de/cssd/onhavinglayout.html regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stylesheet question (@import?)
Shelly, on Tuesday, August 22, 2006 at 13:33 Shelly wrote: @import layout.css; @import spring_flavour.css; This is a very common way to organize stylesheets. I do that since years. Drawbacks: NN 4.x and co. doesn't support this, so it's an easy way to keep old browsers away from styles that they shouldn't see. (It's not a bug, it's a feature!) Important: The imports have to be the first statements in a stylesheet or it will not work. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form pain
Mark, on Tuesday, August 8, 2006 at 13:15 Mark Fellowes wrote: ?I'm unsure how to validate XHTML with Rails. Since I'm working in development mode the app is not online somewhere, just using localhost. Also many rhtml files are just snippets of what the entire page will comprise with Rails output. You can use the webdeveloper toolbar for firefox: http://chrispederick.com/work/webdeveloper/ There you can choose: Tools-Validate local HTML For Windows exists an extension based on tidy which validates all the pages you visit. The third way is to use copypaste and the input-box at http://validator.w3.org/. Open the page, view source, mark all, copy and paste it into the direct imput box... regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie quirksmode error
David,
on Monday, July 31, 2006 at 04:14 David Laakso wrote:
She works as intended in mac/ie5.2 and ie/7.0.
But is skewed left in win2000_ie/5, 5.5, and 6.0; and, xp ie/6.0.
The file is in quirksmode(intentional).
CSS is embedded.
Browsercam captures:
http://www.browsercam.com/public.aspx?proj_id=272802
uri: http://www.chelseacreekstudio.com/ca/ccs/law/index.html
Now what I'll do?
IE 5-6 are in quirksmode.
div#page-minor { border-right: none; border-left: none; margin: 0 auto; }
This margin declaration only works in standards mode. You've got to
set a text-align: center for old win IE on div#page-major.
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Displaying page in different resolutions
Chris, on Wednesday, July 26, 2006 at 15:56 Audano, Chris wrote: Is there a way to easily program a site to automatically determine the users resolution? Why? Make your layout liquid! Just get rid of the width on the container and use some repeating background images instead of fixed ones. Define some margins for the container and a min- and/or max-width. For making this work in IE 7.0 you can use expressions. Al Sparber wrote a tutorial an a DW Extension for things like this: http://www.projectseven.com/tutorials/css/minwidth/index.htm regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Customisable scrollbars with css
David, on Tuesday, July 25, 2006 at 14:10 David O'Neill wrote: Is there anyway to customize scrollbars using css so that they don't default to the basic crappy windows grey ones? I know tis not a big thing as I generally tend to stay away from having to make users scroll as much as possible, but in some cases it can't be avoided, so if one was to go about it how would it be done, and that is only if it indeed can be done. 1.) You could in IE = 5.5: scrollbar-arrow-color: #00; scrollbar-3dlight-color: #C0C0C0; scrollbar-highlight-color: #E0E0E0; scrollbar-face-color: #C0C0C0; scrollbar-shadow-color: #808080; scrollbar-darkshadow-color: #00; scrollbar-track-color: #E0E0E0 2.) You shouldn't do that. Just some questions: How do you know that the scrollbars are the basic crappy windows grey ones? Mine are brown and I'm on windows... How do you manage it, to stay away from having to make the users scroll? You can't control the screen settings of the user! What if the user uses a 800x600 screen with sidebar enabled or window not maximised? What if he set the browser to minimum font-size 20px? Don't try to bring things under your control that aren't yours! Design for flexibility! You've got to face the fact that web is not print. There are several things that you can't know. And you should try to make your design as flexible as possible to deal with these circumstances. Just my 2c. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problems
Olá Marcelo!
on Tuesday, May 16, 2006 at 17:59 Marcelo Wolfgang wrote:
I have 2 errors I can't figure out:
1) the table has 2 gaps, on top and at the bottom, that don't happen
in IE, couldn't figure out why it happens.
Why don't you use a table for mark-up? It is a product table, so it
would be better to use the appropriate markup.
2) The sidebar, which is only images, has some space between them,
that I can't understand why it is happening, it doesn't in IE
I guess that most of your problems will disappear if you add
img { display: block; }
#menu img { display: inline; }
to your styles.
IMHO you should validate your HTML, you used some ids twice and need
to add the type attribute to the style tag.
And at this page:
http://work.grillo.tk/vilarigno/pre.html
I have a problem with floats, in the form, when there's 2 labels at
the same line, I'm using float:left on the left one and float:right on
the right one, and trying to add a overflow:hidden in a container div
to clear them, but it ain't working in neither IE or Firefox.
I cant' see that problem... Maybe use another clearing method?
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] .swf file in background-image?
Christine, on Thursday, April 27, 2006 at 13:04 Christine Rainer wrote: does anyone know of a well functioning css-method for placing an .swf file in the backround of a div? You can't use the swf in the css background property. But you could place an object with absolute positioning and z-index under a div. You have to add background transparency to the flash (and pray...). You shouldn't test in too many browsers (for not loosing sleep) as well ;-) I wouldn't use it for a production site. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] .swf file in background-image?
Shelly, on Thursday, April 27, 2006 at 14:24 Design Groups wrote: You can't use the swf in the css background property. But you could place an object with absolute positioning and z-index under a div. You have to add background transparency to the flash (and pray...). Actually, this will not work. Flash uses a plugin which occupies a z-index outside the scope if the DOM, meaning that no matter what z-index you give it, Flash will always come out on top. (You can see discussions on this problem in the Son of Suckerfish discussion areas - the dropdowns will fall behind Flash elements) No, it works with enabled background transparency. You've got to add: param name=wmode value=transparent / inside the object. In this mode the flash will not render on top of all other content, but it doesn't work with all plugin-versions on all browsers. But it will work at least for IE and Firefox on Windows with Flash 6.0.65.0+ regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New site, fully CSS-ified
James, You want to set a background-color on body and you should increase the font-size in your browser to see what happens... regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tying myself in knots
Hi! on Thursday, March 9, 2006 at 15:31 [EMAIL PROTECTED] wrote: http://www.wdam.co.uk/clients/CEP/test2/ http://www.wdam.co.uk/clients/CEP/website2/ I can't see the difference here. (Win XP SP2, Firefox 1.5) Did you clear your cache? If you still encounter the problems, take a look at hacks/specificity which may have impact on the links. Why don't you provide any hover-effects on the links? And I think you want to set a background color on the body... regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inline styles and the people who hate them.
Troy,
on Friday, February 3, 2006 at 04:30 Troy Brophy wrote:
Now, the wonderful thing about this app is that it has dozens of pages with
unique designs. Each of these unique designs requires many elements to be
positioned, floated, padded, margined, bordered or backgrounded uniquely.
This has contributed in no small way to the 10,000+ lines of CSS rules for
this app.
If you need more than 10,000 lines of css for styling an app, my first
guess is, that you've done something wrong. I spent the last year in
styling a large scale enterprise application framework and we only
needed about 2500 lines of multilined css definitions.
If you really need to style each page individually, you should
consider to split the rules into different css files.
I would start with:
general.layout.css
general.components.css
And two files for specific IE rules:
general.layout.ie.css
general.components.ie.css
and probably enhancing it with group levels:
groupx.layout.css
groupx.component.css
And two files for specific IE rules:
groupx.layout.ie.css
groupx.component.ie.css
if you need to go down to the page level you could use inline styles
in the head, but IMHO it's better to add them to the group level
files. Add an id to the body tag of the pages and identify the
specific page by using this id.
If you have too many rules, you can add page level external css-files.
You should also go through your style definitions to identify
duplications.
- Use inheritance as much as you can!
- Think about every class and id you use, if you really need it, or if
it will be enough to use the id/class of the container.
- Write the rules specifying as much as the html structure as
possible/necessary. This will help you to find a specific rule, if
you have to change it.
like:
#layoutWrapper #layoutHead #layoutLogo a img { styles... }
- Use namespaces for names of classes and ids
I hope that helps...
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE not showing image, while FF does
Stefan,
on Thursday, February 2, 2006 at 16:06 Stefan Witte wrote:
On the following site, the image
http://www.motionedmedia.com/projects/vakantiehuisjefrankrijk/img/kaart_frankrijk.gif,
does not show in IE on the site:
http://www.motionedmedia.com/projects/vakantiehuisjefrankrijk/waaromnades.php,
while FF has no problems.
I guess it's a problem with your HTML:
div id=imglinka href=index.php?page=waaromnades2img
src=img/kaart_frankrijk.gif border=0/img/a/div
try:
div id=imglinka href=index.php?page=waaromnades2img
src=img/kaart_frankrijk.gif alt=kaart van frankrijk //a/div
or similar (my dutch isn't the best ;-) ), but you should provide an
alt text for accesibility reasons and because it's mandatory and it
woulb be better to get rid of the border by css:
#imglink a img { border: none; }
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] DIV background problem in FireFox
Maarten,
on Monday, January 30, 2006 at 10:55 Maarten Reynders wrote:
Site: http://www.plusminusitv.be/index.php?page=opzet
CSS: http://www.plusminusitv.be/design/css/style.css
You've got to clear the floats before the container div closes, to
force the container to wrap the floats.
Add after xtra02:
div class=clear!-- --/div
.clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-bottom: -1px;
}
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] more than one absolutely positioned background element?
Kevin,
on Monday, January 30, 2006 at 16:22 Kevin Newsum wrote:
Ok, silly question here perhaps, but considerable poking around hasn't
uncovered an answer to date. I have a single background color and two
distinct background elements that I would like to position absolutely, one
upper right corner no repeat and the other lower left corner no repeat.
I guess you need something like that:
div id=backg1
div id=backg2
content goes here...
/div
/div
#backg1 {
background: red url(/img/background1.png) no-repeat top right;
}
#backg2 {
background: transparent url(/img/background2.png) no-repeat bottom left;
}
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Collumn Divider for Liquid Multi-column Layout, any Column Longest
Dagmar, on Thursday, January 26, 2006 at 17:50 Dagmar Noll wrote: If anyone is interested, I solved my problem by adding height: 1% to my wrapper div. I'm starting to notice a pattern in the solutions to my most confounding problems. So far they all involve adding height: 1% to some element. I hope you do this just for IE. It's all about the hasLayout property of IE. Ingo wrote a very informative article about this property: http://www.satzansatz.de/cssd/onhavinglayout.html regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Broken border in IE and Mac browser check
Chris, on Tuesday, January 24, 2006 at 15:13 Chris Ovenden wrote: However, I just tried it in IE7 b2 and the same thing is happening - and that bug is meant to have been fixed. How could you do this? AFAIK IE7b2 isn't out yet, just beta1 and AFAIR in b1 the peek-a-boo bug is still alive... regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] defining span?
Jim, on Thursday, January 19, 2006 at 05:02 Roger Roelofs wrote: Jim, On Jan 18, 2006, at 7:32 PM, Jim Ryan wrote: (Applying that .lw1 class to all list items was The Drupal CMS' decision, not mine) #anothernav li.expanded a span.lw1 Besides the hint Roger gave you, it is worth to take a look at the drupal.css to see, how it defines the styles. You could also override the navigation building behaviour of drupal, if you want to get rid of the span. But probably it would be faster and easier to learn something about specificity of selectors: http://www.w3.org/TR/CSS21/cascade.html#specificity regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Website CSS
Erica, on Friday, January 6, 2006 at 11:10 Earth Repair Restoration wrote: Am re-doing my site http://www.earthrepair.com.au and was after a little advice, I am currently using DWT and CSS sheet but still have a few remaining tables in place, I have redone the top navigation buttons in CSS but not the side ones yet, is there anywhere you can recommend getting a layout similar to mine without the tables? Thanks. Choose a two column layout with header from the wiki: http://css-discuss.incutio.com/?page=TwoColumnLayouts Maybe it is worth to take a look at the three col layouts too, because these methods normally work for two columns. http://css-discuss.incutio.com/?page=ThreeColumnLayouts regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu Lists in Firefox and IE
Paul, on Friday, January 6, 2006 at 15:26 Paul Boutin wrote: I'm having a problem with my CSS rendering properly in IE (Go Figure). Try to adjust the line-height for IE. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity Problem
Rahul,
on Friday, January 6, 2006 at 16:03 Rahul Gonsalves wrote:
ul class=mainnav
lia href=/ id=menu_defaultspanHome/span/a/li
lia href=about class=active
id=menu_aboutspanAbout/span/a/li
[--more links--]
/ul
.mainnav li a:link { text-decoration: none; color: #FFF; padding: 1em;
background-color: #000; line-height: 3em;}
.mainnav li a:hover { background-color: #FC0; color: #000; }
.mainnav li a.active:link { background-color: #FC0; color: #000; }
.mainnav li a.active:hover { background-color: different?; color: different?; }
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Header, 2 cols, fixed footer
Julian,
I know this problem... We tried several approaches of which the best
would be to use fixed positioning.
Finally we chose to use the following:
You need four absolute positioned divs.
body { height: 100%; }
div#header {
position: absolute;
top:0;
left:0;
height: n;
width:100%;
overflow: hidden|scroll;
}
div#left {
position: absolute;
top: n;
bottom: m;
left: 0;
width: l;
overflow: scroll;
}
div#right {
position: absolute;
top: n;
bottom: m;
left: l;
right: 0;
overflow: scroll;
}
div#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: m;
overflow: hidden|scroll;
}
replace n,m,l with your favourite measures and choose between hidden
and scroll for header and footer overflows.
That will work just fine in Firefox and Opera (Didn't test it in
Safari). IE has some serious problems with absolute positioned
elements with top/bottom or left/right set. But you can compute the
height or width by using expression() and some Javascript. That will
even work if you use em instead of px, but it will be a bit more
difficult ;-)
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Please help me out with a complex layout
Hi! on Thursday, January 5, 2006 at 13:29 [EMAIL PROTECTED] wrote: Please help me out with a complex layout. It should work also in Internet Explorer 5 That's not very difficult. Choose one of the 3col layouts from the wiki: http://css-discuss.incutio.com/?page=ThreeColumnLayouts regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check and Image Layout Help
Aaron,
on Thursday, January 5, 2006 at 16:08 Aaron Roberson wrote:
I tried to wrap the image and the paragraph I want to flow around the image
in a div tag because divs are block level elements. Of coarse, that didn't
work because img align ignores block level images. I also tried placing a
hr / tag between each section but that is not working either.
hr { clear: both; }
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the perfect layout
shlomi,
on Thursday, January 5, 2006 at 16:10 shlomi asaf wrote:
i need to make a 3 columns page
i have a Left column, a Right column, and a middle content area.
at the bottom there's a Footer.
this footer should be placed at the middle. and inherit the middle content
width. (as shown at the GIF example i made)
Choose one of the layouts from the wiki, of which you think that it is
the best for your needs. Probably a layout based on negative margins
will be the best.
Try to get the 2cols, 1col and 3cols layout working.
Add an id to the body tag to distinguish between the different layouts
css. Combine the css and mark the differences by the body id:
body#3col #wrapper #middle {...}
body#rightcol #wrapper #middle { something different }
*1.* how can i solve my fotter issue? he is in absolute position,
bottom:0. how can i make him sit at the middle AND at the bottom of the
page, say like bottom of the middle column, and the middle colum widths,
like at my picture.
With a negative margins based layout it will be quite simple, you can
use your method...
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Definition list problems
Paul, on Wednesday, January 4, 2006 at 13:12 Paul Jinks wrote: Hi I've got a page displaying a bunch of data in two columns. I wasn't sure whether to go with a table or definition list for this. I don't think there is much in it, really, but went for a definition list. I wanted it to display kind of like a table though. :p You can view the page at: http://www.pauljinks.co.uk/house/detail.php?projTitle=A%20ricardo%20le%20duele%20la%20garganta. and the CSS at: http://www.pauljinks.co.uk/css/detail.css This is a table and there is nothing wrong with using a table for markup. You should use tables for tabular data. regards Martin PS: At least you escaped the input of the search box... ;-) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The legend element.. what's up with that?
Ben, I'm trying to decide if my backend should produce a fieldset or two div elements. I'd really like to use the fieldset, because it's their purpose and using divs is not as meaningful (semantically). On the other hand I do not want future designs to be limited in any way. What do you say, would two divs be more versatile or does fieldset/legend element work just as well? Does this question relate to css? In my experience the fieldset works quite well, but legends are very difficult to style cross browsers. I use fieldset in combination with hn (h1,h2..) tags which seem to be much easier to handle. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Align like table cells with CSS
Alec, on Wednesday, January 4, 2006 at 16:40 Alec A. Lazarescu wrote: I've tried and failed to align text, an image, and a button neatly vertically using CSS. I would rather not force a height on a container around them as that's not very flexible if the font or image size changes, text wraps, etc. It needs to work in IE6/FireFox/Safari. Seems like a trivial thing with tables. Did you try to adjust the line-height? That should work. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tables to CSS design - banner
Bill, on Tuesday, December 27, 2005 at 16:23 Bill Moseley wrote: 1) The table version has an explicit width and so shrinking the window doesn't effect the design (just requires scrolling). In the css version the DO SOMETHING links starts wrapping. I'm not really sure what the correct behaviour is (guess it depends on the client). The table layout has a fixed width while your css layout is liquid. These are two different approaches. IMHO you should give your css layout a min-width with appropriate fixes for IE. (http://css-discuss.incutio.com/?page=MinWidth) 2) If I do set a width, is it better to use em instead of px for the width, so the width adjusts with the font sizes? If you use loads of background-images it will be easier to use px and give the layout enough space for the text to grow at least to 150%. IMHO it is more usable if the whole layout is sized in em, but this is personal preference. 3) The bottom 1/2 of the banner has two div's, the DO SOMETHING text and links, and the search box. Is there a way to get the text from both divs to line up on the same center line (vertically)? Or is it a matter of just adjusting both until they match? You can control it by box and line-heights. 4) With the css version, making the font size larger (ctrl+ in firefox) makes the search box grow, but the containing orange box doesn't grow to contain it. The containing box is height: 40px, again, would it be better to use em in that case? Don't use height for the surrounding box. Clear the floats and let the box take the space it needs. (Use padding to make it a bit bigger if you need it!) regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with image border.
Hi!
on Wednesday, December 14, 2005 at 12:17 Eoin Maguire wrote:
I'm having an issue with extra spacing being added. I've got a table with
two rows, one with an image in it and the next row with css borders on the
left and right. These borders are supposed to match up vertically with the
borders in the image above. However, in IE there's an extra space added
between the image and the ensuing borders, in Firefox it works fine.
Probably your image is inline. Try
table tr td img { display: block; }
or something similar.
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal lists in IE and Firefox
Phil, on Thursday, December 1, 2005 at 12:08 Phil Wilson wrote: I have an unordered list with four elements. I'd like to align them horizontally, with each list-item taking up 25% of the screen (or their container). Can someone tell me either where my code is wrong, or which IE bug I'm suffering from? I'm sure I've done this before, so there must be a workaround. Strange problem. It's a rounding issue IE can't calculate the 25% right for all values. Open the sidebar and resize it. There are some values that render fine, but others that don't. I think, you must leave some space to the left and/or right. :-( regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE5/PC compatible liquid layout?
Christian, on Monday, November 28, 2005 at 20:23 Christian Heilmann wrote: We are currently looking for the following: - 3 columns, any column longest - center column liquid width, side columns fixed - center content first in the document - header and footer spanning all three columns - MSIE 5.0 compatible Is there such a thing? Take a look at Skidoo too: http://webhost.bridgew.edu/etribou/layouts/skidoo_too/ It resizes relative to the font-size... Very nice if you think about zoom layouts. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning dynamic form elements via css
Zoe,
on Wednesday, November 23, 2005 at 13:28 Zoe M. Gillenwater wrote:
John Mandia wrote:
I want to build a form with a set amount of standard form controls (e.g.
textbox, label beside text box and validator [asp.net]) and some dynamic
ones (depending on the audience there may be different textboxes/dropdowns
etc that get dynamically added).
My question is this. Can I control the order of all the text boxes both
dynamic and preset via css i.e. e.g. wrap a div around a label, textbox and
validator (similar to a table row) and then order these via css (e.g. a css
reference gets added dynamically to match the current mode).
That way you can one team that want dynamic textbox 3 to be inbetween
standard textbox one and two?
2. you would have to rely on absolute positioning, making it very likely
for your divs to start overlapping each other at larger text sizes.
Only if you position the divs with px or other fixed values. He could
use em to avoid this issue.
But you're right. He should prefer to use asp.net to order the
divs/inputs ('cause he seems to use it anyway) or, if it has to be
on the client, JavaScript.
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning dynamic form elements via css
David, on Wednesday, November 23, 2005 at 16:15 David Dorward wrote: On 23/11/05, Martin Heiden [EMAIL PROTECTED] wrote: 2. you would have to rely on absolute positioning, making it very likely for your divs to start overlapping each other at larger text sizes. Only if you position the divs with px or other fixed values. He could use em to avoid this issue. This would require prediction of word wrapping with exceptional accuracy. Ok, maybe I'm too far away from thinking in fixed layouts... ;-) regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-size dependent form input size?
Eystein,
on Tuesday, November 22, 2005 at 15:37 Eystein Mack Alnæs wrote:
Is it possible to adjust the height of a form - input element
according to the font-size? So if the user increases the font-size
the input element will also increase.
Size the input in em:
input {
width: 15em;
height: 1.5em;
}
This won't work for select in all browsers. In Firefox 1.0 one have to
refresh the page to adjust the height after a font-size change.
regards
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] is this workable in less than 100hrs?
Colin, on Monday, October 10, 2005 at 08:41 Colin wrote: The reason I'd like to keep the li's so high is I'd like to 'heighten them' on a:hover. I think that you can do it with css in an easy way, if you don't want to let it resizable: Make the cloudy dreampower img without the tabs the background for the ul. Separate the pictures from the tabs. Use your favourite image replacement technique to replace the text in the lis with the tab images. Make the lis position: relative and position the separated pictures absolutly inside the lis. Making it resizable is a bit more complex: Read the sliding doors article at ala: http://www.alistapart.com/articles/slidingdoors All images have to be much bigger than the visible area at standard text size. Now you should use the HTML-text instead of the text in the images. This will lack support for the white glow effect around the letters. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dropdown menu with scrollbar (overflow: auto)?
Arno, on Thursday, September 29, 2005 at 15:32 Arno @ Raketnet wrote: Is it possible to create a css-based dropdown menu with a scrollbar? I'm revamping a website which has some (very) long submenu lists, which I don't all want to show when the dropdown drops down. Can the overflow: auto specification be added to a ul selector? You could do that, but IMHO you shouldn't. First you may run into some Firefox/Mozilla quirks with events over scrollable areas, and second: Isn't it hard enough for the user to deal with the menus? Shall they struggle with scrollbars in the menu too? If you want my advice: Rethink the navigation structure. Keep it simple and use breadcrumps. regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] targeting readonly form elements
Brian,
I'm looking to add a simple background color to some form fields. all
of these fields happen to have the readonly=readonly attribute
attached to them.
Without classing each input box, is there a way with css that works in
IE6 to target those inputs based on the readonly attribute?
No! Not without any JSMagic.
But with IE7 (http://dean.edwards.name/IE7/) and:
input[readonly] {
background-color: #ccc;
}
it should work.
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Sprites: Image Slicing
Hi!
#contact a:hover {background: url('.../i/lk_menubar.jpg') no-repeat
I would bet that you don't need so many dots.
Maybe: ../i/lk_menubar.jpg?
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and Firefox problems
Schalk, Also in Firefox when hovering over the items in the main navigation that has fly out menus, the menus fly out fine but when trying to move over the the links in the fly out it causes a jumping of the leader board and/or the nav items and then goes away before I am able to click on them. This is a known firefox bug. It will be fixed in the next version. It appears always when a hovered element appears over an area with overflow: scroll. https://bugzilla.mozilla.org/show_bug.cgi?id=125386 You can do two things: a) Try to prevent that the menue overlaps scrollable areas. b) Open the menue via JavaScript and try to catch the wrong events. I noticed that you use the onload events of window and body to start your scripts. Maybe the following article will make it a bit easier: http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html Good luck! regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Proportional Layouts
Jason, I think that this is an interesting idea. Right now I try to make my layouts scale with the text-size, which leads to some resolution problems regarding images and lots of sizing issues with background-images. But with some planning it is really nice. When media-queries (CSS3) will be better supported, one could test the screen/window width and serve different styles (incl. background-images) for different resolutions. Today you could do some tests with Opera 7 which already supports media queries. http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/ regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dynamic margin-bottom
Marcel, The thing is: A small gif should seperate an image on the left and a text as span on the right. So my problem is the following: If I set the margin-bottom for the small gif to a fixed height, like 100px, articles that have smaller images and less text than 100px look very messy because of the overlapping margin-bottom. The whole article items are in one big div and float to the left, which means that if I just leave margin-bottom to 0px the text underneath would float to the left under the gif image (and also under the article image) If I understand it right (posting a test url with html-source and css is always a good idea), your html looks like this: div img src= alt= class=floatleft / A lot of text /div Instead of using margin-bottom, you should wrap your text in another div and apply a margin-left to it. regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] BEGINNER - Align center divs on firefox
Augusto, Hi all, i've some problems to align a group of div's on the center.. the problem appair only in firefox and not in IE The page is http://www.opent.it/cms/bazar/ Can you explain your problem a bit more detailed? I can't see it. First you should correct the html errors: http://validator.w3.org/check?verbose=1uri=http%3A//www.opent.it/cms/bazar/ Then you should take a look at the wiki: http://css-discuss.incutio.com/ http://css-discuss.incutio.com/?page=CenteringBlockElement http://css-discuss.incutio.com/?page=CenteringAnImage If this doesn't answer your question, feel free to explain us in some more words, what the problem is. regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Creating Tables
Louise,
Should I just live with the one table in html?
If I need to do a table in CSS, can you tell me how to get started? Is it
one box with areas inside or would it be12 boxes next to each other?
There is nothing bad about tables that contain tabular data, but for
me your table looks more like a list.
You could try to mark it up with a definition list:
dl class=productinfo
dtimg src= alt= //dt
ddText and button/dd
dtimg src= alt= //dt
ddText and button/dd
dtimg src= alt= //dt
ddText and button/dd
dtimg src= alt= //dt
ddText and button/dd
dtimg src= alt= //dt
ddText and button/dd
/dl
css:
dl.productinfo dt {
clear: both;
width: 200px;
float: left;
}
dl.productinfo dd {
margin-left: 220px;
}
Play around with this values and add some more ;) You should probably
add an ugly dt class=clearnbsp;/dt with:
dl.productinfo dt.clear {
clear: both;
float: none;
width: auto;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
}
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tabless news scroller
Matthew, I was kinda wondering the same thing.Is it possible to create a news scroller without using javascript, or at least use a very minimum of javascript. I'm not really against the javascript but all the solutions I've seen won't degrade well when using a browser without JS. My thought was to create a CSS styled listed and have it scroll through the list items... I don't know if that can be done entirely in css though, it'd probably need some JS. Any thoughts? I dont't think that this is possible. You'll need some more JS to get a newsscroller working. But why don't you use one of the many newsscrollers freely available and modify it, to get the news-text from a ul wrapped in a noscript? I think that would degrade very pleasently ;), but has nothing to do with css as long as you don't style it... regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two columns with float wrappers
Jasper,
So this should fix the problem. But because this container won't stretch
with them... How do we fix this?
Clear the floats!
div id='container'
div id=menu
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
/div
div id=content
blabla, more content then #menu
/div
div class=clearnbsp;/div
/div
.clear {
clear: both;
height: 1px;
margin-top: -1px;
font-size: 1px;
line-height: 1px;
}
Zoe posted a comprehensive list of clearing methods some days ago:
http://www.pixelsurge.com/experiment/clearers.htm
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hidden from Opera 7 only
Uwe,
Opera 7 needs to see body {overflow: hidden}.
Can you use a media query which at the moment *DANGER* ist only
supported by Opera 7/8, or does Opera 8 behave like the other
browsers?
@media all and (min-width: 0px) { /* This part is only visible to
Opera 7/8, but this may change
with future versions of other
browsers */
body {
overflow: hidden;
}
}
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Who is wrong? I would say: Firefox!?
Daniel, This HTML looks as I wish if I use IE but it has a strange behavior in Firefox. The background color of the header flows ahead to the top of the both blocks above the head. The problem is caused by the uncleared floats above the header. The floats are removed from normal flow, so that the #head starts at the top. It is the first element in normal flow. The content of #head is pressed down by the floats, which causes the div to expand. Add clear:both; to #head and you clear the float for pushing all following content in normal flow under #wrappera and #wrapperb. By the way: Use a valid doctype to put firefox into standards mode or you will notice loads of uncontrolable cross-browser differences in rendering. regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Another try: Tables and 100% height
Niek, The table consists of two rows, the height of the main-table is 100% and the height of top-row is 152px, the height of other row (the content-area) must be the height of the rest of the screen. So I used 100% to do that. 100% + 152px 100% You gave the table a height of 100% the second row shall be as high as the parent (100%). The first row has a height of 152px, so that the contents of the table will be larger than the table itself. IE expands the table to a full height of viewport + 152px. IE computes the 100% of #submenu relative to the next parent element with an explicit height, which is the outer table. Firefox uses the height of the parent element, which results in the effect that you desired. Get rid of all unnecessary layout tables! If you still want to use a layout table at all, give it min-height: 100% (for Firefox Co) and height 100% only for IE. You don't need to assign a height to the second row of the layout table, because it will use the available space anyway. regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] client experiences problem I don't (probably IE??? maybe xp???) BOO IS HOME!
BJ, client says: something weird is happening, and it has happened to me on two differenct computers. When I go to cars for sale instead of getting the list of subjects on the right margin in the dark purple ccolor background, I get the image all the way across the page with no list of pages on the right and no right bar. Futhermore, the first thing I get is a big block of gibberish at the top of the page. I guess it was Netscape 4.x I'll send you a Screenshot off-list. regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using percentages, paragraph too small within tables
Bruce,
table td p{font-size:100%;}
but that isn't working. Any suggestions?
To scale the font-size, you have to declare a value 100%.
The p inherits the font-size of td, td of tr and tr of table and table
of body. So if you resize the font-size for body by 62.5% with browser
standard set to 16px, the font-size inside the body is 10px. If you
decrease it in td to 80%, everything inside td has a font-size of 8px.
In short words: The font-size in percent is not related to the browser
standard font-size, but to the parent element's font-size.
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re[2]: [css-d] using percentages, paragraph too small within tables
Bruce,
scroll down until you see the paragraph 'directions', and underneath
that you will see 'from I-85...below that you will see really tiny
text that says 'why am I so small?'. This is the text I am referring
to.
.content table {
color: #333;
background:transparent;
font: 70% Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
.content p {
margin: 0;
padding: 0 0 10px 2px;
color: #333;
font: 70%/150% Arial, Helvetica, sans-serif;
}
so it is 70% of 70%...
.content p has a specificity of 11
table td p has only a specificity of 3
try
.content table td p {
font-size: 100%;
}
That should override the value of .content p
regards,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layoutproblem
Uli, 1. The negative only appears in the back of the images and not over the hole width. This seems to be correct, did you change something? (Firefox 1.03 on Win XP) 2. I would like the images centered under the big photo if there are less than the width. Put it in another div with width: 100% and padding left as wide as your navigation column. For IE add text-align: center. Add a margin: 0 auto to .thumbs. 3. If the overflow at Westen is active, there's no space at the bottom. At Osten with inactive overflow, there's space at the bottom I don't want. I can't see that. Some more advices: Why do you close the image-Tags like /img. AFAIK some browsers do have serious problems with this notation. The css file isn't XML so get rid of all the comments. You also have to use /* */ to comment out the borders and margins, // won't work. If you validate your page, you'll notice some errors that you should fix: http://validator.w3.org/check?verbose=1uri=http%3A//icculus.org/%7Efzzgrr/ You claim that the content-type is application/xhtml+xml; charset=ISO-8859-15, but you serve the document as text/html. I would change the meta-data to text/html, but you could also consider to change the server config to serve the document as application/xhtml+xml. Be aware that the latter will cause problems in older browsers. Nice fotos, but in terms of usability you should consider to replace the dead links and add a small message when loading the next image. I felt a bit irritated, when hovering/clicking the images and nothing happened. regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
