[css-d] Div Not Expanding
I am using a variation of Sliding Doors to create a frame for my content. The page I am working on is at http://www.moonlightportraits.com/portfolio/main.php?g2_itemId=11 It is driven by Gallery2 php gallery script. Any ideas why the frame is not expanding to fit the content? Everthing (besides menu) should be contained in a container div called rounded. __ 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] Background image rollover cutting off image
Thank you very much to Brian Hazelton and Philippe Wittenbergh for their extremely valuable suggestions and practical help. It now works! Communities like this make the difference between persevering and giving up for people who are new to CSS like me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sprites and positioning links
Hi again, the heights are different between the default and the hover. I recreated the .gif, this time using the PS duplicate command to get an exact copy of the image. I then uploaded both images, the original and the over state .gif, to this online sprite generator: http://www.csssprites.com/ Unfortunately, I am still having the same problem positioning the lib link. I'll keep trying a repost if I find a solution ... Anthony __ 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] Flowing block elements around floated elements
On Thu, Apr 30, 2009 at 12:07:50PM +, Bobby Jack wrote:
Hmm ... that markup and CSS should not behave in the way you describe,
and doesn't for me (at least, the way I've recreated what I think
you're describing). Can you post an example? Does this happen for you
in all browsers?
On closer inspection, the markup turned out to be a bit more complex
than I'd originally expected. The specific use case is a user avatar
and the rendering of a [quote] block by the drupal BBCode module.
The relevant section of the HTML is:
--- cut here ---
div class=picture
div class=picture
a href=/users/dave-sherohman title=View user profile.
img
src=http://www.gravatar.com/avatar/4459bb44e0db5b57cc5e358a71519679?d=identiconamp;s=85amp;r=R;
alt=Dave Sherohman#039;s picture title=Dave Sherohman#039;s picture /
/a
/div
/div
span class=submittedSubmitted by a href=/users/dave-sherohman
title=View user profile.Dave Sherohman/a on April 29, 2009 - 22:10/span
div class=content
p
div class=bb-quote
bUnknown wrote:/b
blockquote class=bb-quote-body(quoted text)/blockquote
/div
/p
--- cut here ---
(HTML reformatted manually to make the structure more clear. I have no
idea why it has two nested div.pictures; I suppose that could be a bug
in the gravatar integration module, but it seems harmless in any case.)
The associated CSS for div.picture and div.bb-quote.* is:
--- cut here ---
.front .picture {
margin-top:-0.75em;
}
.picture {
float:right;
}
.bb-quote {
padding:0.25em 1em;
}
.bb-quote b {
background-color:#66;
color:white;
display:block;
padding:0 0.25em;
}
.bb-quote blockquote {
background-color:#EFEFEF;
border:1px solid #88;
padding:0 0.25em;
}
--- cut here ---
The link to see it live (for the moment, at least) is
http://sherohman.org/temporal-perspective
So far, I've only looked at this in Firefox 3.0.10 and not verified how
it behaves with other browsers, on the assumption that, if Firefox
doesn't get it right, nothing else will, either.
--
Dave Sherohman
__
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] Flowing block elements around floated elements
On Fri, May 01, 2009 at 08:50:32PM +0900, Philippe Wittenbergh wrote:
What is wrong ? The code/style at that url behaves correctly.
Or is it that you don't want to darker background greys of the div.bb-
quote to be covered by the image ?
It looks like what was wrong was my assumptions. I assumed that, since
the greys continued all the way to the right, that a longer section of
quoted text would also do so. Putting in some additional text so that
it was long enough to wrap showed that it wrapped before hitting the
image.
in that case:
div.bb-quote {overflow:hidden; }
would probably 'fix' the issue.
Indeed it did. Thanks!
--
Dave Sherohman
__
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] Flowing block elements around floated elements
On May 1, 2009, at 8:30 PM, Dave Sherohman wrote:
On Thu, Apr 30, 2009 at 12:07:50PM +, Bobby Jack wrote:
Hmm ... that markup and CSS should not behave in the way you
describe,
and doesn't for me (at least, the way I've recreated what I think
you're describing). Can you post an example? Does this happen for you
in all browsers?
On closer inspection, the markup turned out to be a bit more complex
than I'd originally expected. The specific use case is a user avatar
and the rendering of a [quote] block by the drupal BBCode module.
The link to see it live (for the moment, at least) is
http://sherohman.org/temporal-perspective
So far, I've only looked at this in Firefox 3.0.10 and not verified
how
it behaves with other browsers, on the assumption that, if Firefox
doesn't get it right, nothing else will, either.
What is wrong ? The code/style at that url behaves correctly.
Or is it that you don't want to darker background greys of the div.bb-
quote to be covered by the image ?
in that case:
div.bb-quote {overflow:hidden; }
would probably 'fix' the issue.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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 Not Expanding
Jennifer Knowles wrote:
I am using a variation of Sliding Doors to create a frame for my
content. The page I am working on is at
http://www.moonlightportraits.com/portfolio/main.php?g2_itemId=11 It is
driven by Gallery2 php gallery script.
Any ideas why the frame is not expanding to fit the content?
Everthing (besides menu) should be contained in a container div called
rounded.
The frame does enclose everything providing you view the page in a
window 1280 or wider.
div.rounded {
min-width:1200px; -- :: add ::
}
__
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] Creating your own stylesheet for a website
I go to a website fairly regularly and their styles are horrible. It's just too painful for me to look at anymore. Is there away for me to create a Stylesheet for it and have my browser automatically override there styles? I know to many of you this might sound horrible but don't worry no designers feelings will get hurt... I'm sure that no designers were used in making the site. __ 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] Creating your own stylesheet for a website
--- On Fri, 5/1/09, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: Hi Sarah, Is there away for me to create a Stylesheet for it and have my browser automatically override there styles? Yes, but it depends on your browser. Firefox, for example, makes it very easy to do and a search for user stylesheet will probably suffice; example: http://webdesign.about.com/od/css/ht/htcssuserfirefo.htm There are also plugins available which will allow you to supply per-site user stylesheets. I know to many of you this might sound horrible It /should/ sound delightful to most of us, after all it's a key part of the 'C' in 'CSS' :) Unfortunately, no browser supports it very well (IMHO) which is a real shame. P.S. I think this might be considered dangerously close to off-topic, since this list is intended for discussion surrounding specific CSS behaviour rather than more general issues. - Bobby __ 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] Creating your own stylesheet for a website
Atkinson, Sarah wrote: I go to a website fairly regularly and their styles are horrible. It's just too painful for me to look at anymore. Is there away for me to create a Stylesheet for it and have my browser automatically override there styles? Yes, but how automatically it is activated depends on which browser you use. See: http://css-discuss.incutio.com/?page=UserStylesheets http://webdesign.about.com/od/userstylesheets/a/aa010906.htm ...for how to guidance. FWIW: I use Opera, which lets me set up 'site preferences' to automatically control any site with whatever combination of author/user stylesheets and whatnot I like. Sure comes handy - even if there happens to be a designer behind a site's own styles :-) regards Georg -- http://www.gunlaug.no __ 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] disappearing text in IE6 and IE7 ( but maybe only IE6 )
David Laakso wrote: Tried it again. I still am not able to reproduce the behavior on http://www.daploosdrechtseweg.nl in IE 6 or 7. However, I am able to reproduce the behavior on http://beta.daploosdrechtseweg.nl but only in IE/7.0-- but not IE/6.0. Wish I had a solution rather than just flaky test results to show... can anybody else reproduce this? and maybe have a clue Erik __ 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] Creating your own stylesheet for a website
Atkinson, Sarah wrote: I go to a website fairly regularly and their styles are horrible. It's just too painful for me to look at anymore. Is there away for me to create a Stylesheet for it and have my browser automatically override there styles? I know to many of you this might sound horrible but don't worry no designers feelings will get hurt... I'm sure that no designers were used in making the site. I go to lots of those. No time to create a user style sheet for each. My fast and dirty method makes the hideous and grotesque instantly readable, functional, and usable: Opera browserviewstyleuser mode. __ 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] Positioning and spacing issues... site check
Tim Snadden wrote: -- The screenshot covers some spacing issues and positioning issues within a div so the text areas are set even when the browser is resized. The site is at: http://ba-doyn.com/junk/meeks_test_2/contact.html for you all to look at. Hi Michael - Absolutely positioned elements are positioned in relation to their nearest positioned ancestor, but none of contactLeft and contactRight's ancestors are positioned so they are positioning themselves in relation to body. You could resolve the problem by giving imageArea position: relative. If you aren't clear on how absolute positioning works you could easily do this design with floats instead. Also, validating your markup is an important step. You never know whether errors are causing browsers to barf in different ways. http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fba-doyn.com%2Fjunk%2Fmeeks_test_2%2Fcontact.html Cheers, Tim Tim, Thanks for the reply. I was able to set up the blocks of text on contact.html using floats. Work fine now. I still have a few questions to all regarding this layout and IE. Go to: www.ba-doyn.com/junk/meeks_test_3 and you will see in IE the following: - that the top left navigation still is riding high compared to Firefox (PC and Mac) - the large type at the bottom seems to be different in IE and Firefox - no square bullets on the horizontal links in IE (i've tried to find a solution to this but it escapes me.) should I use images? - beneath the horizontal links, in Firefox the space is larger for the index vs. the contact pages. Thanks so much for helping me along with this. I've been cramming my head with so much lately that sometimes I'm sure the solution is right there I just can't see it. Thanks, Michael __ 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 make rounded corners box with one image?
I'm relatively new to css and for the past few weeks, I've been trying to
create a rounded corners box with one image. I've searched online but nothing
I've found so far clearly explains how to use one image to create the rounded
corners box. They all suggest to use four 'hooks' i.e. divs and use background
positioning to give each of the hooks a background position of a corner. While
I understand the concept, I'm at a loss for moving thehooks into proper
position using margins/padding.
I'd like to learn/figure out how to logically/mathematically determine how much
margin/padding to use in order to position the background image properly to
create the rounded corners effect. Currently, I've been guessing/checking.
I was able to piece together from web searches html and css for a round corners
box. The end product does create a rounded corners box but, the css used causes
issues when floating the containing div and more importantly, I don't
understand how it works/comes together.
Below is the html and css for the rounded corners box. If anyone could review
the code and help me understand how to properly (with clean and simple css) put
together a rounded corners box it would be appreciated.
Thanks.
HTML:
div class=profileBox
div class=title
h3Title/h3
/div
div class=content
pContent/p
/div
/div
CSS:
..profileBox, .profileBox .title, .profileBox .title h3, .profileBox .content {
background: #FF url(../images/rd_indigo_box.png) no-repeat 100% 100%;
}
..profileBox{
min-width: 225px;
max-width: 500px;
margin: 10px 5px;
padding: 0 10px 0 0;
}/* Bottom right */
..profileBox .title{
background-position: 100% 0;
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
max-height: 4.5em;
overflow:hidden;
} /* Top right */
..profileBox .title h3{
background-position: 0 0;
float:left;
color:#FF;
margin: 0;
padding: 8px 15px 16px;
} /* Top left */
..profileBox .content{
background-position: 0 100%;
margin: 0;
padding: 5px 5px 10px 15px;
overflow: hidden;
} /* Bottom left */
-Dan
__
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] Creating your own stylesheet for a website
On May 1, 2009, at 9:56 PM, Atkinson, Sarah wrote: I go to a website fairly regularly and their styles are horrible. It's just too painful for me to look at anymore. Is there away for me to create a Stylesheet for it and have my browser automatically override there styles? I know to many of you this might sound horrible but don't worry no designers feelings will get hurt... I'm sure that no designers were used in making the site. User stylesheet is what you're looking for. For my personal use I have a 1500 lines user stylesheet to override a number of barbarities (did I mention I hate microscopically small type ?). If your browser is Firefox, it has to be stored in yourprofile/ randomnumber/crome/userContent.css Firefox (and other Gecko based browsers) have some very handy css- extension, that allows to limit styles to one particular site (or URL): @-moz-document https://developer.mozilla.org/index.php?title=En/CSS:%40-moz-document Safari and Opera also have decent support for user stylesheet. On May 1, 2009, at 10:25 PM, Bobby Jack wrote: Unfortunately, no browser supports it very well (IMHO) which is a real shame. It is not that bad… UI is a bit lacking in general, though. OmniWeb probably has the best implementation, with its per site preference. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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 make rounded corners box with one image?
Hi Dan,
Here's a recent post I wrote on our web design blog here at University of
Alabama:
http://webtide.wordpress.com/2009/04/21/one-way-to-do-rounded-rectangles-with-css-background-images/
I don't know if it would match what you are looking for because it's more than
one image - but it's 2 instead of 4. It's pretty simple and seems to be
working fine unless I missed something in my testing.
Hope this helps.
Brian
Brian Jones
Web Communications Specialist
The University of Alabama
bjo...@ur.ua.edu
205.348.8315
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
discuss.org] On Behalf Of Dan King
Sent: Friday, May 01, 2009 12:25 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] How to make rounded corners box with one image?
I'm relatively new to css and for the past few weeks, I've been trying to
create a rounded corners box with one image. I've searched online but
nothing I've found so far clearly explains how to use one image to create
the rounded corners box. They all suggest to use four 'hooks' i.e. divs
and use background positioning to give each of the hooks a background
position of a corner. While I understand the concept, I'm at a loss for
moving thehooks into proper position using margins/padding.
I'd like to learn/figure out how to logically/mathematically determine how
much margin/padding to use in order to position the background image
properly to create the rounded corners effect. Currently, I've been
guessing/checking.
I was able to piece together from web searches html and css for a round
corners box. The end product does create a rounded corners box but, the
css used causes issues when floating the containing div and more
importantly, I don't understand how it works/comes together.
Below is the html and css for the rounded corners box. If anyone could
review the code and help me understand how to properly (with clean and
simple css) put together a rounded corners box it would be appreciated.
Thanks.
HTML:
div class=profileBox
div class=title
h3Title/h3
/div
div class=content
pContent/p
/div
/div
CSS:
..profileBox, .profileBox .title, .profileBox .title h3, .profileBox
.content {
background: #FF url(../images/rd_indigo_box.png) no-repeat 100% 100%;
}
..profileBox{
min-width: 225px;
max-width: 500px;
margin: 10px 5px;
padding: 0 10px 0 0;
}/* Bottom right */
..profileBox .title{
background-position: 100% 0;
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
max-height: 4.5em;
overflow:hidden;
} /* Top right */
..profileBox .title h3{
background-position: 0 0;
float:left;
color:#FF;
margin: 0;
padding: 8px 15px 16px;
} /* Top left */
..profileBox .content{
background-position: 0 100%;
margin: 0;
padding: 5px 5px 10px 15px;
overflow: hidden;
} /* Bottom left */
-Dan
__
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] css or javascript hacks for firefox
HI is there a css hack for ver 3 and below or something using javascript ? i need to to fix a known bug only in FF without effecting other standard complaint browsers? Thanks Ido __ 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 or javascript hacks for firefox
Ido dekkers wrote: is there a css hack for ver 3 and below or something using javascript? i need to to fix a known bug only in FF without effecting other standard complaint browsers? If you really want/need to hack Gecko versions, yes... http://www.gunlaug.no/contents/styles/target-browser.css Not recommended. BTW: which known bug? Just in case there are better options. regards Georg -- http://www.gunlaug.no __ 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] disappearing text in IE6 and IE7 ( but maybe only IE6 )
From: Erik Visser e...@erikvisser.net Tried it again. I still am not able to reproduce the behavior on http://www.daploosdrechtseweg.nl in IE 6 or 7. However, I am able to reproduce the behavior on http://beta.daploosdrechtseweg.nl but only in IE/7.0-- but not IE/6.0. can anybody else reproduce this? and maybe have a clue I can reproduce David's results in IE6, meaning I'm not seeing any disappearing text. But I don't have IE7 available at the moment. As for a clue, someone provided some suggestions earlier for possible consideration (they were links). ~holly __ 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 or javascript hacks for firefox
On May 2, 2009, at 8:17 AM, Gunlaug Sørtun wrote: is there a css hack for ver 3 and below or something using javascript? i need to to fix a known bug only in FF without effecting other standard complaint browsers? If you really want/need to hack Gecko versions, yes... http://www.gunlaug.no/contents/styles/target-browser.css Not recommended. BTW: which known bug? Just in case there are better options. Issue is this, I think: http://css-discuss.markmail.org/search/?q=input%20in%20label%20dropping%20a%20line%20in%20firefox namely bug 50630: float should be as high as previous line box https://bugzilla.mozilla.org/show_bug.cgi?id=50630 Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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/
