[css-d] Problem balancing margins and paddings
I am trying to redesign the following 3-column layout
http://lmmiller.com/biography.html to a new, simpler version with just two
columns:
http://lmmiller.com/test.php
http://lmmiller.com/assets/css/test.css
I am facing the following issues:
1. The #quotes appear to have a tiny top margin even though I am trying to
neutrialize the #content's top padding with the #quotes top margin:
#content
{
background-color: #fff;
margin-left: 200px;
border-left: 1px solid gray;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
/* max-width: 36em; */
}
#quotes {
width: 200px;
background-color: #A5B2DE;
border-top: 1px solid gray;
border-right: 0px solid gray;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
float: right;
margin-top: -1em;
margin-right: 0em;
margin-bottom: 0px;
margin-left: 10px;
text-align: right;
padding: 10px;
font-size: 90%;
}
2. If I attempt to give #content padding-right: 1em, the #quotes appears
with right margin in Firefox and shifted way to the right in IE6.
What I want to accomplish is a simple layout where the #quotes are
positioned in the top right corner of the #content in both Firefox and IE.
Any assistance would be highly appreaciated!
Thanks in advance!
Mitko
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] need help with a shifting div
I have these pages: http://www.studiolotus.com/new/homepage.html http://www.studiolotus.com/new/homepage_alt.html http://www.studiolotus.com/new/promise_css.html The footer is shifted to the right on both Firefox and IE. Any idea how to fix it? Thanks in advance! -- Mitko Gerensky-Greene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Need help getting rid of PDFs - looking for CSS-based PDF-less paper forms
Hello, I have a new challenge for those willing to help: How to provide users with the ability to create a web page that looks exactly like a paper form without using the Adobe toolkit. The main focus is on the "print preview" function (i.e., allowing users to print a record of what they submitted to the database). Has anyone done this before? I would love to avoid reinventing the wheel if possible. Any guidance and guidelines would be highly appreciated. Thanks in advance! -- Mitko Gerensky-Greene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Need help solving presentation issue in IE (Firefox works OK)
I was wondering if anyone can help me solve the following challenge: The right-side column on this page (as any other page on this site), shows at the top of the page when viewed in Firefox but at the bottom of the page when viewed in IE: http://www.lmmiller.com/biography.html The CSS is at: http://www.lmmiller.com/assets/css/lmmiller.css Thanks in advance! -- Mitko Gerensky-Greene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issues
Hello, I am having some issues with IE rendering the right column of a three column site differently from Firefox. The photo and text on the right-hand column of http://www.lmmiller.com/biography.html show on the bottom in IE while they should be on top (as Firefox properly shows). I would appreciate any hint on how to fix this. Thanks in advance, -- Mitko Gerensky-Greene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover/click and expand help needed
Thanks to all for trying to help! I got further requirements and I have a
draft version based on some code Dreamweaver spat:
http://websage.net/new/programs_menu.htm
The CSS and JS code are respectively:
http://websage.net/new/mm_css_menu.js
http://websage.net/newprograms_menu.css
The issues I have are:
- There is a gap between the flyout menu and the table; that gap is not the
same in Firefox and IE
- I need to have vertical bars between the table cells; I currently have
border on the whole table. When trying to put cell borders, they became
double with the table border.
Thanks for your help!
Mitko
On 10/18/05, Derek de Jong <[EMAIL PROTECTED]> wrote:
>
>
> Thierry Koblentz wrote:
>
> > Hi Derek,
> >
> >You could try:
> >#set_of_links a:active span {...} /* for MSIE */
> >
> >#set_of_links a span { /* instead of display:none */
> > position:absolute;
> > left:-9000px;
> >}
> >
> >Regards,
> >Thierry | www.TJKDesign.com <http://www.TJKDesign.com>
> >
> >
> >
> It worked. Initially I had used :active, but Firefox only considers that
> for the "click", so when I had switched from :active to :focus for
> Firefox, I was doing IE a disservice, because it treats :active like
> :focus; adding it back in has fixed the problem for IE, and I removed
> the IE7 javascript (from the second example, IE needs it for the first
> example's CSS2.1 selectors) to keep it as compliant/compatible as
> possible.
>
> With the :active Opera now does display the but only for the
> click; it doesn't leave it displayed with :focus. However,
> interestingly, if I highlight part of the link in Opera 8, it does keep
> the displayed, so things are improving substantially. Thanks
> Thierry.
>
> I hadn't considered, using Thierry's example, how being already inside
> an anchor tag will affect the list of links Mitko originally wanted.
> (Well, I knew that bridge eventually had to be crossed, but put it off.)
> Certainly, in IE and Firefox the page renders and passes W3C validation.
> In IE the links are clickable, but Firefox and Opera they aren't. I
> tried this:
>
> #set_of_links a {
> position: relative;
> z-index: 10;
> }
>
> #set_of_links a a {
> z-index: 100;
> }
>
> but without success; I had hoped bringing the second link "above" the
> first in the z-index would help the rendering engines. Doesn't seem to.
>
> There is still my own solution, but the CSS2.1 selectors keep it from
> being particularly cross-browser friendly. Though I don't know why Opera
> doesn't seem to like the adjacent sibling selector, or maybe something
> else. I've even tried highlighting the link (which works in example 2),
> to no avail. Any thoughts?
>
> For reference, example URLs:
> #1: <http://www.automatamedia.com/css-d/links.php>.
> #2: <http://www.automatamedia.com/css-d/links2.php>.
>
> Regards,
> Derek
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org <http://evolt.org> --
> http://www.evolt.org/help_support_evolt/
>
--
Mitko Gerensky-Greene
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover/click and expand help needed
That is great, how about adding the following functionality: The first time I click on one of the four boxes, I get the expanded hidden menu, the next time I click on the same box, its own expanded menu hides again. Hope this make sense. I do think that having the box clicked makes more sense than just hovering above it. Thanks for your help! Mitko On 10/18/05, Derek de Jong <[EMAIL PROTECTED]> wrote: > > Mitko Gerensky-Greene wrote: > > >I need help with the following: > > > >I need to have 4 boxes on my page and upon hovering AND clicking on each, > I > >need to have a list of links (I suppose, residing in a div) show up below > >the corresponding box. > > > >Could anyone point me towards some code or tutorial explaining how to > >accomplish that? Thanks in advance! > > > > > Well, I spent a few minutes playing with it. I have two renditions, one > of my own: <http://www.automatamedia.com/css-d/links.php> > And another, based on Thierry's CSS Pop Ups > (<http://www.tjkdesign.com/articles/css pop ups/1.asp>): > <http://www.automatamedia.com/css-d/links2.php> > > They use CSS2 selectors and the :focus pseudo-element, mainly because > sticking an unordered or definition list (because that's what the links > are) within an anchor tag got me in trouble with the W3C validator; by > using a CSS2 adjacent sibling selector, I was able to keep them out of > the anchor itself. Alternatively, Thierry's approach uses a "legal" span > tag inside the anchor, though I don't know if you could put a list > inside the span and still validate. I also know there are folks who get > really upset by "display:none", but if I used "visibility:hidden" the > "hidden" boxes would affect the layout according to the spec, which is > not what I wanted. > > Some (not all) caveats: > 1. IE doesn't like it at all, but the IE7 enhanced javascript handles it > just fine. Worrisomely, IE7 doesn't handle this page on its own, which > is why you'll notice the conditional says "lte IE 7" as opposed to "lt > IE 7". There's still talk of finishing the CSS 2.1 support in IE7 on > IEBlog, so here's to hoping. > > 2. Opera 8 just doesn't like it at all. It seems to be the :focus > pseudo-class, because I switched to Thierry's approach specifically > because it already worked Opera, but as soon as I switched from :hover > to :focus, it broke, which I don't understand > (http://www.opera.com/docs/specs). It should "get it," so that's another > bad sign. I understood that Opera doesn't like switching from 'display: > none'; but I tried the SuckerFish positioning (left:-999em) workaround > instead, and it still wouldn't display. There's something Opera doesn't > like, but I'm not sure what it is. Maybe somebody on the list knows the > problem, or can get it to work? > > 3. I tried to use both :focus and :hover, with the obvious problem that > focusing one and hovering another list element would overlay them. I > tried to solve this with more CSS2 selectors, but ran out of time, so I > commented them out but left the examples in. You can try to fix them, > but it's beginning to seem that with a 50% (passes in Firefox, > half-passes in IE , fails in Opera 8) success ratio without even testing > across platforms, you either have to be very committed to CSS and > compliant code or begin to consider using Javascript until CSS2 is more > commonly supported. > > I do, however, suspect many folks on the list could substantially > improve the examples above. For what it's worth, both examples above > currently validate. > > Any suggestions, comments or browser-checks would be appreciated. I'd > like to see this actually work, or maybe somebody's already done it > better? > > Regards, > -- > Derek > -- Mitko Gerensky-Greene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hover/click and expand help needed
I need help with the following: I need to have 4 boxes on my page and upon hovering AND clicking on each, I need to have a list of links (I suppose, residing in a div) show up below the corresponding box. Could anyone point me towards some code or tutorial explaining how to accomplish that? Thanks in advance! -- Mitko Gerensky-Greene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
