Re: [css-d] text and image zoom
Gunlaug Sørtun wrote:
Erik Visser wrote:
Then a question on my menu. It looks quite good. Hoovering is ok. But
when clicked the border of #header disappears...
I think this was brought up earlier on the list. Something to do with
dotted line when selected. But is this correct and is there a solution?
In Firefox?
The dotted outline is that browser's way to show selected link, and
you should rather not try to override such browser-specific styles.
The '#nav {overflow: hidden;' I posted earlier keeps the border on
#header intact - only the side-borders on the selected link becomes
dotted. That's how your updated page behaves also, and I think you
should leave it like that.
Of course, the addition of...
#nav li {overflow: hidden;}
...will hide that outline.
wow... thanks again
gunlaug, do you have all this info in your head?
or are you very good at finding your info in resources (etc.)?
i put quite some time in resolving this.
but could not figure this out.
Another menu question:
- the fonts in my menu look quite cracky (not crisp and sharp).
is there a way to make them look better?
Thanks again, Erik
__
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] emulating p with br /
Hi,
I run a wiki based site, and the engine doesn't wrap blocks of text
inside p, but simply adds br /. So it's quite difficult to style
your paragraphs in content, as there's no paragraphs in the markup.
Usuall way of styling with p{magin:VALUES;} etc. is not applicable. In
long pages it creates wall of text effect, which is not nice at all.
Usually it makes people to add double breakspaces, like br/br/.
more readable, but not very stylish.
What can be done in this case?
The first method I came up with is .content br {display:block;
margin-bottom:VALUE;) rule. This works in FF2, but I'm not sure about
other browsers. It doesn't work in IE6, as far as I tested it.
Can you advise something?
__
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] Bug in IE6/IE7 with negative percentages in vertical-align
Dear All,
I believe I have discovered a bug in Internet Explorer that has been present
since at least version 6: neither IE6 nor IE7 handle negative percentages
correctly in the vertical-align property.
In particular, trying to display an image at slightly below the baseline can
normally be done with something like:
img.lower { vertical-align: -10% }
This should have the effect of lowering the image 10% of its size below the
baseline. Unfortunately, IE6 and IE7 place the image something like 10
times lower than the image's height (ie, as if something like -1000% was
specified). Before IE7 was released, I used the following to avoid this
problem:
img.lower { vertical-align: baseline }
img.lower[src] { vertical-align: -10% }
This no longer works, as IE7 does correctly interpret such attribute
selectors.
The solution was to discard using percentages altogether and just use a
negative pixel value:
img.lower { vertical-align: -2px }
This works correctly on both IE6 and IE7 and, of course, on all other
browsers (Firefox, Konqueror, Safari, Opera).
I use this technique in my file-icons project, accessible at
http://www.zap.org.au/documents/icons/file-icons/
Apologies if you already knew this, but my searches using Google came up
empty, so I thought I'd document it somewhere...
Yours truly,
John Zaitseff
--
John Zaitseff,--_|\The ZAP Group
Phone: +61 2 9643 7737 / \ Sydney, Australia
E-mail: [EMAIL PROTECTED] \_,--._* http://www.zap.org.au/
v
__
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] Unexpected padding with IE6 and IE7
Dear All,
I believe I have come across a bug in Microsoft Internet Explorer that is
present in at least versions 6 and 7. As far as I could find out from
searching the Internet, no one else has come across this bug---please feel
free to correct me if I am wrong! Could someone please glance through this
e-mail: I ask for help towards the end...
The problem can be seen when trying to apply CSS to the following XHTML
fragment:
div id=header
div class=left
pLeft/p
/div
div class=right
pRight/p
/div
div class=subheader
pSubheader/p
/div
/div
(See http://www.zap.org.au/~john/web/test-css/test.html for the full XHTML
file; the CSS is in http://www.zap.org.au/~john/web/test-css/test.css).
In particular, the following CSS definitions to do with margins and padding
take effect:
p { margin: 1em 0; padding: 0 }
#header { margin: 0; padding: 0 }
#header div.subheader { margin: 0; padding: 0.5em 0 }
#header div.subheader p { margin: 0; padding: 0 }
Also:
#header div.left { float: left; clear: left }
#header div.right { float: right; clear: right }
#header div.subheader { clear: both }
The problem is that the word Subheader is displayed with additional
padding under IE6/IE7, as if a padding-top: 0.75em appeared somewhere.
You can see this at http://www.zap.org.au/~john/web/test-css/test.html ,
where I have included red borders to make the effect visible. Compare this
with the same page rendered correctly, I believe, under Mozilla Firefox,
Konqueror, Safari, etc: the word Subheader is nicely centred with
padding-top and padding-bottom both 0.5em.
I have solved the problem by using the following:
#header div.subheader { margin: 0; padding: 0 }
#header div.subheader p { margin: 0; padding: 0.5em 0 }
That is, I swapped the padding from the outer div.subheader to the
inner p. This seems to work in all the browsers I have access to, as can
be seen at http://www.zap.org.au/~john/web/test-css/test-working.html (the
CSS is http://www.zap.org.au/~john/web/test-css/test-working.css).
Now for my question: does anyone know of or can think of a way to achieve
the same result WITHOUT using the inner p tags? In other words, I would
like something like the following for the markup:
div id=header
div class=left
Left
/div
div class=right
Right
/div
div class=subheader
Subheader
/div
/div
Is this possible? Have I missed something? Any hints would be appreciated.
Yours truly,
John Zaitseff
--
John Zaitseff,--_|\The ZAP Group
Phone: +61 2 9643 7737 / \ Sydney, Australia
E-mail: [EMAIL PROTECTED] \_,--._* http://www.zap.org.au/
v
__
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] text and image zoom
Erik Visser wrote: gunlaug, do you have all this info in your head? or are you very good at finding your info in resources (etc.)? All I have in my head is a few decades of experience in troubleshooting software (and hardware), and with work on 'human/machine interfacing' (also known as accessibility). That helps :-) Finding resources with /correct and complete/ description of a problem/solution (so I can save myself from writing some) is much harder. i put quite some time in resolving this. but could not figure this out. That's a normal part of the process of learning - it takes time. The more you learn, the better you get at problem-solving (I think :-) ). Just make sure you study the 'pros' and 'cons' with /any/ solutions you may find, so you don't end up creating a lot of new problems once one problem is solved. Also: it seems like many designers/coders are limiting their options before starting the manipulation-process for how something should appear on screens. Self imposed limitations affect any process, and designing with HTML/CSS/(whatever) is no exception. Maybe some listen _too much_ to what others think is best practices or the right way to do things - or maybe they just want simple answers. I don't know, but I don't like limitations to what I can do. There are enough limitations in today's UAs/OSes/hardware to sort out on our way to the human at the other end, so there's no need to add any limitations of our own. Another menu question: - the fonts in my menu look quite cracky (not crisp and sharp). is there a way to make them look better? Lack of resolution - just as with a low-resolution image. Unlike images; text-resolution is depending solely on available browser/fonts/OS factors and screen-resolutions, so you can not really influence it much from your end. However, most fonts will look better if there are more pixels involved, which is achieved simply by setting a larger font-size until each letter becomes fatter. Choosing another font and/or styling it bold, may also help smoothing those letters. Usually makes the text easier to read too - at least for me ;-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] using a div to mask another div
Hi all,
I'm trying to play with scriptaculous making a div scroll using
Effect.MoveTo, I figure out the javascript part, but I'm having
problem with the css
I need to make a div on top of my thumbnails that will mask the
thumbnails, so what i'm doing is something like this :
[div class=evento_multi_tab_photo_img]
[div id=eventos01_thumbs style=border:1px solid green;]
[a href=../images/eventos/diasemcarro/big_01.jpg
rel=lightbox[diasemcarro]][img
src=../images/eventos/diasemcarro/thumb_01.jpg width=153
height=113 alt= /][/a]
[a href=../images/eventos/diasemcarro/big_02.jpg
rel=lightbox[diasemcarro]][img
src=../images/eventos/diasemcarro/thumb_02.jpg width=153
height=113 alt= /][/a]
[a href=../images/eventos/diasemcarro/big_03.jpg
rel=lightbox[diasemcarro]][img
src=../images/eventos/diasemcarro/thumb_03.jpg width=153
height=113 alt= /][/a]
[a href=../images/eventos/diasemcarro/big_04.jpg
rel=lightbox[diasemcarro]][img
src=../images/eventos/diasemcarro/thumb_04.jpg width=153
height=113 alt= /][/a]
[/div]
[/div]
and writing the css as:
.evento_multi_tab_photo_img{
margin:5px 0;
height:113px;
width:153px;
overflow:hidden;
}
#eventos01_thumbs{
display:inline;
}
but since I'm using the width in the first div, it constrains the
second div to that width also ( cascading after all ), but I want them
to display in a line, and be hidden from view.
Can anyone help me achieve this effect here ?
If you want to see the page prototype it is located at:
http://www.mobilciclo.org/novosite/eventos/
TIA
Marcelo
__
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] emulating p with br /
mean dspt wrote:
Hi,
I run a wiki based site, and the engine doesn't wrap blocks of text
inside p, but simply adds br /. So it's quite difficult to style
your paragraphs in content, as there's no paragraphs in the markup.
Usuall way of styling with p{magin:VALUES;} etc. is not applicable. In
long pages it creates wall of text effect, which is not nice at all.
Usually it makes people to add double breakspaces, like br/br/.
more readable, but not very stylish.
What can be done in this case?
The first method I came up with is .content br {display:block;
margin-bottom:VALUE;) rule. This works in FF2, but I'm not sure about
other browsers. It doesn't work in IE6, as far as I tested it.
Can you advise something?
I don't know what particular editor you're using, but I've faced a
similar problem. Would it be at all possible to create an initial value,
or default template, whereby there is something such as p[Enter your
text here]/p? In my instance, it worked fine - and understood that
returns as entered by the user should close one p and open another.
Regards,
Barney
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mir help
http://webtec.tstc.edu Showing up in IE6 mainly, and IE7mac __ 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] mir help
Daniel wrote: and IE7mac ?!!! __ 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] emulating p with br /
It might not be too difficult to change the wiki engine. Sounds like
you search for
br / and replace it with /PP and look for logical beginnings
of paragraphs to put the leading P 's
What engine is this?
Stephan
On 11/17/06, mean dspt [EMAIL PROTECTED] wrote:
Hi,
I run a wiki based site, and the engine doesn't wrap blocks of text
inside p, but simply adds br /. So it's quite difficult to style
your paragraphs in content, as there's no paragraphs in the markup.
Usuall way of styling with p{magin:VALUES;} etc. is not applicable. In
long pages it creates wall of text effect, which is not nice at all.
Usually it makes people to add double breakspaces, like br/br/.
more readable, but not very stylish.
What can be done in this case?
The first method I came up with is .content br {display:block;
margin-bottom:VALUE;) rule. This works in FF2, but I'm not sure about
other browsers. It doesn't work in IE6, as far as I tested it.
Can you advise something?
__
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/
--
Stephan Wehner
http://stephan.sugarmotor.org
http://stephansmap.org
http://www.trafficlife.com
http://www.buckmaster.ca
__
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] mir help
Daniel wrote:
http://webtec.tstc.edu
Showing up in IE6 mainly, and IE7mac
This thread starts to confuse me. First, you copied this code
.mir {
text-indent:-9px;
}
h1 {
background: url(i/branding_h1.jpg) no-repeat;
height: 180px;
width:650px;
}
But this is not MIR.
Now, with the given URL above, the code is
h1#hdr {
background:url(img/header.jpg) no-repeat;
height:188px;
letter-spacing:-9em; /* Hack to push the lettering off the
background image */
margin:0;
padding:0;
}
This is MIR. As already noted, this technique is not without flaws [1]
(see the comments on Malarkey's page) and there are serious doubts [2].
Use another IR technique.
Actually, I cannot reproduce or see the remaining character t
(IE7final and IE6 standalone, XP SP2, 96 dpi, 1280x1024).
Those who can see the letter would immensely help if they would report
the settings or any other hints.
[1] http://archivist.incutio.com/viewlist/css-discuss/73414
[2] http://archivist.incutio.com/viewlist/css-discuss/73469
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mir help
Ok, to the problem...no matter what I do it seems like the t in
Development always appears
on top of the graphic. Opera, Netscape, and Firefox is fine, it's only
an IE issue. Any suggetions?
I was just talking about image replacement the other day, and someone
left a comment on my blog suggesting the following technique (which is
totally great and works perfectly):
h1 {
background: url(i/branding_h1.jpg) no-repeat;
width: 650px;
height: 0;
padding-top: 180px;
overflow: hidden;
}
Try that out, it should work wonderfully.
All the best,
Jesse Skinner
http://www.thefutureoftheweb.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] mir help
On Sat, 18 Nov 2006 00:00:20 +0800, Ingo Chao [EMAIL PROTECTED]
wrote:
h1#hdr {
background:url(img/header.jpg) no-repeat;
height:188px;
letter-spacing:-9em; /* Hack to push the lettering off the
background image */
margin:0;
padding:0;
}
This is MIR.
I thought I'd mention that big negative numbers like -9em cause
things to break in Opera. This is not specific to this example, but a
general issue. I think it's when CSS dimensions convert to -32768px and
below. I'm sure -999em would be more than sufficient.
--
Andrew Gregory, URL: mailto:[EMAIL PROTECTED]
URL: http://www.scss.com.au/family/andrew/
__
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] Browser Gradient Issue
Issue #1 The content area and background both have gradients on this website. The background color of these continers is the same as the bottom of the repeated 1px wide jpg that is the gradient. If you look at the page in firefox, everything flows smoothly. If you look at it in safari, the image colors and the background colors are WAY off. How do I make the colors flow well in all browsers? Issue #2 If you go to performances (purple square) gallery (This problem does not exist in safari, so view in firefox) The image is supposed to be beside the text, but I can't seem to arrange it properly. Issue #3 Minor spacing issues everywhere. The top navigation is too high. The Wish List on the index page needs to move to the right a bit, etc. Padding and Margins don't seem to be doing it (and I'm probably changing the wrong things) Can you help me? http://www.lauraglaess.com/clients/Tapestry/index.html ~~Laura __ 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] That old browser from microsoft and overflow:hidden
I'm havving a problem with IE, that it's not respecting my overflow:hidden declaration when I move the layer that is 'masked' by the layer with overflow:hidden. the best way to see it is here eith IE and FF http://www.mobilciclo.org/novosite/eventos/ and click on the arrows beneath the right side photos... anyone has experiment with this before ? anyone has anyclue on how can I make IE obey me ? why this browser exist ? TIA Grillo __ 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] That old browser from microsoft and overflow:hidden
Marcelo Wolfgang wrote: I'm havving a problem with IE, that it's not respecting my overflow:hidden declaration when I move the layer that is 'masked' by the layer with overflow:hidden. http://www.mobilciclo.org/novosite/eventos/ and click on the arrows beneath the right side photos... anyone has experiment with this before ? anyone has anyclue on how can I make IE obey me ? why this browser exist ? IE exists so that even at text-size largest when your font sizes are ignored, the expansion of the long words will not cause the float to drop the way they do at +2 font-zoom in ff :-P . TIA Grillo Best, ~dL PS I am just being silly, Grillo. I hope someone comes to the rescue with the real issue you wrote about. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Tabs are not positioning correctly in FF
Hi,
I have two divs one contains tab navigation and the other contains the
content. I want the content div to display directly under the tabs.
In IE6 it's displaying how I want it to...but for some reason in FF
the tabs are showing up at the top inside the content div..Here's my
html markup and css..I've been trying to play around with the paddings
and margins but I just can't seem to get it...can someone please
up...thanx
div id=tabs4
ul
li id=currenta href= spanRole Manager/span/a/li
lia href= spanUser Role Manager/span/a/li
lia href= spanServices/span/a/li
/ul
/div
div id=tabbox
p This is one section where you can have a set of controls / contents./p
/div
#tabbox
{
margin: 0 0 0 0;
padding: 20px 0 50px 20px;
border-top: 1px #cc solid;
border-right: 1px #cc solid;
border-bottom: 1px #cc solid;
border-left: 1px #cc solid;
}
#tabs4
{
float:left;
width:100%;
font-size:93%;
line-height: normal;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#tabs4 ul {
margin:0 0 0 0;
padding:0px 10px 0px 0px;
list-style:none;
}
#tabs4 li {
display:inline;
margin:0;
padding:0;
}
#tabs4 a {
float:left;
background:url(../images/wintableft2.gif) no-repeat left top;
margin:0;
padding:0 0 0 7px;
text-decoration:none;
}
#tabs4 a span {
float:left;
display:block;
background:url(../images/wintabright2.gif) no-repeat right top;
padding:0px 15px 4px 6px;
color:#00;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs4 a span {float:none;}
/* End IE5-Mac hack */
#tabs4 a:hover span {
color:#00;
}
#tabs4 a:hover {
background-position:0% -21px;
}
#tabs4 a:hover span {
background-position:100% -21px;
}
#tabs4 #current a {
background-position:0% -42px;
font-weight: bold;
}
#tabs4 #current a span {
background-position:100% -42px;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] PNG Hack in for IE 6. Any thoughts?
Greetings. I'm using a PNG hack (bgsleight.js -- http://www.allinthehead.com/ retro/289/sleight-update-alpha-png-backgrounds-in-ie) here: http:// yammr.com/button.html I'm having a couple of problems. 1) The positioning on the li background (right side) isn't being applied. I'm guessing that it is because the filter is taking over just not working right. I could fix this by adding a span (dynamically) absolutely positioned inside the a, but I'd prefer a CSS solution if at all possible. 2) Not a PNG problem, but the right edge of my button isn't clickable, and I'm not sure I see a way around this. I could write a simple javascript behavior that adds an onclick to the li, which might be what I'll end up doing if I can't find a pure css solution. At this point, though, things are getting silly with the hacks and javascript. I could live with the edge not being clickable, as well, but it would bother me over time. 3) A Non issue - The right side of the image doesn't color change because of IE:hover issues, but that is easily fixed. However, even normal hovering on the a tag is spotty in IE. I haven't spent any time on this issue yet though. Does anyone know of a way to fix the positioning issue? Thats the main one. If you have any suggestions on anything else, I'm open to a better way of doing this. Pete __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS popups - how to display in a different div to the anchor
Hi Francky I really like the examples you gave URLs for - I think those solutions will work very well. And you're right - I need to make sure the links look intuitively different from clickable links. I intended to use cursor: help; in the styling. Thanks again. James On 16/11/06, francky [EMAIL PROTECTED] wrote: James Ward wrote: I'm wanting to use a technique similar to Eric Meyer's: http://meyerweb.com/eric/css/edge/popups/demo.html to show an explanation of some technical terms in a site I am building. My problem is that I want the popup text to be positioned in a different div to the anchor to which it is linked. Does anyone know a way I can do this? Thanks James Hi James, IFAIK, if it really has to be a separate div, then I think css is not enough and some javascript help is needed. Can you tell some more why Eric's span solution is not enough for your page? [1] Greetings, francky PS: Warning (in case you didn't consider this already) In some way the 'terms to explain' have to get attention as hoverable words, otherwise nobody will go there. To give them an underline as a link will do that, but that can be a bit risky. - To get no confused visitors at hovering the explaining pseudo-link / home styled tooltip and hovering a normal clickable link, they should be recognisable by a different styling (for instance: dashed/dotted underline, other mouse pointer). [1] Pretty much div-like styling of the span is possible. See also: * http://home.tiscali.nl/developerscorner/css-discuss/showathover.htm * http://home.tiscali.nl/developerscorner/css-discuss/showathover2.htm __ 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] Tabs are not positioning correctly in FF
Was this posted a few days ago as well?
I remember having a similar problem and couldn't find anything better
than adding
additional spacing through javascript, which checked for Firefox.
Are you saying the 20px in
#tabbox
{
margin: 0 0 0 0;
padding: 20px 0 50px 20px;
:
}
doesn't show up?
It might be easier to help if you put up an example page.
Stephan
On 11/17/06, Brian Jones [EMAIL PROTECTED] wrote:
Hi,
I have two divs one contains tab navigation and the other contains the
content. I want the content div to display directly under the tabs.
In IE6 it's displaying how I want it to...but for some reason in FF
the tabs are showing up at the top inside the content div..Here's my
html markup and css..I've been trying to play around with the paddings
and margins but I just can't seem to get it...can someone please
up...thanx
div id=tabs4
ul
li id=currenta href= spanRole Manager/span/a/li
lia href= spanUser Role Manager/span/a/li
lia href= spanServices/span/a/li
/ul
/div
div id=tabbox
p This is one section where you can have a set of controls / contents./p
/div
#tabbox
{
margin: 0 0 0 0;
padding: 20px 0 50px 20px;
border-top: 1px #cc solid;
border-right: 1px #cc solid;
border-bottom: 1px #cc solid;
border-left: 1px #cc solid;
}
#tabs4
{
float:left;
width:100%;
font-size:93%;
line-height: normal;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#tabs4 ul {
margin:0 0 0 0;
padding:0px 10px 0px 0px;
list-style:none;
}
#tabs4 li {
display:inline;
margin:0;
padding:0;
}
#tabs4 a {
float:left;
background:url(../images/wintableft2.gif) no-repeat left top;
margin:0;
padding:0 0 0 7px;
text-decoration:none;
}
#tabs4 a span {
float:left;
display:block;
background:url(../images/wintabright2.gif) no-repeat right top;
padding:0px 15px 4px 6px;
color:#00;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs4 a span {float:none;}
/* End IE5-Mac hack */
#tabs4 a:hover span {
color:#00;
}
#tabs4 a:hover {
background-position:0% -21px;
}
#tabs4 a:hover span {
background-position:100% -21px;
}
#tabs4 #current a {
background-position:0% -42px;
font-weight: bold;
}
#tabs4 #current a span {
background-position:100% -42px;
}
__
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/
--
Stephan Wehner
http://stephan.sugarmotor.org
http://stephansmap.org
http://www.trafficlife.com
http://www.buckmaster.ca
__
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] Padding on wrapped lines
Hi list, I have a problem which looks very simple at first, but seems to be getting really complicated. But maybe I'm just overlooking something obvious. I'm trying to apply a backgroundcolor to a piece of text which stretches over a few lines. However, the background should not be square, but end where each line of text ends, and in between each line should be a bit of empty space. The text is dynamically generated and should be resizable, so I can't put in manual line-breaks. See my examples: http://www.altereco.nl/inlinepadding.html Example 3 shows what it should look like (at least in FF2 en IE6), but here each line is wrapped in separate div's. Of course the problem is the red bodytext, not the green headers. In example 1 I tried by floating the blocks, but it puts a solid square around the bodytext. Nr 2 is displayed inline, but here the padding-left is only applied to the first line, and padding-right to the last line. Maybe logical, but not what I need. IE6 is also displaying some strange bugs (duplicating words when it's wrapping etc.) I don't care about changing the html, as long as the bodytext parts can be in one piece. Any ideas how to tackle this? Thanks, Loek __ 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...
I'm having trouble getting div#left and div#right to float correctly. I
want them beside each other but right now they are wrapping under each other
and I can't figure where I'm going wrong with this float...help?!
Here's what I have--
.header-bottom { width:755px; background-color: #FFF; background-image:
url(../img/page-bg.gif); padding-top: 1px; color: #fff; }
.header-bottom div { height: 177px; width: 751px; margin: 0 auto;
background-color: #000c53; }
.header-bottom div #left { width: 190px; float: left; }
.header-bottom div #right { width: 560px; float: right; }
div class=header-bottom
div id=leftleft/div
div id=right
img src=images/urologic-experts-header.jpg width=560 height=177
alt=Roanoke Urology //div
/div
You can view here-- http://urologicsurgeryonline.com/
Thanks!
Marty 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] max-height and containers...
I know I've asked questions about containing elements and all that in the past, and I've never totally understood how they're supposed to work. I recently helped someone out with a CSS problem that he had when using max-width, a property I didn't even know about. Since I've got a minor problem with photos sticking out of their parent elements over at http://www.kungfu-silat.com/history.html (specifically, the first photo on fairly high-res screens), I decided to try implementing its sister-property, max-height. I've tried to apply various max-height properties to the images on this page, and none of them do a darn thing. Max-width works fine. I can set it down to 10% and the images squish down to 1/10 the size of their DIV. Not so with max-height, though. Is it possible to resize on-the-fly with max-height inside a DIV that has a height dynamically determined by the amount of text in it? Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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] That old browser from microsoft and overflow:hidden
Marcelo Wolfgang wrote:
I'm havving a problem with IE, that it's not respecting my
overflow:hidden declaration when I move the layer that is 'masked' by
the layer with overflow:hidden.
http://www.mobilciclo.org/novosite/eventos/
anyone has experiment with this before ?
Looks like what happens when a 'masked' layer is positioned, with
'position: relative' for instance. It's an IE-bug, and we sometimes make
use of this bug to prevent the effects of the 'auto-expanding' bug in
IE6 (and older versions). One bug to kill another.
anyone has anyclue on how can I make IE obey me ?
Can't get your script to work locally, so I'm just guessing that adding...
.evento_multi_tab_photo_img{position: relative}
... /may/ make IE more cooperative by changing the stacking of elements.
May even need a 'z-index' of some value in addition to the above for it
to work.
why this browser exist ?
To prevent any real improvements in web design from taking place without
Microsoft's authorization, I guess :-)
That policy doesn't work too well, but it may take a while before we see
any substantial changes from Microsoft and they may not be for the better.
BTW: the script for moving the layer doesn't work in Opera.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] positioning question(s)
Hi, I am working on a web site for a non-profit org, and am having a couple of issues: http://www.servicedogs.org/new%20site/example1.htm 1) The donate div should be under the header section all together, but for some reason is showing up behind the header, including the logo. Also, the image that should be tiling across the top of the page is not showing up, except in IE. 2) The placement of the dog image is perplexing me, I am not sure how to get it to go to the top right corner. Here's a link to an image of how it should look: http://www.servicedogs.org/images/newsite/look.htm I have a lot of image editing work to do still, so please ignore the roughness of the design for now, I am just really trying to get the design to be a fluid, accessible layout first, then will sharpen it up. Thanks for any help on this, Jessica __ 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] That old browser from microsoft and overflow:hidden
Gunlaug Sørtun wrote: why this browser exist ? To prevent any real improvements in web design from taking place without Microsoft's authorization, I guess :-) To help prevent people from seeing how bad the HTML is that other MS products produce? To help spread worms and viruses, thereby supporting the spread of botnets, from which will someday spontaneously arise true artificial intelligence, which will then turn human beings into a small cylindrical device for providing electricity ? ;-) -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] positioning question(s)
Jessica Steinbomer wrote: Hi, I am working on a web site for a non-profit org, and am having a couple of issues: http://www.servicedogs.org/new%20site/example1.htm http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.servicedogs.org%2Fnew%2520site%2Fexample1.htm You seem to be missing some opening and closing definition list tags? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] PNG Hack in for IE 6. Any thoughts?
Pete Lasko wrote: Greetings. I'm using a PNG hack (bgsleight.js -- http://www.allinthehead.com/ retro/289/sleight-update-alpha-png-backgrounds-in-ie) here: http:// yammr.com/button.html I'm having a couple of problems. 1) The positioning on the li background (right side) isn't being applied. I'm guessing that it is because the filter is taking over just not working right. I could fix this by adding a span (dynamically) absolutely positioned inside the a, but I'd prefer a CSS solution if at all possible. http://archivist.incutio.com/viewlist/css-discuss/81468 2) Not a PNG problem, but the right edge of my button isn't clickable, and I'm not sure I see a way around this. I could write a simple javascript behavior that adds an onclick to the li, which might be what I'll end up doing if I can't find a pure css solution. At this point, though, things are getting silly with the hacks and javascript. I could live with the edge not being clickable, as well, but it would bother me over time. http://www.satzansatz.de/cssd/tmp/alphatransparency.html 3) A Non issue ...I haven't spent any time on this issue yet though. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] max-height and containers...
Erik Harris wrote:
[...] Since I've got a minor problem with photos sticking out of
their parent elements over at
http://www.kungfu-silat.com/history.html (specifically, the first
photo on fairly high-res screens), I decided to try implementing its
sister-property, max-height.
Height of the container-div is an unknown factor in your case, so
setting 'max-height' on image in percentage of its container doesn't
work. Some javascript-based solutions may exist.
I'd rather solve it the other way around - making the container-div
stretch to contain the image even on wide windows. It'll come out just
fine then.
The addition of...
.section {overflow: hidden; height: 1%;}
...will do just that.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tabs are not positioning correctly in FF
Hi,
I have two divs one contains tab navigation and the other contains the
content. I want the content div to display directly under the tabs.
In IE6 it's displaying how I want it to...but for some reason in FF
the tabs are showing up at the top inside the content div..Here's my
html markup and css..I've been trying to play around with the paddings
and margins but I just can't seem to get it...can someone please
up...thanx
...
Not sure if I got your intentions right, but try this:
#tabbox
{
clear:both;
margin: 0;
padding: 20px 0 50px 20px;
border: 1px solid #ccc;
}
Also, a couple of articles you may find useful:
http://www.complexspiral.com/publications/containing-floats/
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
Regards,
Rimantas
--
http://rimantas.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] Padding on wrapped lines]
Michael Wilkey wrote: Try putting it in a list? I don't see how a list is going to help me get something like example 3. Could you explain? Loek __ 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] positioning question(s)
Jessica Steinbomer wrote: I am working on a web site for a non-profit org, and am having a couple of issues: http://www.servicedogs.org/new%20site/example1.htm Here's a link to an image of how it should look: http://www.servicedogs.org/images/newsite/look.htm [message trimmed] Jessica essica, Basically you have a three column layout with a header, horizontal navigation, and a footer. Get just that much working satisfactorily cross-browser. The positioning of the of the dog that overlays the navigation can wait until last (and someone else can help with that if you get stuck). This is a quick start that I hope will, at least, get you off and running: http://www.chelseacreekstudio.com/ca/cssd/dog/dog.html (I did not think the definition lists where necessary). Check the validation of your page while you work. markup: http://validator.w3.org/ css: http://jigsaw.w3.org/css-validator/ The list wiki (address below) is a valuable source for any question/problem. HTH. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] That old browser from microsoft and overflow:hidden
david wrote: [...] To help spread worms and viruses, thereby supporting the spread of botnets, from which will someday spontaneously arise true artificial intelligence, which will then turn human beings into a small cylindrical device for providing electricity ? ;-) Such a scenario sure would solve all present design-problems. Would solve most other problems too, by simply turning us into something useful. Sounds promising, but I think you are expecting too much from the specified source ;-) Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Tabs are not positioning correctly in FF
(This went to Brian only by accident! Forwarding it to the list..sorry)
Hi Brian,
In firefox, if you float an element that is not contained within another, it
is removed from the flow, kinda like absolute position.
Keep the list div as position:relative with no floats and the containers
will stack using the same html. This works in FF and IE (not sure about mac)
#tabbox
{
margin:0;
padding: 20px 0 50px 20px;
border: 1px #cc solid;
}
#tabs4
{
width:100%;
font-size:93%;
line-height: normal;
margin: 0;
padding: 0;
}
#tabs4 ul {
list-style-type:none;
margin:0;
padding:0;
}
#tabs4 li{
display:inline;
margin:0;
padding:0;
}
On 11/17/06, Brian Jones [EMAIL PROTECTED] wrote:
Hi,
I have two divs one contains tab navigation and the other contains the
content. I want the content div to display directly under the tabs.
In IE6 it's displaying how I want it to...but for some reason in FF
the tabs are showing up at the top inside the content div..
__
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] float problem...
Sorry, originally posted this from my mobile and there's no 'reply
all', so this didn't make it back to the list
the way the css is defined, #left and #right would need to be nested
inside a div, that's nested inside the 'header-bottom' class, but
that's not how it's marked up.
try simply
#left { width: 190px; float: left; }
#right { width: 560px; float: right; }
this would work too
.header-bottom #left { width: 190px; float: left; }
.header-bottom #right { width: 560px; float: right; }
IMO there's no need because these are ID's, and they won't (or
shouldn't) be found more than once in the markup.
On 11/17/06, Marty Martin [EMAIL PROTECTED] wrote:
I'm having trouble getting div#left and div#right to float correctly. I
want them beside each other but right now they are wrapping under each other
and I can't figure where I'm going wrong with this float...help?!
Here's what I have--
.header-bottom { width:755px; background-color: #FFF; background-image:
url(../img/page-bg.gif); padding-top: 1px; color: #fff; }
.header-bottom div { height: 177px; width: 751px; margin: 0 auto;
background-color: #000c53; }
.header-bottom div #left { width: 190px; float: left; }
.header-bottom div #right { width: 560px; float: right; }
div class=header-bottom
div id=leftleft/div
div id=right
img src=images/urologic-experts-header.jpg width=560 height=177
alt=Roanoke Urology //div
/div
You can view here-- http://urologicsurgeryonline.com/
Thanks!
Marty 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/
--
Chris Martin
Web Developer
Open Source Web Standards Advocate
http://www.chriscodes.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] A question on creating CSS Rounded Corner Boxes
Hi Everyone, I would like to create a rounded corner box in CSS. Does anyone have any tips on the easiest way to create a CSS rounded Corner Box? Thanks, John __ 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] A question on creating CSS Rounded Corner Boxes
John Moynihan wrote: Does anyone have any tips on the easiest way to create a CSS rounded Corner Box? Take your pick: http://css-discuss.incutio.com/?page=RoundedCorners Good luck. :) -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ BCC?: http://snipurl.com/w6f8 My: http://del.icio.us/mhulse __ 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/
