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] Background color won't over-ride
CSS-d,
I am trying to use Firefox's userContent.css to over ride some CSS on a
particular page.
Here is the original CSS:
input.superbigbutton {
background-color: pink;
height: 14em !important;
width: 100% !important;
}
Here is what I want to over write it with:
input.superbigbutton {
color: green;
border: green 1px solid;
background-color: #63D46D !important;
height: 2em !important;
width: 33% !important;
}
Here's the problem: everything works *except* background-color, and border.
For the background color, instead of turning a light shade of green, it
turns off the background color completely. In other words, the original
pink color is not overidden, it's apparently just broken or removed.
In the case of border, it does not apply. Doesn't matter if I use
!important or not.
All the other style changes (color, height, width) work, so I know I'm
acting on the right element.
Is there some other aspect to this that I need to consider?
Any advice would be much appreciated.
--
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/
Re: [css-d] Background color won't over-ride [SOLVED]
Philippe, Thank you for responding. -moz-appearance: none !important; Yep, that did the trick. It seems like an odd, tricky sort of thing, but it's not as if it's the first or last bizarre quirky exception on the internet... Thank you for providing the answer. -- 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/
Re: [css-d] Force no scaling on Android browser?
Rick, Thierry, David, Thank you for responding. I'm trying to start with baby steps. There has got to be a way to simply toggle the resizing on an Android device. I tried the more correct syntax on the meta tag: meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; target-densitydpi=device-dpi / ... unfortunately, no joy. I'm wondering if maybe I have some kind of conflict. Can someone look here and see where I might have gone wrong? http://karamoh.com/size_test.html -- Dave M G __ 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] Force no scaling on Android browser?
CSS-d, I asked this question on the Android developer mailing list, but it's gone ignored, quite possibly because they think it's beneath them to answer. I'm hoping someone here might have some idea of how to do this, and hopefully be more responsive. I think this within the realm of interest to this group, even though the solution might not be strictly CSS based, it is about how to get a web page to display correctly. I am developing a web page that is designed for viewing on an Android phone. The width is fixed at 320 pixels. For some reason, when I view my web page on my Android phone (HT-03A), it scales the page down, so there is all sorts of extra space on the right of the viewport. I just want the page to remain at a pixel ration of 1:1. No scaling. Just leave it as it is. A while back I got some help on this list which helped me scale my pages for iPhones. Basically just with the following meta tag: meta name=viewport content=target-densitydpi=device-dpi content= user-scalable=no content=width=device-width; initial-scale=1.0; maximum-scale=1.0; / This does make my pages appear the right size on iPhone devices. However, the Android still insists on changing the scale of the web page. How can I get Android to not scale my web page? I want one pixel to be one pixel, and leave it at that. Thank you for any advice. -- Dave M G __ 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] CSS for Android and iPhone browsers - page width problem
CSS-d,
I am making a web site that I aspire to look the same on Android and
iPhone browsers.
I want to specify the width of the web page to be 320 pixels, so that it
is fixed and constant. 320 pixels is the width of iPhone screens, and,
as far as I know, most if not all Android devices.
However, when I view my web page in either an Android or iPhone device,
there is tons of extra unneeded space on the page.
In the case of the Android, the scale of the page is fine, but there is
a horizontal scroll bar that does not need to be there. You can touch
your finger down and scroll to the right to see lots of empty space.
In the case of the iPhone, it attempts to scale the whole page down, so
that the content, which is 320 pixels wide, appears as this tiny little
thing, and one has to zoom in to see it at the right size.
I have attempted to set the body tag to have a style of
{width:320px;}. I've also tried specifying the content within divs that
also have fixed widths of 320 pixels.
There must be something I'm not seeing, and I have not found anything on
the web to suggest widths should behave differently on iPhones and Androids.
If you have an iPhone or Android, you can see what I'm talking about
here. I've made the extraneous space a darker grey than the 320 pixel
wide content area to emphasize the problem.
That the content does not fill the space vertically is not an issue. But
what is up with the horizontal space?
http://karamoh.com/
How can I create a web page that is of fixed size on Android and/or
iPhone, with no scaling or extra space?
Thank you for any advice.
--
Dave M G
__
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 for Android and iPhone browsers - page width problem [SOLVED]
CSS-d, A person responded off list with the solution. If one adds the following code at the top of the HTML, the pages conform to the size that I hoped for: meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; / Thanks to everyone who responded. -- Dave M G __ 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] Dancing buttons - focus problem [SOLVED]
David,
Thank you for responding.
:focus, a:hover, a:active, :focus::-moz-focus-inner {
border: 1px solid transparent;
}
That keeps the buttons in the right place.
So, if I understand it, instead of making the border go away, we've
added a 1 px transparent border so that when the focus takes effect, any
focus outline will take up the same space as the border, and not make
any perceptible shifting effect.
It's a workable solution, though I must admit it bothers me to not have
an explanation of exactly why the shifting effect was taking place.
That's probably just because I'm a control freak.
Thanks to everyone who responded and offered advice and solutions.
--
Dave M G
__
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 Please code and Explorer support
CSS-d, I got some code from the CSS3 Please web site: http://css3please.com/ For the box-shadow effect, it indicates that it can be used in IE 6, 7, and 8. However, when I look at it with my windows machine, which has IE8, it doesn't work. The box shadow is rendered like 2 pixel wide border on the right and bottom sides. No gradient or transparency. Are the makers of CSS3 Please simply wrong about IE support for that effect, or is there some other issue I'm not getting? Any advice would be much appreciated -- Dave M G __ 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] Dancing buttons - focus problem
CSS-d, Following some advice on this list, I was able to remove the default dashed border that surrounds form fields when they get focus (testing with FireFox 3.6). Yes, I understand accessibility issues, but I intend to do my own focus effects, so first I want to clean out any defaults and get control. Right now, when a button (for example) on my web page gets focus, it shifts downward by one pixel, and I don't know why. I set up this simplified example page: http://autotelic.com/example/buttontest.html Click either button, and you'll see the shifting effect (on FireFox 3.6, not sure about other browsers). Can anyone explain why this shifting effect is happening and how I can get the buttons to sit still? Any advice would be much appreciated. -- Dave M G __ 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] Die focus, die!
CSS-d,
I usually use this code to reset focus at the top of my CSS code:
:focus {
outline: 0;
}
But for some reason, on a new page I'm working on which uses Javascript
to manage some buttons, all the buttons are getting dashed line borders
when they take focus (in FireFox 3.6).
Someone suggested to me that I try this:
:focus {
outline: none;
}
But that hasn't helped.
Is there something particular about Javascript that requires special
focus handling?
Here is an example of the HTML code for the button:
input type=button
id=minus15
onclick=minus15ButtonClicked('minus15')
style=background-image:
url('images/button_minus_15_green.png');width:53px;height:53px;border:0;
value= /
Two notes: I am well aware of the accessibility issues, but I have a
reason I need to remove the focus. Also, some of the CSS is specified
inline because of how the content management system works. Ordinarily I
do all my CSS in one external document.
Anyway, any advice on what I need to look for to ensure complete removal
of any focus borders would be much appreciated.
--
Dave M G
__
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] Die focus, die!
Philippe,
Thank you for responding.
input[type=button]:focus::-moz-focus-inner {
outline: none;
border: transparent;
}
This is very close to working. It does remove the undesired borders.
But, when I actually click a button, while it has focus, it shifts
downward by one pixel, pushing the rest of the styling around.
I tried setting the border to none, and to 0, and they all work for
making the border invisible, but I keep getting this shifting behaviour
on focus.
Any idea why this shifting behaviour is happening? it seems like there
is still a one pixel border being created on focus, even though it is
invisible.
PS - in the future, please start a new thread instead of changing the topic
of an existing thread. Thank you.
That's strange. I was certain I began a new thread. I didn't reply to
any other.
In any case, sorry about that. I wouldn't ordinarily do that.
--
Dave M G
__
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] IETester vs. Real IE6: discrepancy
Peter Abramowicz wrote:
Why don't you use conditional comments for IE6 and leave italics for
all the other browsers.
Agree, but a simple old-IE hack in the stylesheet will IMO be better...
.italic {font-style: italic; font-weight: normal;}
* html .italic {font-style:normal; font-weight:bold;}
Mind the order.
regards
Georg
__
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] divs dropping
e...@copywritecolombia.com wrote: Yes if you turn off the css then and just have the simple html as long as you read it then that is correctly formatted? My question is if there any way I can make this html better? We usually don't deal with HTML as such here on css-d. We focus on CSS styles / CSS styled HTML. OTOH: we don't mind having a look at your HTML if you want it arranged in a certain way in order to be able to style it in a certain way. First you have to explain what you mean by make this html better. As it is: without styles it gets presented in a linearized way - pretty much the same as looking at the source code but without the HTML tags. Nothing you can do about that. You can however change the order of elements and sections in the HTML source code, and try to re-style it so it gets presented in a way you find more acceptable both with and without styles. So, tell us exactly what you mean, and want, and we can at least _try_ to help - if at all possible. regards Georg __ 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] IETester vs. Real IE6: discrepancy
Brian M. Curran wrote: I tested my page http://www.draftingservices.com/building_survey.html in IETester and it showed my right column pushed down, as if I had an issue with my column widths. Noticed that IE6, IETester and standalone dropped the right column when set to _normal_ or _larger_ font size, but lined it up correctly at _smaller_ font size. Might be a good idea to check for the IE6' auto-expansion bug, and maybe pull in, or at least zero out, the floats' backside margins - right side on #content and left side on #sideBar, to minimize the chance of that old IE bug causing float-drop. Those backside margins do no good in any browser anyway. regards Georg __ 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] IETester vs. Real IE6: discrepancy
Brian M. Curran wrote: Thank you. However, could you explain a bit more because I Googled auto-expansion bug and didn't find much, and my margins are set to: margin:0; . This is as good an explanation as any for that bug in IE6 and older... http://www.positioniseverything.net/explorer/expandingboxbug.html ...and although I didn't really check _why_ IE expands the box in your case, the italic bug is probably the cause... http://www.positioniseverything.net/explorer/italicbug-ie.html ...since there is at least one line in your page that ends in italic text. regards Georg __ 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] Fixed three-column with padding: newbie question
Doug Niven wrote: However, I cannot get the middle cell to display 240px wide: http://people.ucsc.edu/~class1/ Subtract the side-padding from the float-width - both side-floats. width: 230px + padding-right: 10px equals float-width = 240px. That will leave 240px between the floats. regards Georg __ 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] Div that fixed vertically but floated right
CSS-d, I am trying to create a DIV that floats to the right of some content, but will stay fixed vertically even when the page is scrolled up or down. I found an example of what I mean here: http://www.mininova.org/ The advertisements on the right move up and down as you scroll, keeping them on the page. The method used on this page seems to be accomplished with iFrames, which, I have to admit, I know almost nothing about. I thought this could be accomplished with pure CSS, by having a position:fixed declaration in combination with float:right. However, it is not that easy. Turns out that position:fixed over rides everything so that the float right becomes moot. I tried absolutely positioning my DIV on the right, but there are drawbacks. I've set some min-width declarations on the content, but a position:fixed DIV ignores those and will overlap the content. The short story is that I'm trying to get a DIV to behave fixed vertically, and behave right floated horizontally. If this is not possible with pure CSS, I am willing to implement Javascript. Also, I am not concerned at all about IE6 compatibility. So solutions that depend on modern compliant browsers are fine. Naturally, I have tried looking this up on Google, but I can't seem to find exactly what I'm looking for. If I wanted to float the DIV on the left side, it would be a snap. Absolute positioning would be fine. And the Javascript options I've seen so far tend to solve slightly different problems, and I don't have enough JavaScript ability to modify them. Any suggestions would be greatly appreciated. -- Dave M G __ 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] Div that fixed vertically but floated right
Bobby, Thanks for replying. ...you should be able to include it in a relatively positioned wrapper... position it absolutely, and create enough right margin on the wrapper to accommodate it. If I understand your suggestion, then what this results in is the DIV inside the wrapper does position itself correctly in horizontal terms relative to the width of the browser window. But it does not move up and down when the page is scrolled. One can't have position:fixed and position:absolute on the same DIV, so unfortunately this does not get the effect I am after. -- Dave M G __ 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] Div that fixed vertically but floated right
Dave M G wrote: I am trying to create a DIV that floats to the right of some content, but will stay fixed vertically even when the page is scrolled up or down. Is it the behavior of the right float on this page you want... http://www.gunlaug.no/main-en.html ...? If so, that's a 'right-float' pushed to where I wanted it by margins from inside a 'fixed positioned' container at the top of the window. Regular HTML and CSS for good browsers, and an added expression for IE6 and older. This OTOH... http://www.mininova.org/ ...is Javascript at play. regards Georg __ 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] Div that fixed vertically but floated right [SOLVED]
Troy, David, Bobby, Georg, Thank you all for responding. I started out trying to emulate Georg's solution, and I think I ended up doing things a little different. You can see the result here: http://autotelic.com/avatar_-_the_metacontextual_edition Please let me know if it's doing something unexpectedly crazy. As far as I can tell, the Google ads on the side slides down as one scrolls down. It keeps an 80 pixel buffer from the top of the viewport, which isn't quite perfect, but I don't think I can change that behaviour without Javascript. I might look into that later, but for now other work beckons. So I'm calling this solved for now, since the premise of my original question has been answered sufficiently that I understand the issues involved. Thanks to everyone who offered suggestions. -- Dave M G __ 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] Relative paths for images not working
Karl Bedingfield wrote:
Having a little problem with image paths.
[...]
My folder structure is: library folder holds css folder and images
folder.
Since css folder and image folder are in same folder, try the short and
direct...
.header h2 a {
background: url(images/linkArrow.gif) right no-repeat;
}
regards
Georg
__
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] 4 part question about lining up 'boxes' of information
Lisa Frost wrote: The page in question is here: http://www.diabetesflight50.org/test/xhtml/supporters.html I don't want to be emailing you all for every little thing that stumps me. Why not? That's what CSS-D is for. :-) Floats are not well suited for that kind of line-up. Resize text and even what you have will start looking weird - before becoming unreadable as content overflows the fixed-size boxes. Your case is a perfect job for *CSS Table* ... http://www.w3.org/TR/CSS21/tables.html Example: http://www.gunlaug.no/tos/moa_11g.html ...but IE7 and older won't play ball. They don't support CSS Table and need a lot of proprietary crap in order to render a look-alike... http://www.gunlaug.no/contents/wd_additions_22.html You have other variants, with varying degree of loop-jumping for cross-browser compatibility, on Bruno's site... http://www.brunildo.org/test/ ...look under Centering, Shrink wrapping, Images. Unless you got lots of time to check and fix up things across browser-land, I'll suggest you use a good old HTML Table for line-up of supporters on that page... http://www.w3.org/TR/html401/struct/tables.html Your content will be presented perfectly well in a linearized table, it works in all browsers, and I personally wouldn't bother with anything but an HTML Table for that sort of content in _that_ context. Read up on how to style a table to appear as you want. regards Georg __ 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] Opera 10 and percentage min-height
Ingo Chao wrote: here is the testcase with the :root:overflow fix http://satzansatz.de/op/minheightrootoverflow.html Great! I arrived late on this thread, and it is good the see a fix has been found for that irritating bug. regards Georg __ 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] Opera 10 and percentage min-height
Alan Gresley wrote:
What bug are you talking about. There were two bugs.
I'm only interested in the following...
1. min-height bug with Opera 10.00 as demonstrated by Ingo and fixed
with :root { overflow: auto; }.
...and the fact that it appears to be fixed in upcoming Opera versions.
Have a nice year, all.
regards
Georg
__
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] :: makeready ::
David Laakso wrote: I'd appreciate your comments and suggestions on this site. http://chelseacreekstudio.com/ Question: do you mean STRONG or *BOLD* when you code... pstrongBelow are/strong thumbnail images.. ...? (You know what I mean ;-) ) Also, IMO the horizontal line should be above that particular sentence, to make it perfectly clear what it points at. The rest pretty much gets an all clear from Molly 't.c.', and me. :-) regards Georg __ 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] Table-like design with numbered rows
Magnus Fahlström wrote: I don't know how to achieve this without using a table: http://www.magstorm.se/table.htm A table-like design with four columns, with every row numbered, wrapped in a float:left div. For content that fits the tabular data definition, use HTML tables. Your example seems to fit that description since you have a specific order requirement. For table look-alike designs, CSS tables may come handy. Example of CSS table... http://www.gunlaug.no/tos/moa_11g.html regards Georg __ 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] Rounded Corners
Chick Newman wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. Still rely on shaped corners in all browsers, with javascript or editor generated source-code... http://www.gunlaug.no/tos/wd_demo_shapes_03.html ...with or without images. Pure CSS solutions will have to wait till all major browsers have caught up. regards Georg __ 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] aligning elements
Lisa Frost wrote:
How do I go about vertically aligning the name of the villa in my
header div with the menu.
Page is here: http://www.villaphuket.com/dev/
Better to do it backwards :-)
Style the ul to...
#header ul {
margin : 15px 0 6px 0;
padding: 0;
float: right;
}
...and see if that's close enough for comfort. Modify the top margin if
you want the menu higher or lower.
regards
Georg
__
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] FireFox/CSS Question
tedd wrote: ... Please review the following using FireFox: http://php1.net/a-menus/simple-drop-down/ Can't see any problems in Firefox 3.0 / 3.5 on windows or Linux. Appears and works the same as in other browsers. regards Georg __ 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] conditional css for Opera?
Angela French wrote: I have some foreign language text on my page (Cambodian) which I have rendered in html. Opera, IE, and FF all render the text in different sizes. I have tried em, pt, px, %. I can do a conditional style sheet to target IE, but I don't have a way to target Opera. Can anyone tell me what the issue is with Opera and how I might solve this? Thank you. A live example of your problem would help us figure out what's causing your problem. Without such an example we'll have to guess, and can only provide you with general information. 1: there is no really reliable way to target Opera. The other browsers OTOH, can be hacked/targeted quite reliable - for the time being at least. 2: Opera has 'minimum font size' set by default - the value varies slightly with what OS it's on, and if you run into that setting then there's nothing you can do from your end. regards Georg __ 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] why does Firefox add padding?
r...@catjuggling.com wrote: I have tried this page in Chrome, Safari, IE6, and Firefox. In the first three browsers I get the result I expect, but Firefox is doing its own thing. http://www.mcmullincreative.com/crows/ I guess you want it to appear like this... http://www.gunlaug.no/tos/alien/russ/test_1112.htm ...which means you'll have to modify your styles as Philippe has suggested, and do a bit of cross-browser and accessibility styling while you're at it. Stylesheet: http://www.gunlaug.no/tos/alien/russ/test_1112_files/mockup00.css See all styles for .content-item and .sidebar-item, and the children of these elements. There's more going on there... regards Georg __ 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] Vertical padding weirdness
Benct Philip Jonsson wrote: Will setting any small amount of padding on the innermost containing box do the trick, like 1px or even 0px as opposed to not declaring any padding at all? Has to result in a real vertical padding - minimum 1px - to work reliable, so 0px, or a value so small that it results in zero padding when various browsers calculate it, won't work. regards Georg __ 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] What defines a ture holy grail layout?
Jay Tanna wrote: So is Lassko our resident expert on all things CSS here? Mmmm, *Laakso* is _good_ - especially at tearing our dream-designs apart. I quite often let him have a go at mine ;-) It is useful to know so that we can fire quick questions towards him to his direct email. Usually isn't seen as nice to bypass the list entirely early on, unless the subject is off topic (not really CSS related) and/or you already have a dialog going with a person. So many proficient people (and other 8-) creatures) on this list that may have something to add, or subtract, if given a chance. regards Molly 'the cat' (one of those other creatures :-) ) __ 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] Vertical padding weirdness
Benct Philip Jonsson wrote: So that's the margins of the h1 and the p interfering? Outside the boxes of the divs which contain them? I *really* don't understand how margins are calculated! You're encountering collapsing margins... http://www.w3.org/TR/CSS21/box.html#collapsing-margins ...and in your case it's easier to think about them as escaping vertical margins. The vertical margins on elements do indeed escape containers, but will stop escaping inside the first containing-box that has vertical paddings set on it - one of the W3C-standardized contain vertical margins solutions available to us. Which contain vertical margins solution that works best will always depend on the actual case, but vertical paddings on the innermost containing-box will always do the job. Keep the above W3C link handy, study what it says, but don't worry too much about not understanding exactly how collapsing margins works in its minutest details. Those who write standards and build browsers have had their fair share of failures in writing and programming in and out around those collapsing margins over the years, and you may still run into some unclear and inconsistent cases in both camps. regards Georg __ 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] Background-color Modifying Element Sizes?
Hugh Guiney wrote: http://www.nospoon.tv/test/bgcolor.html. I have tried this in Firefox 3.5.3 and Chrome 3.0.195.27 on Windows XP and the result is the same. Oddly enough, IE7 renders them exactly the opposite. So, barring that, how do I get the first example to render the same as the second in 2.1 without using the same code? You can try using two decimals for those em values, but because browsers have different tip-over points/values when calculating ems into pixels for rendering on screens you'll have a hard time finding values they'll all agree on at different font sizes. The safest is to stick to your first example only, but declare the paddings and border-width in px on both states. All browsers will agree on that, no matter which other border styles they pick up or not. regards Georg __ 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] Nav element is dropped in IE
Wade Smart wrote:
My friend called about her web site having an issue.
She said a button has dropped.
http://www.bartlesvillehomefinder.net/
Zero out default margins and paddings on the ul...
ul {padding: 0; margin: 0;}
regards
Georg
__
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] corresponding paragraphs
bruce.som...@web.de wrote: On the page at http://www.maireadnesbitt.com/press/press8a.html there is an article in French with a translation. It was a simple matter to place the two texts side by side and at the same time, assure that corresponding paragraphs begin on the same line, by using tables. Is there a standard technique for that using CSS? Yes, float paragraphs left at under 50% width, and declare 'clear: both' on the first - leftmost and original - paragraph for each new line. regards Georg __ 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] How to eliminate drop down menu arrow
CSS-d, After much web surfing, it seems that this is an issue that comes up a lot, but there doesn't seem to be a wealth of solutions. On a select element in an HTML page, when it is set to show one option so that it becomes a drop down menu, there is always a down arrow on the right hand side. The shape and look of that down arrow is controlled by the browser. I am building a web interface that needs to match a separate application interface, and this down arrow is the last holdout. From what I can tell, there is no CSS way to directly control the look or feel of the down arrow. I would like to be wrong about that, so if I am, please tell me. Otherwise, the only way around this is to do something like hide the down arrow under some kind of div or img, or use JavaScript. I think the downside with trying to hide the down arrow under a div or img is that browsers might render the arrow differently, and perhaps it might try and peek out from the sides if I don't get the sizing right. I've already tried some JavaScript variants on drop downs, and found that when people say drop down in Javascript, they mean the simulation of a menu interface, common to applications. The problem with this is that the top level option doesn't change to match the user selection, it remains constant. I need the functionality of a standard HTML drop down menu, I just need to eliminate that down arrow on the right hand side. I'm willing to use any amount of div-hacking to achieve my effect. No trick too dirty. Does anyone have any suggestions? Any advice would be much appreciated. Thanks. -- Dave M G __ 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] How to eliminate drop down menu arrow [SOLVED]
David, Thank you for replying. If a scripted solution is acceptable, perhaps this will help - http://v2.easy-designs.net/articles/replaceSelect/ http://v2.easy-designs.net/articles/replaceSelect2/ Yes, that is exactly the kind of thing I was looking for! Thank you for directing me to the right place. -- Dave M G __ 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] Not possible to lay transparent PNG on top of form element?
CSS-d, On the following page I have two elements, a select form element, and a PNG with transparency. http://karamoh.com/thumbwheel.html I am trying to get the PNG to overlay on top of the select element, in order to create an effect that looks like the example image below the line. I have tried putting the PNG in a DIV, or just adding a style to the img tag, and using negative margins to overlay it from above and below. I have also tried setting z-index. No matter what I do, though, it seems that the SELECT option always comes out on top. (I've ensured the HTML and CSS validate.) Is this possible with CSS? Thank you for any advice. -- Dave M G __ 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] Not possible to lay transparent PNG on top of form element? [SOLVED]
Tim, Thank you for responding. I managed to create the effect you were going for (and it's nifty)... Thanks for your code! That does get a step closer, though, as you say, it interferes with the accessibility of the select box. As you can tell, I'm trying to use the shading from the PNG for a 3D effect to make it look like the options are printed on a kind of roller. I'm not quite sure how to get this to work as I want it. I'm thinking of applying some Javascript. The hope is to get it to rotate in specific units so that the the selected option is always vertically centred. In any case, the question I asked in this thread can be considered solved, so thanks again for helping me progress forward. -- Dave M G __ 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] Changing the colours, background of scroll bars on select elements
CSS-d, I know that one can apply style to the scroll bar of the viewport window with scrollbar-base-color, scrollbar-face-color, and so on. Is not possible in any way to apply style to the scrollbar of the select element in a form? -- Dave M G __ 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] verify conditional statement placement
I just want to verify that the placement of the IE conditional statements are correct or does the /style need to be placed after the last ![endif]--? head title3 Topic Layout with Large Header/title meta http-equiv=Content-Type content=text/html; charset=utf-8 style type=text/css media=all !-- @import url(styleseleven.css); -- /style !--[if lte IE 6] link rel=stylesheet href=tmpelevenIE6.css type=text/css ![endif]-- !--[if IE 7] link rel=stylesheet href=tmpelevenIE7.css type=text/css ![endif]-- /head __ 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] How to display a line BELOW the div?
Thanks David :) But both the image and the first paragraph have be inside the box1 div :( div id=box1 img src=tn_ScreenShot003.jpg alt= width=160 height=182 / /div pVestibulum egestas quam in nulla pretium blandit. In ac urna purus, tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus molestie./p!--/close p-- !--/close #box1-- On Tue, May 26, 2009 at 12:05 PM, David Laakso da...@chelseacreekstudio.com wrote: Anna G wrote: The only problem is that the image has to stay INSIDE the box1. This is due to the CMS we are using :( Is there any way to get the box2 to display below the image, by keeping the image inside box1? Ana All of this is about as clear as mud. Or it may be that I am thick as stone. Is this what you mean??? http://chelseacreekstudio.com/ca/cssd/ana.html __ 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] How to display a line BELOW the div?
Thank you David and Mark. The only problem is that the image has to stay INSIDE the box1. This is due to the CMS we are using :( Is there any way to get the box2 to display below the image, by keeping the image inside box1? Ana On Tue, May 26, 2009 at 6:47 AM, Mark Henderson morg...@ispnz.co.nz wrote: David Laakso wrote: Please see: http://chelseacreekstudio.com/ca/cssd/ana.html Checked in IE 6/7/and 8. And in Opera, Safari, and Firefox. Nice David. That's very similar to a demo done for Karl a few days ago[1] (using slightly different code) Once again proving the point that even in the wacky world of CSS there is always more than one way to skin a cat! Anna, both our examples will cause the paragraph (I used a div called .no-wrap since I had to accommodate a heading as well) to stay indented all the way down past the image if there's enough content. Is that the desired effect? Or do you want the first paragraph to wrap if its length is greater than that of the image? I re-read my earlier response which may have been a little harsh, so my apologies if I appeared rude, as that was not my intent. HTH Mark [1] http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html __ 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/
[css-d] What CSS is behind the List Item (LI) in an Unordered List (UL)
What CSS is behind the List Item (LI) in an Unordered List (UL) that
makes the bullet hang out AND makes the text just after the bullet
line up with the text below it?
What I'm playing with right now is
div.parent {
margin-left: 20px;
}
div.parentdiv {
padding-left: 1em;
text-indent: -1em;
}
div.parentdiv::before {
content: \00BB\0009;
/* 00BB is unicode for the symbol, and 9 is the tab
char */
}
But is the tab always going to be the same distance? I think this
needs improvement.
I found on another forum a technique that uses floats to do it. But
this code is very bulky. But maybe this is the best way? Can anyone
shed some light on it
#hangtext {padding-left: 2em;}
#hangtext p {position: relative;}
#hangtext p span {
display: block;
position: absolute;
left: -2em;
}
div id=hangtext
pspan1:/spanblah, blah, blah/p
pspan2:/spanblah, blah, blah and more blah blah blah and even more
blah blah blah and yet more blah blah blah to make the
paragraph wrap../p
ul
lithen you can use lists inside it/li
liif you want to/li
/ul
pspan3:/span as long as the text remains inside the hangtext div/p
/div
!-- code above from: http://www.webmasterworld.com/forum83/1764.htm --
__
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] Float not all the way to the right in FF3/Safari 3.1.2
Hi, all --
I did check the last few months of list archives and didn't see this
addressed; my apologies if it has been and I missed it.
div#siteTools (site map, contact, etc) should appear right-aligned under
the nav on each page. div#crumbs (the breadcrumbs, which display on pretty
much every page but the homepage) should appear left-aligned on that same
line.
This works in FF2 and IE6/7 (and IIRC, tested fine in FF1.5 and Safari/Mac
in mid-2007). In FF3.0.1 and Safari 3.1.2 (Win/Mac in both cases), the
site tools only move as far to the right as they're pushed by content to
the left of it.
Examples
w/o breadcrumbs: http://www.co-opinsurance.com
with breadcrumbs: http://www.co-opinsurance.com/u/index.html
Relevant CSS:
/* container for secondary and tertiary nav and breadcrumbs + tools */
div#nav { width: 750px; float: left; clear: both; color: #000;
background-color: #fff; }
div#crumbs { float: left; background-color: #fff; margin: 3px 0 0;
padding: 1px; border: 1px solid #eec; }
div#siteTools { float: right; /* height: 35px; */ margin: 5px 0 2px;
padding: 0px; font-family: Arial, sans-serif; }
#siteTools ul { margin: 0; padding: 0 0; }
#siteTools li { display: inline; padding: 2px 0 0 14px; }
/* end nav div */
I discovered the FF issue on Friday and thought it might be a browser
issue, but having found the same behavior in Safari today, now I wonder
whether there's an error in the CSS. Either way, I'd be grateful for any
advice you can offer to address this problem.
Thanks,
Tina
__
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] Resize text based on container?
CSS-d, I have a div tag that shows the name of a logged in user. The name can vary from 6 to 16 characters. With the design I've currently got, most names fit in. But I've realized that if a name is too big, it runs past the edges of the div. Is there a way to make the size of the text be constrained so that if it's too big for the div, that it will be shrunk or squeezed to fit? -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Flowing text from one column to another
CSS-d, I've looked on the web for help with what I am trying to accomplish, but all references that I've found to multi-column layouts seem to assume that each column has different content. Perhaps I'm just not using the right search terms. I have a feeling this is either totally obvious beginner's stuff, or entirely impossible. I have a bunch of text that I have contained inside a div. What I want to do is have the text break into two different columns. Ideally, the height of the columns, and the containing div would end up as 50% of the combined height of the two columns. So, for example, if my text were simply the numbers 1 through 10, each in it's own p tag, it would end up looking something like this in the final layout: ---div begins--- 16 27 38 49 510 ---div ends--- Is that even possible? Thank you for any advice. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Flowing text from one column to another [SOLVED]
Rafael, Gunlaug, Thank you for replying. By following the A List Apart link that Gunlaug provided, I also found this article which is a little more what I was talking about: http://www.alistapart.com/articles/css3multicolumn Apparently the key term I needed was multi-column as opposed to saying 2 column or 3 columns. Google can be friend or foe, depending on which words one uses. Anyway, I see from your advice and from the explanatory web pages that what I want isn't really available yet. Kind of suspected that might be the case. I'm not really up for fiddling with JavaScript or anything to get this done. I'll just live with making a different layout for now. Thanks for your help! -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Lines clipping in Explorer, and width issue [SOLVED]
Gunlaug,
Thank you for following up with more information.
Try this modification:
#main-menu li {
width: 34%;
margin-left: -1%;
position: relative;
left: 1%;
}
That's some tricky CSS there. It looks good in FireFox, IE on Windows
handles it pretty well too. Safari leaves a little extra space on the
far right side, but as you suggest, that can be made acceptably
unnoticable with a background colour on the ul tag.
Thank you so much for the extra effort in helping me out!
--
Dave M G
Articlass - open source CMS
http://articlass.org
__
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] Lines clipping in Explorer, and width issue [SOLVED]
Gunlaug, Thank you for responding. Removing the position: relative; declaration from my #article DIV made the bottom border lines appear as they should. Adding the .class to the last item in the list does solve the problem of the width of the main menu. Unfortunately, the menu is generated from within a CMS, and I can't quite get that solution to be compatible with the PHP code that drives the HTML. However, even though I have to find another way to skin that cat, I can at least now see where to focus my efforts. Thank you for your help and taking the time to show me what to do by adjusting my code. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Lines clipping in Explorer, and width issue
CSS-d, I realise I didn't include a link to the actual page when I posted my question: http://aimashou.jp/home_page My questions are as follows. I hope someone can help because I really can't seem to solve these two issues on my own. If you look here, you can see how the page should look in the two Safari examples: http://www.browsercam.com/public.aspx?proj_id=411750 Please be forgiving on the style, as I'm still in the process of deciding placement and colour. In any case, in Safari (and FireFox), the page renders as I would expect. Problem one in Explorer is that the bottom line of the containing DIV is missing. I've never seen an effect like that before. There is maybe a general clipping effect happening, as I notice the links at the very top of the page are also missing their underlines. Problem two is that in XP with the screen size set to 1024x768, the rightmost item pink horizontally aligned menu gets bumped over to below the left side. This baffles me since it seems to display okay at 800x600 in the same browser and platform. Any help on these issues would be greatly appreciated. Thank you for your time and help. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Lines clipping in Explorer, and width issue
CSS-d, I have two issues in Explorer 7. If you look here, you can see how the page should look in the two Safari examples: http://www.browsercam.com/public.aspx?proj_id=411750 Please be forgiving on the style, as I'm still in the process of deciding placement and colour. In any case, in Safari (and FireFox), the page renders as I would expect. Problem one in Explorer is that the bottom line of the containing DIV is missing. I've never seen an effect like that before. There is maybe a general clipping effect happening, as I notice the links at the very top of the page are also missing their underlines. Problem two is that in XP with the screen size set to 1024x768, the rightmost item pink horizontally aligned menu gets bumped over to below the left side. This baffles me since it seems to display okay at 800x600 in the same browser and platform. Any help on these issues would be greatly appreciated. The CSS can be viewed here: http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Faimashou.jp%2Fhome_page Similarly, the HTML can be seen here: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Faimashou.jp%2Fhome_page Thank you for your time and help. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] left side not carrying down
I have the following site HYPERLINK http://www.webgirlwebdesigns.com/testing/TriBeam/index.htmlhttp://www.webg irlwebdesigns.com/testing/TriBeam/index.html The sidebar on the left doesn’t flow all the way down with the main body text. Please advise. Thanks Lisa No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.19.16/1250 - Release Date: 1/29/2008 10:20 PM __ 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] still more issues
I’m having the following issues with HYPERLINK http://www.familyfirstdocs.comwww.familyfirstdocs.com Top Navbar does not auto-align itself on browser window size changes in IE7 Unknown property behavior on line 76 in screen.css Top Navbar color changes on hover randomly fail, and do so fairly often, in both IE and FF I have looked this stuff over so much, I’m crossed eyed. If someone has some suggestions I’d love to hear them. I’m frustrated. I have tried all I can think of. Thanks Lisa No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.17.13/1214 - Release Date: 1/8/2008 1:38 PM __ 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] Div's not aligning right in IE7
Moxy, Thank you for responding. I was advised to use padding early in my CSS learning. The recommendation was to create a boundary div specifying margin:0 and padding:0 as shown in #leftMenu and then define internal margins, padding in a padding div as shown in #leftMenuPad below. That approach has served me well. I am trying to understand the principle behind what you are suggesting so that I might apply it to my situation. However, I don't quite grasp it. It seems that you are just putting in an extra div with padding inside another div without padding. How exactly does this make a difference? -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Div's not aligning right in IE7 [SOLVED]
Moxy (Tim?), Thank you for responding. I saw that Dave was struggling with his footer layout so I gave him my approach to layout design (without addressing his specific CSS) I appreciate you taking the time to give me your advice. It was helpful in getting me to rethink my approach. I've tidied up the footer area a little by removing some padding and margin specifications, and instead applying left and right properties to the text. This seems to work in IE7 and FireFox equally well. I believe I now have a working design, which I'll now attempt to tweak for efficiency. Many thanks to the list for it's ever present support. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Div's not aligning right in IE7
Gunlaug, Thank you for responding. The addition of... ...or whatever 'hasLayout' trigger you fancy that doesn't break other browsers, will fix that part. I added 'height: 100%', since 'zoom' seems to be MS proprietary, which I'd rather avoid. So that has triggered 'hasLayout' and solved the problem of the side graphics. So the only thing I'm left with to get IE7 on board is to make the text in the bottom right corner fit be where it is supposed to be. Anyone's help would be greatly appreciated. If you look at the screen captures here: http://www.browsercam.com/public.aspx?proj_id=371261 You can see that the text in the bottom right, which is in a div called '.footer-text-right', and has a 'margin:0px 50px 0px 0px;', the margin seems to be having no effect. Thank you for any advice. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] list whitespace bug issue with IE
I have a site HYPERLINK http://www.familyfirstdocs.comhttp://www.familyfirstdocs.com This site was done in Adobe Dreamweaver CS3. It validates and seems to work on my computer. I’ve tested it with Windows XP with IE7, Win XP with Firefox 2.0, WinXP with Opera 9.25, however, my client who has Windows Vista with IE7 and Windows XP with IE6 has issues. On Vista with IE 7 the menu juggles over to the left and in Win XP with IE6 they can’t seem to view the menu properly at all. I don’t have IE6 on my computer but I’ve ran the browser compatibility check in Dreamweaver CS3 and it gives me an Extra Whitespace in List Links bug issue. I’ve tried to apply the fixes it recommends and the client still has the issue. Does anyone have any suggestions? Thanks in advance Lisa No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.503 / Virus Database: 269.17.5/1190 - Release Date: 12/19/2007 7:37 PM __ 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] Div's not aligning right in IE7
CSS-d Following on my own post, I saw on the web that there might be a bug in IE7 that prevents margins from working properly. It was recommended that one could use padding instead, depending on the circumstances. I tried using padding where I was having an alignment problem, and it still displays okay in FireFox, but it does not seem to have helped IE7. So unfortunately it seems that's not the problem. In any case, the problem remains essentially this: If you look at the screen captures here: http://www.browsercam.com/public.aspx?proj_id=371261 You can see that the text in the bottom right, which is in a div called '.footer-text-right', and has a 'padding:0px 50px 0px 0px;', the margin seems to be having no effect. Any help would be greatly appreciated. -- Dave M G Articlass - open source CMS http://articlass.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Div's not aligning right in IE7
CSS Discuss, I have created a page at the following URL: http://tokyocomedy.com/tokyo_comedy_store The CSS and HTML validate. The design displays as intended in FireFox and Opera. (The design doesn't quite fit into an 800 pixel wide space, which I intend to adjust.) In Explorer version 7, on XP and Vista, however, the alignment of various div tags is askew, as can be seen here: http://www.browsercam.com/public.aspx?proj_id=371261 What is IE7 doing different? Thank you for any advice. -- Dave M G __ 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] Div's not aligning right in IE7
Gunlaug, Moxy, Thank you for responding. Moxy said: You need to add a float:right to all of your *-right divs Hmm... I tried that, but then I ended up with everything moving to the right and having huge gaps in my layout. and they should also be closed Whoops... accidentally deleted a /div when I added Google analytics javascript. That's been resolved. The HTML validates. I promise. Gunlaug said: IE7 doesn't support the 'inherit'... A quick test reveals that most alignment-failures in IE7 are fixed when actual values are used instead of 'inherit'. Well, I used a value of 100% instead of 'inherit', and that seems to have resolved a lot of the problems, particularly in the header and footer. However, two problems remain. The background graphics on the left and right side of of the main body are still a little out of alignment. And the Made with Articlass text at the bottom right corner is too far to the right. The problems are visible here: http://www.browsercam.com/public.aspx?proj_id=371261 (You may have to go to the second page to see the screen shots of the problems I am referring to.) Any advice on how to kill these last two snags would be greatly appreciated. Thank you. FWIW: I can't see the point in that IE6 warning The list moderator has made it clear to me in the past that this list is not the place for discussing opinions about this kind of thing. I'm happy to discuss it, but it'd have to be off list. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Stop
... hammertime. -- Dave M G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issues
Happy holidays everyone, I have this site… HYPERLINK http://www.familyfirstdocs.comwww.familyfirstdocs.com I have validated it and ran all the checks in DW CS3 however the clients state that when they select a link, a horizontal line across the entire page appears. Also the menu up top get’s botchy. I can’t seem to recreate it on my computer. Can someone please take a look and let me know how it’s reacting for you? Thank you in advance, Lisa No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.503 / Virus Database: 269.16.17/1178 - Release Date: 12/8/2007 11:59 AM __ 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] Rules for generating valid CSS
CSS List, I am writing some PHP script that takes some user input and outputs it again as (hopefully) properly formatted XHTML. The system doesn't give users access to every HTML tag, and some of the tags are generated automatically. But in any case, I have four rules that I have applied that seem to work so far, but I just wanted to open them up to inspection by people more versed in CSS/HTML than me to check if I haven't created the possibility of future problems. My four rules are: 1. No p tags within p tags. 2. No div, hr, h1 to h6, ul, or li tags inside p tags. 3. No p tags inside li or ul tags. 4. No empty p tags. Are those rules sensible from a validation point of view? Thank you for any advice. -- Dave M G __ 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 Eleven
On Oct 20, 2007, at 10:22 PM, Ingo Chao wrote: Elias Abunassar wrote: Found an interesting, self-appointed CSS Working Group: Hmm, I was not asked. I thought the same. Very annoy that you and George are not in it. What is the problem making CSS Thirteen? tee __ 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] :: camino-- image border issue ::
I had similar problem with Camino once . Wrap the img in a p or div does the trick. pimg class=c5 src=ca/site/images/thumbs/self.jpg alt= width=175 height=245 //p Hope this helps! tee On Oct 4, 2007, at 3:07 PM, David Laakso wrote: The Creative Director is not happy. The left border is missing around his picture (bottom of center panel). http://www.chelseacreekstudio.com/index.html Thanks, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Client side include for Internet Explorer
CSS-d, I'd like to have a different style element, and just a little HTML content, sent to Internet Explorer 6 that will not be visible to other browsers. I know that I can put special comment tags in that only Explorer will see, such as: !--[if lt IE 7]This will only show to IE6 and earlier versions.![endif]-- However, the problem with this is that the content is still downloaded by other browsers, in the source, even though it doesn't display in the browser. In the interest of trying to save some bandwidth, I'm trying to figure out if there is some kind of client side include I can put inside that comment hack so that only Explorer will download it. I've been searching on the internet, and it seems that maybe there is a possibility that maybe there is some VBScript that could accomplish this. But I can't quite get a handle on what the command might be. Lots of web sites I'm looking at complicate the issue with lots of references to Javascript and server side include options. All I want to do is include a snippet of HTML and CSS code from another file, but only from Internet Explorer. If this is not possible, it would be equally helpful if someone could confirm that as a definite fact, so that I know for sure that it's not an option I should be pursuing. Any advice would be much appreciated. Thank you. -- Dave M G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Client side include for Internet Explorer [SOLVED]
David, Rafael, First, apologies if this question was off topic. I thought it fell under the umbrella of ways of delivering different style to Internet Explorer 6, which gets discussed a lot here. But in any case, it seems that the cost in difficulty of delivering Explorer specific style and content outweigh the savings in bandwidth. Thank you for your responses. I'll just live with commenting out certain parts of the code. -- Dave M G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logo Image Disappears in IE7 (squeaking the wheel)
Bruno, Thank you for responding. I'm not sure if the following is the only reason, but surely it contributes: The inherit keyword is not supported by IE (IE7 included), so you are not getting the desired height for your #logo-left. Assign an explicit height, I added an explicit height, and made the width 100%. Unfortunately, that does not seem to have done it: http://www.browsercam.com/public.aspx?proj_id=356657 Is there another IE7 condition I need to be aware of? -- Dave M G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logo Image Disappears in IE7 (squeaking the wheel) [SOLVED]
Bruno, Thank you for responding. Maybe you ... have a caching issue? Yes, you are right. I cleaned out my cache and see that your fix is, in fact, working as hoped. Thank you for your help. It was exactly the information I needed. -- Dave M G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logo Image Disappears in IE7 (squeaking the wheel)
CSS-d, I posted a few days ago about a problem where some images set as background images in div tags were not displaying in Internet Explorer version 7. I got no response, which I'm hoping is only because I got lost in the traffic of email, and not because the solution is beyond anyone's ability to answer. So I am making another appeal for help. If there is some obvious instruction that I am missing, please feel free to tell me to RTFM, just please let me know where in the M to FR. I have searched the web for insight onto why this is happening, and can not see any clear explanation of why IE7 is treating the background different. Through the benefit of BrowserCam ( http://www.browsercam.com/public.aspx?proj_id=356657 ) I can see that my web page is working fine in all other non-Microsoft browsers. IE6 I am not worrying about. But IE7 (on the second page of the above link) is not showing the text in the title graphic. The HTML is essentially just nested div tags: div id=logo a href=/spanArticlass/span/a div id=logo-right div id=logo-left div id=main-menu ?php menu(main_menu); ? /div!-- ends main-menu -- /div!-- ends logo-left -- /div!-- ends logo-right -- /div!--ends logo -- The tag logo has a background image that repeats. The logo-left div has a background - the main title text - that doesn't repeat and is positioned on the left. And, as expected, the logo-right div has a thin background, positioned on the right. That's all that is going on, and it works in all other browsers. So what is IE7 doing differently? Thank you for any advice. -- Dave M G Articlass http://articlass.org __ 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] Logo Image Disappears
CSS-d, The following web site renders fine in FireFox: http://articlass.org However, in Internet Explorer 7, an odd thing happens. The image that represents the main title, in a sort of gold texture, simply does not display. Actually, now that I look at it closely, the image that represents the right side of the gold title bar is not displaying either. These images are the backgrounds of nested div tags, each one contained within the other. I'm pretty sure I've done this kind of thing before, so I hadn't imagined it might cause any complications. Is there something I need to know about IE7 in the way that it handles nested div tags or background images? Thank you for any advice. -- Dave M G http://www.tlug.jp/wiki/User:Dave_M_G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image disappears when not repeated [SOLVED]
David, Thank you for replying. And, yes, that syntax is incorrect. The no-repeat value may only be used for the background-repeat property, or as part of the background shorthand property. Ah, now I understand. background-image should be used to only specify an image location and nothing else, and background can be used to specify various background settings. Thank you for clearing that up for me. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Background image disappears when not repeated
CSS-d, I solved my own issue, though I don't really understand why. For some reason, this doesn't display any image at all: background-image:url(image.png); But this does display the image: background:url(image.png); Do I have the syntax incorrect in some way? Or do I misunderstand the purpose of background-image? -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Background image disappears when not repeated
CSS-d,
I have some text which is inside a span tag that has the following CSS
specifications:
.footer-text-right {
height:inherit;
float: right;
margin:0px 50px 0px 0px;
padding: 0px 0px 0px 12px;
background-image:url(footerbreak.png) no-repeat;
background-position: left;
}
The image footerbreak.png is a 1 pixel wide image that is intended to
appear as a border on the left side of the text.
If I make background-image have a setting of repeat, then the one
pixel image repeats across the length of the span, as I would expect it to.
However, with the settings above, with background-image set to
no-repeat, and background-position set to left, the background image
disappears completely.
Am I missing a necessary setting? Or perhaps I'm confused about the
nature of background images within span tags?
How do I get the background image to appear once, on the left side, of
my span?
Thank you for any advice.
--
Dave M G
CSSed
Zend Studio 5.5
Photoshop 7 (Wine)
Inkscape, GIMP, Ubuntu 7.04
__
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] Making a container of two columns stretch to contain the longer of the two
CSS-d, I have been looking around the web to try and find the right solution for my issue. Although I've seen many articles describing how to get two or three columns to match each others length, I can't quite seem to apply the information to my situation. Unfortunately I can't show a live example, but I've uploaded a screenshot and the CSS to here: Screenshot: http://autotelic.com/Screenshot.png CSS: http://autotelic.com/style.css I've added borders so that it's more clear where the boundaries of the relevant div tags are. I have a container div (green border), and inside of it is a side-menus div (blue border) and a article container div (purple border). The side-menus div is floated to the left, and the article-container div has a margin on the left side that is a little wider than the side-menu's width. I think it's a fairly standard approach to creating a two column layout, except that both columns happen to be inside a div. I don't need necessarily need either the side-menu or article-container divs to stretch to match the other. This seems to be the effect that most online instructions cater to. What I need is for the container div to stretch out to be as long as whichever of the side-menu or article-container is longest, so that its borders and background enclose both columns all the way down to the bottom. Right now, basically the container stretches to match the height of the article-container column only. So if the article-container side happens to be longer than the side-menus, all is good. But, if the side-menus column is longer, as it is in the screenshot, then its content stretches past the background of the container. No good. At first I thought my problem was the collapsing margins issue described here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins But I've added a 1 pixel padding to all sides of the relevant divs, and it still doesn't work. Then I read that when a div is floated, it falls outside of the document flow. However, what I don't get is that I have a footer below both Left and Right, that has a clear: both property in it. So it slides underneath the side-menus, and pulls down the length of the container. I thought that setting the height on all the nested divs to 100% should at least have some effect, but it doesn't. At this point I'm quite confused. Can anyone recommend a reliable way to get the divs inside my container div to reliably reach down to the footer? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Making a container of two columns stretch to contain the longer of the two [SOLVED]
Arian, Ricky, Thank you for responding. Arian Hojat wrote: 3. add overflow: hidden; Thanks for the multiple suggestions and the explanation for each. Very informative. I've decided to go with the one you've suggested above. It was pretty much a coin toss between this and the :after solution you offered, as they both seem to be on equal terms in ease of implementation and effectiveness. It's working great, and I also now have a better understanding of floats and the div tags that contain them. Much appreciated. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] overwite browser default setting on margins/paddings for Asian character?
Hi, a site I am doing that visitors may leave messages using their own languages such as Chinese and Japanese. Browsers by default giving padding-left (or margin?) for the first line of paragraph, which is fine because it's correct behaviour for these two languages, however the space given for the Japanese text is half the Chinese ones and I wonder if there is a way I can overwrite the default by declaring padding in CSS somewhere? Client wishes the space can be consistent for both. It doesn't look to me I can do so by giving the marigin/padding in the p tag thought (they are already declared). This is an authentic CSS question right? I am asking the question here because chances are, I can get reply from people who are the native of these two languages and have known a way to overwrite it. Here is the screen shot. Please ignore the lines showed in the content area. The page was taken by client from his IE 7 - somehow my code trigged hasLayout bug and is fixed now. Thanks for reading! tee __ 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] overwite browser default setting on margins/paddings for Asian character?
On Jul 20, 2007, at 6:26 PM, Tee G. Peng wrote: Here is the screen shot. Sorry, forgot the url. tee __ 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] Firefox magin bug? workaround for margin collapse doesn't work
Hi, this is the first time I stumble on margin problem in Firefox
(all gecko browsers actually), although I can re-work my markup to
make it work the way I wanted, but I really like to know what the
problem is with this issue and if there is a fix for it.
First I thought it was margin collapse bug but after some testing and
and reading on articles I found from google search, I still can't
make it works.
The codes that are in question are in the comment area
http://zhujili.com/index-new.html
ol
li class=msg_left1/li
li class=posterJohn Doe on Jul 7, 11:34 AM/li
li class=msgpcomment here/p
/li
/ol
the '1' and 'John Doe on Jul 7, 11:34 AM' should stay in one line
where the '1' is floated left. Safari, Opera and IE obey the rule
however in Firefox, the John Doe... is being pushed away exactly
51px to the right.
#comments li {margin-left:96px; /* because the gray background image
is 96px wide}
#comments li.msg_left {
background:#cc8c0b;
padding:5px;
float:left;
width:30px;
margin-left:51px; /* this one is causing the problem in Firefox but
I need this declared because I wanted the the box stay 51px away from
the left */
}
I thought it was margin collapse bug and had tried adding 'border'/
padding to elements (one at a time) that are associated to the
comment area, none of them work.
Your help is greatly appreciated!
tee
__
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] Firefox magin bug? workaround for margin collapse doesn't work
On Jul 19, 2007, at 6:15 PM, Philippe Wittenbergh wrote:
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
Philippe, thanks for the timely response. Was about to give up this
and use another way to make it work by moving the margin left to 'ol'
and than hack the paddings/margins in the li classes.
See this, almost close (still need a few tweaking to make it pixel
perfect) but not very desireable for me as I needed to add an empty
div for the bottom background image. Not a pretty sight for the last
comment box also.
http://zhujili.com/index-new2.html
somthing like this:
#comments ol {margin-left:50px;}
#comments li.msg {background:#272A2B url(images/curve.jpg) no-
repeat right bottom;
margin-left:47px;}
Another way I could make it work is structure as such
li class=posterspan class=number1spanJohn Doe on Jul 7,
11:34 AM/li
li class=msgcomment here/li
Ok, for learning's sake, which one could be more desirable as far as
CSS coding concerned?
The mozilla proprietary is a quick fixed and a good trick for me to
learn but it's a hack after all isn't that? I read posts from the
bugzilla link you provided, it's an old bug still not being fixed, so
is there good to use the hack and hoping that one day it will get
fixed?
Thanks also for the comment on the list construction not being
semantic, how embarrassing for me you will say that as I just told
someone again semantic markup goes hand in hand with css coding
again, I will ask the question but can you kindly move your chair
180% degree facing the wsg list so that you can give me your thought
and opinion?
Many thanks!
tee
__
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] Variable width of menu
Philippe, Thank you for responding. ...it breaks in Firefox 2.0.0.x, and that is a bug... b1. add a width back to the div. 7.5em seems to work fine. Sorry, but I'm a little unclear on what the expected results should be. Do you mean that applying a 7.5em width will make it a minimum of 7.5em, or that I should settle for a fixed width? I did all the changes you suggested, and in the end, the width is fixed at 7.5em. If I make changes to the menu items, such as ad a new one, new li items will get bumped below the others and the menu will expand vertically, not horizontally. So I just thought I should confirm what results I should be expecting. Thank you for your help. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Variable width of menu
Philippe, Thank you for responding. If/when you want to add an additional li, you'll have to adjust the width of the div; that is the correct behaviour given the fixed width of the div. Okay, I understand. The bottom line is that the menu can't be automatically expandable to compensate for a varying number of li items. It's a little disappointing, but I can live with it. I'm not expecting the menu to change so often that I can't cope with having to adjust the CSS at the same time. Thank you for having explained the situation to me. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Min-height, height, and viewport size
Zoe, Audra, Thank you for your responses. I now have a clearer understanding of how elements inherit height from each other. It seems that if there is a way to do this, it will involve some very clever manipulations of div tags. More than I can figure out right now, so I've opted to go with Audra's suggestion of a simple solid red coloured border for now. It will suffice until inspiration hits and I can pull off something fancier. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Variable width of menu
CSS-d, This is something that I thought was fairly simple, but I can't for the life of me determine how to do it. On the following page, I have a menu that is made up of li elements in a vertical flow. http://nihongode.jp The vertical flow of text was acheived by cheating a little. Each li is only 1em wide, forcing each character to appear below the one before. All I want to achieve is to have the menu be only as wide and high as it takes to fit the menu items. The height is working fine. I established a min-height of about 160px. Any less than that and the image of the sumo-cherub gets clipped. If there's more text in any one menu item, then the bottom border gets pushed down, with a 7px padding. But the width is nowhere near as easy. Setting a minimum width makes the menu expand across almost the entire page. Setting a fixed width doesn't have any connection to the number of menu items, so it won't expand or contract to contain them. I tried setting the width to an size based on em, hoping that would cause it to expand proportionally if the text size was adjusted up or down. But, although it does scale with the text, it doesn't do in the right proportions, causing the text to move out of alignment with the graphic. I have a feeling I've missed something similar. How can I have the yellow box of the menu match the width of the textual menu inside, as determined by the number and size of the menu items? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Z-index not rising to the top
CSS-d, I have a DIV that is floated right, and contains a graphic and a menu. The web site is here, and the menu is the one on the right hand side, being carried by a sumo-cherub: http://nihongode.jp Depending on the browser width, there is a chance it can overlap with the main logo graphic. By default, it seems to go underneath the logo. So, I set the div to have a z-index of 1000. The div that contains the logo has a z-index of 100. However, this has not made the div rise to the top. It still gets obscured by a portion of the logo if it happens to be located in a space occupied in part by the logo. Am I missing something fundamental about how Z-index works? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Z-index not rising to the top [SOLVED]
Philippe, Thank you for responding. z-index only applies to positioned elements. Doh! I remember learning that only a couple months ago. Apparently I have the memory span of a gold fish. Thank you for setting me straight again. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Min-height, height, and viewport size
Audra,
Thank you for replying.
It should be...
#whole { min-height: 100%; }
You described it correctly at first so did you mis-type perhaps?
Yes, that was a typo. Thank you for catching it.
Just to be double sure, I rechecked my CSS code and uploaded it again.
The html and body tags are set to height: 100%, and the #whole
containter is set to min-height: 100%.
But the problem as originally reported is still there.
What am I missing?
--
Dave M G
CSSed
Zend Studio 5.5
Photoshop 7 (Wine)
Inkscape, GIMP, Ubuntu 7.04
__
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 that breaks out of veritcal flow [SOLVED]
CSS-d, What I've ended up with isn't totally perfect, but it suits my needs. By placing a space before the misbehaving* characters, they are moved down to the next line. The space remains attached to the line before, so it's not a visible part of the menu text. The drawbacks to this are: 1. I'm changing the content slightly to meet the needs of design. 2. Punctuation doesn't line up right, so I've decided to simply not use punctuation (which I can get away with easier in Japanese). And almost a 3rd consideration is that the small Japanese characters don't justify entirely accurately as they would with a true vertical orientation. But they very close - close enough to pass, so while this limitation is notable, it's not going to stop me in this instance. I can get live with these limitations because the text in question is a small menu that will be largely static and will contain terse text. Thanks for the advice offered here. It helped push me towards the solution. * The characters aren't actually misbehaving, but are actually behaving very correctly within guidelines of text flow set out in the utf-8 standard. I only mean misbehaving relative to my current needs. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Text that breaks out of veritcal flow
CSS-d, On the following web site, I have a menu written in Japanese: http://nihongode.jp The text is a ul list, where each li item is constrained to a width of 1em. This forces each character to break to the next line, giving the appearance of veritcal orientation. It almost works perfectly. Most of the text obeys the constraint. However, some text items, such as punctuation and certain half size Japanese characters, break out of the vertical flow and follow a left-to-right orientation. I've included a thin red border around the text to make the problem more clear. Even if you don't read Japanese (not expecting you do, or assuming you don't), you can easily see that the three dot ellipses clearly break towards the right. Although the site validates, I've only tested it in FireFox, and it almost certainly won't work in IE6. So I've provided the following screen shot in case what I'm describing shows up differently on other people's browsers: http://nihongode.jp/Screenshot.png Does anyone know why some characters are exceptional in how they display as compared to the other characters in a case like this? And is there a way I can use CSS to more strictly impose a vertical layout on the text? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Change to fluid layout explodes in IE7 [SOLVED]
Ingo, Thank you for responding. IE has problems with float and clear on the same element [1]. Removing what turned out to be unnecessary floats and clears has solved the problem. Thanks for the solution, and the link to the explanatory web site. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Document order versus design breakpoint [SOLVED]
Sophie, Paul, Thank you for your responses and input. Starting from your suggestions, I've managed to make my site built more around relative positioning and floating than absolute positioning. Partly what enabled this was to utilize the skip-nav in places in order to hopefully keep in line with usability standards. Thanks for your time and assistance. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Change to fluid layout explodes in IE7
CSS-d, First, I'm totally psyched about the Browser Cam ( http://www.browsercam.com ) service I signed up for, at the suggestion of a couple of people on this list. Thanks for the tip! Anyways... I had a design that was working in both FireFox and IE7, but it relied on some absolute positioning and it did not gracefully handle scaling text up or down. So, I changed to another design that was more based on relative positioning and was a little more flexible. Unfortunately, it explodes on IE7. The web site in question is here: http://formever.org If you are not running IE7, you can see what I mean here (you may need to click the right arrow to get to the second set of thumbnails. Sorry - I'm kind of new to this service): http://www.browsercam.com/public.aspx?proj_id=346111 Opera also seems to have a little trouble, and there are a couple of unfinished minor details on the tabs. But I'm more concerned about the larger layout explosion in IE7 before I fiddle with details. What is it about relative positioning that doesn't work in IE7? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Document order versus design breakpoint
CSS-d, I have a div that contains the main body of content. I have a menu for navigation. For the layout, I'd like to have the menu appear as a horizontal set of links above the main content div. In the current layout, the menu has an absolute position, and is oriented to the top right of the viewport. If the viewport is shrunk to below 500 pixels, the layout breaks. I tried setting a minimum width on the body tag, but this has no influence over an item that is absolutely positioned to the right. As the page is shrunk, all relatively positioned objects stop moving, but the absolutely positioned objects will continue to place themselves in absolute terms from the viewport boundaries. Which, of course, is the expected behavior. As far as I can understand it, my only choice to make the menu obey the min-width of the body is to make it relatively positioned. But, there is a trade off. If my menu is to be relatively positioned in the layout, and appear above the content div, then it needs to be in the HTML code before the content. My understanding of good usability requirements for the flow of HTML code is that navigations menus should go below content. That way people with screen readers or non-CSS don't have to move past repetitive content after each page load. Unless there is a clever CSS trick which I am not aware of (a distinct possibility!), I have to make a choice: A layout that does not break at low widths, but does not conform to good usability standards. Or... A layout that conforms to usability standards but breaks at low widths. I'm guessing that usability ranks higher, as many web sites I see tend to break at low viewport sizes. But surely it's quite common to want a menu on the top right in the design, and near the end of the HTML. So I'm hoping that there might be some insights as to what options there may be. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Block display causes gap, red border makes gap disappear
CSS-d On the following page there is a registration form: http://formever.org/user/register I set the form input tags to be be display:block so that they would be on their own line. However, this causes a gap to appear below. I'm testing on FireFox, and it looks like this: http://formever.org/Screenshot2.png The form is inside a series of nested tags used to create the borders and corners in the design. Ultimately, the form is inside a div with an id called inside. The submit button has a 20 pixel margin set on the bottom, and for some reason the white background of the inside div does not stretch with the div itself. Nor do the borders on the left and right side. What's even more puzzling to me, is that when I applied a thin red border to examine where exactly the div boundaries are, then the white background *did* fill all the space. The borders appeared as well. http://formever.org/Screenshot.png How can that be? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] Block display causes gap, red border makes gap disappear [SOLVED]
Gunlaug, Thank you for responding. It's a more nonsensical part of the standards - 'collapsing margins'... http://www.w3.org/TR/CSS21/box.html#collapsing-margins Study the behavior well. It will take me a few more reads before I really grasp it. But in any case, your solution of adding a little padding does the trick. Thanks for the tip, and educating me as to the source of the problem. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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/
