[css-d] question re: vertical alignment of floated divs
Hi, I'll start by saying I don't yet have a site to post the html / css on to illustrate this, but I'm hoping it's a straightforward situation that doesn't require such. I have a container div and inside that I have 'rows' of fixed-size divs inside that container that are floated left. In order to get vertical alignment on the fixed-size divs inside the container div I am currently putting a negative top-margin on them. The left-most has 0em, next to the right has -1em, next to the right has -2em, etc.. I would like to have a container div that allows the number of fixed-size divs on each 'row' inside it grow or shrink based on available space. The need to put these negative margins on the inside fixed-size divs seems to preclude that. Is this just the nature of floats? If not, any words of wisdom or links to same would be much appreciated. TIA, Bill __ 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] problem: background image won't size with content
Hi Kevin,
On Mon, 2009-09-21 at 21:54 -0400, Kevin Rodenhofer wrote:
Bill, I consolidated the 3 messages, and made the appropriate
corrections. Here you go:
I don't know if this will work for you, but this is what I did for a
similar situation. I copied the code directly from my project:
I don't think I explained the problem(s) I'm having very well. From my
current perspective there are two problems, but I realize they may turn
out to be just two manifestations of a single screw-up on my part ;)
The first problem is evident on the signup page at www.shopkeepapp.com
(should have directed you there to begin with).
The panel in the middle behind the signup form is actually two images:
an 11px-wide one on the left that gets repeated, and an 11px one on the
right that finishes the image off. The visual intent is shading on the
bottom and right edges of the panel for a 3D effect.
The problem is that the image on the right is not expanding to the same
height as the one on the left.
I realize that I could, for example, change the min-height on the
right-hand image. The content on this page is static so that would
work. The rest of the site uses this same model as backgrounds for
content that's not static though. There are forms of many sizes, there
are forms that have content that can be expanded, and there are lists
where I would like to only have as much background as the content
requires.
So I think what I need is to figure out how to get this background to
expand to the size of its container.
Any guidance is much appreciated!
Best regards,
Bill
#wallpaper {position: absolute; top: 0; left: 0; width: 100%; height:
100%; display: block; z-index: 1;}
#wallpaper is the id for an image that is placed absolutely, with an
z-index lower than the rest of the content. It is not a background
image, but an inline image. In all likelyhood, the z-index probably
isn't needed, if this is the first item in the parent container.
I confirmed that it works in the following browsers (all in Windows 7):
IE 7 8
Firefox 3.5.3
Safari 4.0
Chrome 3.0.195.21
Maybe it will work for you.
bill walton wrote:
Greetings all;
I'm having a 'dickens of a time' getting a background image to resize
dynamically based on content. I'm probably not explaining it worth a
darn, but it's pretty easy to see here:
http://anysubdomain.shopkeepapp.com
The specific problem on this page is that the right-side image is not
expanding vertically to match the left side.
If you fill in the form (use any nonsense you want except for the email
address), you'll get the welcome page which displays both images at the
min-height setting.
On the pages inside the site, which you can access if you click the link
in the email you'll get, I have another, very similar problem where that
even the left-side image not sizing to fit content. But maybe the fix
for that is the same as the fix for the right-side image on the sign-up
page.
Overall, I'm using floats for positioning and % and em for widths and
heights pretty much everywhere. Maybe that's my problem. It seems to
be working with respect to putting everything where I want it. But if
using floats is what's causing my difficulties, I'm very open to
changing it. The bottom-line objective is to get these background
images to resize based on content.
Thanks in advance for you help!
Bill
__
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-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] problem: background image won't size with content
Hi Erik,
On Tue, 2009-09-22 at 10:21 -0500, Erik Vorhes wrote:
On Tue, Sep 22, 2009 at 8:54 AM, bill walton bwalton...@gmail.com wrote:
The problem is that the image on the right is not expanding to the same
height as the one on the left.
A possible solution:
HTML:
div id=outer
div id=inner
...
/div
/div
I would _never_ have thought to do this. Thank you very, very much! It
worked like a charm.
CSS:
#outer {
background: url(right-edge.png) no-repeat bottom right;
margin: 0;
padding: 0;
padding-right: [width of right-edge.png]px;
}
I did have to add a padding-bottom:1px; to this. For a reason I may
never understand ;-) I was still getting the right-side image
displaying 1px shorter than the left.
If you float any children of #inner, make sure to add overflow:hidden to
#inner.
Have lots of floating children do I did this too. Thanks much for the
advance notice.
PS This hasn't been tested in IE6, so you might need to force
hasLayout for it to work. (Give each of those divs zoom:1 and you
should be fine.)
Luckily, I don't have to support IE6. I haven't tested in 7 yet but it
looks like there's very little to do for 8.
Again, thank you very much!
Best regards,
Bill
__
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] problem: background image won't size with content
Hi Kevin, On Tue, 2009-09-22 at 12:41 -0400, Kevin Rodenhofer wrote: Bill, I came up with a version that uses no images at all, and I believe, does what you want it to do. You could expand on it a bit, and give it highlights at the top and left as well. Or, make the shading and highlights fuzzier by adding more inner divs. Have a look: http://www.rodenhofer.com/3DBoxTest/ That's very clever! I like it a lot. Before I jump in with both feet I'll have to work with it some to see where the gotcha's are. But the idea that I could get this effect without messing around with images at all is _very_ appealing. Thanks for sharing! Best regards, Bill __ 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] problem: background image won't size with content
Hi Greg, My sincerest apologies. If you got the login page, as opposed to the sign-up page, it means someone else has already 'claimed' that subdomain. I've been waiting on wording from our UI person and didn't think hard enough about what might go wrong before I posted. Again... my apologies. I've added some words in lieu, but the bottom line is any subdomain will work if it's not already 'claimed'. Thanks very much for making the time to take a look. I hope my schtupit hasn't put you off. Best regards, Bill On Mon, 2009-09-21 at 13:47 -0700, Greg Wilker wrote: I just get a username/password page... and any nonsense I want doesn't get me past it. - Greg greg wilker | video/web producer -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css- Subject: [css-d] problem: background image won't size with content http://anysubdomain.shopkeepapp.com If you fill in the form (use any nonsense you want except for the email address), you'll get the welcome page which displays both images at the min-height setting. __ 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] problem: background image won't size with content
Hi Kevin, On Mon, 2009-09-21 at 18:16 -0400, Kevin Rodenhofer wrote: Incidentally, when I said first in the source I meant, first in the parent container, before any content meant to be on top of it. I think I must have missed a reply in the chain. Not sure what you mean by 'first in the source'. Thanks much for your replies. I very much appreciate the help. Best regards, Bill Kevin Rodenhofer wrote: Bill, I just confirmed that it does work in the following browsers (all in Windows 7): IE 7 8 Firefox 3.5.3 Safari 4.0 Chrome 3.0.195.21 bill walton wrote: Greetings all; I'm having a 'dickens of a time' getting a background image to resize dynamically based on content. I'm probably not explaining it worth a darn, but it's pretty easy to see here: http://anysubdomain.shopkeepapp.com The specific problem on this page is that the right-side image is not expanding vertically to match the left side. If you fill in the form (use any nonsense you want except for the email address), you'll get the welcome page which displays both images at the min-height setting. On the pages inside the site, which you can access if you click the link in the email you'll get, I have another, very similar problem where that even the left-side image not sizing to fit content. But maybe the fix for that is the same as the fix for the right-side image on the sign-up page. Overall, I'm using floats for positioning and % and em for widths and heights pretty much everywhere. Maybe that's my problem. It seems to be working with respect to putting everything where I want it. But if using floats is what's causing my difficulties, I'm very open to changing it. The bottom-line objective is to get these background images to resize based on content. Thanks in advance for you help! Bill __ 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-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] width:100%; not rendering 100%
Hi, I've got a page with two divs, one over the other, both set to 100% width. The one on the top is positioned absolute at 0,0. The one under it is a nav bar using the sliding window tabs and it's positioned float:left. The one on the top is rendering to 100% width while the one under it is not; leaving margins on both the left and right. I got it to render close to correct by setting the left-margin to -7px and the width to 101.5% but as I increase the window width the bottom scroll bar appears due, I guess, to the percentage getting 'out of whack'. At any rate, I'm pretty sure that's not the best way to fix it anyway. Could someone please tell me why it's happening and the right way to fix this? The page is at http://ec2-75-101-179-238.compute-1.amazonaws.com Thanks in advance! Bill __ 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] draggable images - can it be stopped?
I'm working on a web app that, for much of the navigation, uses links with background images letting css control the button-blinking behavior. The primary use of the app will be with touch-screens and I've run into an issue where the images are being dragged instead of 'clicked'. Is there a CSS attribute (or any other way) to specify that images are not draggable? TIA, Bill __ 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 get rid of scroll bar?
Hi Peter,
Peter Hyde-Smith wrote:
Ionut wrote
It's because of these elements:
#customer_search_form,
#walkin_customer_button,
#purchase_return_button
...and maybe others.
My advice is to float them left instead of positioning them
relatively. If you float them left, don't forget to also add a
display:inline; after the float: left; declaration. It's for
Internet Explorer's double margin floating bug[1].
Bill:
I would say definitely others, including the header, as outlining
elements in WebDeveloper show a number of elements wider
than my screen width of 1280px.
Thanks for mentioning WebDeveloper. I hadn't downloaded it; have been
getting by pretty well (I thought) with Firebug. This is GREAT! Amazing
amount of info / capabilities for layout. Now I just have to figure out
how to use it all ;-)
Are you trying for a max page width of 1024px (~78em)?
You'd set that through CSS, such as
#somewrapper{width: 98%; max-width: 78em;}, as well as using float
technique above.
Yes, 1024 is our target. Thanks very much for the code. I'll give it a try
immediately.
IMO, you've got a ton of CSS;
Yeah. My guess is that, if I had a better understanding of CSS, more time,
or both, I'd probably be able to refactor this down to about half a ton
less.
maybe want to more distinctly separate basic layout CSS from
fiddley-bits.
Here's a good test re: CSS expertise level: being able to tell the
difference between the two ;-) I'd sure appreciate any specific
recommendations along that line, or pointers to online content I could learn
from.
Also, recommend setting font-size in % instead of fixed pixels,
for browser friendly resizing.
I'm not familiar with setting font-size in %; just em and px. I thought
em-based sizing was the way to go for accomodating resizing. Just goes to
show ya. I'll look into it. Any good cheat sheets for making the
translations?
Thanks much for your help. I appreciate it!
Bill
__
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] how to get rid of scroll bar?
Hi Ionut, Ionut Gabriel Stan wrote: Bill Walton wrote: I can't figure out why I have a horizontal scroll bar at http://www.shopkeepers-r.us or how to get rid of it. The current plan is for the browser window to be maximized with the screen resolution set at 1024x768. I'd sure appreciate help. Resource pointers that would help me understand why this is happening would _really_ be appreciated. It's because of these elements: #customer_search_form, #walkin_customer_button, #purchase_return_button ...and maybe others. The explanation is that you positioned them relatively with a large left offset but forgot to change them the width value which right now is 100% of the body width - 1264px in FF3. Thank you very much for this. One big question... how / where is the body width specified? I thought it might have to do with body width and went through all the CSS (I think) without finding it. Maybe I'm looking for the wrong thing? My advice is to float them left instead of positioning them relatively. I'll try this, but I thought that an element had to be positioned relative in _order_ to float it. Wrong? If you float them left, don't forget to also add a display:inline; after the float: left; declaration. It's for Internet Explorer's double margin floating bug[1]. [1] http://www.positioniseverything.net/explorer/doubled-margin.html The best news is that this _only_ has to be styled for FF ;-) Thanks very much for your help. I appreciate it! Best regards, Bill __ 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] how to get rid of scroll bar?
Greetings! I can't figure out why I have a horizontal scroll bar at http://www.shopkeepers-r.us or how to get rid of it. The current plan is for the browser window to be maximized with the screen resolution set at 1024x768. I'd sure appreciate help. Resource pointers that would help me understand why this is happening would _really_ be appreciated. TIA, Bill __ 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 pushing down several elements
HI, I would really appreciate some help understanding what's causing some wierd behavior in IE. After two days of experimenting I have not been able to figure out. The page linked below displays as I expect in Firefox. In IE7 the hr is pushed down 1em and the submit button is also pushed down 1em. In IE6, both of those things still happen, plus the footer is pushed down 3 or 4 em. I've tried everything I can think of and none of it has made a positive difference. The page is: http://www.yourtimematters.com/immunizations_page.html Many thanks in advance for any help! Best regards, Bill __ 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] IE pushing down several elements
Hi Georg,
Gunlaug Sørtun wrote:
First, delete...
#main {height: 100%;}
...as IE6 interprets that height as at least as high as the
browser-window.
Then add...
form {margin-bottom: 0;}
...to avoid default-differences.
This will probably make those browsers line up quite well.
It does help make some things consistent on that page between the two. And
gives me some hope. Things are still fubar though. What looks to me like
the same basic structure behaves very differently on different pages. I
can't remember ever being this frustrated.
Thank you very much for your help. I really appreciate your response and
hope by working with what you've given me I can make some sense of the other
stuff.
Best regards,
Bill
__
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] line break and fieldset height problems
Hi Kenny, Kenny Graham wrote: Don't have time right now to figure out what would work tho. Thank you for making the time to reply. I appreciate it. And I especially appreciated that comment. It had a very 'familiar ring' to it. As a developer, I've given very similar feedback to newbie coders over the years. Maybe someone else will. And the fact that no one else has chimed in confirms for me what your comment made me recognize. My current CSS is the equivalent of a big pile of spaghetti code. Can't fix this thing without breaking others. So I'm following the advice I've given on so many occassions. Back up, start over, and get the basics working right first. I've made some progress already this morning but was hoping for a confirmation on my strategy which is... Work from the top of the page down. Floats first. Then the elements that flow 'naturally'. Is that headed in the right direction? Thanks again, Bill __ 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] line break and fieldset height problems
Greetings! I need help figuring out a couple of things on the page at http://www.yourtimematters.com/problem_page.html It's looking pretty much like I want it to look in FF with the exception of (1) below. I can live with the way it looks in IE7. I've got a problem I can't figure out in IE6. I haven't tried to fix IE5.5 or IE5.0 yet but hope, with your help on the items below, that I may be able to figure it out without bothering you again. I would appreciate any feedback on how bad the situation is on the Mac browsers. Ths problems I know about are: 1) In FF the line is breaking well short of the clock div. I tried putting a margin-left on the clock div but that did no good so I'm guessing there's something else that's causing that problem. That part of the page renders ok in IE7. 2) In IE6, the fieldset.around_images is way to tall and I can't figure out what's pushing it down. It would be great to be able to bring the outer fieldset up about an em, but I can live with what I've got if necessary. Clicking on any of the tabs (the source of which I'm sure you all recognize) will take you to the section's start page. Feel free to explore if you like ! Any and all feedback, on any front, is both welcome and appreciated. Best regards, Bill __ 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] Can I handle two menu types with one stylesheet?
Hi Georg,
Gunlaug Sørtun wrote:
On #main:
delete 'margin-top: 4em', and add 'clear: both'.
Then add...
#mainnav {margin-bottom: 1.5em;}
#formnav {margin-bottom: 1.5em;}
Thanks very much for your reply. I appreciate it. I made the change and it
works well on IE7. On Firefox, however, it trashes the FormNav menu,
covering all but the very top of the nav buttons with white space. Any
suggestions?
Thanks again!
Bill
__
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] Can I handle two menu types with one stylesheet?
Oops. I deleted the links to the pages. They're at:
http://www.yourtimematters.com/menu1.html
http://www.yourtimematters.com/menu2.html
Thanks again!
- Original Message -
From: Bill Walton [EMAIL PROTECTED]
To: Gunlaug Sørtun [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Thursday, February 08, 2007 8:49 AM
Subject: Re: [css-d] Can I handle two menu types with one stylesheet?
Hi Georg,
Gunlaug Sørtun wrote:
On #main:
delete 'margin-top: 4em', and add 'clear: both'.
Then add...
#mainnav {margin-bottom: 1.5em;}
#formnav {margin-bottom: 1.5em;}
Thanks very much for your reply. I appreciate it. I made the change and it
works well on IE7. On Firefox, however, it trashes the FormNav menu,
covering all but the very top of the nav buttons with white space. Any
suggestions?
Thanks again!
Bill
__
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-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] Can I handle two menu types with one stylesheet?
Hi Georg,
Gunlaug Sørtun wrote:
You've forgotten to add...
#main {clear: both;}
...that's on the top of my list of corrections.
Won't work without it.
Oh Jeez
I really hate it when people can't follow clearly given instructions. Don't
you ;-)
Seriously, I'm usually very good at it. Sorry for screwing up this time.
Thank you very much for both your help and patience. I really appreciate
both.
Best regards,
Bill
__
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] Can I handle two menu types with one stylesheet?
Greetings! I've got my site's functionality pretty much done, so now I'm tackling the really hard stuff: the CSS ;-) The xhtml and css both validate, but there are several problems with the way the site renders. And at this point I'm not even talking about the browser-specific issues. The first problem has to do with the fact that the site uses two different menu styles, depending on what 'section' of the site the visitor is in. The site has two sections. One consists of a set of pages that are pretty much just static content and have one menu style. http://www.yourtimematters.com/menu1.html The other consists of a set of pages that are generated dynamically by my Ruby on Rails app that has a much different menu style; one that I got from alistapart. This section is the 'guts' of the site. http://www.yourtimematters.com/menu2.html (page source for generated page copied to static file) The main div positions the way I want it to for the menu2 page, but is too far down for the menu1 page. I know I've caused the problem with the top margin setting on #main. Is there a good way to fix this short of going to a different stylesheet or something like using #main1 and #main2 ? Some of the other problems I mentioned above will be readily apparent if you view the pages with anything other than Firefox. I thought it would be better to tackle them separately but will happily hear about solutions for those at this point too if anyone's so inclined ;-) Thanks! Bill __ 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] First timer looking for css review
Hi Mike, Brian Riley wrote: Try to validate your XHTML. You'll find a few errors that should be fixed. I like to make sure that the XHTML markup is valid before diving into the CSS. And in case you don't already know, you can do that at: http://validator.w3.org/ The CSS validator is at: http://jigsaw.w3.org/css-validator/ hth, Bill __ 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] problem printing background image in IE
I need to print a page that has a background image with text placed in specific locations wrt the image. Both the image and the locations for the text items (identified by CSS id's) are specified in a stylesheet. The background image is a 300dpi scan of an 8.5 x 11 paper form. In Firefox, it prints out looking like the same form it was scanned from. Exactly what I need. In IE, only a small portion of the top left section of the page prints and that portion is enlarged to fill the page. It looks like IE needs to be told something about the size or resolution of the image, because the portion of the image IE is printing is scaled right (i.e., taller than it is wide). That's just speculation on my part, though. Does anybody have any ideas? Thanks, Bill __ 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] More than one background image for a page
My app collects visitor info via a set of screen forms and now I've got to print the collected info out so that it fits into the spaces, etc. on an existing paper form. It's actually going to print (form and collected into) to a blank piece of paper most of the time, but it also needs to print just the collected info to a preprinted form. My solution so far is to use a scanned image of the paper form as background. That way the user can turn on background printing if they're going to print to blank paper, or turn it off if they're going to print to a preprinted form. I'm positioning the text / images that are or represent the collected info via CSS (e.g., a check mark prints in a specific location on the page if they selected the 'yes' radio button for ' question 4' on the screen form). I've got two stylesheets, one for 'screen' and the other for 'print'. This solution is working ok for page one of the printed form. Now I need to add page two of the printed form. I would like to be able to print all the pages of the form with one print command. But I don't seem to be able to add a second background image. I've tried putting the images in two seperate divs (page1 and page2) in the stylesheet and then putting both divs on the page. I can't get the second image to print. I've tried combining the two images into one and then setting the page height in the print css to two pages high. About the first page and a half of the image printed on the first page of output, no second page. I'd sure appreciate it if someone would point me in a direction that might work. Thanks, Bill __ 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/
Re: [css-d] More than one background image for a page
Hi David, david wrote: Bill Walton wrote: My solution so far is to use a scanned image of the paper form as background. That way the user can turn on background printing if they're going to print to blank paper, or turn it off if they're going to print to a preprinted form. This solution is working ok for page one of the printed form. Now I need to add page two of the printed form. I would like to be able to print all the pages of the form with one print command. But I don't seem to be able to add a second background image. Hmmm, how about having your server generate a PDF file on the fly and serve that back to the visitor? I'm guessing that the point of all this is to provide the visitor with a printable form which they then print and sign snip? Yes, at least this part of the saga is about printing ;-) Putting it in a PDF would make it possible to do a multi-page print. That's goodness. On the other hand, it could add additional steps and some additional wait time for the visitor, and to satisfy the requirement to print the laid-out content with or without the background form it seems like I'd have to add a step where the visitor explicitly states how they want to lay it out, or just generate and send 2 PDF's, or generate and send one PDF with double the number of pages. I'd really like to be able to just select 'Print' from the browser's File menu. Is there not a way to use CSS to position two large background images such that they'll print on seperate pages? Thanks, Bill __ 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/
Re: [css-d] third column riding below
Hi Gunlaug, First of all, thanks! That works. Now... Gunlaug Sørtun wrote; I could use some help figuring out why the right column won't come up against the main one but rides underneath instead. http://www.emrec-beta1.com That's how floats work - right_col can't float upwards past the non-floating main. But main can 'float' to the top between left_col and right_col? What would you recommend I study in order to understand this? It is, to me, very counter-intuitive. I need something in plain english. For that kind of 'float/non-float' layout to work, you'll have to change the order in the source-code (HTML) so it becomes... I know this must be related to my earlier question re: understanding what 'normal page flow' means. I haven't made it through everything Zoe recommended, though. So maybe the answer already awaits! ...and keep the CSS as is. Is there an easy way to keep the HTML as is and change the CSS to achieve the same result? I mean, changing the order of the HTML wasn't intuitive, but it em was /em easy. Thanks again, Bill __ 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] third column riding below
Hi,
I could use some help figuring out why the right column won't come up against
the main one but rides underneath instead. The page is at
http://www.emrec-beta1.com The stylesheet is internal. Thanks much for any
help.
Best regards,
Bill
stylesheet definitions
#left_col {
float: left;
background-color: #fcc;
width: 9em;
position: relative;
}
#main {
margin-left: 9em;
margin-right: 10em;
padding-top: 1ex;
padding-left: 1em;
padding-right: 1em;
background: white;
border-left: medium solid red;
border-right: medium solid red;
position: relative;
}
#right_col {
float: right;
background-color: #fcc;
width: 9em;
position: relative;
}
__
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/
Re: [css-d] stylesheet link causing validation to fail
Ingo Chao Add top:0; to .col3 and position:relative to each .LinestyleX Thank you very much. At least now the results are the same in IE and FF. or go the other route without position:absolute. I'm going to try to eliminate the position: absolute this weekend. The pointers you and LordChaos gave will be where I start, for sure. I tried using position:relative to begin with but that produced a bigger mess. I'm really having a hard time understanding 'normal page flow.' I see it referred to, but I haven't been able to find an understandable explanation of what it is. If you (or anyone else) could point me to a reference that could help me get my arms around those fundamentals, I would *really* appreciate it. Thanks again for your help. Best regards, Bill __ 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] stylesheet link causing validation to fail
Greetings! Can anybody see why the stylesheet link below wouldn't validate? link href=/stylesheets/emrec_entry.css?1153418233 media=all rel=Stylesheet type=text/css / I'm trying to validate a page's HTML and, with this line in the HTML, am getting an error that says I have a /head tag without head being open. When I take this line out, everything validates. I don't get it. Thanks in advance for any help. Best regards, Bill __ 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/
Re: [css-d] stylesheet link causing validation to fail
Hi Dave, Dave Goodchild wrote: Why the ? and numbers in the css filename? The app's built using Ruby on Rails and the stylesheet link is autogenerated. The stylesheet definitely works. But I'm working on a styling problem, decided I'd better validate the generated HTML before asking for help here, and this showed up. I'll see if the link validates with the '?1153418233' gone. Thanks! Bill __ 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/
Re: [css-d] stylesheet link causing validation to fail
Hi Debi, Debi Orton wrote: If you are using HTML, the slash at the end of the line is probably throwing an error. Also, I'm not sure about the ? after the CSS file's name. Hope this is helpful. Very helpful! The slash was the problem. File validates without it. Fails with it in. Thanks! Now the question (to anybody) is, is that going to cause me problems with the stylesheet? It doesn't seem to. But I'm having a problem with sizing / positioning buttons and wonder... Thanks again for your help, Bill __ 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/
Re: [css-d] stylesheet link causing validation to fail
Very helpful! The slash was the problem. File validates without it. Fails with it in. Thanks! Went back to the w3schools site to see what I'd missed and now I'm confused. Here's the example HTML from that site for stylesheet links. head link rel=stylesheet type=text/css href=mystyle.css / /head Looks, from this, like the '/' is _supposed_ to be there at the end. Any additional info (even speculation) would be appreciated. Thanks, Bill __ 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/
Re: [css-d] stylesheet link causing validation to fail
Thank you all for your responses! Many wrote: If you are using XHTML, you need it for self closing tags: tag / If you are using HTML, you don't want it: tag That was indeed the problem. I had an HTML Doctype. Problem is, the page won't come close to validating with any of the XHTML Doctypes, and many of the problems are out of my control. This is my first Ruby on Rails app and the tool is generating most of the tags. In reality, I have no idea whether any of this is even related to the problem I'm trying to solve. I'd really appreciate it if any of you would make a couple of minutes to take a look and let me know. The site is at http://www.emrec-beta1.com . There's a link at the bottom of the first page that takes you into the app. On the 'Patient Information' page, enter something in the 'Last name' field. No additional info is required to proceed. Four clicks takes you to the 'Medication allergies' page which is where the problem is. Click in the 'Other Drug Allergies' checkbox. That brings up a form to enter stuff in. When items are entered, the item is added to the database and a new line is rendered via Ajax in the div under the 'Allergy List'. Each line has a button on it to remove that item from both the database and the page. In IE it's ugly. In FF it's worse ;-( . If you go to the next page and add an item or two you'll see where I started. I'm trying to change the links to buttons so that visitors using the Google Web Accelerator don't have it removing items as soon as they add them. Any suggestions / pointers will be sincerely appreciated! Thanks in advance, Bill __ 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/
Re: [css-d] stylesheet link causing validation to fail
Hi Ingo, Ingo Chao wrote: a static page to work on would be immensely helpful. I've put a static page at http://www.emrec-beta1.com/edit.htm and hard-coded the stylesheet link to the emrec_entry.css file in the same directory. Please let me know if you have any trouble accessing either. Thank you very much for taking a look! Best regards, Bill __ 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] Possible to overriding embedded SS with external SS?
I'm pretty sure this is bass-ackwards, but I need to be able to over-ride an embedded stylesheet with an external one, if the external one exists. I was thinking it might be possible to do using javascript something like this... The embedded stylesheet would be included in the js code. On page load, the script checks to see if the external stylesheet exists and then either writes it or the included one to the page's head. Anybody have any experience with / thoughts about the viability of this approach? Happy to explain more about the problem / constraints if desired. Thanks in advance, Bill __ 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/
Re: [css-d] Possible to overriding embedded SS with external SS?
Christian Heilmann wrote: Not in CSS, so that is off-topic. I was trying to figure out how to get the 'right CSS' applied to the doc. I see now that including the 'how' part put me off topic. My bad. My apologies. Best regards, Bill __ 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] testing a :print style
I've just begun trying to use a seperate style sheet for printed output and I wonder... Are there significant differences between the result of CSS styles for one printer vs. another (as there are in from one browser vs. another)? Is there a reliable way, short of hardcopy, to see what a :print version of a document will look like? Is print preview reliable? Thanks! Bill __ 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/
Re: [css-d] Targeting DIV question
Hi Zoe, While Stu Nicholls demos are amazing examples of what CSS can do, they are not good practical solutions in many cases. This, IMO, is one of those cases. This thing is very hard to use, snip Could you say more about the specifics (or just point me to a resource) to help me understand the current thinking WRT usability? Thanks, Bill __ 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] newbie CSS on Firefox problem
Greetings from a CSS newbie;
I apologize in advance for violating the prohibition on posting code but 1) I
have no where to put this yet, and 2) it's so trivial I'm hoping you'll allow
it.
Here's my problem. I cannot get even a trivial piece of CSS working on
Firefox. It works as expected on IE6.
It's driving me NUTS!!! I would really appreciate it if someone could point me
in the right direction. I've been searching the documentation, trying mods to
everything I could think of, etc. and haven't gotten anywhere.
I'm working in Ruby on Rails on Win2K.
Here's my View code.
html
head
titleCSS Demo/title
%= stylesheet_link_tag 'listdemo', :media = 'all' %
/head
body
h3Three line list/h3
div class = Listline1
First line will be one color
/div
div class = Listline0
Second line will be different color
/div
div class = Listline1
Third line will be the same color as the first
/div
/body
/html
Here's the Controller:
class ListdemoController ApplicationController
def index
end
end
Here's the stylesheet:
.Listline0 {
background: ff;
}
.Listline1 {
background: ff;
}
I've gotta believe that I'm just missing some small but key piece of
information. I would really appreciate any help you could provide.
Thanks in advance,
Bill
__
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/
Re: [css-d] newbie CSS on Firefox problem
Hi Ron,
Thank you very very much. That was driving me crazy. The W3C CSS validator
requires a URL. Is there one for the desktop you'd recommend? I'd sure
like to avoid this in the future, if possible.
Thanks again for your help. I really appreciate it.
Best regards,
Bill
- Original Message -
From: Pringle, Ron [EMAIL PROTECTED]
To: Bill Walton [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: 2006-04-05 2:52 PM
Subject: RE: [css-d] newbie CSS on Firefox problem
Bill wrote:
Greetings from a CSS newbie;
I apologize in advance for violating the prohibition on
posting code but 1) I have no where to put this yet, and 2)
it's so trivial I'm hoping you'll allow it.
Here's my problem. I cannot get even a trivial piece of CSS
working on Firefox. It works as expected on IE6.
[SNIP]
Here's the stylesheet:
.Listline0 {
background: ff;
}
.Listline1 {
background: ff;
}
Thanks in advance,
Bill
Bill-
try specifying the colors like so:
background-color: #ff;
You can also shorten that to: #fff; and #fcc; (think of each
character/number as part of a pair, broken down like ff cc cc).
Regards,
Ron
__
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/
Re: [css-d] newbie CSS on Firefox problem
I have no idea what I was looking at / how I missed the W3C validation options you've pointed out. To think I spent the better part of a day banging my head on this ;-p It's clear I've got a lot to learn ;-) Thanks to you all for your help! Best regards, Bill - Original Message - From: francky [EMAIL PROTECTED] To: Bill Walton [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: 2006-04-05 4:00 PM Subject: Re: [css-d] newbie CSS on Firefox problem Bill Walton wrote: [...] The W3C CSS validator requires a URL. Is there one for the desktop you'd recommend? [...] Hi Bill, The w3c css-validator has also the possibility to upload a stylesheet http://jigsaw.w3.org/css-validator/validator-upload.html, or, in a text-box, to upload partial css-text http://jigsaw.w3.org/css-validator/validator-text.html. And: a validate local css option (leading to the same w3c validator) is built in in Chris Pederick's WebDeveloper-extension, in Firefox a must-have tool http://chrispederick.com/work/webdeveloper/! Greetings, francky __ 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/
Re: [css-d] newbie CSS on Firefox problem
Sorry to bother you guys again, but I pasted the stylesheet in the W3C
css-validator and got the results below, which I totally do not understand.
I mean, I'm getting the visual result I expected, and the stuff below is
only warnings, but the words make no sense to me and my gut tells me it's
just a matter of time before this bites me. I know it's just newbie
ignorance, but that's not a state I tolerate well for long. What's the best
way for a motivated guy to move forward to a more learned state here? Any /
all suggestions are much appreciated.
Thanks again,
Bill
Warnings
URI : file://localhost/TextArea
a.. Line : 2 (Level : 1) You have no color with your background-color :
.Listline0
b.. Line : 7 (Level : 1) You have no color with your background-color :
.Listline1
Valid CSS information
a.. .Listline0 {
a.. background-color : #fff;
}
b.. .Listline1 {
a.. background-color : #fcc;
}
- Original Message -
From: cj [EMAIL PROTECTED]
To: Bill Walton [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: 2006-04-05 3:36 PM
Subject: Re: [css-d] newbie CSS on Firefox problem
On 4/5/06, Bill Walton [EMAIL PROTECTED] wrote:
Hi Ron,
Thank you very very much. That was driving me crazy. The W3C CSS
validator
requires a URL. Is there one for the desktop you'd recommend? I'd sure
like to avoid this in the future, if possible.
you're in luck! they don't require a url. :)
- 2nd or 3rd option box on each page:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
__
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/
