A fresh look at it today seems to have fixed the issue. I have a single '#frame' div that occupies my entire body. Moving the min/max width into the #frame CSS element and setting 'float: left' allows the body to dynamically resize correctly (at least so far).
My theme is effectively dynamically wide single-line compact MiniHUD (credit to Martin Alleus for the original style) Here's my template.html: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/ DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <title>Growl notification</title> <meta http-equiv="content-type" content="text/html; charset=utf- 8" /> <base href="%baseurl%" /> <style type="text/css"> @import URL("default.css"); #frame { opacity: %opacity%; } </style> </head> <body><div id=frame> <img src="growlimage://%image%" id="icon" alt="icon" /> <span id=title>%title%</span> <span id=content>%text%</span> </div></body> </html> And here's my style.css: body { margin: 0; font-family: Lucida Grande; font-size: 10px; color: rgba(255, 255, 255, 1); text-shadow: 0px -1px -1px rgba(0, 0, 0, 0.8); height: 16px; } #frame { max-width: 800px; min-width: 100px; float: left; background-color: rgba(50, 50, 50, 1); border: 1px solid rgba(200, 200, 200, 0.3); -webkit-border-radius: 4px; padding: 1px 4px 1px 4px; white-space: nowrap; overflow: hidden; line-height: 16px; height: 16px; } #title { font-weight: bold; } #icon { float: left; height: 100%; max-width: 32px; max-height: 32px; margin-right: 5px; } If you want a preview image or a copy of the 'growlStyle' file, let me know. On Nov 20, 7:12 pm, [email protected] wrote: > at a guess, you could perhaps try putting the max-width property on the body > tag and working around that? > > On 19 Nov 2009, at 16:37, Jay Janssen wrote: > > > > > Hi, > > I'm trying to create a minimal growl theme that only allows exactly > > one line of text (including the title) up to a max-width and > > thereafter truncates the text using a webkit theme. I want the > > notification to be as small as possible, width-wise. > > > I've got it mostly working, but my issue with trying to dynamically > > set the body width. I have a <div> tag that takes up the whole body, > > and I have "overflow: hidden" set, and it is only 1 line high. I also > > set max-width here to the widest I want my notification to get. > > This creates my desired effect (longer text forces the <div> to get > > wider, but never taller). > > > However, if my notification is large, the body width does not > > dynamically expand with the width of my <div> tag. My work-around > > for this is if I explicitly set my body to something really big. The > > problem with this is that when I mouse-over my notification, the 'X' > > for dismissing it is way over to the left, regardless of how big my > > notification actually is. > > > I also found it's necessary have this div "float: right" to make it > > shrink smaller. Otherwise, the div remains linked to the body, and > > the body won't get smaller than a few hundred pixels. Float:right > > allows the notification to shrink to the size of the notification > > text, assuming it's smaller. If I don't float:right, my body always > > stays the same width (bigger or smaller). > > > Are there any magic incantations of CSS to make the body as flexible > > as the content? > > > -- > > > You received this message because you are subscribed to the Google Groups > > "Growl Discuss" group. > > To post to this group, send email to [email protected]. > > To unsubscribe from this group, send email to > > [email protected]. > > For more options, visit this group > > athttp://groups.google.com/group/growldiscuss?hl=. -- You received this message because you are subscribed to the Google Groups "Growl Discuss" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/growldiscuss?hl=en.
