[css-d] Centered image
As can be seen here: www.tyresoschack.se there is an overlay image that seeks
to explain how to get the menu on the site. It's only displayed on the first
visit.
It is styled, as far as I can understand with the following added directly to
the template:
div id=tip-overlay/div
style type=text/css
#tip-overlay {
background: url(overlay-img.png) no-repeat scroll 87% 30px rgba(0, 0,
0, 0.75);
cursor: pointer;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
/style
However as you can see the image is centered on the page rather than left
aligned as it is here: https://demo.gavick.com/joomla25/writer/
I've been fiddling with the code, but only managed to make the situation worse
... Does anyone have an idea what can make the image left-aligned? I shold
also mention that the image itself is the same width on the two sites.
/Martin S
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] line-height on inline anchors
Hello there, ladies and gentlemen! I got a question regarding inline anchors/links. While vertical space is added to anchors through line-height, only padding can add to the clickable area. Shouldn't the clickable area also expand depending on line-height? Even on inline elements. On display: block or inline-block, the line-height is added to the clickable area of the link. Do you guys know, where in the w3c specs this behavior is documented? See examples here: http://codepen.io/MartinMuzatko/pen/FJLDw Even though block/inline-block solves the problem, I am really curious why it was decided, that the line-height is working, but only around the link. I feel like I found another layer of the Boxmodel. Thank you in advance! Cheers, -Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first character in a paragraph should be bigger
On 16/01/12 23:11, David Laakso wrote:
On Mon, Jan 16, 2012 at 5:40 PM, Martinmhe...@gmail.com wrote:
Hi there,
I'm wondering if it'd be possible to style the first letter of a paragraph
so that it'd be 3-lines height (I mean generally bigger) as it was in old
texts...
regards
Martin
---
Try [and tweak]:
p:first-letter { font-size: 300%; }
p:first-line { line-height: 100%; }
See: pseudo elements
http://reference.sitepoint.com/css/pseudoelements
Best,
Lady Gaga
Thanks guys. I'll play with it.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] flexible height of div
Hi,
I've got a div (#main) which normally should have the height of 733px
because that's the height of the background pic.
On some pages the text goes over this height. The text is inside
#content. This pushes the footer down but the background remains
in the same position. I'd like to keep extending the #main div
vertically if the text goes over the height.
I understand that because the text is in #content and the background
picture is in #main, it might be tricky. I put the background in the
#main and created
#main in the first place cause I'd like the background picture to go
behind #sidebar_left, #content, #sidebar_right (and not just #content)
I can't think of any other way of structuring it.
div id=headerjdoc:include type=modules name=top //div
div id=main
div id=sidebar_left class=floatjdoc:include type=modules
name=left //div
div id=content class=floatjdoc:include type=component //div
div id=sidebar_right class=floatjdoc:include type=modules
name=right //div
/div
div id=footer
#main {
height: 733px;
width: 960px;
background: black url('../images/beer-bg.jpg') no-repeat;
}
#content {
width: 492px;
text-align: left;
}
#sidebar_left {
text-align: left;
width: 165px;
height: 733px;
}
#sidebar_right {
width: 295px;
height: 733px;
}
Thank you
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] first character in a paragraph should be bigger
Hi there, I'm wondering if it'd be possible to style the first letter of a paragraph so that it'd be 3-lines height (I mean generally bigger) as it was in old texts, eg: | irst letter of each paragraph should be - as big as that. I don't know if that's possible | but it'd be nice to know it. It'd look good on my website. Thank you very much Would it require using pictures or css would do? regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] problems with validation
Hi there. I know it's not strictly css, but perhaps some kind person will help me with this small problem. div class=columns a href=training.php h6Training/h6 pblah blah blah./p /a /div I get the error: document type does not allow element h6 here; missing one of object, ins, del, map, button start-tag Is there any workaround so that the whole block of text, ie. h6 + p was a link? thank you Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problems with validation
On 05/06/11 22:00, Jukka K. Korpela wrote:
5.6.2011 23:33, Martin wrote:
I know it's not strictly css,
The question, as asked, is not about CSS at all in any meaning, so
it's off-topic.
The construct that causes the validation problem has a considerable
CSS impact, though:
a href=training.php
h6Training/h6
pblah blah blah./p
/a
Although the construct is allowed in HTML5 and widely supported by
browsers, it has its share of problems in rendering. How do you make
it _look_ like a link, and make it look like _one_ link? If we can't
handle that, users may not notice that there is a link, or they may
think there are several links present and they try each of them and
get disappointed or confused. Moreover, browsers don't render such a
link as a block element by default, so e.g. a border set for it may
look all too interesting.
My current idea of handling this is
a) suppress underlining (as it would visually suggest the presence of
_several_ links)
b) draw a colored border, letting browsers use the link colors fot it
(as per some overall link color settings or browser defaults).
This requires a class attribute, say class=block, for such block
links, and something like
.block * { text-decoration: none; }
.block { display: block; display: table-cell; border: solid thin;
padding: 0.2em 0.3em; }
Any better ideas?
(Some vertical margins inside the element might need tuning too. You
probably don't what the default top margin for the heading element or
the default bottom margin for p.)
Thank you for your reply. I had removed any decorations from it so it
didn't look like multiple links.
I'll try your solution.
Thanks again.
regards
Martin
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can a DIV be made invisible to mouse clicks?
Ingo, Georg, Thank you for responding. https://developer.mozilla.org/en/css/pointer-events That is awesome, and exactly the kind of solution I was hoping for. It works for me in Firefox and Chome. Of course, all indications are that it does not work in Internet Explorer. I will, however, resist the urge to rant about the obvious frustration with how IE is always the exception when it comes to useful and easy solutions. I'm not sure if I can call this totally solved without IE support. I can get away with not supporting IE6, but I can't dismiss 7 and up. -- Dave M G __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Can a DIV be made invisible to mouse clicks?
CSS-d, I am using the jQuery Tools Flowplayer* to create a moving graphic on my page. To give my moving graphics a nice graphical frame, I have a DIV which contains a background which is a PNG image with transparency. In the HTML, the frame DIV comes after all the code that drives the animated graphics. By setting the top margin of the frame DIV to a high negative number, its position to absolute, and its Z-index to some high number, it effectively lays over top of the animation. The result is that it looks like the animation has a nice frame around it. It looks just as I had hoped. However, I have now discovered a problem. The animation contains clickable links, and other effects that are activated by mousing over. With the frame DIV on top, however, none of them are accessible. The browser interpets the frame DIV as covering the animation, and so it blocks any mouse action trying to go through it to reach the animation. The only way I can see around this is to slice up my frame DIV into corners and sides, so as to leave the centre empty, instead of just relying on the transparency of the PNG background. This will result in some serious DIV-itus, so before I go down this route, I was wondering if perhaps I was looking at this issue the wrong way. Perhaps there are methods for the effect I'm after that I am not aware of. So, in the end, my question is, can I lay one DIV on top of another without having the top div trapping mouse events that I want the DIV underneath to catch? I hope my question is clear. Thank you for any advice. -- Dave M G * http://flowplayer.org/tools/scrollable/index.html#autoscroll __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] padding in vertical menu
Hi there, I'm trying to do a vertical menu. The thing I'm struggling with is that there is some padding/margin between the li elements. How can I get rid of it? I'm no expert on css, but there shouldn't be any padding there:) Here's the page in question: http://www.slackword.net/am/qualifications.html It's at the bottom on the left hand side. thanks regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] padding in vertical menu
On 22/04/11 19:45, Kevin A. Cameron wrote:
line 250 of style.css
.left_primary p, #subcontent li {
1. padding: 0 0 0.675em 0;
}
That might be your problem.
Kevin
On Fri, Apr 22, 2011 at 1:35 PM, Martin mhe...@gmail.com
mailto:mhe...@gmail.com wrote:
Hi there,
I'm trying to do a vertical menu. The thing I'm struggling with is
that there is some padding/margin between the li elements. How
can I get rid of it?
I'm no expert on css, but there shouldn't be any padding there:)
Here's the page in question:
http://www.slackword.net/am/qualifications.html
It's at the bottom on the left hand side.
thanks
regards
Martin
__
css-discuss [css-d@lists.css-discuss.org
mailto:css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org http://evolt.org --
http://www.evolt.org/help_support_evolt/
Thanks a lot. That was it.
regards
Martin
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Re: drop down menu moves the page [solved]
On 12/04/11 21:08, John D wrote: See if this article helps: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page hth While I'm here I was wondering how I can keep the footer (black strip with links and the white one with logos) at the bottom of the screen at all times regardless of the contents height. I don't want to set up fixed height for the wrapper. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Thanks a lot. I read the article and positioned #footer absolutely with bottom: 0px. It places the footer at the bottom of a visible screen, but some portion of the gray background goes even further down. Where's any setting responsible for the height of the gray background. I'm confused. thanks regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] drop down menu moves the page
Hi there, I just noticed that when I hover over the menu (Services) the page changes its position. How could I fix it? I've been looking at the code but I can't come up with anything. I'd really appreciate any help with it. www.slackword.net/test/contact.html Thank you in advance kindest regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fwd: Re: drop down menu moves the page [solved]
Thanks a lot guys. I removed the absolute position from ul and it works fine. I don't remember know why I put it there. While I'm here I was wondering how I can keep the footer (black strip with links and the white one with logos) at the bottom of the screen at all times regardless of the contents height. I don't want to set up fixed height for the wrapper. Thank you again. regards Martin Original Message Subject:Re: [css-d] drop down menu moves the page Date: Tue, 12 Apr 2011 16:15:49 -0400 From: Tim Duffy timothy...@gmail.com To: Martin mhe...@gmail.com it goes away if you take off the position:absolute; from the styling of theul. Does the positioning serve a purpose? On Tue, Apr 12, 2011 at 5:01 PM, Martinmhe...@gmail.com wrote: Hi there, I just noticed that when I hover over the menu (Services) the page changes its position. How could I fix it? I've been looking at the code but I can't come up with anything. I'd really appreciate any help with it. www.slackword.net/test/contact.html Thank you in advance kindest regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] your opinion and advice appreciated
On 04/03/11 04:10, G.Sørtun wrote:
On 04.03.2011 02:35, Martin wrote:
I also tested it today on IE6 - and here's the problem. Any advice?
link: www.slackword.net/astute
Didn't test, but I'm pretty sure the addition of...
.trileft {display: inline;}
...will fix IE6' 'margin-doubling on floats' bug and make those floats
line up as you want.
Now, before you quit checking in other browsers, try setting minimum
font size to 24px or something. In my opinion (since you asked) you
have a weakness in your design.
Thanks a lot. The display:inline option has worked fine.
Now to the fonts. I know it doesn't look nice. I'm not an experienced
designer so earlier I read some basics on setting up the font sizes.
I got the impression that one shouldn't set font-size in pixels in order
to give the user freedom to change the size.
On my website it used to be font-size: 100% to be set as a browser's
default, however, The fonts looked much too big in all browsers
so I set the size in pictures to make them smaller.
Now you mention this 'minimum font size', but I'm not sure I understand
it. I would think I'd have to set the MAXIMUM font size so that it doesn't
get too big. Could you kindly elaborate on that?
btw, I do appreciate your feedback.
thank you
Martin
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different sizes between FF and IE
Ok, thanks guys. I'll read on it and then try redo the site. regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] different sizes between FF and IE
Hi all, I'm playing with this website and stumbled upon a problem. The height of the website is different across browsers (IE/FF). This wouldn't be a big problem but I included a backgound image (a vertical strip) and depending in which browser I open the site from it looks different. The gray background area should start in the bottom region. Anyway I haven't calculated the exact height of the background image as yet because but I can see now that it's going to be rendered differently across the browsers. Here's the website: www.slackword.net/pastel Could you advise me how to standardise the height of divs so that I can safely included that kind of background image? Additionally, if you see any other problems with the website, I'd be grateful if you could point them out. I don't have much experience in designing websites, so any advice would be appreciated. kindest regards Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different sizes between FF and IE
On 14/02/11 01:41, Chris F.A. Johnson wrote: On Mon, 14 Feb 2011, Martin wrote: ... Could you advise me how to standardise the height of divs so that I can safely included that kind of background image? You cannot know what font size your viewers are using, so it is impossible to do what you want: http://t.cfaj.ca/pastel/jpg. Thanks Chris, Your link seems to be dead. I then approached the task in a wrong way. What's the correct approach? I'd probably have to use smaller backgrounds for particular divs. Is that correct? thank you Martin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] different colour of an active link/page
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/*background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
===
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse
pointer from the link, it goes
back to gray.
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different colour of an active link/page
On 08/28/2010 02:45 PM, David Laakso wrote:
Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
Thank you
This i one way you might do it..?
css
li b { color:#ff7f00;
display: block;
padding: 0 2em;
line-height: 40px; color:#ff7f00;
}
markup
ul
libhome/b/li
lia href=#work/a/li
lia href=#play/a/li
/ul
Best,
~d
That's clever.
Thank you!
regards
martin
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different colour of an active link/page
On 08/28/2010 02:57 PM, Kevin Rodenhofer wrote:
Yeah. a:active doesn't do that. There is, however, a neat trick I
found somewhere that will do this for you.
First, on each and every page represented in the navigation, you have
to give the body tag an id like:
body id=home or body id=products Whatever the page is...
Then, in the navigation you need a separate id for each navigation
element (I'm just showing the hrefs):
a href=/ id=homenavHome/a or a href=products.htm
id=productsnavProducts/a and so on...
Then, in your CSS you need:
body#home a#homenav,
body#services a#productsnav {
background: rgb(212,201,182); --- substitute whatever color you want
here (make sure it's different than the default color)...
}
You can see how you'd add additional pages...
Now, when you navigate to a page, the associated link/button is
highlighted.
Hope this helps...
On 8/28/2010 11:12 AM, Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/*background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
===
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse
pointer from the link, it goes
back to gray.
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Thanks a lot guys
I can move on with the website now.
regards
martin
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 rounded shadow in opera/IE
For IE try: http://css3pie.com/ CSS3 PIE is a .htc plugin that makes Internet Explorer 6-8 capable of rendering several of the most commonly used CSS3 properties ... On Thu, Aug 5, 2010 at 11:40 AM, Duncan Hill dun...@gmail.com wrote: On Thu, 05 Aug 2010 09:25:26 +0100, Philippe Wittenbergh e...@l-c-n.com wrote: On Aug 5, 2010, at 5:14 PM, Duncan Hill wrote: For the record - WebKit (Safari 5 / Chrome 5) support border-radius without the vendor prefix (-webkit-). Box-shadow still needs the vendor prefix as it was not part of the CSS3 background and borders module when it became a Candidate Recommendation. I read an article (can't find my link) where, perhaps it was one of the dev versions, was responding to both sets of properties, with and without the prefix. This was producing different rendering in the browser and reinforces the importance of stating the rules in the correct sequence. I once made this WebKit testcase on this list (in a similar context even): http: //dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html Thanks Philippe, that's the one that proves the cascade. Forgive my poor memory Best wishes Duncan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 rounded shadow in opera/IE
On 08/05/2010 10:55 AM, Martin Möller wrote:
For IE try: http://css3pie.com/
CSS3 PIE is a .htc plugin that makes Internet Explorer 6-8 capable of
rendering several of the most commonly used CSS3 properties ...
On Thu, Aug 5, 2010 at 11:40 AM, Duncan Hill dun...@gmail.com wrote:
On Thu, 05 Aug 2010 09:25:26 +0100, Philippe Wittenbergh e...@l-c-n.com
wrote:
On Aug 5, 2010, at 5:14 PM, Duncan Hill wrote:
For the record - WebKit (Safari 5 / Chrome 5) support border-radius
without the vendor prefix (-webkit-). Box-shadow still needs the
vendor prefix as it was not part of the CSS3 background and borders
module when it became a Candidate Recommendation.
I read an article (can't find my link) where, perhaps it was one of the
dev versions, was responding to both sets of properties, with and
without the prefix.
This was producing different rendering in the browser and reinforces
the importance of stating the rules in the correct sequence.
I once made this WebKit testcase on this list (in a similar context
even):
http:
//dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html
Thanks Philippe, that's the one that proves the cascade.
Forgive my poor memory
Best wishes
Duncan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Thanks everyone,
The entries without vendor specific tags work fine on Opera.
The PIE extension seems to be partially working on IE. I'm testing
it on IE8. The drop-shadow effect seems to work fine. The radius property
doesn't seem to be supported (no round corners)
.shadowed-light {
border: 1px solid #c4c8cc;
-moz-box-shadow: 1px 1px 3px #999;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-box-shadow: 1px 1px px #888;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
box-shadow: 1px 1px 3px #999;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
behavior: url(PIE.htc);
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css3 rounded shadow in opera/IE
Hi there.
Is there any way of imitating it in opera and IE. It works fine in FF
and Chrome.
.shadowed {
border: 1px solid #c4c8cc;
-moz-box-shadow: 3px 3px 7px #999;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-box-shadow: 3px 3px 7px #888;
-webkit-border-bottom-right-radius: 15px;
}
Or possibly ignore this class altogether when a user opens it with opera/IE?
Thanks a lot.
Martin
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] place a div at the bottom of another div
On 07/24/2010 12:37 AM, Tim Climis wrote:
On Friday, July 23, 2010 7:27:04 pm Marcin Herda wrote:
I want to place a vertical bar across the page (at the bottom of the header
div.
Just 3 little changes:
#header {
position: relative;
width: 100%;
height: 154px;
color: #ff;
}
#bar {
position: absolute;
width: 100%;
height: 35px;
bottom: 0; (replaced vertical-align: bottom, which only applies to
inline elements and table cells)
background-color: #6F9FC8;
}
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Thanks a lot. That did the trick.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering 3 float: left boxes
On 23/06/10 02:18, Tim Climis wrote:
On Tuesday, June 22, 2010 8:06:27 pm martin wrote:
Hi all
I'm trying to center 3 float:left boxes in the middle of the main
container.
This might be pretty simple, actually... Untested, but give:
#container {
float: left;
margin: 0 auto;
}
a try.
Theory: once you float the container, it will shrink to fit all the other
boxes.
I'm pretty sure that the rules of float will still keep the three floated
columns next to each other. And then the margin: auto centers the whole thing.
If you need the main container wider than the three columns, you can add
another container div (#column_container or similar).
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Thanks, but what it did was floating the container to the left (well, as
it's supposed to do), but I want to keep the
container in the middle of the screen.
regards
Martin
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering 3 float: left boxes
On 23/06/10 15:31, David Hucklesby wrote: On 6/22/10 5:06 PM, martin wrote: Hi all I'm trying to center 3 float:left boxes in the middle of the main container. So far I've got: [code stripped] You might like to try putting the content in a UL instead, and apply inline-block instead of float. Here's an example of an image gallery: http://www.brunildo.org/test/ImgThumbIB.html Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Thanks. That's another possibility. I'll create a separate page to test this and see which one works best for me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering 3 float: left boxes
Hi all
I'm trying to center 3 float:left boxes in the middle of the main container.
So far I've got:
,[ html markup ]
| body
| div id=container class=curved
| h1Everyday Expressions/h1
| div id=left_main class=curved
| pThis is the left one/p
| /div
| div id=centre_main class=curved
| pThis is the centre one/p
| /div
| div id=right_main class=curved
| pthis is the right one/p
| /div
| br class=cleared /
| /div
| /body
|
`
,[ css ]
|
| body {
|margin: 0;
|padding: 0;
|text-align: center;
| }
| #container {
|width: 1024px;
|margin: 0 auto;
|text-align: left;
|background-color: cyan;
|border-style: solid;
| }
| #left_main, #centre_main, #right_main {
| float: left;
| width: 25%;
| background-color: red;
| margin: 1em;
| padding: 1em;
| }
| .curved {
| border-radius: 8px; /* CSS3 compliant browsers */
| -moz-border-radius: 8px; /* firefox */
| -webkit-border-radius: 8px; /* Google Chrome, Safari */
| -khtml-border-radius: 8px; /* Linux Browsers */
| behavior: url(css/border-radius.htc); /* IE
Browsers */
| background-image: url(1px.svg); /* Opera
9.5+ */
| }
| .cleared {
|clear: both;
| }
`
How would I have to change it so that those three boxes (left_main,
centre_main, right_main)
were positioned in the middle of the container. As you can see they
(understandably) are slightly
to the left.
Thank you.
cheers
Martin
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Any order columns with liquid layout
Hello everybody, I've been playing around a little with negative margins to show two or three columns in different order they are in the HTML code. I've used the information on a few articles and examples on positioniseverything, LayoutGala, A list apart, Meyer's web, etc. In all cases, to calculate the appropriate negative margins, widths need to be fixed, as far as I have understood from the examples and articles. What I'm trying to achieve is to show the navigation (fixed with on em) at the left of the main section (I'd like it to be liquid, with a max- and a min-width on em), while it actually comes after it on the code: bodysection id=main.../section navul.../ul/nav/body Is there any method described somewhere which would allow to do that? Or has somebody tried/succeeded doing something like that, please? Three columns instead of two, of course, would be even better. :-) Thank you in advance. Regards, Ángel P.S.: I'm using HTML5 and CSS3 and, for this design, I don't care about IE (any version) or old browsers. I'm just looking for the best simple way to achieve the described result. -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Any order columns with liquid layout
Hello Thierry, On Thu, Jun 17, 2010 at 08:33:13AM -0700, Thierry Koblentz wrote: I'm not sure I understand what you're trying to achieve. But if you have a navigation bar sized in EMs and want to style it with a min/max-width in EMs it won't work. Because the nav will never reach the min/max values. I don't. I want a navigation bar with fixed width (let say 10em) which flotes left to the main section (which is the one I want to have min/max widths). The thing is that I want the main section (not the nav bar) to adapt to the window width, but only to a certain max width (I do not want it to be wider than let say 30em, to make it easy to read). Thank you and regards, Ángel -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Any order columns with liquid layout
Hello David, Thank you for your answer. On Thu, Jun 17, 2010 at 12:05:25PM -0400, David Laakso wrote: This is 38em min/960px max. It's the main content what I'm wondering if it would be possible to make it flexible between let say 20em and 40 em. I would like the other columns to stay fixed (10em) and only main to adapt between the limits. http://chelseacreekstudio.com/ca/cssd/3.html I'm trying to not use percentages, but em, since I don't want the content to spread too much when the window is large. I want it to have certain flexibility, but not through the point were the main content has more than about 40em width (when reading become very uncomfortable). Again thank you, and regards, Ángel -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Any order columns with liquid layout
Hello Thierry, On Thu, Jun 17, 2010 at 09:47:55AM -0700, Thierry Koblentz wrote: I think this should work *exactly* like you want: http://www.ez-css.org/test/dare.html Not really. What I want is closer to http://mendel.ugr.es/~ama/es/ but with the main section flexible between limits (mainly max-width). Regards, Ángel -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-clipping in ie6
Maybe it has somethink to do with line-height:13.5pt lev rickards wrote: I don't know if font-clipping is the right phrase for this. http://green.harvard.edu/numbers This is a statistics page with some large accent numbers in the right-column. The numbers are surrounded by a span style=font-style: Georgia, serif; font-size:10em;. In IE6, only a thin band of the characters actually appear. When I select the span in IE Developer Toolbar, it only highlights the thin rectangular band. Any suggestions? Thank you, Lev Rickards __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for a second opinion on a site's structure
What it really needs is to go to a Content Management System like WordPress or Joomla, which would make it 1) better coding, 2) much more modern looking, and 3) able to be edited by non-tech volunteers. And I'd be happy to do that for a small fee. ;-) Thanks, Sara L. Martin Small Fish Services 7500 Nancemond St., Springfield, Virginia 22150 703 638 3790, s...@smallfishservices.com www.smallfishservices.com On Mon, Oct 12, 2009 at 10:48 AM, Climis, Tim tcli...@indiana.edu wrote: A whole site done virtually all in Javascript??? Yes, Brian, I can certainly confirm that it could have been better done. Do you have the power to rewrite the coding? Val I'm still confused. I just disabled javascript, and the site still worked just fine. Most of the text is images, which is strange, and a little annoying since you can't copy and paste anything. But I don't actually see what the javascript is doing on the page. I realize that this is off-topic for the list, being not css, but it's peaked my curiosity. If anyone wants to reply off-list, with what part of the site is actually created by the javascript, I'm interested in knowing. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shorthand elements
I like the TROUBLE mnemonic = TRBL cheers, martin On Mon, Sep 28, 2009 at 3:16 PM, jeffrey morin rufus2...@gmail.com wrote: On Mon, Sep 28, 2009 at 9:09 AM, T. R. Valentine trvalent...@gmail.comwrote: When using shorthand elements such as 'margin' or 'padding', the order is (IIRC) 2 values (top bottom) (left right) 4 values (top) (right) (bottom) (left) What about three values? Also, does anyone have a mnemonic to remember the order? -- T. R. Valentine Your friends will argue with you. Your enemies don't care. 'When I get a little money I buy books; and if any is left I buy food and clothes.' -- Erasmus __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ When using three values if you leave the fourth undeclared it will inherit from the previous declaration. If that doesn't make sense think of it like this. You declare *padding: 10px 4px 0;* You have values of* 10px top, 4px right, 0px bottom* and the left padding will *inherit* from the declaration you made on the right, in this case 4px. The easiest way for me to remember is that it goes clockwise. But I don't have any trick other than that. Regards, Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mystery margin on Windows FF IE
you use lia as inline-elements - if you make them display:inline-block the gap disappears. but of course you`ll get problems with IE8 and FF2 other solution: give the a-elements in your nav line-height:20px Matt Fielding wrote: Hello all, So I've been battling with a problem for the past few hours. I went to show a peer a site I've been working on for an upcoming event of ours, and discovered that on our site ( http://gdg.uml.edu/lan/ ), and only when viewing it with Firefox or IE under Windows does this happen, there is a mysterious black margin that appears between the #navigation div and the #main div. They sit closely together on every other browser I've tested under every other major OS and there is no visual break. This isn't a make or break problem for me, but my OCD side really wants to know why this is happening. I've tried everything from setting explicit borders, margins, overflow: hidden, and whatever else I could think of for all the involved divs and elements with no success. Of course there's a chance I forgot a crucial one. If someone could shed some light on this annoying inconsistency, I'd greatly appreciate it. Thank you, Matt F. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] general check :: noah learner
On Tue, Jul 14, 2009 at 11:11:53PM -0400, David Laakso wrote: BTW, red on green may be difficult for some users, too. Impossible to distinguish by certain types of color blind people, actually. Ángel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stand-down
On Wed, Jul 22, 2009 at 10:11:34PM -0400, David McGlone wrote: Awesome, another Linux user here. I assumed just about everyone here were MS users. Why would anybody with a minimum of technical computer skills use any MS software? Cheers, Ángel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Disappearing border in IE
Hi there, I'm hoping someone can help me - I'm struggling to resolve an issue in IE which despite many frustrating hours I've yet to figure out. I have tested the design in Firefox 3, Opera 9 and Google Chrome and it works. However in IE on the left border of the main content div seems to be obscured by the form inside it. The page in question can be viewed at: http://www.greenlawns.co.za/NewSite/contact.php I would be most grateful for any help. Kind regards, Martin __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie cornered tabs solution
Dear List, iam working on a Html Corner Tabs Solution and iam trying to make it look the same in FF, IE7 and IE6. - Fireforx renders it as expected. - IE7 doesnt render the Corner Width as same as the Width of the A Element beneath - IE6 renders the complete Width but uses the 100% instead of just the Text length. Would you mind taking a look please? Testcase Url: http://www.martin-moeller.biz/test/ Thanks in advance, Martin __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with float?
On this page- http://southerncommunityguide.com/dev/landing-gallery.html the first div class=sidebar (with the St. James logo) should be floated up beside the div class=gallery (big photo) but for some reason I can't get it to get up there. I have floats set but still...it won't go. Can someone spot check me and see what I'm forgetting? Thanks! Marty Martin __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS replacement for table layouts
On Wed, Dec 10, 2008 at 05:10:45PM -0700, Geoff Hoffman wrote: Sorry for the long post, but I've been thinking about this for over a year now, and it's been asked many times before without a viable answer that is actually reliably workable in a production environment. The bottom line is, I still have to resort to using tables for grid-based layouts, because I have had no luck making div tags work in certain circumstances. Particularly I am referring to 3x3 grid layouts where I need to have repeating backgrounds in a tic-tac-toe type of a setup: Doesn't something as extremely simple and so fast to code as this example I've just put together meet that? http://mendel.ugr.es/~ama/tmp/3x3.html Regards, Ángel signature.asc Description: Digital signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS replacement for table layouts
Hi Éric, everybody, On Thu, Dec 11, 2008 at 11:53:49AM +0100, Éric Vesque wrote: Your solution seems to work only in Opera, other browsers don't like ids begining by numbers. It was such a quick thing that I didn't bother to check it out in any other browser than the one I use most of the time while browsing with graphics (I also use Elinks for just text browsing :-). I have rewritten your page with some more stuff in order to have valid html (the div#conteneur has nothing to do with validation). You may see it at http://www.banturle.com/divers/grille3x3.html Thanks for that. But what have you added the div for? ul is already an html element one can style with CSS. Cheers, Ángel signature.asc Description: Digital signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS replacement for table layouts
On Thu, Dec 11, 2008 at 12:20:10PM -0800, David Hucklesby wrote: Your solution is very close, Angel. Some very minor tweaks got it working this end in all my browsers - As I already said, it was a couple of minutes typing to just show that what the OP claimed he was trying for years (even asking on different fora and so on) was as simple as a floated list. Nice demo. Thanks. Just wanted to show how easy the OP requirements could be meet on a few lines of code. That's all. It's unfortunate, but IE is so prevalent we do need to test with that browser -- even IE 5 is important, as recent IE versions revert to IE 5.5 rendering in quirks mode. If a visitor comes via the Google cached version, they get quirks in any IE version. Yikes! I don't care about IE unless I get paid for it ;-) and so, of course, I was not going to try to get the 3x3 demonstration working on it (I even have to remote log to a W2k3 server to fire up IE, which I only do at the end of all my web developments just to see if the site looks sufficiently good there (of course I usually don't try to get web sites to look identical in web browsers and InfernalEngine, it's enough for me if the site is readable and doesn't look too ugly ---again, unless I get paid to fix it on IE, when I take the time to make an special CSS loaded using condicional comments for the IE). Cheers, Ángel signature.asc Description: Digital signature __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can we create a newsletter in CSS
I'd like to know if it's possible, today, to style a newsletter using CSS. I'm concerning about the compatibility issues, but, have any of you tried this, what are your thoughts about this? The best Information i know of can you find here: 1. http://www.campaignmonitor.com/css/ 2. http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] base href and CSS
I am having trouble with using the tag base href= / in my html and it not being translated into my CSS document. I have declared - base href=http://www.foo.com/bar/; / in my html head (and above the CSS declaration). The physical location of the CSS file is /assets/css/styles.css In my CSS file, I have element styles like this-- background: url(/images/foo.gif); /* this doesn't work */ background: url(images/foo.gif); /* nor does this */ If I manually change the above path to ../../images/foo.gif then it works fine, but shouldn't the CSS file be using the base href I declared? Thanks, Marty Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] negative background position for sprite
Greetz everyone,
So I have this H1 tag and I have a little graphic sprite I want to
negatively position to the left of the H1 but when I do, the sprite
gets cut off at the box border of the H1. Is there a way around that
so I can negatively position the sprite without it getting cut off?
Here's what I have (spaces added for emailing purposes)--
h1 class=mountain Front-Porch Living Is Alive and Well in the South /h1
CSS--
h1 {
font: 1.4em Georgia, Times New Roman, Times, serif;
}
.mountain {
color: #9b422d;
background: url(images/h1-mountain-arrow.png) -15px 0px no-repeat;
}
All help appreciated!
Marty Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] negative background position for sprite
This accomplished what I needed, thanks for the suggestions from everyone!
Marty
On Fri, Oct 24, 2008 at 11:56 AM, Richmond [EMAIL PROTECTED] wrote:
How about something like:
.mountain {
color: #9b422d;
background: url (images/h1-mountain-arrow.png) 0px no-repeat;
margin-left: -15px;
text-indent: 30px;
}
Cheers
Richmond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A problem on safari
It's OK in FF3, IE7, and IE6. A colleague reports the problem in Mac/Safari, but I have no means of viewing it myself. I just checked in Windows Safari 3.0.3 - same Problem there. You can get it here: http://www.apple.com/safari/download/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Visual CSS interpreter
Sohail Aboobaker wrote: Is there a tool which would examine the current CSS and HTML for a given page and draw boxes around the div tag or visually mark each tag for easy mapping? Firefox Web Developer Toolbar should be sufficient. https://addons.mozilla.org/en-US/firefox/addon/60 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Problems
David Grootes wrote:
I'm having problems with IE6 and have no idea why.
Try this:
#header { margin-left:-1px; }
This should fix it.
But another things, before you continue ... fix all your Html Errors first.
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.linkhomes2000.co.uk%2Fmain%2Fmortgages%2Fmortgages_types_3.php
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page width problem with IE6
Tim Dawson [EMAIL PROTECTED] wrote:
Works OK in FF3 and IE7, but in IE6 the menu persists in being about 30px too
wide, as does the div#inner (grey background), although both are set to 770px
in
the CSS.
Hi Tim,
Checkout:
!--[if IE 6]
link rel=stylesheet type=text/css
href=http://www.holidaymullandiona.co.uk/pages/../css/ie6hacks0.css;
/
![endif]--
It says: div#nav {margin-left: 0; width: 800px;}
Heres where you got your 30px from.
Cheers,
Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] just using CSS, can I center a sentence both horizontally and vertically in a window (viewport)
If you get a chance, please have another look at: http://www.webdevelopedia.com/vertical_centering_unknown_height.html ...and let me know how it fares. IE 5.5 No (aligns left middle) IE6 Yes IE7 Yes Win Safari 3.0.3 Yes Opera 9.25 Yes Firefox 3 Yes __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] just using CSS, can I center a sentence both horizontally and vertically in a window (viewport)
Bill Brown [EMAIL PROTECTED] wrote: Martin Möller wrote: If you get a chance, please have another look at: http://www.webdevelopedia.com/vertical_centering_unknown_height.html ...and let me know how it fares. IE 5.5 No (aligns left middle) Simple fix added to support hcenter for IE5.5 (which should also fix 5.01). Yep 5.5 works now! :) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Here's mine: http://www.webbytedd.com//hr/ Tedd, the Markup for it is: div class=hrline onepixelhr //div __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Christian Kirchhoff wrote:
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high,
with
background, but IE still insists on transparent spacing.
div.hrline hr{ /* take out the troublemaking HR */
display:none;
}
div.hrline { /* DIV that wraps and replaces the HR */
background: transparent url(images/1pixel_hex_939393.gif) repeat-x
center center;
height: 30px;
}
div.onepixel {
height: 1px;
}
That should do the trick.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Google Chrome won't launch
Hi Hedley, no Install-Problems at all - took me 30seconds. I noticed that reflection.js which i use in some projects isnt working anymore. Except that is very fast Browser CSS Rendering experience. Cheers Hedley Finger wrote: Has anybody else had a similar experience? Windows XP SP3 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Tricky CSS Footer Problem
Hey List, heres something iam a bit stuck on also especially to make it cross browser safe and id like to hear your opinion on it. Description: - The Content Div is centered and fixed width. - The Footer Div streches to the Browser Window size. - Inside the Footer i need to have an area which is centered just like the Content Box - That Footer has a Gray Line that is supposed to strech as well * here comes the tricky part* - Inside that Gray Line i need to have a Half-Transparent Image which makes shine through the Body Color! (youll see in the testcase) - I was able to accomplish that BUT the next Step is: ? I need to have that Half Transparent Image centered and Left aligned to the Wrapper (not fixed to the left Browser Window like now) ? The Gray Background Line on both sides of the Half-Transparent Image still stays always streched to the Browser Window just like now. ? Solution for IE6 Testcase: http://www.savespam.com/testcase/ Hope you guys can give me some insights. :) Best Regards, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky CSS Footer Problem
Hi David, thanks thats close but the tricky part which i meant is the PNG Image needs to bleed through that Background Color/Image of the Body. I intend to use a Gradient Image as Background not just a single Color. So #footer and #box1 cant have a Background-Color. Tough. What do you think? http://www.savespam.com/testcase2/ David Laakso wrote: Something like this, maybe..? http://www.chelseacreekstudio.com/ca/cssd/test-22.html Martin Möller wrote: heres something iam a bit stuck on also especially to make it cross browser safe and id like to hear your opinion on it. Description: ? Solution for IE6 Testcase: http://www.savespam.com/testcase/ Martin -- Mit freundlichen Grüßen With kind regards Martin Möller Hallerwiese 4 90419 Nürnberg Telefon: +49(0)911-2017999 | Mobil: +49(0)179-9151652 E-Mail: [EMAIL PROTECTED] | Internet: http://www.ceusnet.de __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky CSS Footer Problem
David Laakso wrote: I think you may want to validate the above document; and, more important, count on another member of the list for a solution to the problem at hand as I have no clue. Sorry. Thanks David i appreciate that and iam sorry, i saved the Document with FF and uploaded it as Testcase2. Seems like some errors ended up by FF(Firebug Styles i guess) Anyway, i fixed that and added a Gradient Background Image to better visualize that case. http://www.savespam.com/testcase2/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky CSS Footer Problem
David Laakso wrote: Best I can do is this. http://www.chelseacreekstudio.com/ca/cssd/test-22.html If it does not cut it for you, we're both gonna need a 'pro' to resolve the issue (s). As ever, Quasimodo ah you changed the bg colo on the img divr to background:#236B7A none repeat scroll 0 0; that would work if the footer would never move further down. unfortunately it does *sigh*. the previous content box has variable length. thank you david - i wonder if maybe Georg has an idea how to tackle that css footer? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky CSS Footer Problem
David Laakso wrote: Georg? Face it. Georg Sortun can fix anything. Well, hes the MacGyver of CSS ;-) Alan Gresley wrote: You will need to make this image much longer (wider than #box2). http://www.savespam.com/testcase/image/bg_footer_bite_color1.png and apply it to the background of the #box2 div. You mean a making construct towards a Sliding Doors Footer Solution? Iam gonna try that. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] javascript slider vs. CSS, sliding content gets obscured in IE6, works in FF and Safari
okay.. this site has to go live in about 24 hours.. and IE is sucking the big one right now. http://www.adxcreative.com/projectHub/thebluffhomes I am currently using three instances of the Featured Content Slider (picked up from Dynamic Drive). The instance used in the floor plans section works as prescribed (click on the houses near the bottom), the other two instances (features and neighborhood) either don't like flash or don't like CSS because in IE, when clicking on the subnav menus to go between sections.. the flash graphics (the photos) and the container divs holding the text seem to be moving separately. When I remove the contents of the two content sliders in question and just put some unstyled dummy copy, it works just fine. I desperately need a fix! here's a link to the css in questions: http://www.adxcreative.com/projectHu...css/layout.css http://www.adxcreative.com/projectHu...tentglider.css My thoughts are, it can be one of two things... something with the CSS is causing trouble in IE6 and IE7. OR The introduction of a flash graphic (the instance that works properly doesn't contain a flash element). If the latter is the case, I'd like to first rule out any CSS issues. THANKS, Marty You are not what you own. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Select replacement
I'm looking into some form of replacement for a select box, so that I have more control over the styling, and I found this example from Aaron Gustafson. http://old.easy-designs.net.whsites.net/articles/replaceSelect/. This seems to give me pretty much what I need, with one problem. In IE6, when the list is expanded, it pushes down whatever is below it. In Firefox it doesn't do that, although in my application it drops down behind the other content. I can't link to my site unfortunately, but you can see the first problem on Aaron's example page itself - http://old.easy-designs.net.whsites.net/articles/replaceSelect/files/fin al.html. Can anyone suggest what I need to do do get the list to drop down over the top of any other page content? Or is there a better alternative altogether? Martin. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Select replacement
Marvelous! Thanks, that would have taken me forever to work out!
regards
M.
-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED]
Sent: 30 May 2008 16:00
To: Clark, Martin (M.)
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Select replacement
Clark, Martin (M.) wrote:
http://old.easy-designs.net.whsites.net/articles/replaceSelect/.
Can anyone suggest what I need to do do get the list to drop down over
the top of any other page content?
Using the...
http://old.easy-designs.net.whsites.net/articles/replaceSelect/files/final.html
...for debugging / example.
To make IE6 behave, add...
* html ul.selectReplacement {
overflow-y: hidden;
}
* html ul.selectOpen li {
position: relative;
}
That'll prevent auto-expansion on the container, and make the overflowing
parts visible and ready for action in IE6 - same as in other browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] center an image horizontally inside an overflow: hidden
At 01:47 -0400 30/4/08, S. Woodside wrote: I have a div absolutely positioned with overflow: hidden, and I have an image, of unknown pixel size, displayed inside it. I wish for the image to be cropped on the left and right, and sized to fit vertically. A key element here is that I will not know in advance what the size of the image actually is. I recently asked how to center a larger image vertically and horizontally in a smaller div and received some good suggestions. Basically they all involve using the image as the *background image* of the div or another element placed inside the div. Login to view the archives, the thread starts here: http://lists.css-discuss.org/mailman/private/css-d/2008-April/subject.html#86956 Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] center an image horizontally inside an overflow: hidden
At 14:35 -0400 30/4/08, S. Woodside wrote: Thanks for the link. I tried using background-image center center -- unfortunately this method doesn't meet my second criteria which is that the image be scaled to fit vertically. There does not appear to be any way to scale the image when using background. Yes, that's true. Sadly I haven't found a better way. The best you could do, would be to limit the height of uploaded images to a fixed size, if that's at all reasonable. Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop-Down Menu In Table?
At 7:57 -0500 18.4.2008, Victor Subervi wrote: However, now I am perplexed by the problem of how to get it to work within a table. He says in the note This one also has problems with IE when used within a table. So you might want to try the more recent version: http://www.cssplay.co.uk/menus/final_drop.html Sorry, but I haven't tried these in a table. Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
At 16:40 -0500 11/4/08, Benjamin White wrote: 1.) Could you not just render these particular links as block elements, either by floating them or explicitly declaring display: block and then setting the background to whatever image you need? Ideally you would then use the alternate text as the link text and hide it from traditional browsers in some way. Good idea! Anyway, thanks to everyone for your input - I'll figure something out. BestMartin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Centering image h/v in *smaller* div
Hi,
I use a div class=imgbox to display thumbnails in a square box.
These thumbnails are of various sizes and aspect ratios
(auto-generated by a CMS), but they all exceed the dimensions of the
box. Here's the css:
div.imagebox {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }
I want to position them so that their center-portion is displayed,
but since they're bigger not even text-align: center has any
effect. All I see is the upper left corner of the images.
Now all the resources I've found so far deal with the case of the
surrounding div being *larger* than the images. But I got some hints
that might be useful like setting the div's position to relative and
using absolute positioning for the images.
The problem with that is however that I can't use fixed values as the
size/orientation of the thumbnails varies.
Can this be done? Any help would be very much appreciated!
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
At 15:56 +0200 10/4/08, ilduca69 wrote: well, the name of the classes must match: div class=imgbox snip Sorry, that was just a typo in the mail - they actually do match, but no effect. Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
At 10:35 -0600 10/4/08, Lisa Onizuka wrote:
Martin, I'm not sure if you want to bother with any inline css, but you
could achieve it this way:
div class=imagebox
style=background:url('dynamically-generated-path.jpg') center center
no-repeat nbsp; /div
Thanks Lisa,
I had actually thought of this approach, but the thumbnails also need
to be clickable links and in order to achieve that I would need to
modify a core component of the CMS.
I might end up doing just that.
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Adjacent sibling selectors not taking
Hi everyone,
I use the general selector to zero my paddings and margins. I then
add in some defaults for common elements:
p, h1, h2, h3 {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
...and then use adjacent sibling sel. to refine them, which works well:
p+h1, p+h2, p+h3 {
margin-top: 1.5em;
}
Now I have a sidebar that I want to remove the default top margins of
any heading elements on the very first line, so I hoped a rule like
this would do the trick, but to no avail:
div#sidebar+h1, div#sidebar+h2, div#sidebar+h3 {
margin-top: 0em;
}
Why does the rule not work? Am I misunderstanding how these are
supposed to work?
(Changing it to a descendant selector like div#sidebar h1, etc.
shows the desired effect, but sadly on other h selectors further
down, too.)
Any help is very much appreciated!
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Adjacent sibling selectors not taking
At 1:21 +1000 10.4.2008, Alan Gresley wrote:
But even better.
h1:first-child, h2:first-child, h3:first-child {
margin-top: 0em;
}
Excellent! Thank you so much!
It's been a great relief to be able to use these exciting selectors
now that IE7 finally supports them.
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Adjacent sibling selectors not taking - solved!
Never mind, the moment I had written it down the solution hit me: what I want is the first child selector! Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Most popular fonts for browsers
At 15:09 +0200, 8/4/08, Cristian Palmas wrote: Does anybody know about a list of commonly used fonts? Look at the survey results linked at the top of this page: http://www.codestyle.org/css/font-family/ Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] header not at the top
also sprach David Hucklesby [EMAIL PROTECTED] [2008.03.22.2121 +0100]: Pardon me if I am being obtuse, but why would you want to place the header anywhere other than at the head of the document? Well, isn't it still the case that the content of a document should be at the start for bots and text browsers to easily process? If you look at e.g. http://www.google.com/search?as_q=madduck%20blog, you'll see that Google summarises the first hit with This entire site is under construction and thoroughly incomplete! (Mar 2008) which is at the top of the page. Ideally, the title and first sentence should show up there, right? -- martin | http://madduck.net/ | http://two.sentenc.es/ perl -e 'print $i=pack(c5,(41*2),sqrt(7056),(unpack(c,H)-2),oct(115),10);' spamtraps: [EMAIL PROTECTED] digital_signature_gpg.asc Description: Digital signature (see http://martin-krafft.net/gpg/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] using javascript to move DOM elements up front?
Dear list, I am designing a new content-heavy page and I would very much like for the content to start right away in the source code, while stuff like the header and the sidebar should follow afterwards. I can easily achieve what I want with the sidebar, but in order to place the header after the content in the source, and yet make it appear at the top of the rendered page, it seems I have to use position:absolute. This causes the header to occupy no space in the document, and hence I have to hard-code a margin-top on the content element, to make sure it starts after the header. This is problematic for various reasons, mainly due to the header's height being dynamic. I played around with with JavaScript a bit and this gave me the idea that I could simply render the header at the end of the document, and then shift the node to the proper location in the DOM tree on load. I wonder if anyone of you has any experience with this, or if there's a better, pure-CSS approach to what I am trying to do. Cheers, -- martin | http://madduck.net/ | http://two.sentenc.es/ i like .net for the same reason i like gentoo. it keeps all the people with no clue from writing c code, which is much harder for me to identify and eliminate from my systems. in the same way that gentoo gives those people a place to be that isn't in debian -- andrew suffield spamtraps: [EMAIL PROTECTED] digital_signature_gpg.asc Description: Digital signature (see http://martin-krafft.net/gpg/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site problem on ONLY ONE Linux browser
Hello All, My site does render fine in all flavors of browsers on WinXP. But on Linux (Ubuntu), the site collapses on Koncoror. However, the site looks fine on FF/Opera on Ubuntu. Can any Koncoror fans help? The site is: http://fiercestreetnetworks.com Best Regards and God Bless, Martin Standardista Espericueta / cid:part1.06020206.05040108@fiercestreetnetworks.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] page-break-inside for applet
Hi, we have an applet on our page and we would be sure that no page breaks occurs inside the applet. I've found an page-break-inside: avoid; rule which seems not to be supported by major browsers (but Opera). Do you have any suggestions how to avoud page break inside the applet? [Yes, I would place a page break just before the applet but if there is another semantically compatible solution with page-break-inside I would appreciate.] Thank you, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] items in ul-lists give z-index problems in ie
Dear List, i have a markup like this: ul li (left floating) div class=previewa href=#img/a/div div class=big-imageimg + text/div /li li div class=previewa href=#img/a/div div class=big-imageimg + text/div /li and so on /ul On mouse hover on the link in the preview div - i display the big-image div The big-image div is always positioned absolute right above the preview image. I gave the Big-Image Div a z-index to make it show above all the other list items as long its hovering. This works fine in Firefox but it fails in IE generally. In IE i see my big-image div UNDERNEATH following items and its ABOVE the items which came before in the markup. Its like the following Items are having an higher Z-Index. Can somebody give me some hints here? Thanks in advance! Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Class and Specificity?
I think you need
img.floatright
and not
img .floatright
cheers
Martin Clark
Compuware GmbH
Lead Developer, DMF - ADS Germany
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Dorothy Hesson
2336
Sent: 04 January 2008 15:26
To: Jukka K. Korpela
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Class and Specificity?
I am quite baffled here. I know I am totally missing something, but I
simply can't see it! Can you assist, please?
I'm afraid we are missing a URL.
I am trying to float an image right within a #content div. When I
place the following rule in the head element within style tags,
the image floats correctly.
.floatright {
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
}
This sounds reasonable, though seeing the markup would help here, too.
Now, when I take the same class rule and place it within the main.css
stylesheet, the image does not see the rule.
We really need the URL at this point.
snip
Does _anything_ in the external style sheet main.css work?
Thank you, Jukka -
The whole stylesheet does work. The stylesheet validates, too. This is
what's getting me!
URL with the style in the head element
http://www.cenacoloamerica.org/cenacolo_1/about/
Using the stylesheet alone
http://www.cenacoloamerica.org/cenacolo_1/catechesis/
(Please look kindly here smile Remember it's in development)
Cheers,
Dorothy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Dropdown Menu Problem
Hey guys, The site I'm working on is: http://dev.hendricksonforjudge.com/ I have two problems with my menu on this website. I tried to do a drop down menu using the blowfish example (http://www.alistapart.com/articles/dropdowns/). It works, however I am also doing hover images that load on the top right of the screen. So when you go to menu item that needs a drop down menu (about hendrickson) it gets stuck behind the header image. How do I make it appear on top of the header image? Also, I need the menu to create a blue background/bar all the way across the screen. Do I have to use an image or can I force the menu to take up 100% of the screen and create a solid blue bar all the way across at the top? Thanks guys, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Menu float problem
Hello everyone,
I'm having trouble with a unordered list menu. When you hover over the
link, the drop down works fine except that it is positioned at 0,0 relative
to the div instead of relative to the li (ie: directly underneath where I'm
hovering). I'm not sure what I'm doing wrong. Unfortunately the site isn't
live anywhere but here's the code I have. Maybe someone hopefully can spot
my mistake!
*CSS*
#navbar {
background: #00;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 1px solid #33;
border-bottom: 1px solid #33;
overflow: hidden;
}
#navbar a, #navbar a:visited {
color: #FF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#navbar a:hover {
color: #FF;
text-decoration: underline;
}
#navbar p {
color: #FF;
margin: 0px auto 0px;
padding: 0px 0px 0px 10px;
font-weight: bold;
}
#navbarright a img {
border: none;
margin: 0px;
padding: 0px;
}
#navbarleft {
width: 680px;
float: left;
margin: 0px;
padding: 8px 0px 8px 0px;
}
#navbarright {
width: 240px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 10px 6px 0px;
text-align: right;
}
#navbar ul {
margin: 0px;
padding: 0px 0px 0px 0px;
}
#navbar li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar ul li a, #navbar ul li a:visited {
background: #22;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FF;
margin: 0px -3px 0px 0px;
padding: 7px 14px 6px 12px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #00;
}
#navbar ul li a:hover {
background: #33;
color: #FF;
margin: 0px -3px 0px 0px;
padding: 7px 14px 6px 12px;
text-decoration: none;
}
.current_page_item a, .current_page_item a:hover {
background: #FF !important;
color: #2255AA !important;
}
/* Marty's Playground */
#navbar ul li ul {
display: none;
}
#navbar ul li ul li {
float: none;
}
#navbar ul li ul li a {
padding: 0;
margin: 0;
}
#navbar ul li:hover ul {
display: block;
position: absolute;
left: auto;
top: auto;
padding-top: 5px;
}
#navbar ul li:hover ul li a {
display: block;
width: 10em;
border: none;
padding: 2px;
}
*HTML*
div id=navbar
div id=navbarleft
ul
li class=page_item page-item-3a
href=http://osadvantage.com/about-us/; title=About usAbout us/a
ul
li class=page_item page-item-4a
href=http://osadvantage.com/about-us/ira-kaufman/; title=Ira
KaufmanIra Kaufman/a/li
/ul
/li
li class=page_item page-item-5a
href=http://osadvantage.com/online-advantage/; title=Our
AdvantageOur Advantage/a
ul
li class=page_item page-item-15a
href=http://osadvantage.com/online-advantage/integrated-marketing-strategy/;
title=Integrated marketing strategyIntegrated marketing
strategy/a/li
li class=page_item page-item-16a
href=http://osadvantage.com/online-advantage/what-is-your-brand/;
title=What is your brand?What is your brand?/a/li
li class=page_item page-item-17a
href=http://osadvantage.com/online-advantage/our-rapid-development-delivery-process-rddp/;
title=Our Rapid Development Delivery Process (RDDP)Our Rapid
Development Delivery Process (RDDP)/a/li
li class=page_item page-item-18a
href=http://osadvantage.com/online-advantage/focused-website-strategy/;
title=Focused website strategyFocused website strategy/a/li
li class=page_item page-item-19a
href=http://osadvantage.com/online-advantage/search-engine-optimization/;
title=Search Engine OptimizationSearch Engine Optimization/a/li
li class=page_item page-item-20a
href=http://osadvantage.com/online-advantage/conversion/;
title=ConversionConversion/a/li
/ul
/li
/ul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari Check and Footer Problem
Heya List, could somebody with a Mac please take a look if it displays correctly? http://www.pessewenk.de/neu/?page=gaestebuch I also have an Footer Float Problem in IE6, but havent figured out yet whats going wrong there. Thanks in advance, 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] Flash banner floating issue [Firefox]
The problem occurred with the CMS we are using (Tridion), which outputs ID tags which are incompatible with CSS spec such as starting class names with numbers,etc. Putting the style inline fixes the problem! Thanks, Martin Update on this The bug was with SWFObject, and the 'salign=left' parameter not working correctly. It wasn't actually CSS related issue. Changing to the 'UFO' method of embedding corrected the issue. Thanks for the help Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] Flash banner floating issue [Firefox]
Hi, By the way, Flash Satay is outdated. [...] By the way, again, I like your site design, and appreciate that's its liquid. Thanks for the kind words and help. The site does actually use SWF Object to embed the tags. The problem occurred with the CMS we are using (Tridion), which outputs ID tags which are incompatible with CSS spec such as starting class names with numbers, etc. Putting the style inline fixes the problem! Thanks, Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] How would you semanticly write this? Layout
Heya CSS-D, i was wondering whats the best way to semanticly write and style this List. Example: http://www.ceudex.de/test/content_events.jpg Thanks in advance, 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] 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/
[css-d] More info re Looking for help 3 column layout
Hi there, Regarding my previous post, someone suggested being able to see the problem would help so you can have a look at the current live site at www.napsa.org.za/portal go to languages and change it to Afrikaans then use the text size widget on the right to increase the font size and look at the Gestremdheidsverwante inligting link on the left Nav. IE and Firefox react differently but you should get the idea. Thanks, Martin -- This message is subject to the CSIR's copyright, terms and conditions and e-mail legal notice. Views expressed herein do not necessarily represent the views of the CSIR. CSIR E-mail Legal Notice http://mail.csir.co.za/CSIR_eMail_Legal_Notice.html CSIR Copyright, Terms and Conditions http://mail.csir.co.za/CSIR_Copyright.html For electronic copies of the CSIR Copyright, Terms and Conditions and the CSIR Legal Notice send a blank message with REQUEST LEGAL in the subject line to [EMAIL PROTECTED] This message has been scanned for viruses and dangerous content by MailScanner, and is believed to be clean. __ 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] Disappearing Left and Right Column on Three Column Layout
Hi List, i wrote a nice crossbrowser 3 column layout. The Problem is i need to add a background-color or image to my wrapper of the content div but if i add the background my left and rightCol div disappear. Any Ideas? URL: http://www.ceudex.de/test/ Thanks in Advance! 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/
[css-d] Looking for help 3 column layout
Hi there, I'm new to this list, and this is my first post. I'm hoping someone can help me. I've got what to me seems like an extremely challenging problem. The site I'm working on is a 3 column liquid layout design. To simplify the explanation of the layout, in the HTML there's a header div, followed by a wrapper div. Inside that wrapper div there are 3 divs, the first 2 both have fixed widths and are floated left and right respectively. The third is liquid and ends up between the left and right floated divs. Then outside that wrapper you've got the footer. The problem is I've now been asked if I can come up with a way to have all three liquid, but at the same time keep the basic look of the left and right columns being smaller than the middle one containing the content. So I need sort of a jello type layout. I've done some Googling but haven't been able to find a way to do this, so my question is does anybody know how this can be done? Let me explain why the developers have ask me to look at this. The divs inside the wrapper which are floated left and right contain navigation, this is a dynamic multi lingual site and the problem we have when a user changes to one of the languages the names for the navigation links are particularly long and therefore break outside the divs containing the navigation. So somehow I need to come up with a way that when there is a long word the div will expand to accommodate it. I'd REALLY appreciate any thoughts, ideas or suggestions on how I can come up with a solution for this problem? Thanks, Martin Pistorius -- This message is subject to the CSIR's copyright, terms and conditions and e-mail legal notice. Views expressed herein do not necessarily represent the views of the CSIR. CSIR E-mail Legal Notice http://mail.csir.co.za/CSIR_eMail_Legal_Notice.html CSIR Copyright, Terms and Conditions http://mail.csir.co.za/CSIR_Copyright.html For electronic copies of the CSIR Copyright, Terms and Conditions and the CSIR Legal Notice send a blank message with REQUEST LEGAL in the subject line to [EMAIL PROTECTED] This message has been scanned for viruses and dangerous content by MailScanner, and is believed to be clean. __ 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] Urgent help required!
Hi I have a design review tomorrow PM with a site and I need some urgent help getting something to be IE6 compliant. The pages are: http://pkl.net/~toasty/site/process_Test.htm http://pkl.net/~toasty/site/home.htm http://pkl.net/~toasty/site/quality.htm I have no problems with Firefox or Opera, or even IE7 for the most part. It's just damned IE6. We are not supporting IE5.5, thankfully. If there's anything you can suggest or help me with I will be eternally grateful. Specific problems 3 column layout breaks (IE6) - columns aren't right colours, etc. Menu breaks (IE6) Banner image header drops on resize (IE6) Green arrow bullets in centre column don't drop as expected (IE7) - right column floats over them. Thank you! Regards, MP This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] float problem
Hi I've got a nice 3 col layout working. Problem is, in the centre column I need to create an unordered list which needs to be floated left When I clear the float underneath, it any content after the clear appears in the centre column, but just beneath where the left menu ends. This problem affects every browser. I.e [ LEFT ] [ CENTRE ] [ RIGHT ] [] [] [ ] [] [ content ] [ ] [] [ floatleft ] [ ] [] [] [ ] [] [] [] [] [] [] [] [] [] [] [] [] [ content ] post-clear Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] splitting a table cell into a label and content.
Hi, I cant think how to do this. I have a 3*3 table and I would like each cell to contain two parts, label and content, each 300px wide. The label part is to be on the left and will contain label text, have a different background color to the content and have a fixed width, say 50px. The label should be full height of the cell. I am trying to achieve a layout so that regardless of the length of text in the label part or the text part, the two parts will always extend to the height of the table cell. I want to do it this way, rather than use a separate td for the label so that I can have independant control over the size of the labels (ie some labels could be wider. I have tried using float left, height 100% for the label part, but if the cell height grows, text gets wrapped under the label part. I would appreciate any suggestions. Thanks Tonypm _ PC Magazines 2007 editors choice for best Web mailaward-winning Windows Live Hotmail. http://imagine-windowslive.com/hotmail/?locale=en-usocid=TXT_TAGHM_migration_HM_mini_pcmag_0507 __ 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] Overflow bug?
Hi I've got a flash movie as a header in my three column container layout which I want to set overflow:hidden when the page is resized so it doesn't blow out of the side of the page. I've set overflow:hidden on all containers that the flash movie would push past - it works superbly in all IE versions, but not in Firefox/Opera/NS, etc... Is there a known problem with overflow:hidden? Thanks This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] IE6 extends my Wrapper Div more than its defined Width - in Firefox it works fine.
Hello CSS Friends, please could you take a look at my css layout. I have a problem which is bugging me for the last couple hours. The #Wrapper div (yellow) is extending far more than its defined width and i cant really figure out why. I think the bug comes from the Content Boxes but i havent found a bug pattern yet or way to fix it. Heres the Sample: http://www.ceudex.de/test/ Thank you very much! Martin -- Mit freundlichen Grüßen With kind regards Martin Möller __ 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] 3 col layout IE7 issue
Hi, We've managed to create the 3 col layout using CSS using the Holy grail method. This works great across IE 6, Firefox, Opera, and IE7... Except.. When you resize the text in IE7, the leftmost column moves in towards the centre and starts to overlap the text! This is the _ONLY_ problem, and I can't figure out why it's not Screenshot is at: http://pkl.net/~toasty/__test/error.gif Please help!!! Martin Paton Developer Tel: +44 (0)870 240 1700 E-Mail: [EMAIL PROTECTED] Web: www.amaze.com This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] format the Hover Effect in a List Menu
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
[EMAIL PROTECTED]
Sent: 11 May 2007 07:11
To: css-d@lists.css-discuss.org
Subject: [css-d] format the Hover Effect in a List Menu
What is the best way to format the Hover Effect in a List Menu without
affecting other links on the page?
I assume you mean links as in a href=...
Try
ul.class li a:hover {styles...}
Where 'class' is the class name assigned to your list.
Thanks,
Martin
This message has been scanned for malware by SurfControl plc.
www.surfcontrol.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] 3 col layout
Hello Is it possible to contain a 3 column layout within another container? For clarity I've uploaded a screenshot of what I want to achieve. I've tried about a zillion combinations of 3-col layouts, but just can't get it to work (except in firefox) http://pkl.net/~toasty/site.gif Some advice would be much appreciated. Thanks Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.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/
