Re: [css-d] Need Help with problem using floats Easy Clearing method - Take 2
It seems that the problem start occuring in Opera 8.0.2. It looks fine in the previous 8.0.1 Maybe they made a change in the last upgrade that renders the easy clearfix method unappliable. That would be bad. I'll see what I can find on their site. Pages identical in FF and Opera8 All seems fine Rob Suppose it is on 8.0.1? You're right: float uncontained. Background ends after / Brain bytes. Sorry... Steve 8.0.2 Thank you guys! -- JF Simard creative + code + logistics http://relabel.info/ Feed your eyes - http://netdiver.net/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Negative margin problem in Firefox 1.0.6
Lakshmi Natarajan wrote:
HTML: http://lnataraj.tripod.com/xhtml_css/photo_w_border_var_width2.html
CSS: http://lnataraj.tripod.com/xhtml_css/style.css .. sorry about the
tripod ads - it's free web hosting ;) my code is inside div id=container
It would have been hard to find among all these pop ups and jingles. And
its not free.
My problem is, when I stack them vertically, every other photo (2nd, 4th,
etc) has incorrect bottom border only on Mozilla. It's fine on IE and Opera.
This is entirely baffling to me. ...
I noticed that for other image sizes this does not happen. Could it be some
rounding error?
Firefox DomInspector computes the image height to 214.467px (Fx 1.0.5)
That may be a very exact sizing, but the old FF had some difficulties
with fractions of a CSS pixel (internally, it computes on a twentieth of
a point, TWIP). So rounding is not an error, but inevitable, sometimes
rounded up, sometimes rounded-off. They have fixed most of these
problems in FF 1.5 beta.
The original image is 400w x 300h
this
.photo300 .image { width:286px; }
forces a ratio of 1 : 1.398...
so the computed height would be ideally 214.5px
Anyway, it should become clear that this sort of image sizing via CSS is
not a good idea, when the following elements (your border) relies on
exact positioning of these computed fractional heights.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it possible to style a cell TD so that images inside of it with links have no border?
Bruce Searl wrote:
Hello all you CSS brains.
I've got what might be a simple no, or why would you? or You can - but you
shouldn't! sort of question.
But thus far all I've been able to do is nothing...
The goal is to apply formatting to a table or table cell, that will prevent the border
from showing if the image contained in it has a link around it... so instead of
typically
doing it like this:
tda href=link.aspimg src=image.jpg border=0/a/td
It would be something like this...
td border=0a href=link.aspimg src=image.jpg/a/td
Of course my above example won't work... the image will have a link box around it... is
there a correct CSS way to do it?
I have not treied this with an explicit test case, but I think it is
correct and the CSS SelectOracle(1) gives the expected explanation.
td img a {border:none;}
(1) http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
--
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Printing resized text
Ben Curtis wrote: It seems that only in very few places on the web can I resize my text, then print, and have the printed text respect the new size I've chosen. I do this often, because most pages print edge to edge, which is hard to read, so I print 2-up (two shrunken pages, side-by-side and rotated, on one sheet of paper) to mimic columns. But if the print is too small, I try to enlarge it before printing. Sometimes it works; most times it doesn't. Is there some CSS thing that either helps or hinders the print version taking the same resized text as the screen version? Although my reason for discovering the failure is not common, I suspect that people who enlarge text on the screen will want it larger on paper, and I don't want to get in the way of that. Interesting question. It is especially pertinent if you are thinking about using Zoom layouts, which make it even easier to enlarge text in ways that don't break a page into an unreadable mess. (1) Imagine letting people switch to a zoom layout and then print from that. This is a scenario that calls for no print style sheet, and having the zoom sheet set for type=screen, projection, print. Another scenario suggests having no explicit print style sheet, or one that makes absolutely no font-size declarations. (1) http://www.alistapart.com/articles/lowvision -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gaps Between List Items in IE
[EMAIL PROTECTED] wrote: Hello List, I don't have access to a server to post an HTML file, but if someone could look at the code below, and please tell me why in IE6 (pc) I have extra vertical space between my li elements. In Firefox, it looks fine. The odd thing is that if I put a 1px border on the li, the gap disappears (see it commented out below). You are seeing a common IE whitespace bug. The line break between each item is producing the space. Numerous fixes exist and you found one with the border. You could simply make the border the same as the background color. Or you could try other methods: - run all the LIs together on one continuous line - line break the LI in an unusual manner, such as: limiscellaneous stuff /lilimore stuff /lilietc/li -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning 2 column layout
Thanks for the help with the last problem, with patience and your assistance I was able to correct the problems. However, now I'm having another problem. I want to create a 2 column layout similar to this: http://www.ccac.edu/default.aspx?id=139163 I have achieved part of the look, but still having problems. http://cscc.edu/test/template.asp The part I am having problems with is making the side bar go all the way down regardless of the height of the content area. It seems to create a box effect. Don't worry about the list styles, font, etc, I'm just trying to get the sidebar correct. Any clues? Shawn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] false table
Hi,
I am trying to create a simple table that displays prices. I guess a real
html table can be used here, but i am trying to stick with what i have, or
close to it.
this is what i have
html
head
style type=text/css
body{ background-color:#ccc; color:#000; margin:0; padding:10px;}
div#currentTotal{border:1px solid #000; width:200px;}
span.rightside{float:right; display:block;}
span#total{border-top:1px solid #000;}
/style
/head
body
div id=currentTotal
pspan class=rightside$ 10.00/spanSubTotal/p
pspan class=rightside$ 2.99/spanShipping/p
pspan class=rightside$ 1.59/spanTax/p
pspan class=rightside id=total $ 14.58/spanTotal/p
/div
/body
/html
The problem is in order to float:right the prices, i need to put them before
the labels.
How can I modify my css so i have more appropriate html, ie
pSubTotalspan class=rightside$ 10.00/span/p
Thanks, Chuck
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d]
How can I modify my css so i have more appropriate html, ie pSubTotalspan class=rightside$ 10.00/span/p Thanks, Chuck __ Hi Chuck, Have you considered using a Definition List? You could then use the DT tags for your labels, and surround your prices in DD tags with the DD tags floated to the right and right aligned. Since the price is a description of the label, I think it should also be semantically correct, and both your label and price are in block-level elements. Just my thought for this rainy Friday... Janet __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[Fwd: Re: [css-d] false table]
chuck clark wrote: --- snip I guess a real html table can be used here, but i am trying to stick with what i have, --- snip a real table 'should' be used here...!?!? Why are you trying to do it without? Do you have an example we can look at... Cheers now Kristina __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] true table (was: false table)
Friday, September 16, 2005, 10:58:38 AM, chuck clark wrote: pSubTotalspan class=rightside$ 10.00/span/p Even less markup: trthSubTotal/thtd$ 10.00/td/tr Really, use a table... Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] false table
I don't know if this is what you were after, but
html
head
style type=text/css
body{ background-color:#ccc; color:#000; margin:0; padding:10px;}
div#currentTotal{border:1px solid #000; width:200px;}
span.rightside{float:right;position:relative;top:-18px;}
span#total{border-top:1px solid #000;}
/style
/head
body
div id=currentTotal
pSubTotalspan class=rightside$ 10.00/span/p
pShippingspan class=rightside$ 2.99/span/p
pTaxspan class=rightside$ 1.59/span/p
pTotalspan class=rightside id=total $ 14.58/span/p
/div
/body
/html
Ben M. Ward
On 9/16/05, chuck clark [EMAIL PROTECTED] wrote:
Hi,
I am trying to create a simple table that displays prices. I guess a real
html table can be used here, but i am trying to stick with what i have, or
close to it.
this is what i have
html
head
style type=text/css
body{ background-color:#ccc; color:#000; margin:0; padding:10px;}
div#currentTotal{border:1px solid #000; width:200px;}
span.rightside{float:right; display:block;}
span#total{border-top:1px solid #000;}
/style
/head
body
div id=currentTotal
pspan class=rightside$ 10.00/spanSubTotal/p
pspan class=rightside$ 2.99/spanShipping/p
pspan class=rightside$ 1.59/spanTax/p
pspan class=rightside id=total $ 14.58/spanTotal/p
/div
/body
/html
The problem is in order to float:right the prices, i need to put them
before
the labels.
How can I modify my css so i have more appropriate html, ie
pSubTotalspan class=rightside$ 10.00/span/p
Thanks, Chuck
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org http://evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] false table
chuck clark wrote: I am trying to create a simple table that displays prices. I guess a real html table can be used here, but i am trying to stick with what i have, or close to it. pspan class=rightside$ 10.00/spanSubTotal/p pspan class=rightside$ 2.99/spanShipping/p pspan class=rightside$ 1.59/spanTax/p pspan class=rightside id=total $ 14.58/spanTotal/p The problem is in order to float:right the prices, i need to put them before the labels. How can I modify my css so i have more appropriate html, ie pSubTotalspan class=rightside$ 10.00/span/p What you have in most invoicing is tabular data. Why don't you want to use a table? -- Cast your cares on the Lord and He will sustain you. Psalm 55:22 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning 2 column layout
Shawn Ferguson wrote: However, now I'm having another problem. I want to create a 2 column layout similar to this: http://www.ccac.edu/default.aspx?id=139163 I have achieved part of the look, but still having problems. http://cscc.edu/test/template.asp The part I am having problems with is making the side bar go all the way down regardless of the height of the content area. It seems to create a box effect. Don't worry about the list styles, font, etc, I'm just trying to get the sidebar correct. Any clues? Shawn Hello Shawn, To force a column aka Div to stretch to the bottom of the page without content irrespective of the adjacent columns content can be done by giving it a hight of 100%. This is providing you dont contain it within some other container. The normal practice in CSS is to fool the masses into believing it is a full height column by containing both your left and right columns in a wrapper div. Then in the wrapper div set a nice small graphic that is the width of your column as background and let it repeat -y position left. You can make the graphic any height that will transmit the info you want. Set the wrapper to 100% high and then your content can grow or shrink and it all looks great. When I was learning (still am but have got a little knowledge... dangerous!!) I used a number of templates that I found on the web. Downloaded them and pulled them apart. I often put borders all around every div with gaudy colours to see the relationships. This is sometimes difficult when some of the real masters let rip with coding a complex style sheet. All the best Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem aligning the tops of the side navigation and the main content
I managed to align the side navigation and main content along a
horizontal line in Firefox. However, in IE6 Win the alignment is
broken.
I guess it's because the side navigation is closer to the top in
Firefox (and I don't know why). I should mention that I used more divs
than I thought I would need precisely so I could position everything
with pixel-precision. Feel free to also comment on the html markup.
Here's a link to the html file in question http://216.180.231.91/~jnmartin/
and here is the text in the style
sheet--
/* styles for
html elements*/
html, body {
margin: 0;
padding: 0;
}
body {
color: white;
background: url(images/bg_image.gif) fixed;
font-family:Times New Roman, Times, New York, serif;
text-align: center;
}
h1 {
font: 900 italic 16px Times New Roman, Times, New York, serif;
letter-spacing: 0.11em;
}
#content p {
line-height: 148%;
}
/*++end of styles for html elements*/
/*++ navigation menus*/
#navmain{
position: absolute;
top:120px;
margin: 0;
padding: 0;
z-index: 999;
}
#navmain li {
list-style: none;
float: left;
margin-left: 2px;
padding-left: 16px;
font-size: 15px;
line-height:20px;
white-space: nowrap;
background: #5a url(images/tab_bg.gif) 0 100% no-repeat;
}
#navmain a{
display: block;
float: left;
padding: 0 18px 3px 0;
text-decoration: none;
font-weight: bold;
background: #5a url(images/tab_bg.gif) 100% 100% no-repeat;
color: #57b8ad;
width: .1em;
}
htmlbody #navmain a {width: auto;} /*fixes IE6 hack */
/*This comment hides the rule from IE5-Mac\*/
#navmain a {float: none;} /*End IE5-Mac hack\*/
#navmain a:hover {
color: white;
}
#navsec {
position: absolute;
top: 150px;
left: -33px;
list-style: none;
}
* html #navsec a {
width: 100px;
}
#navsec a {
font-size: 12px;
line-height:28px;
letter-spacing: 0.07em;
color: #57b8ad;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
background-color: #36;
margin-top: 1px;
margin-bottom: 3px;
padding-left: 10px;
border: 2px solid black;
}
#navsec a:hover {
color: white;
}
/*++ends nav menus*/
/*+++ div positioning and styling*/
#bigcontainer {
text-align: left;
position: relative;
width: 567px;
background: #5a;
margin: 20px auto;
padding: 0;
}
#smallcontainer {
position: relative;
top: 10px;
border: 1px solid yellow;
}
#pageheader {
position: absolute;
top: 0;
width: 567px;
height: 120px;
margin:0;
padding: 0;
background: #36 url(images/banner.gif) left top no-repeat;
z-index: 1000;
}
#pageheader span {
display: none;
}
#content{
background: #36 url(images/content_bg.gif) top no-repeat;
width: 400px;
position: relative;
top: 138px;
left:130px;
margin-top:30px;
padding: 10px;
border: 2px solid black;
}
/*++ends positioning*/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] false table
Hi Ben,
That works great! I am curious about the top:-18px; How do you arrive at
that value?
does it have anything to do with font size and line spaceing?
Thanks,
Chuck
On 9/16/05, Ben Ward [EMAIL PROTECTED] wrote:
I don't know if this is what you were after, but
html
head
style type=text/css
body{ background-color:#ccc; color:#000; margin:0; padding:10px;}
div#currentTotal{border:1px solid #000; width:200px;}
span.rightside{float:right;position:relative;top:-18px;}
span#total{border-top:1px solid #000;}
/style
/head
body
div id=currentTotal
pSubTotalspan class=rightside$ 10.00/span/p
pShippingspan class=rightside$ 2.99/span/p
pTaxspan class=rightside$ 1.59/span/p
pTotalspan class=rightside id=total $ 14.58/span/p
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] false table
chuck clark wrote:
div id=currentTotal
pspan class=rightside$ 10.00/spanSubTotal/p
pspan class=rightside$ 2.99/spanShipping/p
pspan class=rightside$ 1.59/spanTax/p
pspan class=rightside id=total $ 14.58/spanTotal/p
/div
As a side note, you could drop the class and go with p span {} instead of
span.rightside {}
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floating background without scroll bars
does anyone know/explain how the floating background is accomplished at this site http://www.sitevista.com thanks rush. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolutely position a div within a relatively positioned div?
Is there any way to absolutely position a div *within* a relatively positioned div? IOW, if div elements above the containing div were to expand and push the containing div down, the absolutely positioned div within would be moved with its containing div. If not, is there anything in CSS3 that would make it possible? TIA. -- T. R. Valentine Use a decent browser: Safari, Firefox, Mozilla, Opera (Avoid IE like the plague it is) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] At what point does it become more beneficial to use CSS?
On 16/09/05, Rick Faircloth [EMAIL PROTECTED] wrote: However, I just wonder...at what point does it become more desirable to use CSS as opposed to tables? Aren't tables more compatible? Is it a matter of CSS being easier to maintain in a group of designers or in a corporate setting where changes that come down the pipe are more easily made by changing style sheets? There are many benefits to using CSS, but IMO the most important is accessibility. Sure...CSS is less code, but in today's broadband world, is the difference in code really that significant? Sorry, but there are a LOT of people still using dial-up -- some happy to get 14.4 -- it is a mistake to *assume* everybody is broadband. -- T. R. Valentine Use a decent browser: Safari, Firefox, Mozilla, Opera (Avoid IE like the plague it is) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floating background without scroll bars
On 9/16/05, rashantha de silva [EMAIL PROTECTED] wrote: does anyone know/explain how the floating background is accomplished at this site http://www.sitevista.com It's just separate background images attached to diffferent elements - the fruit is attached to the body element, and the content area has the rounded cornered rectangle. Prabhath http://nidahas.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] At what point does it become more beneficial to use CSS?
Friday, September 16, 2005, 12:27:31 PM, Rick Faircloth wrote: at what point does it become more desirable to use CSS Good question. I say as use what you're comfortable with. If you don't understand it, or don't think you could fix it, maybe shouldn't use it on sites you build for others. But at some point you just have to dig in. People have been using CSS layout since before 2000 and 5 years later we have Yahoo, MSN, ESPN, Sprint and every blog on board... How much longer do you plan to wait? But this list is more for practical CSS usage help: http://css-discuss.incutio.com/?page=OffTopic While you're here, anyway, we can help. in today's broadband world... Ask me when my roommates are using Soulseek! Things can get /much/ slower than dial-up. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Problem with printing in IE6
On 9/15/05, Paul Debban [EMAIL PROTECTED] wrote: You could use your (new) print stylesheet to dump the float on #mainContent or pick another method to contain your floats in #mainContent. This didn't actually help, but it set me on the right path. For anyone who's interested, the problem has been resolved with a print stylesheet that specifies a clear: both style for #mainContent. Chris Long __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Absolutely position a div within a relatively positioned div?
T. R. Valentine wrote: Is there any way to absolutely position a div *within* a relatively positioned div? IOW, if div elements above the containing div were to expand and push the containing div down, the absolutely positioned div within would be moved with its containing div. Relative-positioned elements will move when pushed by a preceding (not absolute-positioned) element, and absolute-positioned elements that are positioned from within these relative-positioned elements will move with them. OTOH: absolute-positioned elements don't take up space, so they won't push other elements anywhere. That makes layouts that are relying on heavy use of absolute-positioning pretty difficult to keep under control. In layouts where heavy use of absolute-positioning is needed, some control can be achieved by nesting absolute-positioned containers and using dummy-containers to fix positioning-problems. It tends to end up even more complex than a deeply nested table-layout, so it is hardly recommendable. If not, is there anything in CSS3 that would make it possible? Not sure if I understand what you're after, but the *push* of following elements is easily achieved by simply _not using_ absolute-positioning at all. Think CSS1 is enough in most cases. Got a specific case where absolute-positioning has to be used? A link maybe? regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] strange gap and css bp checklist
I'm launching several sites this week and next - they all have the same problems so fixing them once will fix them everywhere - it occurred to me though that if there were a css best practices checklist - it might be easier to maintain standards ... such a thing out there? perhaps in your own personal toolbox? other than that on this site: http://dev.ironworkers.org - the big white gap at the bottom of the left column needs to go - it isn't on the interior of the site - the homepage has the 3rd col - the interior doesn't - what is causing it? Thanks, -Tanya __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Centering 2 cols layout
Can anyone please tell me how to center a 2-cols css layout inside the wrapper. Somehow, the left margin is larger than the right margin. I would like it to be equal to the right margin, and keep the layout centered in the wrapper. In case you need to look at the page in order to tell me, here is the url: http://www.koumbite.com/index1 Thanks for your help. -- ___ Sign-up for Ads Free at Mail.com http://promo.mail.com/adsfreejump.htm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange gap and css bp checklist
Tanya Renne wrote: other than that on this site: http://dev.ironworkers.org - the big white gap at the bottom of the left column needs to go - it isn't on the interior of the site - the homepage has the 3rd col - the interior doesn't - what is causing it? I do not know what is causing the gap, Tanya. It will be easier for someone to de-bug if you got rid of some of the human errors. Tidy Online http://infohound.net/tidy/ shows (and will correct some) of the 77 warnings and 4 errors. The markup validator shows 37 errors. Call the js from an external file and get rid of the markup problems-- things might look better. Or, at least the problem will be easier to pinpoint. Thanks, -Tanya Regards, ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] re: Is it possible to style a cell TD so that images inside of it with links have no border?
Sure just do this:
style type=text/css
td.noborder a img { border:0; }
/style
some html.
td class=nobordera href=link.aspimg src=image.jpg alt= //a/td
... more html
The style section goes between your head tags.
--
J Cornelius
www.jcornelius.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] At what point does it become more beneficial to use CSS?
On 9/17/05, Rick Faircloth [EMAIL PROTECTED] wrote: However, I just wonder...at what point does it become more desirable to use CSS as opposed to tables? Aren't tables more compatible? No - as soon as you try to allow any sort of flexibility into a table-based design you discover that the html specs allow multiple table sizing/rendering algorithms and that the browser vendors exploit this freedom to gain advantages such as render speed. Trying to make flexible tables consistent cross-browser is every bit as frustrating as css bugs can be. For me, one of the complelling arguments for css is SEO. Search engines like quality content early in the source. Many sites which have 800 lines of HTML (I've seen as many as 2000+) to lay out the top headers and left-navigation before the content starts would rank much higher if the content started on line 43. -- Richard Grevers New Plymouth, New Zealand Orphan Gmail invites free to good homes. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site check please
Hi, I'd appreciate it if some of you could check that a new site i'm working on in your browsers. It validates XHTML 1.1 and looks fine in IE6, Firefox 1.0.6 and Opera 8 on the PC. I'm mainly concerned about Macs. http://www.whistlebump.co.uk/test The download links will fail (until it goes live) as will the mailing list, so please don't try that. cheers, olly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering 2 cols layout
The problem:
You've set the margin on the body to be 100px all the way around. That's
fine, BUT, you then absolutely position c1 at left: 150px; which is
relative to the body element; meaning it will be positioned 150 pixels from
the left inner-edge of the browser window - which is 50 pixels more than the
margin set on the body. It would be position relative to the #wrapper div,
which is set to position: relative; BUT you did not put the wrapper div in
your HTML, so it is not being utilized. To make it work with out changing
much adjust the left value on #cl to be 100px, or adjust the margin on your
body to be 150px. Pick your poison.
#c1 {
border: 6px solid #A46B1C;
font-size: 0.9em;
padding: 16px;
position: absolute;
top: 100px;
left: 150px; /* positions left edge appear 50 pixels too far */
width: 320px;
background-color: #F1EBE4;
}
Change to:
#c1 {
border: 6px solid #A46B1C;
font-size: 0.9em;
padding: 16px;
position: absolute;
top: 100px;
left: 100px; /* 100px is the same as the body's margin */
width: 320px;
background-color: #F1EBE4;
}
There are better ways of centering layouts than what you have going on. I'd
suggest Googleing for something like centering layout + CSS
The page in general is poorly put constructed, and does not validate. You
are going to have a lot of cross-browser problems. I suggest you take a
look at some of the two column layout techniques on the CSS-D Wiki.
CSS-D Wiki: Two Column Layouts
http://css-discuss.incutio.com/?page=TwoColumnLayouts
Your validation results should be addressed:
http://validator.w3.org/check?verbose=1uri=http%3A//www.koumbite.com/index1
Good luck.
On 9/16/05 4:43 PM, M Moore-Racine [EMAIL PROTECTED] wrote:
Can anyone please tell me how to center a 2-cols css layout inside the
wrapper. Somehow, the left margin is larger than the right margin. I would
like it to be equal to the right margin, and keep the layout centered in the
wrapper. In case you need to look at the page in order to tell me, here is the
url: http://www.koumbite.com/index1
Thanks for your help.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unrelated divs seem to be interlinked on the bottom border.
Alan Chandler wrote:
http://www.chandlerfamily.org.uk/famtree/test2.html
which shows the bottom of the nested internal div (of class spouse)
somehow interacting with the bottom of div #menuapps.
The only possible linkage that I can see is through the clearfix
class, but I don't understand why. Can someone give me an
explanation so that I can have a clue as how to avoid it.
You're correct: it's clearfix interfering -- because 'clear: both;' will
also clear the menu.
One way to isolate the problem:
Add the following styles, with underscores and all, at the bottom of
your stylesheet:
@media all {
#pagebody {
margin: 0 5px 0 5px;
overflow: hidden;
_height: 0;
_overflow: visible;
}
#menuapps {
margin-right: 5px;
_margin-right: 2px;
}
}
What will happen is that 'pagebody' now becomes isolated from the
outside world, so the remaining 'clearfixes' inside pagebody won't
interact with menu (or anything else outside pagebody).
The '_' underscores is for IE/win, and the @media rule is to keep IE/Mac
from seeing these styles.
Now, I would probably use a table for a 'family tree' like that, or
maybe definition lists and/or ul -- and avoided all those nested divs.
I would also add a doctype, since my Tidy think it is good for 'XHTML
1.0 Strict' after a slight clean-up.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
On 9/16/05 9:50 PM, olly [EMAIL PROTECTED] wrote: Hi, ... I'm mainly concerned about Macs. http://www.whistlebump.co.uk/test Looks good in Firefox 1.0.6, Safari 2.0, Opera 8.02, and somewhat good in IE 5.2.3 for Mac OS 10.4.2 (Tiger). IE/Mac 5.2.3: Home page: The bottom of the second box - WhistleBump Records - is shifted off to the right by the width of the blue thumbnail image inside the box. About Us: Looks good Releases: The release-content box is appearing way off to the right. I'm not certain, but it looks like the top navigation may be pushing the release-content box out the the right as it is left aligned with the right outer-edge of the navigation. Mixes: Looks superb! Charts: The bottom box - Simon Haggis' September 20 - is shifted to the right by about 100px, which may be intentional. If so, I'd align both of them left. Links: Looks good Contact: Looks good All Pages: Hovering between home and about us causes the underline to appear below contact __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please--whistlebump
olly wrote: I'd appreciate it if some of you could check that a new site i'm working on in your browsers. It validates XHTML 1.1 and looks fine in IE6, Firefox 1.0.6 and Opera 8 on the PC. I'm mainly concerned about Macs. http://www.whistlebump.co.uk/test cheers, olly Olly, Mac/ie5.2 and Safari screen captures here http://www.browsercam.com/public.aspx?proj_id=191661. In XP_SP2 you are drawing a scroll bar at 800 in all my browsers. Other than that she's 'working' well in XP, albeit unreadable at any screen resolution in any browser (and text not zoom-able in ie). But then, I have the feeling I may be a lot older than your target market. Or am I? Regards, ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering 2 cols layout
M Moore-Racine wrote: Can anyone please tell me how to center a 2-cols css layout inside the wrapper. Hi, Give the wrapper a width either as a percentage or fixed and then set left and right margins to auto. remove the position relative. Also remove position absolute from #C1 reduce the margin and float left, #c2 can be floated either left or right. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
