Re: [css-d] IE mac bugs
jeffrey morin wrote: i am not too familiar with the IE mac bugs out there. i have a page with a 2 column layout and the left column seems to have extra padding on the right pushing it out and causing the second column to not float up and rest next to it. i am confused because i have the padding-right set to 0.does anyone know what is causing this? Not without seeing a page. Please post a URL to a live page to the list. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] word wrapping in block element with set width
Sandy Gonzales wrote: hi guys, i have a question about word wrapping. I notice when i set a width to a block element that the text inside won't wrap, which makes sense i guess since the element retains its size.. for example: http://www.rh-v2.cpdev.sudjam.com/tutorial.php?cat=26 is there anyway after setting a width to the white box element containing the text, i could resize the browser, making it very narrow and have the text somehow wrap according to the browser size instead of the element its in. No. But if you want the width of that block of text to change size with the window, why not just remove its fixed with entirely or set it in percentages? I don't see why you would want the white background to stay a fixed width but its content inside contract and expand in and out of its background. Perhaps I'm misunderstanding your question... Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
Diane Ross wrote:
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote:
* testpage 2
http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html
So I guess it must be some margin or padding in the inner parts of the
#sidebar, for when we make the width of the #sidebar some 10px smaller,
it's ok.
How did you come up with 10px?
* testpage 3
http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html
It was just a guess to see what should happen, not deliberated.
I have some questions on the change you suggested to the sidebar.
div class=quicklinks style=width: 140px;
You mention margins...do I adjust margins for divs inside the sidebar or
simply change the size as you suggested?
Rather than just do-it, I want to understand what I'm doing.
Yes, that is a good attitude. I pointed to the direction, but now I've
to do some further investigations to see what is really going on! ;-)
...
Back here: it appears to be the left and right border of 1px around the
.quicklinks and the other boxes in the #sidebar.
If we disable them, IE is showing good, and also FF doesn't have a
horizontal scrollbar anymore.
* See testpage 4
http://home.tiscali.nl/developerscorner/css-discuss/test-base4.html
And if we make the border larger, we see more overlap with the yellow
background'ed #content in IE, while FF is giving a larger horizontal
sidebar.
* See testpage 5
http://home.tiscali.nl/developerscorner/css-discuss/test-base5.html
I really appreciate your patience with me on this.
#quicklinks is inside the #sidebar. I have both set for width 150. Is this
wrong thinking to make them the same?
#sidebar {
text-align: left;
width: 150px;
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 0; }
/*Quicklinks
*/
.quicklinks {
width: 150px;
border: solid 1px #ccc;
margin: 0;
}
You can view the site with just the cleanup for the divs here:
http://www.entourage.mvps.org/
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
* See css box model specs
http://www.w3.org/TR/CSS21/visudet.html#the-width-property
If we omit the width in .quicklinks, .highlight and the other boxes
below, then these boxes _inclusive everything_ (borders, paddings, ...)
have to stay inside the width of the surrounding container #sidebar.
* That's done in testpage 6
http://home.tiscali.nl/developerscorner/css-discuss/test-base6.html
Now no more drop of the #sidebar in IE, and no more horizontal scrollbar
in FF. :-)
Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position:fixed - why relative to viewport and not containing block?
Andy Harrison wrote: On 2/8/07, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: Switch your fixed div to absolute and it will do what you want. And switch its containing block to position:relative. :-) Andy I think what Rafael wants is for the object to be fixed compared to the viewport, but for its initial position to be determined in relation to its containing element, which could vary. I'm afraid you will need a combination of javascript and CSS for this, where javascript works out where the element should be positioned originally. PPK's blog achieves something similar with the navigation menus in the side colums, you might find your answers by looking at his code: http://www.quirksmode.org/blog/index.html Regards, Barney __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Divs with floating spans
Hi list, I have a div that contains two spans, each with a floating attribute set. There is no line-break in IE7 or Firefox 2.0.0.1 unless I have some other content in the div outside of the floating spans. Can anyone explain to me why this is works this way, and/or a better way to get it to behave the way I'd like it to. Example: - html body divcontent above/div div span style=float: right;right/span span style=float: left;left/span /div divcontent below/div hr / divcontent above/div div span style=float: right;right/span span style=float: left;left/span nbsp; /div divcontent below/div /body /html - Thanks for any insight, Ray at work __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I handle two menu types with one stylesheet?
Hi Georg,
Gunlaug Sørtun wrote:
On #main:
delete 'margin-top: 4em', and add 'clear: both'.
Then add...
#mainnav {margin-bottom: 1.5em;}
#formnav {margin-bottom: 1.5em;}
Thanks very much for your reply. I appreciate it. I made the change and it
works well on IE7. On Firefox, however, it trashes the FormNav menu,
covering all but the very top of the nav buttons with white space. Any
suggestions?
Thanks again!
Bill
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE mac bugs
it's weird. when i view it online it looks ok but when i just view it locally on my imac the content column gets hung up. so if anyone looks at this and it's not working please let me know what you think is going on. thanks!! http://www.melissagerstein.com/ie_mac_bugs.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Jeffrey Morin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I handle two menu types with one stylesheet?
Oops. I deleted the links to the pages. They're at:
http://www.yourtimematters.com/menu1.html
http://www.yourtimematters.com/menu2.html
Thanks again!
- Original Message -
From: Bill Walton [EMAIL PROTECTED]
To: Gunlaug Sørtun [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Thursday, February 08, 2007 8:49 AM
Subject: Re: [css-d] Can I handle two menu types with one stylesheet?
Hi Georg,
Gunlaug Sørtun wrote:
On #main:
delete 'margin-top: 4em', and add 'clear: both'.
Then add...
#mainnav {margin-bottom: 1.5em;}
#formnav {margin-bottom: 1.5em;}
Thanks very much for your reply. I appreciate it. I made the change and it
works well on IE7. On Firefox, however, it trashes the FormNav menu,
covering all but the very top of the nav buttons with white space. Any
suggestions?
Thanks again!
Bill
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I handle two menu types with one stylesheet?
Bill Walton wrote:
On #main: delete 'margin-top: 4em', and add 'clear: both'.
Then add...
#mainnav {margin-bottom: 1.5em;} #formnav {margin-bottom: 1.5em;}
Thanks very much for your reply. I appreciate it. I made the change
and it works well on IE7. On Firefox, however, it trashes the
FormNav menu, covering all but the very top of the nav buttons with
white space. Any suggestions?
Already given :-)
You've forgotten to add...
#main {clear: both;}
...that's on the top of my list of corrections. Won't work without it.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Divs with floating spans
Ray Costanzo wrote: I have a div that contains two spans, each with a floating attribute set. There is no line-break in IE7 or Firefox 2.0.0.1 unless I have some other content in the div outside of the floating spans. Can anyone explain to me why this is works this way, and/or a better way to get it to behave the way I'd like it to. You turn those spans into floats, which means they are no longer contained in their div. I've turned your example into a page... http://www.gunlaug.no/tos/alien/test_07_2590.html ...and styled the first div to 'contain floats' - by turning the div itself into a 100% wide float. Floats will expand to contain floating children, as long as they are /allowed/ to expand to do so. Thus, no height set on that div. This demonstrates just _one_ of the methods available for 'containing floats', but it should make the concept of 'containing floats' understandable. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I handle two menu types with one stylesheet?
Hi Georg,
Gunlaug Sørtun wrote:
You've forgotten to add...
#main {clear: both;}
...that's on the top of my list of corrections.
Won't work without it.
Oh Jeez
I really hate it when people can't follow clearly given instructions. Don't
you ;-)
Seriously, I'm usually very good at it. Sorry for screwing up this time.
Thank you very much for both your help and patience. I really appreciate
both.
Best regards,
Bill
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position:fixed - why relative to viewport and not containing block?
Zoe wrote: What you are asking for *is* absolute positioning -- positioning one div relative to another -- so why not just use absolute positioning? That will allow your div to move along with the other div when the browser is scrolled. Switch your fixed div to absolute and it will do what you want. Barney wrote: I think what Rafael wants is for the object to be fixed compared to the viewport, but for its initial position to be determined in relation to its containing element, which could vary. I'm afraid you will need a combination of javascript and CSS for this, where javascript works out where the element should be positioned originally. PPK's blog achieves something similar with the navigation menus in the side colums, you might find your answers by looking at his code: http://www.quirksmode.org/blog/index.html Yes, Barney knows what I mean. I feared I'd have to resort to JS and PPK's blog is exactly what I had in mind. :) However, I still wonder whether anyone thinks position:fixed would be more useful in this sort of implementation (doesn't move when viewport is scrolled, but is positioned relative to any containing block, not just the viewport). Not that I'm trying to change anything, I just wonder if anyone has come across a situation where this would have been useful. Cheers, Rafael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Print CSS renders mystery elements in IE
Hello all, I have a tall order here. I'm having my first serious foray into print CSS here and have everything pretty much down to a T, bar a few bits of aesthetic judgment (as ever) - on standards-compliant browsers. IE has a strange problem - despite the fact I have taken great care in setting display:none for all elements irrelevant to a static view of documents, a mysterious blotch of what looks like a collection of overlaid characters appears in a small space just left of the top-centre of the page. To make things easier I have created a page which loads none of the screen styles and has the print CSS set to media: screen - but this is only partially useful because the elements in question do not reveal themselves in the browser view (so no DOM inspection), and although they do appear in print preview, so does a whole load of other stuff which shouldn't be there (and promptly disappears when actually printed). I appreciate this is a very ugly issue, but if anybody could spare the time for a quick print out, all suggestions and guesses will be much appreciated. Regards, Barney __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] (no subject)
Hello, Another problem. I'm implementing a css custom corners and border box with multiple divs inside the main box div. I want it to be expandible both by width and height. So the problem is that whan I don't specify float:right for the divs of right corners, they stick to the left corners and content div takes just the text widths. But when I specify float:right for the right corners they take their pace at the box, but the box expands automaticlly at 100% of available width. So the question is how to make the box (using the dloats of it's inside divs) take just th elength of text inside? Tnax in advance... _ Personnalisez votre Messenger avec Live.com http://www.windowslive.fr/livecom/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I handle two menu types with one stylesheet?
Bill Walton wrote: Oh Jeez I really hate it when people can't follow clearly given instructions. Don't you ;-) Yes :-) It makes threads grow longer, but apart from that I can't see anything wrong with such I'm needing a reminder type of requests. I usually have to fix such things myself, so the rest of you rarely get the chance to see _my_ numerous screw-ups. Good for you, ain't it..? ;-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position:fixed - why relative to viewport and not containing block?
Rafael Holt wrote: Yes, Barney knows what I mean. I feared I'd have to resort to JS and PPK's blog is exactly what I had in mind. :) I feel like this most days. Hehehe. However, I still wonder whether anyone thinks position:fixed would be more useful in this sort of implementation (doesn't move when viewport is scrolled, but is positioned relative to any containing block, not just the viewport). Not that I'm trying to change anything, I just wonder if anyone has come across a situation where this would have been useful. Could you give us a URL with a dummy of your proposal, or describe what it is you're styling in more detail? I think any compromise would have to be tailored to the situation. To be honest, I do see fixed elements as a bit of a flashy luxury - and something that is often used irresponsibly to create cumbersome designs. More than a few times I've considered finally pushing the boat out on this technique, only to realise a CSS2-only solution ended up more elegant. Regards, Barney __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Coding for Chinese audience
Hi list, Can anyone help me prepare for coding an HTML email for a Chinese audience? I have never done anything with Asian characters before. I am on a Mac using DW8. Any help would be appreciated... TIA -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print CSS renders mystery elements in IE
Hi Barney, It's difficult to analyze, if we don't have some practical material (maybe you've send it in an attachment, but they are deleted in this list). Do you have a link? Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE mac bugs
On 2/8/07 6:55 AM, jeffrey morin [EMAIL PROTECTED] wrote: it's weird. when i view it online it looks ok but when i just view it locally on my imac the content column gets hung up. so if anyone looks at this and it's not working please let me know what you think is going on. thanks!! http://www.melissagerstein.com/ie_mac_bugs.html It looks fine to me in Mac IE 5.2. -- Diane __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Splitting a list into two columns
Hi guys, Creating a sitemap for a client and what they want is for the list to be as follows: 01. Section 1 - Sub-page - Sub-page 02. Section 2 - Sub-page - Sub-page - Sub-page - Sub-page 03. Section 3 - Sub-page - Sub-page etc... However, they also want ti split over two columns so that it doesn't end up just scrolling forever. Fair enough. However, since this is to plug into their CMS, I need to allow for a variable number of sections and sub-pages. I've had a search around, but so far all the examples I'm finding require knowing how many items are in each column or the height of each column. I have no way of knowing either. Is there a way of doing this that will allow the columns to stay more or less equal regrdless of how many items there are? Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Splitting a list into two columns
On 08/02/07, Seona Bellamy [EMAIL PROTECTED] wrote: Hi guys, Creating a sitemap for a client. However, they also want ti split over two columns so that it doesn't end up just scrolling forever. Fair enough. However, since this is to plug into their CMS, I need to allow for a variable number of sections and sub-pages. I've had a search around, but so far all the examples I'm finding require knowing how many items are in each column or the height of each column. I have no way of knowing either. Is there a way of doing this that will allow the columns to stay more or less equal regrdless of how many items there are? Hi, There is a very nice method purely with CSS, but as usual it doesn't work in IE (or Opera). It works in Mozilla and will do in the next release of Safari. This is how to make it into two columns with mozilla with a 2 em gap in between: -moz-column-count:2; -moz-column-gap:2em; For Safari it's without the mozilla specific prefix (without the -moz-). Other than that, I think it'll be very difficult to work out a way of doing it like you want unless you resort to some javascript. This ALA article is a good read and contains a link to a script you can use: http://alistapart.com/articles/css3multicolumn Rafael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First timer looking for css review
Mike Buettner wrote:
[...]
Could you please take another look at it?
Site: http://scottriggs.com/2007/index.html
Hi Mike,
For a first timer, it´s hard stuff and you are going not bad for this
not too simple layout! :-)
But I'm afraid there are still some css-hills to climb.
* IE is dropping down the right column. This is a perfect
illustration of the IE Doubled Float-Margin Bug. ;-)
It is described here in PIE
http://www.positioniseverything.net/explorer/doubled-margin.html
The remedy is to add { display: inline; } to the floating #lftColbox.
* You have put the IE-only-styles in the body of the document; they
should go to the head part. Notice: the html-validator doesn't
notice this, because these styles are placed (correctly) in IE
conditional comments, which are just normal comments / unseen by
other browsers and the validator as well (REM: what is inside a CC
is not validated!).
* You have chosen for a fixed width of 800px, probably to serve
800x600px resolution monitors. In 800x600 an horizontal scrollbar
is coming, though. That's due to the needed space to put the
vertical scrollbar aside the page. Making the width about 770px
can help (implicating the header-img has to be smaller too...).
* With a fixed width, much screen space is not used in higher
resolutions. In 1280x1024 there is an area of about 40% unused,
which is rather much. A solution is to give the page a liquid
width in a % of the screen width.
A lot of models are linked from the css-d Wiki page about layouts
http://css-discuss.incutio.com/?page=CssLayouts.
* Sometimes you are using a CLASS and an ID with the same name. For
the most elements, I found in the stylesheet only the
ID-references (with the # before the name). For elements with only
the ID-styles the CLASSes in the html can be missed.
* In your page fixed font-sizes are used (in px). This has 2
disadvantages. For IE, which is is not standards compliant here,
the fonts cannot be enlarged in the browser of the visitor. For
some people the pages aren't accessible then, especially if they
are using a screen of 1280x1024px or more (very small letters).
On the other hand, at 800x600 the fonts are biggy, and no
possibility to get them smaller in IE.
In FF, Opera and other browsers, the font-size can be enlarged or
made smaller by the visitor's browser. But then the present layout
is breaking ...
* This breaking of the layout is caused by some fixed heights, for
instance in the navigation bar. Maybe a good idea is to develop
the page from the top elements downwards.
See: some Golden CSS-Rules
http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm.
* The 3 small images (car and logos) with associated text at the top
of the right column: this is one of the points where the layout is
breaking at larger font-sizes (because of the fixed 49px height of
the .links class). Can be repaired by deleting this style rule.
Another quick way to get it unbreakable with the text staying
vertically centered, is to apply a css-styled table for them.
See testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-mike.htm
(other things still have to be done).
So far,
Greetings and success!
(and don´t hesitate to come back to the list for questions)
francky
PS: excellent name for your site! :-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Links with separator lines
I use #page_links and .footerbar for links. The problem shows on this page
http://www.entourage.mvps.org/
but
show OK on this page (and other pages on the site that use the same divs)
http://www.entourage.mvps.org/exchange/index.html
The Problem:
In Opera and FireFox on the Mac, I'm seeing two separator lines after the
first link.
IE 5.2 on the Mac shows the separator lines inside the link or way to one
side in both #page_links and #footer. There are other problems with IE Mac
that I'll address in a separate subject.
Safari Mac and OmniWeb Mac are OK for both page links and footer links.
On the PC side there is no problem with the separator lines for IE 6. I'm
seeing space after the first link Search A-Z Index. I'm guessing this is a
padding issue. I haven't been able to test in other PC browsers yet. Have
been downloading Opera and Firefox and the rate they are going it's going to
be hours just to download. Running VPC isn't what you would call swift.
My first thought was to check for some extraneous code but there is none
that I see. I don't understand why it works on other pages and not the home
page. I can see that IE Mac would be problematic but for other browser to
have a problem with just this one page is confusing.
CSS
---
#page_links {text-align: center;
margin-top: 1.5em;
}
.linksbar {
list-style-type: none;
padding:4px 0;
}
.linksbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.linksbar li.first {
border:none;
}
.footerbar {
list-style-type: none;
padding:4px 0;
}
.footerbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.footerbar li.first {
border:none;
---
HTML
---
div id=page_links
ul class=linksbar
li class=first
a href=faq/index.htmlSearch A-Z Index/a
li
li
a href=faq/top_faqs.htmlMost Asked Questions/a
/li
li
a href=faq/2004.htmlFAQs for Entourage 2004/a
/li
li
a href=faq_topic/sync_services_ical.htmlSync Services/a
/li
li
a href=new2mac.htmlnew2mac amp; Entourage/a
/li
li
a href=menumachine/topnav/navigation.htmlSite Map/a
/li
/ul
/div
---
div id=footer
ul class=footerbar
li class=first
a href=http://www.entourage.mvps.org/;Home/a
/li
li
a href=http://www.entourage.mvps.org/about.html;About/a
/li
li
a href=disclaimer.htmlDisclaimer/a
/li
/ul
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position:fixed - why relative to viewport and not containing block?
Zoe wrote: Users are used to things moving when you scroll, so I've never needed to change that. On 08/02/07, Barney Carroll [EMAIL PROTECTED] wrote: To be honest, I do see fixed elements as a bit of a flashy luxury - and something that is often used irresponsibly to create cumbersome designs. More than a few times I've considered finally pushing the boat out on this technique, only to realise a CSS2-only solution ended up more elegant. This is true, I don't like it when things stray away from what I expect or jump at me. However, now that IE7 supports it, I believe more and more people will start to use it and so users will become more accustomed to it. Whether it annoys them or not is another matter. If used properly, I do think it has its benefits. This is the URL: http://127.0.0.1/G/melbourne/1/ Please look at it in either Firefox or Opera 9 - it's buggy in everything else since it's just an experiment for now, my CSS playpen so to speak. You should be able to see something saying NEXT vertically at the bottom right. There is also a 'PREV' one on the left if you set the number of thumbs to something smaller (hover over 'settings'). Anyway, this tab has position:fixed and is positioned relative to the bottom right. If the viewport is big enough (such as when the thumbs are all on one line), it appears below the cream-coloured area and into the grey bit, which is unsightly. Ideally, I would position it from either the bottom of the cream area or from the top of the thumbs' container (ul#thumbarray). And it stays there upon scrolling. Just like in PPK's site. I'm interested in your opinions. Cheers, Rafael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position:fixed - why relative to viewport and not containing block?
Oh dear, I messed up the URL, how embarrassing. http://raffles.awardspace.com/G/melbourne/2/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
On 2/8/07 5:53 AM, francky [EMAIL PROTECTED] wrote:
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
I omitted the width in the #sidebar and the drop down problem is fixed. I
appreciate knowing what I did and why.
I'm not sure if I created another problem because I also omitted the width
in the right sidebar boxes. They were identical to the left even though they
had not caused a problem. Now in IE 7, part way down in the MVP Links box
the links just stop and the following boxes are not showing up. It's not a
problem in any Mac browser or in IE 6.
Did removing the width do this, or is this a display problem using VPC to
view the pages?
http://www.entourage.mvps.org/
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject) liquid corners
Julia Ccc wrote: Hello, Another problem. I'm implementing a css custom corners and border box with multiple divs inside the main box div. I want it to be expandible both by width and height. So the problem is that whan I don't specify float:right for the divs of right corners, they stick to the left corners and content div takes just the text widths. But when I specify float:right for the right corners they take their pace at the box, but the box expands automaticlly at 100% of available width. So the question is how to make the box (using the dloats of it's inside divs) take just th elength of text inside? Tnax in advance... Hi Julia, Indeed, often floats are floating away. :-) Some solutions without floating (instead of floats: with background positioning of the custom corners borders) you can find over here: * Liquid Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm * One of the illustrations, maybe in the direction you´re searching: More Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm If you don´t find what you are looking for, do you have a link to a testpage with your code? Salut! francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Splitting a list into two columns
At 2/8/2007 03:25 PM, Seona Bellamy wrote: Creating a sitemap for a client and what they want is for the list to be as follows: 01. Section 1 - Sub-page - Sub-page 02. Section 2 - Sub-page - Sub-page - Sub-page - Sub-page 03. Section 3 - Sub-page - Sub-page etc... However, they also want ti split over two columns so that it doesn't end up just scrolling forever. Fair enough. However, since this is to plug into their CMS, I need to allow for a variable number of sections and sub-pages. I've had a search around, but so far all the examples I'm finding require knowing how many items are in each column or the height of each column. I have no way of knowing either. Is there a way of doing this that will allow the columns to stay more or less equal regrdless of how many items there are? Hi Seona, You probably do need scripting to accomlish this today. Although you can't predict the number of list items, a script can count them on the fly and shape the list accordingly. Although my first choice would be server-side scripting, you can also do it with Javascript if you don't mind the layout breaking when scripting is disabled. I would limit the script to plugging in ids or classes and let CSS handle the positioning. One method I like is to move the first item you want in column 2 up with a negative margin-top, and shift all items in column 2 over with positive margin-lefts. This lets the list flow normally as much as possible and avoids browser-related bugs that affect other CSS-based methods. See example 6 in my ALA article on the subject: http://www.alistapart.com/articles/multicolumnlists/ In these examples I show the list heavily marked up with class names. Of course these can be inserted on the fly and needn't be a part of your original markup. In your scripting logic I imagine you'll want to decide how to handle widows orphans so you don't strand a section title at the bottom of column1 or the last item of a section at the top of column 2. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links with separator lines
Diane Ross wrote: I use #page_links and .footerbar for links. The problem shows on this page http://www.entourage.mvps.org/ but show OK on this page (and other pages on the site that use the same divs) http://www.entourage.mvps.org/exchange/index.html The Problem: In Opera and FireFox on the Mac, I'm seeing two separator lines after the first link. IE 5.2 on the Mac shows the separator lines inside the link or way to one side in both #page_links and #footer. There are other problems with IE Mac that I'll address in a separate subject. Safari Mac and OmniWeb Mac are OK for both page links and footer links. On the PC side there is no problem with the separator lines for IE 6. I'm seeing space after the first link Search A-Z Index. I'm guessing this is a padding issue. I haven't been able to test in other PC browsers yet. Have been downloading Opera and Firefox and the rate they are going it's going to be hours just to download. Running VPC isn't what you would call swift. My first thought was to check for some extraneous code but there is none that I see. I don't understand why it works on other pages and not the home page. I can see that IE Mac would be problematic but for other browser to have a problem with just this one page is confusing. Hi Diane, In FF2 under WinXP: I see the double separator lines at #page_links in the index page, in IE6 indeed an extra space instead. But ... you ordered it by typo on the home page. ;-) In the index page the html-validators (w3c and html-Tidy) are so friendly to tell us that the first li in the #page_links is closing with another li instead of a /li. The different error handling of browsers is giving different shows. The one browser is completing to the prescribed /li´s for XHTML, so adding an extra separator, the other browser is doing nothing but adding a space. [...] HTML --- div id=page_links ul class=linksbar li class=first a href=faq/index.htmlSearch A-Z Index/a li --- here he is! :-) li a href=faq/top_faqs.htmlMost Asked Questions/a /li [...] I don´t have an IE5/mac, so no idea why that is happening. Maybe you can hard code a separator `letter` | in the html instead of a border line in css, to avoid strange effects? Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links with separator lines
Diane Ross wrote: I looked at the code several time, but I just didn't see it. shaking my head at my stupidity I think it´s not stupid at all if you don´t see one missing slash after numerous cut-copy-paste actions in a large and complicated code. But you don´t have to see everything yourself by eye and by hand: the validators are eager to help (if clicked ;-) ). As a lazy boy, I first validate if something seems not ok (2 seconds rest to take some coffee), and only if the validators are green, and the error is still there, I´m going to look in the code for bug hunting. :-) francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Splitting a list into two columns
Seona Bellamy wrote: I don't suppose you've got good JS skills and would be willing to work with me off-list on this? *hopeful grin* If so... some of us would love to see the end-result for our off-list enjoyment! -- I made magic once. Now, the sofa is gone. http://dwacon.blogspot.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Splitting a list into two columns
Seona Bellamy wrote: In your scripting logic I imagine you'll want to decide how to handle widows orphans so you don't strand a section title at the bottom of column1 or the last item of a section at the top of column 2. That should be very interesting to implement, since you won't know just how the lines within a block of text will wrap and break (would depend on visitor's browser, version, font sizes actually used, viewport size, etc). Can JS find out, for instance, the dimensions of a particular paragraph and allow you to calculate from that to determine if it will fit completely in a particular column? I think this has outgrown the focus of the CSS-D list, though ... -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Splitting a list into two columns
On 09/02/07, david [EMAIL PROTECTED] wrote: Seona Bellamy wrote: In your scripting logic I imagine you'll want to decide how to handle widows orphans so you don't strand a section title at the bottom of column1 or the last item of a section at the top of column 2. That should be very interesting to implement, since you won't know just how the lines within a block of text will wrap and break (would depend on visitor's browser, version, font sizes actually used, viewport size, etc). Can JS find out, for instance, the dimensions of a particular paragraph and allow you to calculate from that to determine if it will fit completely in a particular column? I think this has outgrown the focus of the CSS-D list, though ... Me too. I'm now working through it off-list, but will post the final results when we have some since it is something that may help others who are faced with this same problem (at least until CSS3 and the column-count property are supported). Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE mac bugs
yeah i don't get it. am going to keep working on it __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links with separator lines
On 2/8/07 6:57 PM, francky [EMAIL PROTECTED] wrote: I think it´s not stupid at all if you don´t see one missing slash after numerous cut-copy-paste actions in a large and complicated code. But you don´t have to see everything yourself by eye and by hand: the validators are eager to help (if clicked ;-) ). As a lazy boy, I first validate if something seems not ok (2 seconds rest to take some coffee), and only if the validators are green, and the error is still there, I´m going to look in the code for bug hunting. :-) Thanks for the reminder. I have become used to the GoLive bugs that are added (obviously they don't cover very much) and have not gotten into the habit of validating my code. Again, thanks for the help. -- Diane __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] how to have background image scroll all the way down.
Hello all
at this site that I am testing;
http://sachitesting.com/2007/01/25/another-blog-entry-to-test/http://www.sachistudio.com/test/sachipcc/index.html
http://www.sachistudio.com/test/sachipcc/index.htmlYou will notice as you
scroll down, that the gradient black-to-red background image will cut off
and the black color starts again. How would I make it so that the dark would
continue into indefinitely?
This is what my code looks like;
body {
margin: 0 0 40px 0;
padding: 0;
font: normal 81.25%/1.4em Trebuchet MS, Helvetica, Serif;
text-align: center;
background: black url(img/bg1.gif) repeat-x;
}
--
Dean H.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
