Re: [css-d] Aligning List Of Name:Value Pairs On Colon
On 11/11/05, Graham Cook [EMAIL PROTECTED] wrote: And the reason that these fit more elegantly than a table? Compare the code above to a table below (which really should also should include thead, tbody and col id's), it it just so much more concise and no blank cells. trtdHomer/tdtdMarge's layabout husband/td/tr trtd/tdtdBart's dad/td/tr trtd/td tdSpringfields second biggest consumer of Duff/td/tr This is where rowspan comes into play ... trth rowspan=3 scope=rowHomer tdMarge's layabout husband trtdBart's dad trtdSpringfields second biggest consumer of Duff ... and we have no blank cells. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] Background image problem
Hi All, I sent this yesterday but haven't got any response and there was a problem with my email so I'm not 100% sure it got through. Basically I'm trying to fix some weird behavior I'm seeing with background images. I've set up a free web site to show this to you rather than try and explain it; it would be difficult to explain exactly what I'm talking about. Please ignore the banner ad on the following page; the important thing is the middle column of the page. When you load the page you'll see the three column layout with an extra class that gives the top of the middle section a nice shaded look. I added a text area to show where the issue is, try and resize the page horizontally. If you drag the window horizontally, making it smaller as you go, you'll eventually reach the limit of the text area, making the window any smaller causes the top CSS background image to start disappearing. Here's the URL: http://esdmsd.freefronthost.com/test.html Using the expression method stops this temporarily, but the window has a tendency to remove all the content in the page for no reason, resizing the page again sometimes fixes this but it isn't a proper solution. Has anyone got any ideas how I can fix this? Thanks. __ 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] dropdowns appear on top of div
This is an annoying problem, that crops up a lot on this list. I'll
add it as a wiki entry if no-one has a problem with that? I'm not
particularly knowledgable about the subject but I can probably knock
something up.
The problem is that some elements (drop-downs, and flash objects,
maybe more) in IE/win are drawn by the OS, and not by the browser, and
they show no respect for z-index.
The solution is to use an iframe behind the div, the iframe acts as a
opaque layer hiding the OS control. There's a guide here :
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
Its messy, hard to maintain, and its a lot easier to avoid the problem
by moving your popup or drop down so they don't clash. But where that
isn't an option, the above does work.
HTH
Sam
On 11/10/05, Polina Grinbaum [EMAIL PROTECTED] wrote:
so I am having a problem and I can't post an example right now cause i am
behind a firewall. I have a very simple hide/show javascript popup.
the popup is suposed to appear payed over on top of a form. however in ie 6
for pc the dropdowns appear on top of the poup, the input fields do not.
here is the css for the popup:
#popup {width:340px; height: 300px; background-color: #fff; display: none;
position: absolute; top: 10px; right: 3%; margin-top: 50%; margin-left:80%;
z-index:1}
obviously the javascript toggles the display property.
__
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-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] DIV heights not working with IE/Win
Hi I'm relatively new to CSS but I'm learning fast. I used the 3 column holy grail stylesheet from Glish http:// www.glish.com/css/7.asp and have been modifying it to suit my design. The problem is the div in the middle appears about 5 pixles slower than divs on the left and right that surround it - when viewed with IE/6 on Windows. FIne with other browsers. You can view the site here: http://www.tuggeranongcommunityfestival.com.au/new/ CSS is here: http://www.tuggeranongcommunityfestival.com.au/new/c/basic.css Any suggestions would be really appreciated. Cheers Jonno __ 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] dropdowns appear on top of div
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx Its messy, hard to maintain, and its a lot easier to avoid the problem by moving your popup or drop down so they don't clash. But where that isn't an option, the above does work. I avoided giving that solution as we really should not add extra markup that even shows up in assistive technology as another document just to fix a browser bug. Forms are hard to use as they are, no need to confuse matters even further. The easier option is to hide the elements when you open your popout, that way you keep the fix at least in the JavaScript and not in CSS, HTML and JavaScript. http://www.webreference.com/programming/javascript/form/2.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/
[css-d] Live blogging from d.Construct
Anyone who missed it; http://www.zachinglis.com/conference/dconstruct/dconstruct-live-post/ __ 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/
[WSG] Live blogging from d.Construct
Anyone who missed it; http://www.zachinglis.com/conference/dconstruct/dconstruct-live-post/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [css-d] Absolute Positioning or Float?
I am working on a personal page that will serve as a portfolio page and contact website. It will be in two-column format. I have read advantages for both, but was seeking advice on should I use absolute positioning or floating? (or does it matter?) I appreciate any insight on this topic! Hi Zach, I suggest floating instead of positioning. Also, this is very good read on this subject: + http://css.maxdesign.com.au/floatutorial/ Good luck! -- [EMAIL PROTECTED] www.adrianocastro.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] Matching column heights in a complexish layout
2. http://www.positioniseverything.net/easyclearing.html
Simply lose the height settings (as Zoe's said) then add the CSS from
[2] (above), applying it to your div#container like so:
div#container {
width: 800px;
margin: 66px auto 0px auto;
padding: 33px 25px 33px 25px;
color: white;
background-color: #756F65;
}
div#container:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
I tried using the easyclearing method [2] but was applying the fix to
the wrong div. Applying it to the #container div works perfectly. I
don't, however, fully understand the need this:
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
Could you please quickly explain?
Also, please note that I changed this:
* html div#container {height: 1%;}
To this:
* html div#container {height: 535px;}
As it's my min height.
Tks for everything. It's now working fine. Just trying to understand it.
--
[EMAIL PROTECTED]
www.adrianocastro.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/
[css-d] Who is up for a CSS challenge?
I hinted for some time now, that I was working on a ZenGarden-type site that simulates a CMS environment. CSS Zen Garden did and does a tremendous job in educating web designers in the ways of CSS and showed that you can completely redesign one HTML document with different style sheets. Now it is time we did the same for the enterprise level market, where high level CMS vendors still consider CSS too hard or not flexible enough to maintain the style of pages based on different templates and with varying content. Therefore I started the CSS Toolshed, and will go live with the site soon. The CSS tool shed is a CMS simulation that has: - A set of 4 templates for main page layout - Different content in the main content slot on each reload - the content will be different short articles on CSS and web development. So far only my entry is the only one: http://csstoolshed.com/showtime.php (Click through the different menus to see the different templates - top menu, left hand menu, bottom menu) I am very ready to go live with this, but I need some demo styles beforehand. With a variety of styles the impact can be a lot bigger than just with my sorry example. So, who is up for providing more initial styles? You can download the 4 sample templates and the blank css files together with a template guide and submission guidelines: http://www.csstoolshed.com/cssts_dl/cssts_templates.zip Put the final CSS files on your server and send them to me directly or via the submission form: http://csstoolshed.com/ouhpickme.php Thanks, and hopefully this will become a good resource for developers who cannot control the markup they have to style to the extend the ZenGarden allowed us to. regards Chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.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/
[css-d] page disapears in firefox
I know this page is way out in FF in terms of positioning (I have seen the opea version) but why can I not see anything except the bg colour in firefox?? http://www.nssdesign.scot.nhs.uk/about_us/nss_management.php http://www.nssdesign.scot.nhs.uk/about_us/nhs_aboutus.css __ 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] page disapears in firefox
[EMAIL PROTECTED] wrote: I know this page is way out in FF in terms of positioning (I have seen the opea version) but why can I not see anything except the bg colour in firefox?? http://www.nssdesign.scot.nhs.uk/about_us/nss_management.php http://www.nssdesign.scot.nhs.uk/about_us/nhs_aboutus.css display: inline on body is a typo, I guess. Interesting effect. 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] page disapears in firefox
On 11/11/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: why can I not see anything except the bg colour in firefox?? Well, it might have something to do with the 42 machine detectable syntax errors in the HTML ... http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nssdesign.scot.nhs.uk%2Fabout_us%2Fnss_management.php or the machine detectable syntax errors in the CSS ... http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nssdesign.scot.nhs.uk%2Fabout_us%2Fnhs_aboutus.cssusermedium=all ... but I don't intend to poke at it further until those problems are dealt with. http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] dropdowns appear on top of div
On 11/11/05, Christian Heilmann [EMAIL PROTECTED] wrote: The easier option is to hide the elements when you open your popout, that way you keep the fix at least in the JavaScript and not in CSS, HTML and JavaScript. That solution hadn't occurred to me before, its rather elegant solution I must say. But its not necessarily the magic bullet for all situations. Take my application for example : I have quite a complex web application/database. Every page has a Help button that when clicked displays a popup div with context sensitive help for that page. There is no knowing which elements might be obscured by the help because the help is dynamic and I encourage users to help write the help (its actually stored in a wiki), Also the user can move the help popup around using the titlebar, so at times only parts of elements might be obscured, you can't visible: hidden part of an element. If on clicking help, all select elements were to disappear then the help would be confusing because it would reference elements that have disappeared. I can't move the elements around so they don't obscure each other for exactly the same reason, so the only solution left to me that I know of is the iframe shim fix. I suppose I could interrogate the position of all elements and set visibility: hidden if they overlap. Or I could mess around with the clip element for a while, but the requirement that the element is absolutely positioned is too high a price to pay, Anyway that solution is more complex than the iframe fix. Yes its a pain but it is a practical solution to a real world CSS problem, which is exactly what css-discuss is supposed to be about. And this question does crop up a least once a month on this list. I avoided giving that solution as we really should not add extra markup that even shows up in assistive technology as another document just to fix a browser bug. Forms are hard to use as they are, no need to confuse matters even further. The solution can go purely in the Javascript where it belongs, without affecting the markup or CSS at all. The JS can then be served up to IE only, so its not semantic. But even though its all in JS, it is a fix to a real world common CSS problem. Sam __ 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] sitecheck / lists equal in ie+ff
thanks for your feedback!
I am aware of the a few css-friendly methods of embedding flash. however
i havent found a bulletproof (a.k.a. will-be-seen-in-any-browser)
method. satay seems to leave out a few (although legacy) browsers.
is this correct?
regards
- mga
Nice site! Looks good.
I thought I would comment on Flash and a few techniques on how one
would go about making it validate:
Technique 01: Use a Javascript method/function document.write the
Flash object.
Example site: http://www.hillmancurtis.com/
Example HTML: script type=text/javascriptRunFoo();/script
Example .js file: http://www.hillmancurtis.com/hc_web/js/food.js
( code: )
function RunFoo() {
document.write('object
classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0 width=400 height=300\n');
document.write('param name=movie
value=hc_web/index_page/portraits_conference.swf /\n');
document.write('param name=quality value=high\n');
document.write('embed
src=hc_web/index_page/portraits_conference.swf quality=high
pluginspage=http://www.macromedia.com/go/getflashplayer;
type=application/x-shockwave-flash width=400
height=300/embed\n');
document.write('/object\n');
}
( /code. )
Technique 02: Flash Satay Method:
http://www.alistapart.com/articles/flashsatay/
Technique 03: Flash Javay method:
(Post #3)
http://talkfreelance.com/thread125.html
Google search should yield more results for this method. Originated via
alistapart discussusion on the above Satay method, but the discussion
has been deleted/closed since the new ALA redesign. :(
It has been several months since I last looked-into this matter, so
other (better?) methods/techniques are probably floating around
cyber-space. I personally like the first technique. The Satay method
takes-away a lot of control a developer has when it comes to the Object
Parameters.
__
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] sitecheck / lists equal in ie+ff
I don't see a difference in the lists on this page between FF and IE. Have you fixed it? Zoe no... difference is minimal but enough to upset me... heres a screenshot. notice the green ovals. i had to make margins for the lis really small so it would fit in IE. li margins in IE are not equal to those in FF even though it is the same stylesheet. also the tabbed item is slightly separated from the bottom. http://www.alleati.com/mga/musa-frustration.gif taken from page: http://www.museoarqueologico.com/culturas/guane.php - mga __ 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] IE 6 broke the page !
Hello everybody, I'm working on a new template for phpBB. It's not yet fully finished. And after making it compatible both for Firefox and IE, there is still little details that I can't perform as well. Under Firefox, it looks perfect, but how can I avoid the little blank on the left side (near the navigation bar) under IE6 ? There it is: http://blog.afrikart.net/tg2 Thanks a lot _ xcuz me bcz im'not very good in english _ _/ principe et valeur www.cowboy.salifa.com ___ Appel audio GRATUIT partout dans le monde avec le nouveau Yahoo! Messenger Téléchargez cette version sur http://fr.messenger.yahoo.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] sitecheck / lists equal in ie+ff
Mauricio Giraldo Arteaga wrote: http://www.alleati.com/mga/musa-frustration.gif taken from page: http://www.museoarqueologico.com/culturas/guane.php You may possibly pull up the bottom in IE/win by applying some 'overflow: hidden' on a defined height. Even a float-construct with negative margins may work to your satisfaction. However, once that page has become readable in any browser, it no longer looks like any of those screenshots[1]. A typical case of House On Fire[2], me thinks. regards Georg [1]http://www.gunlaug.no/tos/alien/frustration.png [2]http://www.gunlaug.no/contents/molly_1_02.html -- 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] TR styles ignored in CSS
I'm trying to clean up a table with CSS in an XHTML 1.0 Transitional page. I'd like to redo all of the tr bgcolor=#xx tags with classes pointing to the two colors I'm using, but I'm having problems. I can successfully change the background color of ALL rows by using a tr declaration, but if I try instead to declare a class, the corresponding row uses the color of the containing div#werke instead. Is this a cascading/specificity issue, or is it not possible to apply classes to tr elements? There's a working version with the HTML styling at http://phidler.com/rosner/index3.html The version exhibiting the problem I'm having is http://phidler.com/rosner/index4.html (the bright yellow isn't a design preference, just for testing the behavior) Appreciate any help. Paul __ 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] FF Menu Problems
This site is still very much under construction, so not all the links work, etc. I am using the suckerfish drop down menus, but the sub-sub menus don't show up in Firefox. They work in IE but since IE is the crazy browser :) I am sure it's something I am doing wrong. Specifically there should be sub menus under projects in the foundation list item. Any ideas? www.jinnyruth.com/lassen Thanks so much, I've been going crazy! __ 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] TR styles ignored in CSS
Is this a cascading/specificity issue, or is it not possible to apply
classes to tr elements?
http://phidler.com/rosner/index3.html
http://phidler.com/rosner/index4.html (the bright yellow isn't a
design preference, just for testing the behavior)
You define background for TH and TD first, then the one for TR. As TR
does not have a content the background does not get applied, but the
ones for the TH and TD still apply.
Furthermore you cannot start classes with a digit, but should use a letter.
So,
tr.odd td, tr.odd th{
... settings ...
}
will get applied
th,td{
}
tr.odd {
...
}
will not.
Lots of table styling examples: http://icant.co.uk/csstablegallery/
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.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] FF Menu Problems
Problem solved! Thanks. The funny thing is, I did validate several of the pages. weird. __ 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] Problems with DIV and ubication in page
From: Reynier Perez Mira [EMAIL PROTECTED]
Well, after I read and read the pages you leave me and probe the code, I
obtain the same error. You can take a look at
http://www.jovenclub.cu/grm/index.php The DIV for images still appear
over other DIV elements. How can I fix them? They really look ugly.
If I'm understanding the problem, your little images are covering divs that
come after them in the source, sometimes. Those little images are align=right
which works like floating them. In that light, you'll probably need to add a
clearing element of some kind after the images but before the next div in order
to get them to not overlap.
div class=clear nbsp; /div
.clear {
clear: both; /* you could use clear: right; if they all are on the right */
height: 0;
line-height: 0;
font-size: 1px;
}
I hope that helps,
~holly
__
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] Who is up for a CSS challenge?
So, who is up for providing more initial styles? Sounds interesting. If only I could find the time. Good luck! AD -- [EMAIL PROTECTED] www.adrianocastro.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] Matching column heights in a complexish layout
From: Adriano Castro [EMAIL PROTECTED] Found a very good tutorial online [1]. Managed to get it working for IE but Mozilla doesn't adjust the height of the container div. I'm a bit lost here. I think my problem is the one defined on PIE's How To Clear Floats Without Structural Markup [2] but having tried the proposed solutions I still can't get it to work. Ideas? 1. http://css.maxdesign.com.au/floatutorial/ 2. http://www.positioniseverything.net/easyclearing.html Here's what I currently have: Markup: + http://dev.adrianocastro.net/help/0004/0004.a.html CSS: + http://dev.adrianocastro.net/help/0004/0004.a.css In my experience, easyclearing fails sometimes, due probably to other issues on a given page. So solve your problem it looks like you'll need to add a clearing element right before the close of #main. You'll also need to make sure browsers other than IE do NOT see the height you've set up on #container, because they will obey it, despite the min-height you've set for them. Hope that helps, ~holly __ 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] IE 6 broke the page !
45 validation errors? I don't know if one of those errors is causing your problem but a lot of possible causes could be eliminated by having a page with valid markup. As a fairly new developer one of the most valuable tools I use is http://www.validator.w3c.org Folks on this list are an invaluable resource, but it's good to remember we all spend a lot of our time wading through each other's code to meet the challenges presented. It's cool to start with a page that has the errors that are easily eliminated by the page-builder taken care of. :) After that, abundant help is usually forthcoming. Don't mean to preach here; I've just learned the hard way that the lististas here appreciate being met half way. HTH Bill Scheider -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of CoWBoY :-) Sent: Friday, November 11, 2005 7:06 AM To: CSS List Subject: [css-d] IE 6 broke the page ! Hello everybody, I'm working on a new template for phpBB. It's not yet fully finished. And after making it compatible both for Firefox and IE, there is still little details that I can't perform as well. Under Firefox, it looks perfect, but how can I avoid the little blank on the left side (near the navigation bar) under IE6 ? There it is: http://blog.afrikart.net/tg2 Thanks a lot _ xcuz me bcz im'not very good in english _ _/ principe et valeur www.cowboy.salifa.com ___ Appel audio GRATUIT partout dans le monde avec le nouveau Yahoo! Messenger Téléchargez cette version sur http://fr.messenger.yahoo.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-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] Use of non-standard font in declaration?
Hi there,
I'm working with an agency who is providing us some code. After a preliminary
look, they have
declared some fonts as Interstate-Regular:
.SubMenu a { font: 11px Interstate-Regular, Verdana; color: #947D37;
text-decoration: none; }
This seems to be some kind of Impact clone. It seems to display on my Windows
machine, but I
don't remember this being what I'd consider a standard web font, particularly
across platforms.
I'm particularly concerned because the x-width of Interstate-Regular vs.
Verdana is quite
different. (They also need to declare a generic font family, which I will make
sure they do.)
Can anyone advise on how widespread Interstate-Regular is? I've never heard of
it but maybe I
missed the meeting. My feeling is that this is not a good idea, but it's a
design decision that I
don't have a whole lot of control over, so I need to come back with some
serious data if I'm going
to go against it.
TIA
Tom
http://www.pixelmech.com/
I was in a convenience store reading a magazine and the clerk came up to me
and said This is not a library. so I said, All right, I will talk louder
then!
__
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] Use of non-standard font in declaration?
Tom Dell'Aringa wrote:
.SubMenu a { font: 11px Interstate-Regular, Verdana; color:
#947D37; text-decoration: none; }
I
don't remember this being what I'd consider a standard web font,
particularly across platforms. Can anyone advise on how widespread
Interstate-Regular is?
The best source for this sort of information that I know of is
CodeStyle http://www.codestyle.org/. As you can see,
Interstate-Regular doesn't make the radar for any platform. Having said that:
I'm particularly concerned because the x-width of Interstate-Regular
vs. Verdana is quite
different. (They also need to declare a generic font family, which I
will make sure they do.) My feeling is that this is not a good idea
I don't see how it isn't a good idea, just so long as you design with
some flexibility in mind - which you should probably do, anyway. The
thing is, even something as generic as Arial only shows at 95% on the
survey, so you can never be certain how your viewers will be seeing
your page. Allow flexibility in all dimensions and you will be much
safer. Here the designers have provided an obscure ideal font, a
reasonably generic specific fall-back, and you'll add the really
generic fall-back. That part is done completely correctly, even if
the named fonts are quite different. The trick is in making a
flexible layout that accommodates this way of doing business.
-Adam Kuehn
__
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] Skinning/style switching issue
Hey all,
I have a container with two side-by-side floats in it. The left float
has a border-right to make it look like a separator. The issue was that
I would never know which column was longer, but wanted them both to look
the same height, so I borrowed a technique/hack from
PositionIsEverything and applied :
padding-bottom: 500px;
margin-bottom: -500px;
to my right-hand float, so that I was guaranteed that the separator
would reach the bottom of both columns. This container is contained
within a div with overflow: hidden, so it only goes the length of the
content (~ 75px), not the full 500 pixels. All is good and well, and
when the styles load, it works in both Firefox and IE6/PC, which are the
browsers we support.
The problem arises when I switch stylesheets in Firefox. We are able to
skin our site to either green or blue, and when I apply the alternate
stylesheet (which is EXACTLY the same, except for colors), my container
stretches the full 500 pixels. If I load the site with blue initially,
it's fine. If I load it with green initially, it's fine. When I switch
them through the interface, no matter from which color to which, it
stretches.
Why does this happen?
Unfortunately this is on an intranet, so I can't really send a link
The code looks roughly like this:
.portlet {
float: left;
width: 360px;
overflow: hidden;
}
.my_links {
float: left;
width: 180px;
padding-left: 5px;
padding-right: 10px;
border-right: 1px;
border-left: 0;
border-top: 0;
border-bottom: 0;
border-color: silver;
border-style: solid;
height: 100px;
padding-bottom: 500px;
margin-bottom: -500px;
}
.my_drives {
float: left;
width: 170px;
padding-left: 10px;
}
div class=portlet
div class=my_links
ul . /ul
/div
div class=my_drives
ul . /ul
/div
div class=footer div
/div
Thanks!
Robyn
__
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] Skinning/style switching issue
The problem arises when I switch stylesheets in Firefox. We are able to
skin our site to either green or blue, and when I apply the alternate
stylesheet (which is EXACTLY the same, except for colors), my container
stretches the full 500 pixels. If I load the site with blue initially,
it's fine. If I load it with green initially, it's fine. When I switch
them through the interface, no matter from which color to which, it
stretches.
Why does this happen?
Does the switcher use Javascript or PHP?
There's an alternative to your method of full length separators. Do this:
#left { border-right:1px solid #000; }
#right { border-left: 1px solid #000; margin-left:-1px; }
This gives the two columns the same border in the middle, and then
brings the right column to the left so that the two border lines
overlap, and look like just one line. Much easier than this
padding-margin stuff.
--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.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] Skinning/style switching issue
Robyn wrote: Why does this happen? Unfortunately this is on an intranet, so I can't really send a link Using the build-in style switching feature in Fx (1.0.5/1.5b2), I wasn't able to reproduce the problem, neither on Alex' original file nor on a modified standalone version of your code snippet (unfortunately, code snippets are next to useless for debugging). Please provide an URL to a minimal test case which reproduces the problem with the Fx version you are testing in, the problem would be serious for the mentioned technique. 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/
[css-d] List question
I have an unordered list where each list item has it's width set to 50% and is floated left to acheive a two-column effect, which works good. There is also a second level list inside each of the main list items that I want to display in a typical list fashion. The problem I'm having is when a 1st level list item's sub list is long, and the 1st level list items to the right of it either don't contain a sub list or are short, they won't uphold the two-column effect as is expected. An example of the HTML is: ul li a href=First Level Nav Item 1/a ul li a href=Second Level Nav Item 1/a /li li a href=Second Level Nav Item 2/a /li li a href=Second Level Nav Item 3/a /li li a href=Second Level Nav Item 4/a /li /ul /li li a href=First Level Nav Item 2/a /li li a href=First Level Nav Item 3/a /li /ul The following will happen: First Level Nav Item 1 First Level Nav Item 2 Second Level Nav Item 1 First Level Nav Item 3 Second Level Nav Item 2 Second Level Nav Item 3 Second Level Nav Item 4 My question is what is the best way to get First Level Nav Item 3 to carry underneath of First Level Nav Item 1 no matter how long it gets. __ 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] Matching column heights in a complexish layout
From: Adriano Castro [EMAIL PROTECTED]
2. http://www.positioniseverything.net/easyclearing.html
I
don't, however, fully understand the need this:
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
The display: inline-table is for IE5/Mac. The following container contains
fixes for IW/Win browsers (the * html line) and other browsers, to reset the
display that IE5/Mac was given, which those other browsers read as well.
Also, please note that I changed this:
* html div#container {height: 1%;}
To this:
* html div#container {height: 535px;}
As it's my min height.
If it's working for you, who's to argue, eh? :-)
~holly
__
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] using legend on non-form elements
This is probably a stupid question... (but you know what they say :p ) I have two groups on my sidebar: -1, a css-grouped form for user login within a fieldset and legend. -2, a stats table (tabular data) My idea, is to get both these elements to appear the same, at least as far as the legend is concerned. I used some margins and font sizing to make it pretty close, but i'm afraid once font sizes change/zoom thatit will break. Would it be considered bad to wrap non-form data (in this case, my data table) with a fieldset and give it a legend tag, thus making my markup of the two groups similar? I know i'm already going to have issues with text zoom on the fixed-width sidebar (I plan to change that later down the road) and example of what i'm playing with is here: http://www.hondaswap.com/index_v5.php __ 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] Styling COL and COLGROUP revisited
Okay, for those of us who remember my question about styling columns here is
the solution I came up with (for my current project anyway). It takes advantage
of the fact that Firefox *does* allow for the background of columns to be
styled while still keeping everything very tight (notice that no style rule is
ever declared more than once and the assigning of classes is kept to a bare
minimum). Thanks to all those who responded to this onlist and offlist before.
Christian Z.
style
COLGROUP { background-color: #E1E4E4; }
TBODY, THEAD { text-align: left; }
TD { font-weight: bold;
text-align: center; }
TH { color: #FF; }
.col2 { background-color: #CCD2D2; }
/style
table cellpadding=5
thead
tr style=background-color: #447E2F;
th scope=col row style=background-color: #E1E4E4; color: #00; width:
200px;This cell is the beginning of the first row emand/em the first
column./th
th scope=colColumn #1/th
th scope=colColumn #2/th
th scope=colColumn #3/th
th scope=colColumn #4/th
/tr
/thead
colgroup
col style=background-color: #86AC4F; /
/colgroup
colgroup
col /
col class=col2 /
col /
col class=col2 /
/colgroup
tbody
tr
th scope=rowRow #1/th
tdX/td
tdX/td
tdnbsp;/td
tdX/td
/tr
tr
th scope=rowRow #2/th
tdnbsp;/td
tdX/td
tdnbsp;/td
tdX/td
/tr
tr
th scope=rowRow #3/th
tdnbsp;/td
tdX/td
tdnbsp;/td
tdX/td
/tr
tr
th scope=rowRow #4/th
tdnbsp;/td
tdnbsp;/td
tdX/td
tdnbsp;/td
/tr
/tbody
/table
___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.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] Create the background image?
Hi, I am embarassed to ask for advice on this matter, but am in the dark about how to create the background image for 'faux columns'. I have fireworks, and am assuming it can be done here. The main problem I have is applying the different colors(columns) to the image. I am designing a two column layout. I would appreciate any direction on this matter. Thanks alot, Zach Byrd __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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] Who is up for a CSS challenge?
I hinted for some time now, that I was working on a ZenGarden-type site that simulates a CMS environment. Therefore I started the CSS Toolshed, and will go live with the site soon. You can download the 4 sample templates and the blank css files together with a template guide and submission guidelines: http://www.csstoolshed.com/cssts_dl/cssts_templates.zip Why do you have the form wrapped around the entire page? It seems to me that you're losing a valuable styling hook by not wrapping the form around just the login elements. __ 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] Who is up for a CSS challenge?
Why do you have the form wrapped around the entire page? It seems to me that you're losing a valuable styling hook by not wrapping the form around just the login elements. yeah, was that a mistake? -- -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.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] horz nav bar in IE5Mac / site check Windows
Trish,
On Nov 10, 2005, at 2:14 AM, Trish Meyer wrote:
I've spent all weekend reading Dan Cederholm's excellent book
'Bulletproof Web Design, and was following the general idea in
Chapter 2 for a scalable nav bar for my latest volunteer site:
http://www.collageartists.org/test3.html
CSS at
http://www.collageartists.org/stylesheets/caa3.css
The nav bar works okay in Safari and Firefox on Mac, but falls apart
in IE5.2 on Mac (the gradient continues across the page).
IE/mac was was written when CSS 2.0 was the standard. It said floats
had to have a defined width. therefore, floats without a width expand
to 100% of the parent container, just like other block level elements.
This does not affect windows versions of ie.
I'm not sure which is the best filter to target ie/mac, but something
like this should work.
* html #navul li { width: 6em; }
hth
Roger,
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] PVII Menu adjustments for Horizontal Menu
I have just used the PVII Pop Menu Magic Tool to create a horizontal menu.
The menu has 5 items in it and the total width of the menu is 650px wide.
The code in the css file generated by Pop Menu Magic sets each item in the
menu at a certain number of pixels, in this case, I have set it to 130px, as
5 x 130px = 650px.
The trouble is, some of these menu items are small, some are a lot longer. I
want the larger menu items to have a larger portion of the 650px and the
smaller menu items to have a smaller portion of the 650px.
The code for the menu width in the css file is:
/* Top level menu width */
#p7PMnav li {
float: left;
width: 130px;
}
#p7PMnav ul li {
float: none;
}
Is there some way to have it so the widths will automatically set and adjust
depending on the size of the menu items themselves? I don't want them all
the same width.
(Was that clear, if not, I'll upload it somewhere)
Joanne
__
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] PVII Menu adjustments for Horizontal Menu
From: Joanne [EMAIL PROTECTED] I have just used the PVII Pop Menu Magic Tool to create a horizontal menu. The menu has 5 items in it and the total width of the menu is 650px wide. The code in the css file generated by Pop Menu Magic sets each item in the menu at a certain number of pixels, in this case, I have set it to 130px, as 5 x 130px = 650px. Is there some way to have it so the widths will automatically set and adjust depending on the size of the menu items themselves? I don't want them all the same width. (Was that clear, if not, I'll upload it somewhere) Hi Joanne, This section in the Pop Menu Magic User Guide should help you: http://www.projectseven.com/products/menusystems/pmm/user_guide/styling/menu_widths/hz_root_varwidth.htm Sorry 'bout the long link ;-) Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ 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] PVII Menu adjustments for Horizontal Menu
I deleted everything and started with a fresh menu in case I was doing
something wrong. I used the Horizontal setting with the default style and
added the code from your tutorial on the bottom line.
In Firefox Opera, the width is dependant on the size of the text, and they
all line up across the page aligned to the left (so there's an empty gap to
the right - which I'd like to have all centered later, but it's no big deal
if I can't). In IE however, each menu item spans across the entire width of
the page and they are listed one under each other.
How do I fix this?
The CSS code is below:
/*
---
PopMenu Magic Style Sheet
by Project Seven Development
www.projectseven.com
Menu Type: Horizontal
Style Theme:0 -Basic Style
---
*/
#p7PMnav {
margin: 0;
padding:0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
border-left: 2px #ff solid;
border-right: 2px #ff solid;}
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#p7PMnav ul {
margin: 0;
padding: 0;
background-color: #394c2e;
border: 1px solid #00;
position: absolute;
left: -9000px;
z-index: 1;
}
#p7PMnav a {
display: block;
text-decoration: none;
padding: 4px 10px;
color: #66;
line-height:1;
}
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
background-color: #0066FF;
color: #FF;
letter-spacing: .01px;
}
/* -- the current page marker style -- */
#p7PMnav .p7PMmark {
color: #33;
font-weight: bold;
}
/* -- the trigger link styles --- */
/*the trigger link */
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {
background-image: url(img/p7PM_dark_east.gif);
background-repeat: no-repeat;
background-position: right center;
}
/* the active trigger link style */
#p7PMnav .p7PMon {
background-color: #0066FF;
color: #FF;
}
/*the submenu classes */
#p7PMnav .p7PMhide {
left: -9000px;
}
#p7PMnav .p7PMshow {
left: auto;
z-index: 2 !important;
}
/* Top level menu width */
#p7PMnav li {
float: left;
width: 124px;
}
#p7PMnav ul li {
float: none;
}
#p7PMnav ul, #p7PMnav ul li {
width: 172px;
}
#pmmcrumb {
font-weight: bold;
margin-bottom: 16px;
color: #33;
}
#pmmcrumb a, #pmmcrumb a:visited {
font-weight: normal;
color: #535FAC;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
font-weight: normal;
color: #33;
}
/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width. */
#p7PMnav li {width: auto;}
Joanne
__
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] Who is up for a CSS challenge?
On Nov 11, 2005, at 6:31 PM, Christian Montoya wrote: Why do you have the form wrapped around the entire page? It seems to me that you're losing a valuable styling hook by not wrapping the form around just the login elements. yeah, was that a mistake? Maybe this: The form tag is there because this is an asp.net application which require forms for server-side interaction. ? Got me though... I am not an asp.net dude. M __ 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] clearing clears sidebar too
Hi all, I hope this isn't too much of a challenge. I hope it's really easy to fix... a really common error (that I just can't seem to find anywhere). I've got a new site mostly designed, but have run into a problem, which I've explained in the body copy of the page at: http://www.collageartists.org/test7x1.html Basically, adding a clear: both to the headers in the main content area, ALSO clears the #leftcol (sidebar). #leftcol is a floated element, and #content moves to the right thanks to a left margin. Everything is positioned: relative, nothing is absolute (if that helps). The CSS is at http://www.collageartists.org/stylesheets/caa7_x1.css Please help! I've troubleshooted this for hours and can't figure out how to fix it. thank you thank you thank you, Trish -- ___ \ Trish Chris Meyer/CyberMotion: Motion Graphics Design Effects \ recent projects clients: http://www.cybmotion.com/projects \ books, video, articles: http://www.cybmotion.com/sharing \ music (including Alias Zone): http://www.cybmotion.com/music \__ __ 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] clearing clears sidebar too
On Nov 11, 2005, at 9:52 PM, Trish Meyer wrote:
Hi all,
I hope this isn't too much of a challenge. I hope it's really easy to
fix... a really common error (that I just can't seem to find
anywhere).
I've got a new site mostly designed, but have run into a problem,
which I've explained in the body copy of the page at:
http://www.collageartists.org/test7x1.html
Basically, adding a clear: both to the headers in the main content
area, ALSO clears the #leftcol (sidebar). #leftcol is a floated
element, and #content moves to the right thanks to a left margin.
Everything is positioned: relative, nothing is absolute (if that
helps).
The CSS is at
http://www.collageartists.org/stylesheets/caa7_x1.css
Please help! I've troubleshooted this for hours and can't figure out
how to fix it.
thank you thank you thank you,
Trish
Have you tried clear: right?
I did not look at your CSS, and that probably is not the best solution,
if it is a solution at all... It sounds like a problem I have had b4,
and clear:right was a fix.
You may also want to try an inner content wrap (put inside content div
and wrap around all #content content... maybe something like this:
#innerContentWrap {
width: 100%;
float: left;
}
Hth, I am sure someone will give a waay better answer.
BTW, why are you clearing the headers in the first place? I have only
glanced at your code and source, so I apologize in advance if I send
you on a wild goose chase.
Micky
--
(((º`·.¸¸.·´¯`·.¸.·´¯`·...¸º
·´¯`·.¸. , . .·´¯`·...¸º`·.¸¸.·´¯`·.¸.·´¯`·...¸º
__
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] clearing clears sidebar too
On Nov 11, 2005, at 9:52 PM, Trish Meyer wrote: I've got a new site mostly designed, but have run into a problem, which I've explained in the body copy of the page at: http://www.collageartists.org/test7x1.html Basically, adding a clear: both to the headers in the main content area, ALSO clears the #leftcol (sidebar). #leftcol is a floated element, and #content moves to the right thanks to a left margin. Everything is positioned: relative, nothing is absolute (if that helps). The CSS is at http://www.collageartists.org/stylesheets/caa7_x1.css At 10:11 PM -0800 11/11/05, Michael Hulse wrote: Have you tried clear: right? ...BTW, why are you clearing the headers in the first place? I have only glanced at your code and source, so I apologize in advance if I send you on a wild goose chase. Thanks Michael, I added so much copy to the right of the first image that it probably wasn't clear why I was clearing (no pun intended). Check the page out again. I tried clear: right only, but it doesn't move heading 2 down below the first image in Contents. I'll try the inner content wrap idea to tomorrow (too fried now!). I've since looked at it on Windows, and in Explorer the entire #contents is moved below the sidebar. On the Mac (Safari and Explorer), only the Heading 2 paragraph moves down to clear the sidebar. Maybe in the morning it will look easier...! Trish -- ___ \ Trish Chris Meyer/CyberMotion: Motion Graphics Design Effects \ recent projects clients: http://www.cybmotion.com/projects \ books, video, articles: http://www.cybmotion.com/sharing \ music (including Alias Zone): http://www.cybmotion.com/music \__ __ 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] Who is up for a CSS challenge?
Why do you have the form wrapped around the entire page? It seems to me that you're losing a valuable styling hook by not wrapping the form around just the login elements. yeah, was that a mistake? Nopes. If you work in .NET, then there will be one form for the whole document. A really annoying shortcome which will be changed in the next version - or so my MS Tech developers keep telling me. http://msdn.microsoft.com/msdnmag/issues/05/09/CuttingEdge/#S4 There are ways around it though. OFF-Topic, sorry -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.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] clearing clears sidebar too
Trish Meyer wrote:
http://www.collageartists.org/test7x1.html
Basically, adding a clear: both to the headers in the main content
area, ALSO clears the #leftcol (sidebar). #leftcol is a floated
element, and #content moves to the right thanks to a left margin.
Didn't have time to look at your CSS, but adding the following will give
you a stable layout.
#wrapper {display: table;}
#content {float: left; margin: 0 -10px 0 15px;}
The solution is based on 'float' as isolated container (with altered
margins to go with it). Clearing inside a float won't react on anything
outside the float.
The 'display: table;' on wrapper makes the wrapper extend below the
floats in all good browsers as if there was a 'clear: both' down there.
IE/win do the same based on the 'hasLayout' bug/concept[1].
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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] clearing clears sidebar too
Okay, maybe I'm seeing two issues then. Even when I remove the clear: both style from the headings in the #content section, the entire #content moves down below the sidebar on IE Windows ONLY. It looks okay in Mozilla and Mac when I don't clear, so clearing is a red herring for now. I think this is beginning to sound familiar though. The page with NO clearing (that I was going to show the client...) is at: http://www.collageartists.org/test7.html The CSS is at http://www.collageartists.org/stylesheets/caa5.css so the clear:both is a problem on Mac (and probably also IE Windows), but first I have to fix the #content moving down problem first I think. thanks for any help, aargh, Trish -- ___ \ Trish Chris Meyer/CyberMotion: Motion Graphics Design Effects \ recent projects clients: http://www.cybmotion.com/projects \ books, video, articles: http://www.cybmotion.com/sharing \ music (including Alias Zone): http://www.cybmotion.com/music \__ __ 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] clearing clears sidebar too
Hi trish,
On Nov 11, 2005, at 9:52 PM, Trish Meyer wrote:
Please help! I've troubleshooted this for hours and can't figure out
how to fix it.
Fixed it a little bit:
http://www.ambiguism.com/CSSD/caa.html
Added this to CSS:
#innerContentWrap {
width: 100%;
float: left;
}
/* Begin .theClearFix styles: */
.theClearFix:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.theClearFix { display: inline-table; }
/* Begin filter. Hides from IE-mac \*/
* html .theClearFix { height: 1%; }
.theClearFix { display: block; }
/* End filter. End hide from IE-mac. */
/* End .theClearFix styles. */
I cleaned-up the html, makes it a bit more clear:
div id=content class=theClearFix
div id=innerContentWrap class=theClearFix
img src=images/lgoldberg_test160.jpg alt=test width=160
height=202 class=imgfloatleft/
h1Heading 1/h1
pThis is div#content and it is positioned relative to
div#wrapper/p
pdiv#wrapper holds #leftcol (the sidebar) and #content /p
p#leftcol (sidebar) is float=left/p
p#content moves to the right thanks to the right margin
amount/p
div class=clearboth/div
img src=images/belcher_test100.jpg alt=test width=100
height=139 class=imgfloatright /
h2Heading #2 +clear:both style /h2
pEverything works fine until
View source to see all the code.
I saw some other issues with your css (no time to delve into that now),
and I added borders to some of the divs to make it more obvious as to
what is going on.
Keep in mind, I quickly slapped this together... it already looks like
some of the gurus on the list have replied with solid answers...
hopefully a combination of all our help will solve your CSS troubles.
Cheers,
Micky
__
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] clearing clears sidebar too
- Original Message - From: Trish Meyer To: css discuss Sent: Saturday, November 12, 2005 8:46 AM Subject: [css-d] clearing clears sidebar too Okay, maybe I'm seeing two issues then. Even when I remove the clear: both style from the headings in the #content section, the entire #content moves down below the sidebar on IE Windows ONLY. It looks okay in Mozilla and Mac when I don't clear, so clearing is a red herring for now. I think this is beginning to sound familiar though. The page with NO clearing (that I was going to show the client...) is at: http://www.collageartists.org/test7.html The CSS is at http://www.collageartists.org/stylesheets/caa5.css so the clear:both is a problem on Mac (and probably also IE Windows), but first I have to fix the #content moving down problem first I think. thanks for any help, aargh, Trish -- ___ \ Trish Chris Meyer/CyberMotion: Motion Graphics Design Effects \ recent projects clients: http://www.cybmotion.com/projects \ books, video, articles: http://www.cybmotion.com/sharing \ music (including Alias Zone): http://www.cybmotion.com/music \__ __ 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/ Not sure exactly what you are trying to acheive with the headings. Anyway, reducing the left padding on the #content div solves the problem in IE/Win of all the content dropping below the sidebar. I changed the padding-left to 10px, which seems ok. By the way, I could not find any positioning statement for the #content div. Regards, Bill Stemp __ 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/
