[css-d] Mixing fluid layouts and px padding
Hi I have just completed the re-design of this site: http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/snails_revisited/style.css I was at first using a fixed width design but wanted to regain a fluid width design. However, I ran into the problem of using widths = % but padding in px. It was breaking the design in that the columns were not sitting side by side. How do other folks get around this please? Is there a better method of padding elements than px when doing a fluid design. Many thanks. -- Kind regards Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Problems with Firefox and horizontal menu
On 8/3/07, Terri Houston [EMAIL PROTECTED] wrote:
Sucker Tree Horizontal Menu
www.ttcollectiblegifts.com/dynamicdrive.html
I'm satisfied with the way my menu looks in IE browser, but not in Firefox.
As I hover on a top level list item, the background shortens, making the next
top list item overlap the top of the top link. Any ideas on why this is
happening?
The problem is that the designer of your menu didn't take into account
the possibility of the vertical padding of the a tag at the top
level overflowing the bounds of the containing ul/li. IE gladly
expands container elements to wrap around floating elements, even when
it's not supposed (as in this case).
You can fix this by changing the rule on .suckertreemenu ul li a to
include display: block;
Also, in Firefox, my menu is not nearly as wide as it looks in IE. How can I
change this?
The above fix should significantly widen your menu. You will probably
need to play with the width: 100px or else the top menu boxes are
likely to wrap in any small display. Also, be aware that once you
have display: block, having both width and left/right padding is
inconsistent (not to mention redundant with text-align: center) and
going to get you inconsistent results across browsers, either remove
the fixed width (so that each menu with expand to fit its text) or
change the padding to padding: 5px 0px
But you also have a very strange rule:
ul..suckertreemenu {
width: 820em;
margin: auto;
}
--
replace that with something like
.suckertreemenu {
width: 820px;
margin: 0px auto;
}
note the px instead of em, if any browsers even managed to parse that
selector, it would have made your menu 820 times as wide as an M in
your browser's font. That can't be what you want. Then again, you do
have it set to be 5300 pixels high, so what's 8200+ pixels wide!
(820px won't work either because the parent elements force it to 808px
(at least in firefox) which is too small to handle the 816px that it
wants to be with 1px borders around 100px boxes, it does work on its
own though).
I would love to be able to center the menu on my webpages, and not have to
worry about placing it. Can I do this?
The margin: 0px auto; will give you 0px of vertical margin and
horizontally center the entire div. Although, you'll need to consider
the conflicts that such loose positioning will have with all the very
strict relative positioning you have on the other elements of the page
(as with my note on width above).
Rob
__
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] RFC: printing backgrounds by default
You raise a good point about cascading for more involved background
uses. Then I suppose my next question is, how much do you think
people have _relied_ on the knowledge that gecko based browsers would
not print their backgrounds in order to avoid the effort of adding a
print stylesheet just to remove them (essentially doing what you've
already done for them) versus how much people unknowingly run into the
problem or alternatively never even realize that there is an issue?
I for one would imagine that a large majority are completely oblivious
to the fact that backgrounds don't get printed because any backgrounds
that they might have are not essential to the site (especially if you
do modify light colored text to read better). I would then venture to
guess that those same people have not nor will they ever bother
creating a print stylesheet. That only leaves one possible problem
which may be what your reviewer was getting at and that is, how many
CMS's and WYSIWYG editors include an empty print stylesheet if you
don't specify any print styles? I don't know the answer but the more
I think about it the more likely it seems that some would do that.
Or can you have a special exception for stylesheets that don't contain
any valid rules?
Rob
On 8/9/07, fantasai [EMAIL PROTECTED] wrote:
Robert Van Dam wrote:
I don't see anything confusing in it*. I suppose it might catch a few
developers off guard at first but going forward, I would imagine the
existing method is far more confusing to anyone unfamiliar with this
problem. What's more confusing, I said show a background for printed
versions of the page and so you printed it or I said show a
background for printed versions of the page and so you ignored me?
* caveat: After rereading what you wrote I realized that I
misinterpreted your plan. My above comment would apply if and only if
the background was specified in the print style sheet. That would
seem to indicate to me that a developer knows what they want (as in
your opera example). Printing a background specified elsewhere just
because there is a print style sheet could easily catch a lot more
developers off guard and be more confusing (though probably still less
surprising/confusing than failing silently).
Would it be reasonable to be that specific about when to print or not
to print a background?
Well, 1. it would be a lot more difficult to implement, but 2. I think
authors should be able to rely on the cascade working properly. For example,
a page might have a light-colored background, and use backgrounds for
accents e.g. on headings or table headers. I want to get rid of the
overall light-colored background in favor of black on white, but I want
all the accents to show up, too. If the cascade is working normally, all
I need to do is specify a print stylesheet with
body { background: white; color: black; }
If the browser is being selective and only honoring backgrounds inside
print-specific style sheets, then I'd need to duplicate all of my background
and color settings in the print style sheet.
Depending on how the CSS was authored, the combination of rules in the
non-print-specific and print-specific sheets could result in a rather
broken design if all the non-print-specific rules were suddenly ignored.
When we disable all backgrounds, we know the background is always white
and we can compensate by darkening the text colors if they are too light.
~fantasai
__
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] maintaining site proportions across screen resolution -NOT Quite
I don't have safari to test on but konqueror 3.5.5 has the same problem until you remove position: relative from the #outer rule. Fortunately the only effect that seems to have in firefox is to lengthen the relative height of both #inner and its contents which is reasonably accounted for by adjusting #inner's height. Your original link seems to have done basically that since it looks the same in firefox and konqueror to me. I've seen complaints about position: relative in safari before but this is quite a dramatic failure since the majority of the remaining css is completely ignored (although strangely some of it is still being used). Rob On 8/7/07, Ian Young [EMAIL PROTECTED] wrote: Subject: Re: [css-d] maintaining site proportions across screen resolution -NOT Quite On Aug 7, 2007, at 8:55 PM, Ian Young wrote: Pity really as it was beginning to look quite good across various screen resolutions. Looks as if Safari PC not too keen on position:absolute See http://www.iyesolutions.co.uk/templates/trossachs/index-4.html Any thoughts, folks? I have prepared a simplified version at: http://www.iyesolutions.co.uk/templates/trossachs/height-test.html The style rules are in the header. And it seems that it is the position:relative in the outer div which is the start of the issue for Safari I don't know which display you consider 'correct'. Latest Webkit build (post Safari 3.03b) and Opera 9.22 display exactly the same. If you wrap your 'Hello moto' in a p, then Fx 2.0, Opera, Webkit, Safari 3.0 and Minefield (FX 3 alpha) all agree. Thanks Philippe. In Safari PC, the script doesn't work at all, see http://www.iyesolutions.co.uk/templates/trossachs/safari.jpg Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.8/940 - Release Date: 06/08/2007 16:53 __ 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] maintaining site proportions across screen resolution-NOT Quite
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Robert Van Dam Sent: 09 August 2007 08:07 To: CSS-D Subject: Re: [css-d] maintaining site proportions across screen resolution-NOT Quite I don't have safari to test on but konqueror 3.5.5 has the same problem until you remove position: relative from the #outer rule. Fortunately the only effect that seems to have in firefox is to lengthen the relative height of both #inner and its contents which is reasonably accounted for by adjusting #inner's height. Your original link seems to have done basically that since it looks the same in firefox and konqueror to me. I've seen complaints about position: relative in safari before but this is quite a dramatic failure since the majority of the remaining css is completely ignored (although strangely some of it is still being used). Rob Thanks Rob, Good to find out that some one else had same problem with Safari. I'll go fettle the inner div's height and see how that turns out. It may be academic as client is not that keen on the fluid solution in any case. Cheers Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.8/941 - Release Date: 07/08/2007 16:06 __ 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] mixed units for table padding
Hi fantasia, thanks for your suggestion.
Margin is ignored for captions.
But a white border-left seems to do the trick:
table {
/* NB */
/* IE tables don't inherit font-size */
font-size: 1em;
border: thin solid black;
}
th, td {
padding: 0.25em;
}
table caption {
caption-side: top;
/* NB *
/* padding needs extra allowance for border */
border-left: thin solid white;
padding: 0.25em;
}
Cheers
Trevor
-Original Message-
From: fantasai [mailto:[EMAIL PROTECTED]
Sent: Thursday, 9 August 2007 8:26 a.m.
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] mixed units for table padding
Trevor Nicholls wrote:
I hope this requirement is simple!
I am trying to align a table caption with a table cell.
The table has a 2 pixel border.
The table cell has 0.25em padding.
This means that the table caption needs padding of 0.25em + 2px.
The browser is IE.
Is this possible without making assumptions about font sizes?
Does your caption have a border or backgrounds? Because if not,
margin: 2px;
padding: 0.25em;
might work
~fantasai
__
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] Form buttons and background image in IE7
Hi!
Was hoping you could help me out here. I am implementing a form that
uses a background image on the submit-buttons. So far, so good.
However, in IE7, the background-images will not fill the button, and
always leave a 1px border with the background-color, inside the
borders specified for the button. This in turn ruins my carefully
crafted gradients and stylish borders.
Seen this on two computers, one running Vista, one running XP,
rendered like intended in FF.
--8--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en xml:lang=en
head
meta content=text/html; charset=UTF-8
http-equiv=Content-Type /
style media=all type=text/css
input.submit {
background-color:#f00;
background-image:url('./images/button_submit_background.gif');
background-position:top left;
background-repeat:repeat-x;
border-top:1px solid #f7f7f8;
border-left:1px solid #e9ebef;
border-bottom:1px solid #7c7e82;
border-right:1px solid #949597;
}
/style
titleA page with a Dude-button/title
/head
body
form action=# method=post
p
input type=submit class=submit name=dude
value=Dude! /
/p
/form
/body
/html
--8--
--
Pål Eivind Jacobsen Nes
__
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] width and percent
Hi,
{width: 60%} - here the width of the element is 60% of what ?
Also, does the answer to above hold good for margins and paddings ?
Thanks,
Karuna
-
5, 50, 500, 5000 - Store unlimited mails in your inbox. Click here.
__
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] RFC: printing backgrounds by default
Robert Van Dam wrote:
I don't see anything confusing in it*. I suppose it might catch a few
developers off guard at first but going forward, I would imagine the
existing method is far more confusing to anyone unfamiliar with this
problem. What's more confusing, I said show a background for printed
versions of the page and so you printed it or I said show a
background for printed versions of the page and so you ignored me?
* caveat: After rereading what you wrote I realized that I
misinterpreted your plan. My above comment would apply if and only if
the background was specified in the print style sheet. That would
seem to indicate to me that a developer knows what they want (as in
your opera example). Printing a background specified elsewhere just
because there is a print style sheet could easily catch a lot more
developers off guard and be more confusing (though probably still less
surprising/confusing than failing silently).
Would it be reasonable to be that specific about when to print or not
to print a background?
Well, 1. it would be a lot more difficult to implement, but 2. I think
authors should be able to rely on the cascade working properly. For example,
a page might have a light-colored background, and use backgrounds for
accents e.g. on headings or table headers. I want to get rid of the
overall light-colored background in favor of black on white, but I want
all the accents to show up, too. If the cascade is working normally, all
I need to do is specify a print stylesheet with
body { background: white; color: black; }
If the browser is being selective and only honoring backgrounds inside
print-specific style sheets, then I'd need to duplicate all of my background
and color settings in the print style sheet.
Depending on how the CSS was authored, the combination of rules in the
non-print-specific and print-specific sheets could result in a rather
broken design if all the non-print-specific rules were suddenly ignored.
When we disable all backgrounds, we know the background is always white
and we can compensate by darkening the text colors if they are too light.
~fantasai
__
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's filter property can affect unreleated css rendering
On 8/7/07, Nathar Leichoz wrote:
Hello fellow designers,I'm using IE's filter CSS property and
have found that when I use it, IE has problems rendering
positioned elements on a completely different part of the page
I also tried experimenting with IE's expression value and
have found the same problem.
[...]
In the code that you posted you have a position:relative element
(.box) with no hasLayout and this may cause many types of problems
[1], especially if that element is used as reference for absolutely
positioned ones. So try giving hasLayout to it, with
.box { zoom: 1 }
or any other trigger. If this does not solve the problem, you could
post the url of a full public page with the problem, that would be
easier to debug.
Bruno
[1] http://www.satzansatz.de/cssd/onhavinglayout.html#rp
--
Bruno Fassino http://www.brunildo.org/test
__
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] mixed units for table padding
Trevor Nicholls wrote: I hope this requirement is simple! I am trying to align a table caption with a table cell. The table has a 2 pixel border. The table cell has 0.25em padding. This means that the table caption needs padding of 0.25em + 2px. The browser is IE. Is this possible without making assumptions about font sizes? Does your caption have a border or backgrounds? Because if not, margin: 2px; padding: 0.25em; might work ~fantasai __ 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] ie7 jumping nav buttons
On 8/8/07, Melinda Odom wrote: Why are the navigation buttons at the top jumping each time you put your cursor over them in ie7 (this one jumps when putting the mouse over the links the second, third, etc. time)? The other browsers calm down after the first time. http://www.designhosting.biz/test2.html They were all jumping even without the mouseover in ie7 only but not in the other browsers. Some of the other browsers jump right when first putting your mouse over the links and then they quit. I assume that by jumping you mean that the image, when overed, disappears for a while, before the '_over' one (or itself again) shows up. If so, check your IE7 options since the problem may be caused by temporary internet files... check for newer versions of stored pages set to every time I visit the webpage. This problem was much worse in IE6, but apparently it is still there in IE7, at least under some conditions. Assuming that all previous hypotheses are true, you could probably ignore the problem since with the normal cache setting (automatically), and so for most users, it does not occur. Or you can try some fixes: it seems that a sort of 'image preloading' stops the IE7 problem, let me know if you like more details. Hope this helps a little, Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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] how to set width of LEGEND tags in FF
Dear All, I should set width of legend tags to 100% in Firefox (2.0). Is it possible? Obviously, I tried to set their display to block but it doesn't have any effect. thanks in advance, Viktor __ 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] how to set width of LEGEND tags in FF
Subject: [css-d] how to set width of LEGEND tags in FF Dear All, I should set width of legend tags to 100% in Firefox (2.0). Is it possible? Obviously, I tried to set their display to block but it doesn't have any effect. Hi Viktor, need a bit more information here as not sure what you are trying to do. A sample page or code would be useful Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.10/943 - Release Date: 08/08/2007 17:38 __ 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] RFC: printing backgrounds by default
On 04/08/2007 23:41, fantasai wrote: So we want to know what you think: would a switch like this be confusing? Is there a better way to handle this kind of switch? What are your thoughts on this problem? For those who want more details, the bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=381466 ~fantasai [1] http://archivist.incutio.com/viewlist/css-discuss/91007 What I have done in the past is to have a print stylesheet to make printed text darker than its on-screen equivalent. This relies on the backgrounds not printing. Also consider the number of people using sliding doors style rounded-corners. These would appear pretty strange if printed. I think there's mileage in printing a background when specified in the print stylesheet. I've not given it much deep thought though. I can imagine the amount of cursing a user would do when printing something only to find that the designer has specified white text out of dark green in order to stick to brand guidelines. So perhaps for the sake of the users it's best not to. -- http://antanova.blogspot.com __ 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] how to set width of LEGEND tags in FF
Hi, yes, sure. Here is the sample: http://people.inf.elte.hu/kelemen/css/legend.html Problem: How to set the width of the legend tag to 100% (to fill the screen in this case) I added a plus span within the legend tag hence I can control its size but 100% is still not working (which is not surprising). Best Regards, Viktor On Thu, 2007-08-09 at 12:26 +0100, Ian Young wrote: Subject: [css-d] how to set width of LEGEND tags in FF Dear All, I should set width of legend tags to 100% in Firefox (2.0). Is it possible? Obviously, I tried to set their display to block but it doesn't have any effect. Hi Viktor, need a bit more information here as not sure what you are trying to do. A sample page or code would be useful Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.10/943 - Release Date: 08/08/2007 17:38 __ 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] content little off in FF
[EMAIL PROTECTED] wrote: I had trouble in the past displaying my content right in IE7, but that I solved 2 days ago...The funny thing now it though, that my content is a little off in FF, while before that was not a problem at all... It has to do with this little piece of coding: margin-left:80px !important; /* was 103, for IE only */ margin-left:100px; /* was 80, FF */ As you can see I have been playing around with the numbers, but cannot seem to get it perfectly played in both browsers?! See: http://www.cmamali.org/koutiala.html Hi, I suggest you simplify how you are doing things. That pattern image is simply decorative, right? Then make it the background of #content. Then, all you need to do is give #content some left padding and get rid of the left margins on the content inside, and you're all set. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Looks fine on my IE6 but not others
Tim Offenstein wrote: I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. I can get the drop to happen if I narrow my window to about 750px, which this user is probably browsing at (remember that not everyone maximizes their window, not even on 800x600, and some people have sidebars, etc.). It's due to the photo under Graduation Celebration which cannot be broken. I recommend setting a min-width of about 760px on the page and using a JavaScript to get this min-width in IE 6 and lower. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Mixing fluid layouts and px padding
Richard Brown wrote: Hi I have just completed the re-design of this site: http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/snails_revisited/style.css I was at first using a fixed width design but wanted to regain a fluid width design. However, I ran into the problem of using widths = % but padding in px. It was breaking the design in that the columns were not sitting side by side. How do other folks get around this please? Is there a better method of padding elements than px when doing a fluid design. Rich, You can set margins on the elements inside the columns instead of setting any padding on the column divs themselves. You can also nest a div inside each column div that has no width set on it and just give each of these divs padding or margin. By the way, your left column is dropped down in FF 2 no matter what size I set my window to. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Menu broken in IE - Please help!
Timothy Burgin wrote: Hi Ray, I thought I had validated the CSS before, but now all is fixed and validates fine. I don't have MS IE on my iMac yet, so I'm waiting on a screen shot from browsershots.org to see if this has helped. Thanks, Timothy Hi Timothy You have this doctype !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN but you have xhtml in your source. Giving a xhtml doctype fixes the menu problem in IE7 completely, but the html and xhtml doctypes I tried gave many validations errors regardless, these need to be addressed. Kind regards, Alan __ 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] how to set width of LEGEND tags in FF
To: css-d@lists.css-discuss.org Subject: [css-d] how to set width of LEGEND tags in FF Dear All, I should set width of legend tags to 100% in Firefox (2.0). Is it possible? Obviously, I tried to set their display to block but it doesn't have any effect. The problem lies with legend. This is a notoriously difficult little bugger. Best work around is explained here; http://www.tyssendesign.com.au/articles/html/forms/legends-of-style/ Good luck Ian __ 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] RFC: printing backgrounds by default
Jason Crosse wrote: What I have done in the past is to have a print stylesheet to make printed text darker than its on-screen equivalent. This relies on the backgrounds not printing. I've also done this in the past - assumed the background wouldn't print, but since it's an option in the browser that can be easily toggled it strikes me that it's perhaps an assumption that we usually get away with rather than the correct way to approach things. Sort of like assuming your page background will be white by default. Rob __ 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] content little off in FF
@ Zoe, Odder
Thanks for the suggestions both of you...
As you mentioned Zoe, I simplified the #content div. Great suggestion!!
Sometimes a person thinks to complicated ;)
There is only one more thing, the first paragraphe/sentence stays 'off', see
http://www.cmamali.org/koutiala.html again...
I tried all kinds of different changes with the margin-left, but without
success. The reason the other content looks good, is because it is placed
in a table.
These are the settings now of my #content:
#content
{
font-family:arial, verdana, serif;
font-size:12px;
background:url(http://www.cmamali.org/images/pattern.jpg)
no-repeat top left;
width:710px;
padding:0;
text-align:left;
margin:0 auto;
/*margin:0;*/
margin-left:auto;
margin-right: auto;
}
I tried to get rid of the margin-left as you suggested, but then the whole
page bends too far left.
I also tried to set the margin-left the same as in the table (75px), but also
that was not THE solution ;)
__
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 background position bug demo
Snadden Tim wrote:
Recently I needed to set a background image on body in order to create
full height faux columns. I found that if font size is set on body
that IE still uses the default font size to position the background
image. To get around it I ended up putting the background image on a div
instead.
Here is a demo:
http://snadden.com/demo/ie-background.htm
Has anyone else come across this before? Are there any other ways around
this?
Thanks, Tim
Hi Tim
both the following show the background image at 20em
html {
background: #FFF url(right-shadow.gif) repeat-y 10em;
font-size: 2em;
}
div { /* with containing div in html */
background: #FFF url(right-shadow.gif) repeat-y 10em;
font-size: 2em;
}
but if the same style is used on the body, the bug is present showing 10em in
IE and 20em in Firefox.
body {
background: #FFF url(right-shadow.gif) repeat-y 10em;
font-size: 2em;
}
Another IE bug surely. I would recommend using font-size:200%; so not to set of
another IE bug when using em on the body.
http://css-discuss.incutio.com/?page=UsingEms
Kind Regards, Alan
Kind Regards, Alan
__
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] defining heights in nested divs
Continuing the saga of having fluid heights, I have changed the rules and have some kind of solution. However, I cannot clear the floats so that the left and content divs don't break out of wrapper div. In the first example, the content and left divs are set to height:100% (just are the two containing divs outer and wrapper (which are ok) http://www.iyesolutions.co.uk/templates/trossachs/height-test-2.html Second example, the left and content are set to 95% and are just contained. http://www.iyesolutions.co.uk/templates/trossachs/height-test.html So how do I prevent these divs breaking out? Ian This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.10/943 - Release Date: 08/08/2007 17:38 __ 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] RFC: printing backgrounds by default
Rob Crowther wrote: Jason Crosse wrote: What I have done in the past is to have a print stylesheet to make printed text darker than its on-screen equivalent. This relies on the backgrounds not printing. I've also done this in the past - assumed the background wouldn't print, but since it's an option in the browser that can be easily toggled it strikes me that it's perhaps an assumption that we usually get away with rather than the correct way to approach things. Sort of like assuming your page background will be white by default. Yes. You should not assume that backgrounds won't print because in some configurations (and some UAs in general) they do. ~fantasai __ 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] Automated generation of CSS sprite images and test code
http://www.csssprites.com Sweeet! Is mine. More feedback welcome (done by a colleague of mine). -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] Bottom margin not displaying in IE7 within nested boxes
Hi all, I'm currently working on a page which requires a background image to use as a surrounding border to content. Within this box is another container which will have an image applied, and within that there will be 2 columns. In the example in the link below, I've used borders rather than background images to illustrate: http://www.phunkadelik.com/testbox.html In Firefox and older versions of IE, the bottom margins are present, however in IE7 it collapses despite having borders surrounding the containers. Does anybody know where I'm going wrong, or a fix to this? Thanks This e-mail (including any attachments) is intended only for the recipient(s) named above. It may contain confidential or privileged information and should not be read, copied or otherwise used by any other person who is not the intended recipient. If you receive this email in error, please telephone us upon receipt. You are strictly prohibited from using, copying or disseminating this or any information contained in it, save to the intended recipient. Internet communications are not secure and QVC is not responsible for their abuse by third parties, nor for any alteration or corruption in transmission, nor for any damage or loss caused by any virus or other defect. All messages sent to and from QVC may be monitored to ensure compliance with internal policies and to protect our business. Only official company business is endorsed by QVC. Company contact information is below. Customer Operations Centre: QVC, South Boundary Road, Knowsley, Merseyside, England, L70 2QA UK: 0800 514131 Rep of Ireland: 1-800 535949 Registered Office: QVC, Marco Polo House, 346 Queenstown Road, London, England, SW8 4NQ Company No. 02807164 __ 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] content little off in FF
From: [EMAIL PROTECTED]
There is only one more thing, the first paragraphe/sentence stays 'off', see
http://www.cmamali.org/koutiala.html
Try the following changes to your CSS -
#content {
font-family:arial, verdana, serif;
font-size:12px;
background:url(http://www.cmamali.org/images/pattern.jpg) no-repeat top left;
width:710px;
padding:0;
text-align:left;
margin:0 auto; /* this is a sufficient margin declaration */
/*margin:0;
margin-left:auto;
margin-right: auto;*/ /* these 3 are redundant and not needed */
padding-left: 75px; /* add this */
}
table {
font-family:arial,verdana,serif;
font-size:12px;
width:500px;
/*margin-left:75px;*/ /* Remove this */
padding:1px;
vertical-align:right;
text-align:left;
}
table.spec {
font-family:arial,verdana,serif;
font-size:12px;
width:500px;
/*margin-left:80px !important;
margin-left:75px; */ /* Remove these */
padding:1px;
vertical-align:right;
text-align:left;
}
So, the idea is to pad the content div to make room for the background image.
Everything else will be moveed over without using any margins.
Also, the vertical-align property does not take the value right. See -
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
and when you use a two-or-more word font family, such as Courier New, it must
have quotes around it in your string
font-family: Georgia, Courier New, serif; /* note that the trailing
comma comes _after_ the quote */
Scroll down to see paragraph starting If an unquoted font family name... -
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family
I hope that these suggestions help,
~holly
__
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] navigation bar
Hi list,
I am facing problem in creating a page with a
navigation bar -
MARKUP:
div class=main_container
div class=nav_bar
psome content here/p
/div
/div
STYLE:
.nav_bar
{
margin: 1%;
width: 15%;
background-color: grey;
height: 98%; // i tried 98% thinking 1%+1% margin
(top and bottom) accounted (also, is there a way to
have comments in CSS?)
}
.main_container
{
border: 1px solid black;
width: 100%;
height: 100%
}
Now, when this is rendered, the nav_bar shoots-out of
the containing div. So, what I noticed here is that
the properties width and height refer to the
content box of the element and calculated as x% of
width of parent element (is that right?).
So, is there a way for me to specify the values for
the above properties relatively (as percent) and keep
the nav_bar inside the containing div? - i.e. I want
the nav_bar to occupy whole left portion of the
screen, with a white space between the border of the
containing div.
Thanks for the replies,
Karuna
Try the revolutionary next-gen Yahoo! Mail. Go to
http://mrd.mail.yahoo.com/dc/landing
__
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] Bottom margin not displaying in IE7 within nested boxes
[EMAIL PROTECTED] wrote: I'm currently working on a page which requires a background image to use as a surrounding border to content. Within this box is another container which will have an image applied, and within that there will be 2 columns. In the example in the link below, I've used borders rather than background images to illustrate: http://www.phunkadelik.com/testbox.html In Firefox and older versions of IE, the bottom margins are present, however in IE7 it collapses despite having borders surrounding the containers. As far as I know, this is a bug in IE7 (and IE6.) It frequently loses the margin-bottom of floats when these are enclosed with any method which does not use an explicit clearing element. A solution, admittedly not very nice, could be the addition of two br style=clear:both / one just before the closing /div of inside, and the other before the closing tag of container Another solution is to avoid the use of margin on the floats and use padding on the containers instead: so, remove both margin: 8px and add padding: 8px to container and inside. I don't know if this solution is compatible with your final page. There are probably also other possible rearrangements. Hope this helps a little, Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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] problem with IE 6 and a border
JGardner wrote:
I have a red border under the navigation bar which displays correctly in
Firefox, but in IE there is a gap between it and the navigation.
The other problem is another border issue, the gold border around the image
on the page (it is a rotating image) has a gap between the bottom of the
picture and the gold border - again only in IE.
You can see the site/problem here http://www.wacochildrenstheatre.com/
Hi Jennifer:
If you add this declaration in your css:
img {
vertical-align: bottom;
}
It should take care of the problem. IE is allowing space under your
images for the descenders of elements.
Hope this helps,
Matthew
--
Matthew Ohlman
www.ohlman.com
__
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 with IE 6 and a border
Well, I here I am again with an IE problem. It is really two problems. I have a red border under the navigation bar which displays correctly in Firefox, but in IE there is a gap between it and the navigation. The other problem is another border issue, the gold border around the image on the page (it is a rotating image) has a gap between the bottom of the picture and the gold border - again only in IE. You can see the site/problem here http://www.wacochildrenstheatre.com/ Once again, any help would be greatly appreciated. You all amaze with your expertise!!! Thanks, Jennifer Be a better Globetrotter. Get better travel answers from someone who knows. Yahoo! Answers - Check it out. http://answers.yahoo.com/dir/?link=listsid=396545469 __ 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] problem with IE 6 and a border - solved
Wow, that fixed it!
Thank you Matthew - this group is truly amazing.
Jennifer
- Original Message
From: Matthew Ohlman [EMAIL PROTECTED]
To: JGardner [EMAIL PROTECTED]
Cc: CSS List css-d@lists.css-discuss.org
Sent: Thursday, August 9, 2007 8:42:35 PM
Subject: Re: [css-d] problem with IE 6 and a border
JGardner wrote:
I have a red border under the navigation bar which displays correctly in
Firefox, but in IE there is a gap between it and the navigation.
The other problem is another border issue, the gold border around the image
on the page (it is a rotating image) has a gap between the bottom of the
picture and the gold border - again only in IE.
You can see the site/problem here http://www.wacochildrenstheatre.com/
Hi Jennifer:
If you add this declaration in your css:
img {
vertical-align: bottom;
}
It should take care of the problem. IE is allowing space under your
images for the descenders of elements.
Hope this helps,
Matthew
--
Matthew Ohlman
www.ohlman.com
Shape Yahoo! in your own image. Join our Network Research Panel today!
http://surveylink.yahoo.com/gmrs/yahoo_panel_invite.asp?a=7
__
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] Loading CSS background images
Let's say a style sheet for an entire web site has 22 background images it references. However on one of the pages in the web site it only uses 5 of those background images. So does the site make 22 http requests to download all of those background images from the style sheet or does it only make 5 http requests and only download the 5 background images actually used on the page.. I'm new to CSS-Discuss, so if I'm doing this wrong I apologize. -- Mark W Improvement Direct, Inc. __ 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] IE6 spacing and white border issue
Checking.. site is best viewed on Firefox or Safari line is cut from the bottom part on IE7 because of the font size issue on IE. Troy http://primoris.com On 8/9/07, Pat [EMAIL PROTECTED] wrote: Hi, I am trying to figure out what I'm doing wrong here. I've created my web site and it seem to work fine in Safari and Firefox but has a spacing issue in IE6 (surprise.) There is a space between two divs and I can't seem to figure out the cause. It appears just below the icons (in the blue area at the top) on all the main sections of my site--www.siteandsounddesign.com. I've tried giving everything a margin and padding of 0 but nothing seems to help. Also, if anyone knows how to eliminate the white border on the main pages and the pop-ups I would be most appreciative too. If anyone has any idea how to fix either of these issues please let me know, thanks! -Pat - Be a better Globetrotter. Get better travel answers from someone who knows. Yahoo! Answers - Check it out. __ 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] IE6 spacing and white border issue
Pat wrote:
www.siteandsounddesign.com
I've created my web site and it seem to work fine in Safari and
Firefox but has a spacing issue in IE6 (surprise.) There is a space
between two divs and I can't seem to figure out the cause.
Also, if anyone knows how to eliminate the white border on the main
pages and the pop-ups I would be most appreciative too.
The following will work...
.boxtop img {vertical-align: bottom;}
body {margin: 0; padding: 0;}
However, I suggest you make an attempt on writing a more sensible (and
maybe even valid) source-code.
It would also be a good idea to test a bit more across browser-land, and
then create a somewhat more robust solution as a whole. What you got now
breaks in every browser on earth when a little font resizing is applied...
http://www.gunlaug.no/tos/alien/pat.png
regards
Georg
--
http://www.gunlaug.no
__
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] mixed units for table padding
On Thu, 9 Aug 2007, fantasai wrote: But a white border-left seems to do the trick: Good point. There's a 'transparent' color keyword for borders, btw. You can use that. There is, but it is not supported by IE, so it is much safer (though less flexible and sometimes less convenient) to set border-color to an explicit value. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ 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/
