[css-d] Keeping an image visible yet constrained
Say I want to have an image located at the near the top of an element... maybe a table cell, but that's probably not that important. I always want that image to be visible and near the uppermost visible portion of that cell. What sort of styles should I be looking at to help accomplish that? For example, how this would be useful is if the cell that image is being displayed in is very long so that you might have to scroll down to see the entire cell. However, even if that top of the cell is not visible, I still want the image to display at the uppermost visible portion of the cell. So, the cell might contain a list of links and each has an image associated with it. As I hover over the links I would like the image displayed to correspond to the link, but if the list is so long that the reader needs to scroll the browser down I still want the image to be visible. Thanks, Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Margin mystery in IE7 on a Drupal/Zen site
Hi all, I've built a Drupal site with the Zen theme as my base, and I'm having an issue with some of the CSS (it's not what I'd have built, if starting from scratch). The issue I'm having is with a live site, so I appreciate whatever help I can get. And example page: http://alter-g.com/medical-injury-surgery-rehabilitation The basic structure I'm having issues with is the relation of the #sidebar-left and #sidebar-right column divs to the larger #content div. In the markup, #content comes first, then the left and right column divs. The way the Zen theme is constructed, it's a float-nearly- everything layout, and negative margins are used to put the columns in the right places. I'm not a fan. The problem is, in IE7 (and I've seen this in IE6 and I believe also IE8), the main #content div intermittently forgets the margins it's supposed to have, and the content overlaps the left sidebar. Visit the URL above, and if it looks perfectly fine to you, hit the reload button. Invariably, the layout gets wonky after a reload or two. It's not a cache problem, and I'm starting to think it's a load-order thing. Your thoughts? Thanks in advance — Jim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text positioning
Philippe Wittenbergh wrote:
On Mar 7, 2009, at 2:17 PM, Jim Albert wrote:
I have an example of a table defined with a height to one of the cells
and I would like some text to be aligned to the right and bottom of
that
cell.
Here is the example:
http://www6.netrition.com/anchor_bottom.html
I would like the blue text lower right to be anchored to the bottom
and right of its surrounding table cell.
Obviously, there is no additional information in the above html that
would produce what I want, but that's the base of the simple example I
am using.
I tried applying a style of position:absolute;bottom:2px;right:2px in
this example:
http://www6.netrition.com/anchor_bottom_position_absolute.html
but you can see the blue text gets anchored to the lower bottom corner
of the browser not the table cell.
That is to be expected. The containing block for that absolute
positioned element is the root element. To achieve what you want, in
your simple example above, you'd need to make the parent div the
containing block (relative positioning it):
DIV style=overflow:hidden;height:300px; position: relative
Thank you. The position:relative on the parent div solved it.
How can I anchor that text to the lower right corner of its cell?
If the cell has a declared height (e.g. td {height:300px;}), you can
then wrap the contents of the cell in a div, set the height to 100%,
and then just as in the above example.
PS - try to present test cases with valid html please.
Was there something other than the lack of a DOCTYPE tag that you
noticed? That was the only thing the w3 validator showed.
--
Jim Albert
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] text positioning
I have an example of a table defined with a height to one of the cells and I would like some text to be aligned to the right and bottom of that cell. Here is the example: http://www6.netrition.com/anchor_bottom.html I would like the blue text lower right to be anchored to the bottom and right of its surrounding table cell. Obviously, there is no additional information in the above html that would produce what I want, but that's the base of the simple example I am using. I tried applying a style of position:absolute;bottom:2px;right:2px in this example: http://www6.netrition.com/anchor_bottom_position_absolute.html but you can see the blue text gets anchored to the lower bottom corner of the browser not the table cell. How can I anchor that text to the lower right corner of its cell? Thank you. -- Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] width of scrollable table
Philippe Wittenbergh wrote: On Jan 31, 2009, at 12:33 PM, Jim Albert wrote: http://www6.netrition.com/scroll_table_within_table.html Here I've placed that same scrolling table within a cell of an outer table. Notice that no scrolling appears. This behavior occurs in Firefox, IE and Safari. Only in Opera do I see the rendering that I would like. Opera sees that that middle cell of images is within a scrolling area and does not render the table with enough room for all the images. What I think is happening is that Firefox, IE and Safari are first determining table size based on the contents and determines it needs a lot of width to display all those images. It then assigns 100% of that very wide 2nd cell which is the table of images for scrolling. But since enough space was rendered to display all the images, no scrolling is necessary. That is the expected behaviour actually, given what css2.1 has to say on tables with 'table-layout:auto;' applied (the default behaviour). I tried assigning widths to the 1st and 3rd outer cells. However, that has no affect, the table is still rendered large enough to display all the images at once. I don't want to assign widths, anyway. If you insist on using a table for the outer layout, you'll have to assign a width to those two cells (you can set it to be a percentage width, though). Then, to insure control over that scrolling object, you have to set the (outer) table to table-layout:fixed and give it a width (e.g. 100%;). Yes... I was able to follow your suggestion and produce a workable example at: http://www6.netrition.com/scroll_table_within_table_fixed_layout.html It does do what I asked for and I thank you for your suggestion, but I'll admit I don't care for table-layout:fixed rendering. Depending on the content, there can be considerable occlusion when you start working in large images and nested tables. If the visitor has a large font set on a low resolution display, the result could be a pretty quick exit from that visitor. So... I suppose I don't insist on using an outer table. What would you suggest in terms of my most recent example at: http://www6.netrition.com/scroll_table_within_table_fixed_layout.html to remove the use of the outer table, but maintain 3 columns? Thank you for all your advice. -- Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] width of scrollable table
Philippe Wittenbergh wrote: On Jan 29, 2009, at 7:10 AM, Jim Albert wrote: It seems like the only way I can get table to be clipped properly and scroll is to give a pixel length to the width of the DIV. I thought I could use: DIV style=width: 100%; overflow: auto; and I was expecting that the table would fill the width of the browser and then scroll horizontally when necessary. But what happens is the table expands out to the size needed to display all the images in the row of the table and in most cases causing the entire browser to gain a horizontal scroll bar. That is what should happen, and happens in a couple of browsers I happen to have open. Do you have a URL of a page showing the issue (in which browser) ? It is _always_ more easy to discuss things with sample code. I believe my problem is related to me placing the scrolling table within a table cell. I think I understand what some browsers are doing and perhaps there is a CSS solution that can be offered. Here are some simple examples: http://www6.netrition.com/scroll_table_by_itself.html This is a simple scrolling table that uses 100% width of the browser window and adjusts itself according to the size of the browser window. No problem; works fine in all browsers I've tried... Firefox, IE, Safari, Opera. http://www6.netrition.com/scroll_table_within_table.html Here I've placed that same scrolling table within a cell of an outer table. Notice that no scrolling appears. This behavior occurs in Firefox, IE and Safari. Only in Opera do I see the rendering that I would like. Opera sees that that middle cell of images is within a scrolling area and does not render the table with enough room for all the images. What I think is happening is that Firefox, IE and Safari are first determining table size based on the contents and determines it needs a lot of width to display all those images. It then assigns 100% of that very wide 2nd cell which is the table of images for scrolling. But since enough space was rendered to display all the images, no scrolling is necessary. I tried assigning widths to the 1st and 3rd outer cells. However, that has no affect, the table is still rendered large enough to display all the images at once. I don't want to assign widths, anyway. I like the rendering that Opera does. Is there some CSS I can apply that indicates to the browser not to render as much space as is necessary to display all the images within the 2nd cell? In other words... render the table and make use of the scrolling so that all three cells of the outer table are visible in the browser. Thank you. -- Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] width of scrollable table
Philippe Wittenbergh wrote: On Jan 29, 2009, at 7:10 AM, Jim Albert wrote: It seems like the only way I can get table to be clipped properly and scroll is to give a pixel length to the width of the DIV. I thought I could use: DIV style=width: 100%; overflow: auto; and I was expecting that the table would fill the width of the browser and then scroll horizontally when necessary. But what happens is the table expands out to the size needed to display all the images in the row of the table and in most cases causing the entire browser to gain a horizontal scroll bar. That is what should happen, and happens in a couple of browsers I happen to have open. Do you have a URL of a page showing the issue (in which browser) ? It is _always_ more easy to discuss things with sample code. In creating a very simple html page to demonstrate the problem, I realized that the width set at 100% does work correctly in my very small example. So, the issue must be with other html on the page where I am using the scrolling table. If it looks like the issue I am experiencing involves CSS and is on topic for this maling list, I'll post more information. But right now I'm leading to something html related, maybe a table issue. Thank you for confirming that the the scroll on a width of 100% does work the way I had expected. -- Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] scrolling table via overflow
Philippe Wittenbergh wrote: On Jan 28, 2009, at 12:16 PM, Jim Albert wrote: I'm trying to create a horizontal scrolling table using the overflow property via something like the following code: [snip code example] This works the way I would like and expect in most browsers except Internet Explorer (in my case IE7). I want the area to scroll horizontally. In terms of vertical space for the div area, I would like the browser to use as much height in the browser as needed. Using overflow: auto I only get a horizontal scroll bar in firefox, opera and safari. In IE7, both horizontal and vertical scrolling are required to see all the content of the div. That is the way iExploder works :-); it always wants to generate scrollbars, and those take up space (that is, they don't adjust the auto height of an element). I have worked around this by giving the element with overflow applied an extra 16px bottom-padding, but *only* for IE. The 16px is the height of the horizontal scrollbar. Rumours have it that IE 8 is not affected by this bug. Yes, your padding-bottom suggestion worked out well. For IE, I add the padding-bottom:16px property and in addition since I know vertical scrolling will never be necessary I also set the overflow-y:hidden property which removes the vertical scroll bar that IE otherwise would have shown. Only overflow-x is set to auto. DIV style=width: 600; padding-bottom:16px; overflow-x: auto; overflow-y:hidden; I only do this for IE; for other browsers the following is fine: DIV style=width: 600; overflow: auto; I have another question about the width, but I'll start that as a new post. Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] width of scrollable table
I've create a scrollable table by surrounding the table with: DIV style=width: 600; overflow: auto; The table contains a variable number of thumbnail images. It seems like the only way I can get table to be clipped properly and scroll is to give a pixel length to the width of the DIV. I thought I could use: DIV style=width: 100%; overflow: auto; and I was expecting that the table would fill the width of the browser and then scroll horizontally when necessary. But what happens is the table expands out to the size needed to display all the images in the row of the table and in most cases causing the entire browser to gain a horizontal scroll bar. I hate making anything a hard width because you never know how wide a browser will be, but I can't get scrolling to work well with a percentage width. Any thoughts? -- Jim Albert __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Redefining a style for a portion of html
Gunlaug Sørtun wrote:
Jim Albert wrote:
Am I getting close with the following:
div.tinyp p { font-size: x-small; font-family:
verdana,arial,helvetica,sans-serif; }
And then use it as such: DIV class=tinypPI hope this html will
use the div tinyp class/DIV
It should work.
The best would be if you presented us with a link the the page you're
working on, or a reduced example page, so we can see what you're trying
to achieve.
Adding extra divs is ok, but we generally try to avoid adding any
unnecessary elements for styling - if at all possible, and instead
use/reuse existing elements. Easier to show _how_ directly in a simple
but working page.
I ended up with the following style which solved my problem:
.tiny p { font-family: verdana,arial,helvetica,sans-serif; font-size:
x-small; }
With this I can simply maintain my use of the tiny class and any P
tags within the use of that class will respect the same style. No
additional div tags were necesary.
Thank you very much; your advice was very helpful. It was your tip that
I could define the style of an html element within a class that lead me
to this solution.
--
Jim Albert
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is the offtopic address?
Christopher You wrote; What is the offtopic email address? At the bottom of every email sent by the list you'll find a link to the CSS-D Wiki. [1] It's there that you'll find a link to the off topic list.[2] Regards Jim Nannery [1] List wiki/FAQ -- http://css-discuss.incutio.com/ [2] http://css-discuss.incutio.com/?page=OffTopic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is the offtopic address?
Keith You wrote So is there, or is there not, an '[EMAIL PROTECTED]' address where people can just shoot the breeze? I know that Majestic has asked this twice before and both times was directed to that static page of links to more lists. I believe I may be missing a key link in the chain...LOL. There is no place on CSS-D that I'm aware of where you can *shoot the Breeze* with other list members about *off-topic* discussions. You can of course always email list members *off-list* for *off-topic* discussions. This thread should probably end here if you have addtional questions feel free to email *off-list*. HTH Jim Nannery __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Form layout
Can someone point me to a good online tutorial describing various techniques for tableless form layout? If possible, I'd like to create some forms that would allow me to use CSS to switch between two common layouts - one in columns and the other line-oriented. That is: Name [ ] Email [ ] Name [ ] Email [ ] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What's an OP? and other stuff
Afternoon Hedley You wrote: My apologies for being off-topic and my thanks for the pointers. But what is an OP? Clearly, I am one but a look in the mirror confirmed general normality. OP = original poster Whenever someone replies to one of my threads, I receive two copies of each response but only one copy of responses to other new topics by other people. Different, interesting. You'll receive two of this email.. one to you and one to the list. that's because I replied to all that's the common practice for this list. You'll only receive one email if it not a reply to you but only directed to the list... HTH Jim Nannery www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] giant gaping gap I can't close
Afternoon Scott You wrote; Hi, I have this big gap I can't figure out how to get rid of. If you look here (http://sthig.thigpendesigns.com/index.php/sthig/int/) you'll see an image about and then there is this abnormally large gap between that and the paragraph. How do I narrow that? here is my css http://sthig.thigpendesigns.com/index.php?css=sthig/style/ Best, Scott I'm a little unclear about the *gap* your referring to. On IE 6 and FF 3.0.2 the word / image * About * is centered above your picture There isn't ( from my perspective) an unusually large gap there in my browsers What I see on IE 6 is a spacing issue with the illustration. The top half of the illustration (hair and eyes) is moved to the right by a considerable amount... That's caused by having IE 6 in Quirks mode [1]. Removing the xml prologue that precedes the doc type will switch to Standards mode that corrected the problem locally. Haven't tested on a live server or tested IE 7 but it should be fine. Hope I'm seeing the problem you want a fix for... If not, others may have to offer suggestions Best [1] http://en.wikipedia.org/wiki/Quirks_mode Jim Nannery www.gotbeebar.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css beginner in search of great books and courses
Afternoon Josh You wrote: I am a graphic designer who has just started learning CSS and XHTML. I've got Eric Meyer's books: CSS: The Definitive Guide 2nd edition, and CSS Web Site Design Hands on Training and the zen of css design. Would appreciate any recommendations. Thanks, Josh The CSS-D list wiki [1] is always a good place to start. You'll find an extensive list of books [2] on CSS there. Best to all [1] http://css-discuss.incutio.com/ [2] http://css-discuss.incutio.com/?page=GoodBooks Jim Nannery __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: Tables or Divs ::
This post has links to a number of different articles on the subject of CSS forms: http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ Jim www.jimdavis.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List items in columns
Is there any way to lay out list items as follows, without using tables (won't look right unless you view email as plain text): * CPU: 2 x Xeon 5130 * RAM: 8 GB * STORAGE: 330 GB The thing that drives me nuts with using tables in this example is that it requires such a lot of markup for very little effect. Each line above would need to be an individual table. Not so bad with three lines, but for hundreds, it's tedious. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List items in columns
It's an extremely static page. Even with 100's of items, it's not woth setting up a database just for the sake of generating the markup. - Original Message - From: Alan K Baker [EMAIL PROTECTED] To: Jim [EMAIL PROTECTED] Sent: Tuesday, September 09, 2008 9:35 PM Subject: Re: [css-d] List items in columns With such a large amount of data, I would suggest using a template and perhaps a server-side database. MySQL is often included in a web hosting package and is fairly quick to learn. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Jim To: css-d@lists.css-discuss.org Sent: Wednesday, September 10, 2008 4:07 AM Subject: [css-d] List items in columns The thing that drives me nuts with using tables in this example is that it requires such a lot of markup for very little effect. Each line above would need to be an individual table. Not so bad with three lines, but for hundreds, it's tedious. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List items in columns
I was under the impression that you couldn't set a width on an inline element. - Original Message - From: Damien [EMAIL PROTECTED] To: Jim [EMAIL PROTECTED] Sent: Tuesday, September 09, 2008 9:23 PM Subject: Re: [css-d] List items in columns You could put a span or something in the li around CPU Then set a width on it Even better if you are already using a b or i for the CPU part. Then just use that tag! Cheers, Damien Ph: (07) 838 3775 Fax: (07) 838 3775 Email: [EMAIL PROTECTED] Jim wrote: Is there any way to lay out list items as follows, without using tables (won't look right unless you view email as plain text): * CPU: 2 x Xeon 5130 * RAM: 8 GB * STORAGE: 330 GB The thing that drives me nuts with using tables in this example is that it requires such a lot of markup for very little effect. Each line above would need to be an individual table. Not so bad with three lines, but for hundreds, it's tedious. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Testing CSS for higher screen resolutions
Here is what the left side looks like on my 1928 wide monitor. http://www.jimdavis.org/polkadot.jpg You may want to consider centering the header content for viewing on wider monitors. Jim www.jimdavis.org On Fri, Aug 22, 2008 at 3:20 PM, Polka Dot Cottage Admin [EMAIL PROTECTED] wrote: Hi. My screen resolution is 1024x768, and the content of my site fits that window nicely. I want to test how it will behave on a monitor with higher resolution. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block file from download
Afternoon Wendy You wrote: Hello: Does anyone have code to block a user from downloading a flv file? I don''t want people to be able to download. Thanks Wendy My video is here, and the Real Player pops up on PC IE. http://www.hmrlignan.com/video.html Not to put too fine a point on this, but where is the CSS question? You might get better results from a list like Web Design - L. [1] Having said that, Google is also your friend [2] Best Jim Nannery www.beebar.net [1] http://css-discuss.incutio.com/?page=OffTopic [2] http://www.google.com/search?q=block+downloading+file%3Fie=utf-8oe=utf-8aq=trls=org.mozilla:en-US:officialclient=firefox-a __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Resources
Here is a good css reference: http://reference.sitepoint.com/css Jim www.jimdavis.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Msg from Stephen Carrell re Dynamic navigation link aid
Another brief tutorial on this topic is at http://www.search-this.com/2007/06/13/css-current-page-indicator/. It is very straightforward -- you can add pages to your nav menu as long as you give the body of your new page a class, and also class the link. Then you have to add a rule about the page to your css file. I used this procedure NOT to change the color of the link, but to remove it from the nav menu altogether. Instead of giving a different color, I just set the link to display: none; which appears to have no ill effects. I guess that's not a very good approach (though it is what was asked for by the client), because a new visitor who says Where the heck am I might not immediately be able to tell. Jim Swanson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners Problem in IE7
Hi folks, I'm working on this page: http://clients2.jdgcommunications.com/csshelp/working.html which displays fine in Firefox and Safari. However, in IE7, the bottom rounded corners of the main DIV (the middle-nested, medium-gray box) aren't showing up. I've tried changing margins and padding to no avail. The structure of that DIV and the way corners are applied to it are identical to the wrapper and sidebar DIVs, which display OK. Can anybody see what I've done wrong? HTML and CSS files validate OK. Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Web Site Dev Beefs
Afternoon Christopher You wrote Over the course of the past few days, I have asked numerous questions about my site. Now I know I'm not a CSS\HTML guru but I have learned a lot from the people of this list, enough to have a much stronger understanding. I'm just trying to solve two or three more problems and although it is benificial to have a understanding of CSS and HTML, I feel I have that understanding, snipped out a bit here You need to validate your CSS every time you post a new page. You currently [1] have two errors; one that may be having an effect your #flashbox. It was pointed out in a earlier thread [2] that you *cannot use* negative padding. You have padding-top -12px on #flashbox and padding-left -12px on h1 I does make *me* wonder if you *understand* CSS as well as *you* think you do. Keep plugging away at it. it's a struggle worth waging Best [1] http://www.walkfar.ca/test/productionsite14.html [2] http://lists.css-discuss.org/mailman/private/css-d/2008-July/089210.html Jim Nannery www.gotbeebar.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Positioning?
I would change:
#content { position: relative; }
and
.test { position: absolute; left: 0; bottom: 0; width: 198px; height: 175px;
text-align: center; }
Jim
On Thu, Jul 24, 2008 at 3:37 PM, Matthew Stoneback
[EMAIL PROTECTED] wrote:
I asked this once before and never received a response from the group so I
thought I would try one more time.
At the link located below, is there any way to position Test Image Box at
the bottom of the column on the left hand side? I know I can vary the top
margin of the div test on each page to force this image to a position,
but
I wanted to avoid doing this for every page. I also though absolute
positioning might work but have not tried it yet. Any suggestions on how I
can make this work?
HTML: http://dev.eddysound.com/dev/msc/
CSS: http://dev.eddysound.com/dev/msc/main.css
Any help on this would be greatly appreciated. I just need to know if I am
trying something which is impossible to achieve in CSS.
Thanks!
Matt Stoneback
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners Problem - IE7
[Apologies if this shows up on the list multiple times. I posted Friday, and again yesterday, from my work email address but nothing made it to the list. I'm trying from an alternate address now.] Hi folks, I'm working on this page: http://clients2.jdgcommunications.com/csshelp/working.html which displays fine in Firefox and Safari. However, in IE7, the bottom rounded corners of the main DIV (the middle-nested, medium-gray box) aren't showing up. I've tried changing margins and padding to no avail. The structure of that DIV and the way corners are applied to it are identical to the wrapper and sidebar DIVs, which display OK. Can anybody see what I've done wrong? HTML and CSS files validate OK. Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Auto Size
Christopher, Try this: http://www.jimdavis.org/test/imagetest1.html Not very elegant, but it seems to work. Jim On Sat, Jun 7, 2008 at 8:00 AM, Christopher [EMAIL PROTECTED] wrote: I would like to know if CSS is capable of this if you create a background image that is a fixed size and want it to resize based on the browser window resizing is this possible ? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Latest Rounded Corners
Afternoon Chris You wrote: I know there are many rounded corner techniques out there, and I'm not looking to start a war. :-) But I was wondering if there are any especially good, newer techniques to the game. I need my rounded box to be resizable, and kind of like the idea of using only one small circle image that gets offset for each corner. Prefer no javascript for this. I did start with Google, but quite a few of the promising link titles lead to pages no longer there, so I hoping this list could point me to recent improvements in this area. Thanks as always for the expertise here. Chris Not sure how *new* these are, but the list WIKI [1] has lots of info and links that may prove useful. Best [1] http://css-discuss.incutio.com/?page=RoundedCorners Jim Nannery www.gotbeebar.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Misc classes naming conventions
black-button, grey-button might work. Jim On Mon, May 12, 2008 at 7:10 AM, Lee Powell [EMAIL PROTECTED] wrote: Hi I'm working on a new project, and I'm keen to get my naming conventions down to convey meaning in what I'm marking up. Anyway, design have produced a layout which makes use of the normal elements along with 2 rather odd block style buttons, there's nothing unique about them, except they are normal anchors with a bit of padding. One style has a black background and the other grey, both with white text. So my markup looks like this: span class=buttona href=...This is a button/a/span So I need a naming convention to differentiate between the two, and I really don't want to use 'black' and 'grey' for obvious reasons, 'style-a' and 'style-b' doesn't seem to convey much meaning... So has anyone else got other ideas on how to name these seemingly miscellaneous elements? Cheers __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Lost in positioning masthead image
Robert, Here is a demo where the image is floated left and a div containing the text is also floated left: http://www.jimdavis.org/test/chess.html Jim On Sat, May 3, 2008 at 6:54 PM, Robert Lane [EMAIL PROTECTED] wrote: My example page is at: http://tinyurl.com/3r8rhu I seem to be a bit rusty here and am struggling with positioning an image and some text in the mast head. I have a div named masthead. A div within that named content. In the content div I want an image (yes I hate animated gifs too!) to the left side of the masthead. Then I would like the Main Heading h1 LeChess Club/h1 followed by the tag line of pA Society for Better Chess /p So basically --- Image--- Heading tag line I may want to be able to play with the padding around the image for best placement, But I want both lines of text to line up to the right of the image rather than below it. What is generally the best and/or easiest way to do this? Do I need to use position, float, or what? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list nav not working as needed
Cory, Can you upload your page to a server and send us the URL? Jim On Thu, May 1, 2008 at 12:58 PM, Cory Shubert [EMAIL PROTECTED] wrote: Trying again, looking for a few ideas on where to go... I am having a problem and can't seem to see the elegant solution. I have a simple ul list nav with rollover states. I need to have the selected state show without any background, just white, to blend in with the content below it. The nav was created in CSS and didn't have this look built in and I just can't seem to figure it out without wasting a ton of code to do it. I have tried to have a selected or non link style so that the background would just be white, but if the selected link is selected, then it doesn't need a ahref tag and thus breaks the CSS function... Any help would be greatly appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div problem - children not displaying as children
Afternoon all
Jeff Blaine wrote:
Basic test case: http://www.kickflop.net/div-problem.html
Any suggestions would be great.
David L wrote
#bottomrow { overflow:hidden;/*add to sector*/}
html
wrap the line inside bottomrow div. Notice bot1 bot2 and bot3 are not
inside this bordered box! in an empty division (no css needed) like so:
div
inside bottomrow div. Notice bot1 bot2 and bot3 are not inside this
bordered box!
/div
And validate.
In addition to David's suggestion you can use _overflow:auto_ and get the
same results in firefox and IE7. That however leaves IE 6 with the bot1
bot2 bot3 sitting on the bottom border in the bottomrow div with no space
below them.
In your test case, try moving your _ div class=clear/div _ to just
inside the bottomrow div (below bot3 and before the closing /div)
div id=bot3
bot3 is here!
/div
div class=clear/div
/div!-- bottomrow --
IE 6 will open up and behave like FF and IE7.
Best
Jim Nannery
www.gotbeebar.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with Openrealty
Afaternoon Chick You wrote: Hi guys, probably nott the right place but does anyone know to or know of a resource tht I could edit openrealty to use with my current site? Any help would be greatly appreciated! Thanks Unless I'm missing the CSS part of this question, you might get better results directly from the OpenRealty website [1]. The off-topic page of the list WIKI [2] lists additional forums that may also be useful. Best Jim Nannery www.gotbeebar.com [1] http://open-realty.org/ [2] http://css-discuss.incutio.com/?page=OffTopic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horrible Lag time in CS3 Design/WYSIWYG View
Afternoon Craig You wrote I'm in need of an expert Dreamweaver CS3 engineer or guru to take a look at why my CSS layout is experiencing such a horrendous 1-2 minute delay/refresh time in the WYSIWYG. A sample page and its css files can be downloaded here: http://www.geocities.com/craiggivens01/cs3_lag_example.zip It currently only renders correctly in Firefox, but everything validates. I believe the problem has to do with the modules.css file and all of the modules being called in the middle of the page grid, but I really can't pinpoint exactly WHY CS3 takes 1-2 minutes to refresh every time I try to either : a) paste in new text content b) add a new li in one of the modules c) create a new module by duplicating the existing div and its container grid Is it trying to re-calculate the widths of the grid? Is it the number of modules called in the markup? Is it the load time of multiple classes per div? Is it a syntax issue? I've been wrecking myself for days trying to fix this but nothing works. Any ideas are much appreciated! __ Have you asked this question on the Dreamweaver forums [1] ? You will most likely get a satisfactory response to this question directly from the source. You might also have a look at the CSS-D List WIKI off topic [2] page for additional sources that can answer this question directly. Best Jim Nannery www.gotbeebar.com [1] http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=12 [2] http://css-discuss.incutio.com/?page=OffTopic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper isn't wrapping!
Stuart, You have given the ul an id of mainNav and it is closed by /ul. If you had: div id=mainNav ul.../ul /div You would need the closing /div. Jim On Tue, Apr 8, 2008 at 2:12 AM, Stuart Walsh [EMAIL PROTECTED] wrote: Jim Davis wrote: Hi again, Note: ul id=mainNav lia href=instrument.htmlthe instrument/a/li lia href=composers.htmlcomposers/a/li lia href=music.htmlmusic/a/li lia href=gallery.htmlgallery/a/li lia href=#links/a/li lia href=#contact/a/li /ul /div *THIS IS CLOSING #WRAPPER *Jim* * Many thanks for your help. And thanks to others for their suggestions too. But I still don't understand one particular thing, and I must be fundamentally misunderstanding something! Surely the /div you have highlighted only closes the #mainNav div. Doesn't the overall #wrapper need a closing /div too? I've looked over my html many times. I have an overall wrapper div and within that a number of divs and all have their opening and closing tags. I've tried removing the final /div which I had assumed was the closing /div for the wrapper. Nothing happens - so I really must be doing something wrong. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper isn't wrapping!
Stuart, In #wrapper add display: table; and you will see the border on the left side of the page in FF. Jim On Mon, Apr 7, 2008 at 3:21 PM, Stuart Walsh [EMAIL PROTECTED] wrote: I must be making a clumsy, beginner's, mistake somewhere but I just can't figure out what is the problem. The CSS validates but isn't working as it should. Here is the page: http://www.tuningsinthirds.com/cytre/ and the CSS: http://www.tuningsinthirds.com/cytre/new.css I can't get the wrapper div to wrap around everything - the header, mainNav, content and footer divs. The markup looks very basic but in FF the wrapper is only wrapping the header. But in IE it does wrap around the two floated divs, the 'content' and 'mainNav' but not the footer. (I've run the W3C html validator and there are indeed some errors - but I can't make sense of them) Any advice would be much appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper isn't wrapping!
Hi again, Note: ul id=mainNav lia href=instrument.htmlthe instrument/a/li lia href=composers.htmlcomposers/a/li lia href=music.htmlmusic/a/li lia href=gallery.htmlgallery/a/li lia href=#links/a/li lia href=#contact/a/li /ul /div *THIS IS CLOSING #WRAPPER *Jim* * On Mon, Apr 7, 2008 at 3:21 PM, Stuart Walsh [EMAIL PROTECTED] wrote: I must be making a clumsy, beginner's, mistake somewhere but I just can't figure out what is the problem. The CSS validates but isn't working as it should. Here is the page: http://www.tuningsinthirds.com/cytre/ and the CSS: http://www.tuningsinthirds.com/cytre/new.css I can't get the wrapper div to wrap around everything - the header, mainNav, content and footer divs. The markup looks very basic but in FF the wrapper is only wrapping the header. But in IE it does wrap around the two floated divs, the 'content' and 'mainNav' but not the footer. (I've run the W3C html validator and there are indeed some errors - but I can't make sense of them) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bullet list without paragraph break
The rule is display: inline See http://css.maxdesign.com.au/listamatic/horizontal01.htm for a basic example. Jim On Sun, Apr 6, 2008 at 7:07 AM, The Color Guard [EMAIL PROTECTED] wrote: Hi, I'm new to CSS and new to the list. I just started going through the exercises in Meyer's book, and they're great -- I am catching on. Meanwhile, I ran across a problem which might be basic html; I hope y'all don't mind. (Maybe it could be solved with CSS.) I want to make a bulleted list, but without the paragraph break before and after the list. Is this possible? This is the code I found: ul liFirst item liSecond item liThird item /ul It automatically includes a paragraph break, frustratingly. Also -- is there a way to post questions on the css-discuss site? I don't find any log in or post buttons. Does this mainly work as a mailing list, rather than a bulletin board? Thank you, Suzi __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bullet list without paragraph break
Afternoon Andrew
You wrote:
perhaps but it does work does it not?!
Krystian - Sunlust wrote:
On 4/6/08, Andrew Doades [EMAIL PROTECTED] wrote:
remove the ul from start and end!
This will give you just the bullet points!
Andrew
That's semanticaly incorrect,
just set padding and margin to 0 and that should fix it.
ul {
margin: 0;
padding: 0; }
also, it should be:
ul
liFirst item /li
liSecond item /li
liThird item /li
/ul
Regards,
Semantics aside, it's malformed xHTML and will cause browsers to use error
correction to render the code This may or may not * work * now or
perhaps in the future
It is always best to use properly formed xHTML with CSS To suggest
malformed code is a fools errand and should, IMO, not be suggested as a fix.
As Jim Davis suggested [1] display:inline is probably what is needed for the
O.P. to accomplish her goal.
Jim Nannery
www.gotbeebar.com
[1] http://css.maxdesign.com.au/listamatic/horizontal01.htm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a:hover with absolute positions
Tony, You may find it worthwhile to read this article and study the demos. http://www.alistapart.com/articles/sprites/ You should be able to achieve your design with a single ul and css (and your image, of course). I use a bit of php to show the currently selected page and can send you that code if you wish. Jim On Sun, Apr 6, 2008 at 10:15 AM, tony [EMAIL PROTECTED] wrote: Hi, Well on the way to creating my first ever webpage but have run into a problem. To create my vertical navigation tabs and using my graphic image, I have to, I believe, absolutely position both the graphic and the text. This works fine but on a:hover the text and the graphic indicate separately rather than together. I have tried various ways to combine the text and the pictures on the same li without success. See: http://www.spiess.plus.com/ I don't know whether Im dealing with a syntax error, using the wrong selector or just asking the impossible. Can any one point me in the right direction please. Tis early days and still to do: Fine tune text spacings Overcome a:visited problem Set div up for current page indicator Correct for IE6 bugs Validate code Arrange print version sheet Looming over the horizon resolve a pagewrap div problem with a disappearing border. And then Im there! Thanks inadvance Tony __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [css] Sticky footer problems
Here is a link to an article and demo for a technique to create css frames. It uses a fixed header and a sticky footer. Perhaps you will find inspiration for your footer here: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ Jim On Sat, Mar 22, 2008 at 1:31 PM, Krystian - Sunlust [EMAIL PROTECTED] wrote: Hello, ... Couldn't really find an example of working sticky footer to be honest, since most websites have enough content to _always_ fill my above the fold space. Example of my problem is here: http://sunlust.net/portfolio.htm As you can see, in any browser I get a messed up look and footer doesn't stick, even tho I tried applying one of methods I googled. ... Thanks in advance. -- Krystian - Sunlust Sunlust Designs http://sunlust.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 dropping floats
How about making mid-container-inner a static div rather than floated, then
floating one of the ul's left and the other ul floated right. See this demo:
http://www.jimdavis.org/test/list_this.html
Will re-size gracefully in IE6 win, FF 2.0 and Opera 9.26
Jim
On Fri, Mar 14, 2008 at 11:27 AM, Julie Wetherill [EMAIL PROTECTED]
wrote:
I have a 3 col layout, with left/right columns floated. Inside the center
column, I have nested a container div within which are 2 float more divs
floated left. Within these I have vertical lists. The goal is 2 vertical
lists sidebyside. Here is the page:
http://hul.harvard.edu/oisnew/systems/oasis/upload.html
In IE6, any squeezing of the viewport causes the entire center column to
drop below the layout. This is not happening for other pages with
unfloated
content. The problem page has onboard styles in the header, which are:
.mid-container { border: 0; float: left; width: 95%; border:
0; margin: 0; padding: 0 }
.mid-container-inner { float: left; width: 48%; border: 0; margin:
0; padding: 0 }
.mid-container-list { padding-left: 0; margin-left: 0; }
.mid-container-list li { padding-left: 0; margin-left: 1.5em; }
Any suggestions on how to prevent those inner floated divs from dropping
below the layout?
Thanks. --julie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forcing an entire li to be a link
Take a look at this article and demo: http://www.smileycat.com/miaow/archives/000230.php Jim On Tue, Mar 11, 2008 at 9:27 PM, linojon [EMAIL PROTECTED] wrote: Here's a demo of my problem http://www.parkerhill.com/hover-test.html When this page is viewed in Firefox or Safari, and you hover over any of the list items, you can link to the 'overlaid' link. But in IE7, you must only hover over whitespace to have a link; if you hover over text it wants you to select text. Changing the order of elements, or using nested div's doesnt seem to help. Is there a way to force IE to make the entire li a link? or a better way to accomplish this that works in all browsers? (and preferably without using javascript) Thanks linoj __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] a picture with in a picture
Here is a way to have the frame in as a background in the css and adding the image in the body of the html: http://www.jimdavis.org/test/frame_demo.html Jim On Thu, Mar 6, 2008 at 6:57 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Then in HTML on different pages use that frame to cover over an image, giving the image a nice decorative picture frame. Don't know if I'm pushing the limits. thanks in advance chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to center this suckerfish?..
Julie,
The ul will need a width in order to be centered in your 100% wide #nav. For
example
#nav {
width: 100%;
...
...
}
#nav ul {
width: 80%;
margin: 0 auto;
...
...
}
Jim
On Sat, Mar 1, 2008 at 1:48 PM, Julie Bessette [EMAIL PROTECTED] wrote:
Hi everyone,
I'm wondering if anyone can throw me a bone - I'm a css-newbie, and I've
spent an embarrassing amount of time trying to center this menu... I know
I'm probably missing something obvious...
http://www.studiolumineux.com/menusample.htm
If I could stop the top-level menu items from wrapping, that'd be the
icing
on the cake!!
:)
Thanks for any help you can throw my way...
julie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE fails to shrink width
Question: Will all of the images always be the same width? Jim On Wed, Feb 27, 2008 at 6:35 PM, Russell Robinson [EMAIL PROTECTED] wrote: Hi all, I have a problem that affects IE6 and IE7 (I haven't tested IE5.5). I've created a test case: http://www.tectite.com/tests/iewidthtest.htm Firefox and Konqueror (FWIW) work exactly as intended. The aim is to get an image bounded by a frame (not browser frame) that also includes some caption text. IE expands the frame's div so that the border is the entire width of the content instead of fitting it nicely around the image. ... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] one pixel line to much, and a serious ie6/ie7 problem
Change
#navbar {
height: 30px;
to about 26px. Fixes FF problem.
Jim
2008/2/22 vwf [EMAIL PROTECTED]:
The URL:
http://www.opeform.nl/test/
Sorry!!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Online CSS Reference available from SitePoint
All, The folks at SitePoint have put together what appears to be a fairly comprehensive online CSS Reference. Check it out: http://reference.sitepoint.com/css Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Center multiple float lefts site check....
Matt,
Try:
#topNav { width: 765px; height: 28px; margin: 0 auto; list-style: none; }
No need to float #topNav left if you are trying to center it. Just adjust
the width of #topNav to fit the width of the all the elements inside and set
the margin to 0 auto.
Jim
On Thu, Feb 14, 2008 at 9:07 PM, Matthew Stoneback [EMAIL PROTECTED]
wrote:
Okay, now onto my dilemma. How do you center a group of images / links
that
are floated left in CSS? The site I am trying this on is here:
http://www.eddysound.com/rrc/index_help.html The CSS for the page is
here:
http://www.eddysound.com/rrc/main_help.css
The part of the page I would like to center is all of the links located at
the very top of the page (in white).
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help with a float inside a DIV
Remove clear: left; from .header-text and clear the float later in the markup. Jim On Feb 13, 2008 7:59 AM, Webmaster [EMAIL PROTECTED] wrote: I've got what seems to be a simple problem, but I can't find the answer. I've got this page: http://www.tusculum.edu/bookstore/new.html I have a simple heading with an logo image, and I want to float the address text to the right inside the header DIV. I tried this, but in both IE and Firefox, the text drops out of the header DIV. I tried putting the image in a DIV and floating it to the left, but that still doesn't work with Firefox, and it looks ugly in IE. The relevant CSS file is here: http://www.tusculum.edu/bookstore/css/box.css I apologize in advance for the ugliness of the CSS and the simplicity of this problem, but I appreciate any help. Thanks. -- Travis Crabtree Webmaster Tusculum College phone: 423.636.7300 ext. 5132 fax: 423.636.7492 email: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 a display:block issue
Visit this site for a solution:
http://www.smileycat.com/miaow/archives/000230.php
Jim
On Feb 11, 2008 11:21 AM, vincent pollard [EMAIL PROTECTED] wrote:
hi!
so, i have:
.headerTwoRight a {
text-decoration: none;
display: block;
height: 42px
}
and it displays fine in IE6 and FF but in IE7 the whole area isn't
clickable, just the Img P within it (as if it's ignoring display:block).
however, if i add a background-color to the A it works! but i don't want a
background-color. anything else i can use other than background-color to
trigger display:block in IE7?
Vince
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Disparity
Gerry, I would at least fix the errors having to do with the various table related tags. Why not have a go at a tableless design? Jim On Feb 11, 2008 6:33 AM, Gerry Goodfriend [EMAIL PROTECTED] wrote: Hey Jim, I've put up a copy of that page that does have the doctype defined and, unfortunately, it makes no difference. I also know that there are other errors, but I thought they'd be of minimal consequence since the page displays well enough in the other browsers with them. Thanks. Gerry [EMAIL PROTECTED] www.ckutfolk.com On 11-Feb-08, at 9:23 AM, Jim Davis wrote: You need to run the page through the html validator ( http://validator.w3.org/ ). There is no doctype, for example. Jim On Feb 11, 2008 6:00 AM, Gerry Goodfriend [EMAIL PROTECTED] wrote: Hi, I'm hoping to get help with a page that displays properly in Safari and Firefox on Mac, and Safari and Firefox on Windows, but not Internet Explorer 6.0! It looks as if it hasn't been formatted, but it has and it displays correctly on each of the other browsers! Please go to: http://www.bcam.qc.ca/html/contact.html and then, under the list that says: Our address is:, click on the letter a in Webmaster, and that will take you to the problem page. Thanks, [EMAIL PROTECTED] www.ckutfolk.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Disparity
You need to run the page through the html validator ( http://validator.w3.org/ ). There is no doctype, for example. Jim On Feb 11, 2008 6:00 AM, Gerry Goodfriend [EMAIL PROTECTED] wrote: Hi, I'm hoping to get help with a page that displays properly in Safari and Firefox on Mac, and Safari and Firefox on Windows, but not Internet Explorer 6.0! It looks as if it hasn't been formatted, but it has and it displays correctly on each of the other browsers! Please go to: http://www.bcam.qc.ca/html/contact.html and then, under the list that says: Our address is:, click on the letter a in Webmaster, and that will take you to the problem page. Thanks, [EMAIL PROTECTED] www.ckutfolk.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] PNG repeating background in IE
Karl, Here is a link that may help. Not sure if this method will work for a repeating background image. http://www.belafontecode.com/create-transparent-pngs-in-ie6-using-alphaimageloader-no-hacks/ Jim On Feb 7, 2008 1:10 AM, Karl Hardisty [EMAIL PROTECTED] wrote: I'm back in the fold after a break of 2-3 years, and much has changed. Unfortunately, this doesn't include IE5.5 and IE6. I have a layout I'm partial to, and have been experimenting with in the early stages, but have come across something I'm not sure how to fix. I've reduced the code down to the bare minimum to show the issue. The layout works fine in many browsers apart from the aforementioned, due to a transparent PNG being present in the css. Is there any way I can keep the general look and have it work somehow in IE of yore? HTML here: http://mothership.co.nz/reduction/ css here: http://mothership.co.nz/reduction/msnew.css Any thoughts to get me back on track much appreciated. Karl __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
Bill, The menu items don't change background color in IE6. The text color does change. Also, the pop-out for 'Tour Itineraries' is not popping out in IE6. Not sure of the cause, however. Jim On Feb 7, 2008 5:33 AM, Bill Stemp [EMAIL PROTECTED] wrote: http://www.pielows.co.za/ I'm particularly interested in how one section of the site appears in IE6 (or before). This section is accessed with the menu link '_*Cape Tours*_' and has a CSS-driven menu on the left. I think that this menu's background is not correctly aligned in IE6, but cannot be sure. Thanks for looking and any help. Bill __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] start an ordered list at a number 1
Tim You wrote; This is really an HTML question, not CSS so I'm replying off list. So nuch for going off list. You can use ol start=x (whatever number you need) to start a list at a new number. Or, you can use li value=x to skip numbering within a list. Both attributes are deprecated, so they are only valid under HTML 4.01 or XHTML 1.0 Transitional. Tim To be clear, attributes and html tags that are deprecated should only validate under HTML *Transitional* and XHTML *Transitional* Doctypes. With an HTML 4.01 *Strict* Doctype, deprecated tags and attributes will not be valid. Jim Nannery www.sylvesterneal.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover over tabbed selection
Aaron, A number of various drop-down menus are demonstrated here: http://www.cssplay.co.uk/menus/ If you use Dreamweaver check the offerings for sale by Project Seven here: http://www.projectseven.com/products/menusystems/index.htm Also, Project Seven has a good article on accessibility and menu systems here: http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm Jim On Feb 6, 2008 9:59 AM, Aaron Gray [EMAIL PROTECTED] wrote: I am looking for a basic tabbed hover over based content selection example. Like :- http://www.authorize.net Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What Margin Unit Does IE6 Want?
Chris,
You may find it more efficient to zero out the margins etc. then set the
variables to your liking. Thus your chosen rules will apply across all
browser types. Something like:
h2 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
}
Then enter h2 again and set the rules to fit your design.
If you want to jump in with both feet read Eric Meyer Reset info here:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Jim
On Feb 4, 2008 10:50 AM, Chris Akins [EMAIL PROTECTED] wrote:
Validated page with included styles is here:
www.springfieldmo.gov/egov/cityclerk/minutes_testHtags.html
Everything is fine except for the h2 class=description items. These
are
the left hand, called out headers. They are supposed to line up
vertically
with the text to the right of them, which they do everywhere but IE6
(don't
have IE7 to test). Firefox, Safari on Mac are great as well as Firefox on
PC.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
It may be possible to use floats to achieve your objective. Here is a link to a demo using floats: http://www.jimdavis.org/test/checkerboard.html This uses two floats, one that is 16em wide by 8em high, and a blank that is 8em square. The image within the wide float is floated left and is given a class to set the width and height of the image to 8em by 8em. This makes sure the image is sized to fit the containing element and allows the image to change size when the user re-sizes the text in the browser. I have only tested this on a PC with FF and IE7, so not sure of results in other browsers and OS's. Jim On Jan 31, 2008 10:15 AM, Kenoli Oleari [EMAIL PROTECTED] wrote: I am trying to create using CSS to make a page that looks like this: http://sfnan.org/iotc/templates-php/pie_1.php This page is a series of divs positioned somewhat like a checker board. This page is created by CSS using absolute positioning within a div that is positioned relatively. For various reasons, I am interested in assembling the checkerboard divs using something besides position:absolute __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Presentation vs content issue for interlinear text
Have you thought of using a definition list? dl dtOriginal text/dt ddTranslated text/dd dtOriginal text/dt ddTranslated text/dd /dl You can use css to style the dl dt and dd elements. Jim On Jan 29, 2008 10:32 AM, T. R. Valentine [EMAIL PROTECTED] wrote: I'm working on a project to display interlinear text (original language with a very literal word-by-word translation immediately below). The only presentation which my poor imagination can conceive is to place each word in a separate cell with the translating word in a separate cell immediately below (centring the text in every cell to maintain alignment). But this would make searching for phrases (in either language) impossible. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Problem with positioning
Please include the URL to the page in question. - JD On Jan 28, 2008 2:44 AM, Lyn Willaims [EMAIL PROTECTED] wrote: Hi, The following page I created has problems in Internet Explorer. The header of the web page shifts right but works fine in all other browsers. I can't find a bug fix, does anybody have any suggestions? Many Thanks, Lyn Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about wrappers/containers
Jason,
If I understand correctly, you are after something that looks sort of like
this example:
http://www.jimdavis.org/test/stainlesstest.html
This uses a background image placed in the body {...}. The image is 2500
pixels wide by 1 pixel high with a center section of black that is 760px
wide. The image is given a position of 50% 0 to make the center of the image
appear in the center of the viewport regardless of the users screen width.
The wrapper is set to 740px wide and margin: 0 auto; to place it inside the
black section and leave a little space around the text.
As a side note, you may not want to base your design on any assumption of
the users screen width. The availability of lower cost wide-screen monitors
means larger numbers of users have screen widths that can be wider than you
may anticipate. My screen width is 1920px, for example, and there seems to
be growing numbers of users with even wider widths.
Jim
On Jan 25, 2008 1:45 AM, J [EMAIL PROTECTED] wrote:
... I want no space
between the graphics and the wrapper.
This is the current code for the #wrapper ID here:
#wrapper {
background-color:#99;
height:700px;
letter-spacing:-1px;
margin:0pt auto;
position:relative;
text-align:left;
width:760px;
word-spacing:-2px;
}
...
Thanks
~Jason
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Multiple Column Lists
Is there any way to change the flow in the browser to vertical, like for instance with Chinese text? Or am I dreaming? Here is a link to information about a JavaScript / CSS3 implementation of what you are interested in. http://www.csscripting.com/wiki/index.php?title=Main_Page Unfortunately, this solution requires a browser that includes the css3 multi-column module, such as Firefox or Opera. Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] proportional versus proportional-elastic font-size
There is a good discussion of font sizing here:
http://www.alistapart.com/articles/howtosizetextincss
Jim
On Jan 5, 2008 3:55 AM, DAVOUD TOHIDY [EMAIL PROTECTED] wrote:
Hi,
Senarios:
1-body {font-size:X%} and no any other font-size
declaration for any elements.
2-body {font-size:X%} and font-size:Yem for other elements.
Where X and Y are variables.
If everything else is the same, which one is better choice for
a cross browser /platform solution ?
Pros and cons with DEMO please. and why?
Thanks for your input.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A confusing twist on the 3-column layout
Matt, I have done a demo of how I would solve the problem. http://www.jimdavis.org/variwidth.php The idea is to create a div that is the width of the photo. The div will also contain a holder for the icons. If you don't want to change each page by hand you can write a php script that will get the width of the image for you. Jim On Dec 30, 2007 7:54 PM, Matt Feldman (inthedistance.net) [EMAIL PROTECTED] wrote: ...Here's an example: http://www.mincel.com/gallery/travel_places/paris/IMG_1610.JPG.html What I'm trying to do is replicate the display of this photo. Ignore everything but the main photo and the navigation bar icons directly above and below. I only want to use a lower navigation bar, so this becomes like a 3 column layout with header, where the header contains the photo and the 3 columns contain those nav buttonshttp://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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Laying out blocks in columns
I'm generating a page with blocks of nested DIVs that I'd like layed out in two colums. The width of the blocks is fixed, but their height may be variable. I'd like to write them into the HTML source in numeric order (since it's simplest): 1 2 3 4 5 and have them laid out: 1 2 3 4 5 I'm not sure why I can't figure this out. Is it difficult? See example at: http://test.zolx.com/test.cfm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Laying out blocks in columns
I'm not sure why I can't figure this out. Is it difficult? See example at: http://test.zolx.com/test.cfm Get rid of the margin-left on .blockright as a first step. Thanks. That was the key item I was missing. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] need help on vertical alignement
Pat, When you use height: 100% you have to ask yourself the question what is it 100% of? Since you did not specify the height of the containing element or the body, the browser can't calculate the height. Here is an example of two floated divs, with a height of 100%, inside of a fixed height container: http://www.jimdavis.org/test/heights.html This approach would only work if you were certain the content would always fit vertically within the specified height of the container, or use one of the overflow rules to deal with the additional content. To accommodate an unknown height it is common to use the faux columns technique. Here is an example I did: http://www.jimdavis.org/test/heights2.html You can read this for more information: http://www.alistapart.com/articles/fauxcolumns/ Jim On Dec 21, 2007 9:03 PM, Patrick Aljord [EMAIL PROTECTED] wrote: Hi all, I need help for those two divs details and body in my container, they don't have the same height and I would like them to have the same height. Any way to do this with css? here is the page: http://p80.free.fr/testy/dropdown/test.html thanks in advance Pat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS simple question?
Ernie Here is a way to do it with a single image that contains two triangles in a fluid layout. http://www.jimdavis.org/test/triangles.html Jim On Dec 23, 2007 8:44 AM, Ernie Finlay [EMAIL PROTECTED] wrote: I can put a right angle triangle on the left side of the container with the diagonal facing right,I need a code to put the triangle on the right side of the container with the diagonal facing left. Thanks,Ernie. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Hi, The validator is reporting a number of errors in your mark-up. Go to: http://validator.w3.org/ and enter your URL to see the results of the validation test. Jim On Dec 20, 2007 1:33 PM, juliann wheeler [EMAIL PROTECTED] wrote: Does anyone know why this page is not picking up the css style sheet like the javascrip is telling it to? http://www.pcg-advisors.com/new/theteam/brent.html It is supposed to look like this one which happens to be working: http://www.pcg-advisors.com/new/index.html I can't tell why it's working with the home page and not the other one. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nested lists and absolute positioning and Internet Explorer
Patrick, I created a test page at http://www.jimdavis.org/test/listtest.html using your css and my html for the nested lists. According to Eric's book, Cascading Style Sheets 2.0 display: none The element will generate no boxes at all and thus will neither be displayed nor impact the layout of the document. Any descendant elements will also be prevented from appearing, regardless of the value of display for those elements. So if my understanding of this definition of display: none is correct then when ul li ul is set to display: none then it will not be displayed, nor will any descendants of ul li ul be displayed. It would appear that IE 6 is getting it right and FF is displaying the nested lists incorrectly. (GASP!!). What say the experts on the list? Jim On Dec 18, 2007 12:37 PM, Patrick Boutin [EMAIL PROTECTED] wrote: I am able to display this correctly in Firefox but IE6 and IE7 won't display the top:property correctly. I have 3 nested unordered lists. 1st one display inline 2nd one display block 3rd one display inline 2nd and 3rd lists only display when container list is hovered and the 2nd list has a background image display. the li of the 1st list have a position: relative the 2nd ul has a position: absolute; left: 11px; top: 10px; the top: 10px is perfect in Firefox but for me to get the same positioning, I need to change that to 30px.which makes the list be too low on Firefox. How can I fix this? (this is the actual code) with the actual section I mentioned above underlined. Everything else seems to display correctly. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nested lists and absolute positioning and Internet Explorer
Thanks Philippe. Haste makes waste, as they say. My apologies to the list for not taking more care to double check my markup. Corrections made. Jim Your html mark-up is invalid. And what Gecko, WebKit, Opera show is correct, given your mark-up. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jimdavis.org% 2Ftest%2Flisttest.htmlcharset=%28detect+automatically% 29doctype=Inlinegroup=0ss=1 Try this: http://dev.l-c-n.com/_temp/list.html Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nav not positioned right in IE
Amy, It looks like some of the elements that are using absolute positioning are being positioned relative to the viewport and not the parent div as you desire. If the parent div is static the absolute positioned div will seek the next higher parent that is not static. In this case, the body. Be sure the containing divs are position: relative; or anything other than static. It would be best to avoid absolute positioning if possible and have you menu be part of the flow of the document. If you find it necessary to use conditional comments to fix IE problems they should be placed in the html as the last lines just before the /head tag. Also, an element that you want to center within the parent is usually written margin: 0 auto; This says there is no top or bottom margin. The results of using margin: auto; could cause variable results. Jim On Dec 14, 2007 6:12 AM, Amy Drayer [EMAIL PROTECTED] wrote: Dear CSSers: I am about to pull out the gun and shoot myself over this mess. Any and all help GREATLY appreciated. A note: The invalidation errors should not cause this problem (it's a CMS, I cannot fix them). Please see: http://new.jocohealth.net/ CSS: http://new.jocohealth.net/upload/health/s/gl.css http://new.jocohealth.net/upload/health/s/gs.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar issues
Todd, The problem is using position: absolute for the column on the right. See http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning for more info. Both of the elements inside the wrapper should be floated. Take a look at this demo and view the source to see the css. http://www.jimdavis.org/test/floaters.html www.positioniseverything.net has good info about bugs and hacks for using floats with IE6. Also check out the List wiki/FAQ -- http://css-discuss.incutio.com/ for more info and ideas. Jim On Dec 12, 2007 1:34 PM, Todd Richards [EMAIL PROTECTED] wrote: Hello - Regardless of the struggles I have had with CSS, I still find myself trying more and more. In all actuality, I probably won't build a site with tables again! However, with that said I'm having another issue that I can't seem to figure out and I'm hoping the experts here might give it a look. It might be the answer is right in front of me but I've been looking at it too long. I'm working on a new site and have a right-hand sidebar for misc content. The problem I have is that if the main content window is not full of content (or more content than the sidebar), the sidebar flows down the page, over the footer, etc. Besides looking awful, it's not acceptable! It happens in Firefox, IE, etc. The development site is at: http://obb.danstuenzi.com. I have included the CSS below if anyone has any thoughts on this. Thanks! Todd __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site test
In both FF and IE6 the nav menu breaks across two lines when the viewport is set to 1024px wide. The 'contact' image is below the 'home' image. Changing the padding on the li to 2% keeps everything on one line at 1024 wide. To center the menu you can give a width to the ul that accommodates the all of the li's, then center the ul with margin: 0 auto; Jim On Dec 12, 2007 3:51 PM, Mike Smith [EMAIL PROTECTED] wrote: Hello all. First time poster. Just wondering if I could get a site check on this temp site: http://www.grum.com/temp/al/index.html I managed the HTML/CSS, not the graphics, so I'm looking to see what, if anything, breaks (I know the h1 in the banner does on increased font-sizes). Also would like to know what can be done about centering the menu better. Finally, I've tested in FF 2.0.0.11 and IE 6 on Win2K Pro. All seems to display as it should... anyone having issues with other browsers/OS are encouraged to reply. Thanks in advance, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Horizontal scrollbar in IE7
Looking at your page with IE6, which also shows the horizontal scroll bar, it looks like your wrapper div is a child of FORM id=aspnetFORM which has no width, height, or margins. Setting #aspnetFORM to width: 920px; margin: 0 auto; removes the h-scroll bar in IE6. Jim On Dec 11, 2007 12:41 AM, Eystein Alnaes [EMAIL PROTECTED] wrote: I don't think this email went through yesterday, so I'm giving it another shot. http://edb.episerverhotell.net/no/Referanser/ On these pages only IE7 gets an undesired horizontal scrollbar. It is not the italics/float right bug, so what is it? Before anyone tells me to validate it, that is beyond possible. What we're dealing with here is EPIserver 5, and a lot of people involved. Just me on the CSS though. Regards, Eystein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check IE 6
You need to add height: 1%; to the sixvillageslogo div and IE6 will be happy. Jim On Dec 10, 2007 11:26 AM, Bryan Hepworth [EMAIL PROTECTED] wrote: Hi I'd be grateful if someone could check IE6 behaviour with my main page. I've looked at several rendering pages with mixed results the worst crunching the graphic image at the top. Page is here: - http://www.sixvillages.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check
Scott, The site looks good, but I'm seeing a horizontal scroll bar when I set the view port to 1024 px wide. in FF/win and IE6. Also see the horizontal scroll bar in IE6 with the view port set at 1920 wide. It may be the margin-left setting on the sidebar ul. Looks like it is forcing the ul too far to the right. Jim On Dec 8, 2007 11:34 AM, Scott Demontluzin [EMAIL PROTECTED] wrote: Hi List, I've been meaning to jump in for a while.I'm working on my first website http://www.scottdemontluzin.com/ I'm using the dreaded 'Holy Grail' layout and it seems to be working ok. Any criticisms will be greatly appreciated. Thanks Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to achieve this effect
They are using JavaScript to manipulate the DOM (Document Object Model). In this case they are changing class of a div from display: none; to display: inline. Off topic for this list. Jim On Dec 7, 2007 11:26 AM, Brian Jones [EMAIL PROTECTED] wrote: Can someone please tell how i can achieve this effect? http://www.concept64.com/portfolio/ The ids for each client have display:none. But when you click on the next and prev buttons it moves through the ids and display the content in the divs. How are they doing this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Advanced CSS techniques book
Ocean Mist wrote Where can I find a copy of the book list? Two others I love ( in addition to all of Eric's boosk which I have) are: The Art and Science of CSS and The CSS Anthology - both by Sitepoint. snipped a bit Eric wrote Please add it to the list! (Just be sure to put the author down as Andy Budd.) That page is not a selected list, nor do additions to it require anyone's approval. It's meant to be a list of good CSS books that have been helpful to members of the list. If anyone here has a book they think is a really great CSS book and it's not on the list, they should by all means add it! Morning Ocean Mist The book list I think Eric is referring to is in the List Wiki [1] And yes, if you want to share with the list, by all means *reply to all*... [1] http://css-discuss.incutio.com/?page=GoodBooks Best Jim Nannery www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Missing Background Image in Firefox
To #Wrapper add the rule display: table; -- this will cause the wrapper to expand vertically to the height of the content of the div. Jim On Nov 30, 2007 7:27 AM, Snipes, Jason L [EMAIL PROTECTED] wrote: One of my developers just asked me for help with why a background image is not appearing in Firefox. I'm not sure how we missed it before (just poor checking on my part primarily) but for some reason today my brain is broken and I cannot seem to figure it out. http://www.forsythcomputertraining.org/default.aspx The image is only used on the home page and the developer decided to place the css inline. Here is the snipped html showing the main containers, the content has been removed to save space: __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check needed...
Keith,
There is a problem with the left and right menus in IE 6 at 1024 X 768. See
a screen shot here: http://www.jimdavis.org/test/bsaScreenshot.jpg
I suspect the problem is in this rule:.LsideMenu, .RsideMenu {
padding-left:6%; }. I would get rid of that and set the left and right menu
ul to margin: 0; padding: 0;
That would be a start in the right direction.
Jim
On Nov 29, 2007 2:06 PM, Keith Kaiser [EMAIL PROTECTED] wrote:
Please visit http://bsaroundtable.com/index2.php and give me your honest
opinions. The CSS of importance here is at;
http://bsaroundtable.com/css/rtstyle2.css
Be sure to click through several of the left menu items, the most
problematic for me was the 'Cub Scut, Boy Scout Venturing' item, making
it
fit was a problem.
Please give me specific ideas how to improve the layout, don't just say
make
the center column bigger, tell me how.
Thanks to all...
--
YIS/YIV/73's!
Keith D Kaiser
nearspaceventures.com
bsaroundtable.com
kaiserklan.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floated image is offset in Firefox only; why?
You have the logo image wrapped in an h1 tag. h1a href=/index.htmlimg src=../_img/page/logo-CaledoniaStudios.gif alt=Caledonia Studios -- making history one piece at a time... width=463 height=62 //a/h1 Try removing the h1 Jim On Nov 29, 2007 7:03 PM, Matt Jalbert [EMAIL PROTECTED] wrote: On this page: http://www.sparklejet.com/clients/cale/livingroom/ the logo, which is in a float-left div, renders in Firefox (both Mac and Windows) exactly 17 pixels below where it should be. That is, the float seems to be in the right place in Firefox, but the image in the float -- the GIF logo with a transparent background -- is offset 17 pixels down. I have made the background of the float red to emphasize the offending offset (it looks terrible at the moment). It renders fine in Safari, Explorer 6 and 7. CSS is here: http://www.sparklejet.com/clients/cale/_css/style.css Any advice on how I can modify my coding of HTML/CSS to get the logo to eliminate the image offset in Firefox? What am I doing wrong? I have tried to keep my code as clean as I could, and I generally avoid overly-sophisticated hacks. Thank you in advance for any help.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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check for CSS IE6 display issue
Found the issue. I didn't have a float right in the div statements for that section. Thanks. Jim Haslam [EMAIL PROTECTED] 801-281-2262 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jim Haslam Sent: Tuesday, November 27, 2007 11:20 AM To: css-d@lists.css-discuss.org Subject: [css-d] Site check for CSS IE6 display issue Hello, First post, please be kind as I am a trying to get the hang of CSS. I have a site (HYPERLINK http://www.stonetreemd.comhttp://www.stonetreemd.com) that displays well in FF and IE7, but breaks in IE6. I have looked until the code all looks the same to me, and I need a fresh set of trained eyes. In IE6 the right hand column slides down and starts under and to the right of the left column. I am sure that this is a common issue, and can easily be fixed somehow. I have tried with my limited knowledge of CSS to fix it, but nothing seems to be working. I have two CSS files, one for layout and one for styling the text. CSS: block-layout.css block-presentation.css No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.503 / Virus Database: 269.16.8/1153 - Release Date: 11/26/2007 9:08 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FW: vertical-align middle NOT in tables (was: problem w/ table-less horizontal nav bar)
Rob,
Here is one solution:
In body {...} change the font-size to an em value such as 1em (more on this
later).
Then change to:
ul#navbarUl {
clear: both;
height: 20px;
width: 100%;
margin: 0;
padding: 13px 0;
background-image: url(images/navbar-bg.jpg);
background-repeat: no-repeat;
}
li.navlink {
float : left;
width : 20%;
list-style-type : none;
text-align: center;
}
li.navlink a {
color: white;
text-decoration: none;
font-size: 1em;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
You should also remove the br from News and Seminars and consider
replacing the word 'and' with amp; (ampersand). It still may break into two
lines.
This works in FF win. Not sure about the evil IE.
But there is a bigger issue. If you set font-size to *n* pixels then IE,
including IE 7, will not re-size the font if the user selects a desired Text
Size in the browser. Since your content states ...serving the unique
needs of people 50 and older you should consider the possibility that users
with less than perfect eyesight will view a larger font size via the browser
options. This possibility creates havoc with the nav menu, among other
things.
You may need to think about changing the width of the site to 960px, or so,
to give you additional horizontal space for the nav menu and other columns.
Jim
Now here's my next *newb* question... If I have a horizontal nav bar
comprised of LI elements, where the lines of text varies from one LI to
another, how do I get them to vertically center align.
The old link that was broken is now fixed again with a partial
implementation of David's LI treatment. The LI's use text, not graphics
for
the a elements.
http://rob.emenecker.com/eclasses/H152/posts/wk3-new/wk3new.htm
...Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site check for CSS IE6 display issue
Hello, First post, please be kind as I am a trying to get the hang of CSS. I have a site (HYPERLINK http://www.stonetreemd.comhttp://www.stonetreemd.com) that displays well in FF and IE7, but breaks in IE6. I have looked until the code all looks the same to me, and I need a fresh set of trained eyes. In IE6 the right hand column slides down and starts under and to the right of the left column. I am sure that this is a common issue, and can easily be fixed somehow. I have tried with my limited knowledge of CSS to fix it, but nothing seems to be working. I have two CSS files, one for layout and one for styling the text. CSS: block-layout.css block-presentation.css Thank you for any help you might offer. Jim Haslam AFTEC - Advanced Forming Technology 4730 Riverside Drive, Suite C Salt Lake City, Ut 84123 (801) 281-2262 CONFIDENTIALITY NOTICE - The information contained in the e-mail message and documents accompanying same are legally privileged information intended only for the use of the individual or entity named herein. If you are not the intended recipient, dissemination, distribution or copy of the same is strictly prohibited. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.503 / Virus Database: 269.16.8/1153 - Release Date: 11/26/2007 9:08 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem w/ table-less horizontal nav bar
Rob, No specific fix for you, but some resources to consider: List Tutorial and examples: http://css.maxdesign.com.au/index.htm Using a single image and css background-position to change the display on hover: http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ hth, Jim On Nov 27, 2007 9:41 AM, Rob Emenecker [EMAIL PROTECTED] wrote: First, the page... http://rob.emenecker.com/eclasses/H152/posts/wk3-new/wk3new.htm Next, the current CSS... http://rob.emenecker.com/eclasses/H152/posts/wk3-new/carolgay.css Now, the problems... #1 Excess whitespace between aimg/a elements in Horizontal Nav Bar http://rob.emenecker.com/eclasses/H152/posts/wk3-original/wk3old.htm #2 Excess vertical whitespace between the header DIV and the navbar DIV in IE6. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check please..
Looks like it breaks in IE6 win. See screen shot here: http://www.jimdavis.org/test/ie6.jpg You can see how you site will render in different browsers and os's for free here: http://browsershots.org/ Jim On Nov 25, 2007 10:34 AM, Rob freeman [EMAIL PROTECTED] wrote: Hello everyone, I have been working on a little site for some friends which I have just uploaded. Could anyone please check the site in older browsers For any problems (its not complete). I have workied in OSX running firefox and safari. http://www.precociouscollective.com/artists.html this page has a few floats, which Im a little worried about in older browsers. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] update, can you check this site now
Looks good in IE6 win now. Jim On Nov 25, 2007 11:03 AM, Rob freeman [EMAIL PROTECTED] wrote: http://www.precociouscollective.com/ -- Rob Freeman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Breadcrumbs wrapping and background image IE6
I don't want to ignite the old debate about using a definition list for a list of links, but perhaps this is one of those cases where using dl and dt could be employed. Note the following demo: http://www.jimdavis.org/test/bcTest.html The dt can be styled with a background image and floated left. Set margins to suit your taste. Jim On Nov 21, 2007 3:03 AM, Rees, Mark [EMAIL PROTECTED] wrote: Hello I have a breadcrumb which wraps over two lines. I'd like to have an arrow appear to the left of each link in the breadcrumb, and I'd like preferably to split links over two lines where necessary, or alternatively to have breadcrumbs appear whole on the new line where they would otherwise be split. I cannot make either option work in Internet Explorer 6. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] firefox css problem
Looks to me like the image of the shark in the footer is forcing the nav menu below the footer into the dark area of the page. You may need to remove the photo of the shark, or add height to the footer. Jim On Nov 19, 2007 11:46 AM, jaklitsch maya [EMAIL PROTECTED] wrote: I have run into a problem with firefox that I just do not know how to solve. IE6 displays it just fine. I thought that IE7 and firefox did also. Just found out yesterday that I was wrong. I did validate the html code and css, am using html strict. The only difference with xhtml is that am not using br /. But will switch to xhtml if it will solve this. http://www.necwa.org/new_site/index.html http://www.necwa.org/new_site/necwa.css The problem is that the bottom of the page will not display correctly in FF. I do not know how to correct this. Am getting desperate as the site has to be finished by Thursday. Thanks, Maya Jaklitsch __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem with Zeitgeist Joomla template
Do you have a URL so we can see the problem in real time? On Nov 9, 2007 1:16 PM, mona borham [EMAIL PROTECTED] wrote: Hey guys, I've a big problem here with the new menu created by this template that the menu items not showing up because of it's css... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problem in Mac/Safari
My site will render properly in Mac/Firefox, however it breaks in Mac/Safari. Mac/Safari screenshot: http://browsershots.org/png/original/d4/d442e5566aaaf7f675b1ab995b024ce1.png Mac/Firefox screenshot: http://browsershots.org/png/original/78/781379f3cfc6de1761ac4dcb917c4817.png In Safari the content div, which contains float: left and float: right divs, is not obeying the margin: 0 auto; rule to position the div in the center of the screen. In addition, the nav menu that should be below the header is being place below the content div, completely out of the flow. I have placed clearing divs all over as I understand floats can induce problems in Safari. I have had problems in the past with Safari and nested divs, so I have intentionally removed the wrapper div from this design and set all the parent divs to margin: 0 auto;. Live web site can be viewed here: http://www.dsignerclumber.com Any ideas? Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float problem
Vicki, Adding the rule display: table; to the ufwus div will fix the float problem in Firefox. As I view the site in IE 6, however, there appears to be major problems. I will send you a screen shot off the list. Jim On Nov 8, 2007 2:15 PM, Vicki Stebbins [EMAIL PROTECTED] wrote: Hi Everyone, I'm almost there with this page http://www.keenstreet-dev.com/trying.html but the floated box on the right keeps going to the bottom of the 'ufwus div' instead of the top and then having the text wrap. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Page Check
Morning List I'd appreciate it if some of you would look at www.sylvesterneal.com/index2.html especially with Mac / Safari browsers. I have (and test in) Safari Win 3.0 and all seems fine but I don't have enough faith in it for final production. Should be good to go in all other major browsers including IE 6 and 7, Opera 9 and Firefox 2.0. CSS is in the head for now but will be moved to an external link later. All links on the page are live to an existing site. Once we have client approval for this page as a template we will re-skin the inner pages to match. If you do see a problem, let me know what browser and O/S you are using. Constructive comments always appreciated Thanks for your time. Hope you all enjoy your weekend. Jim Nannery www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Page Check
At 6:13 PM -0500 10/5/07, Jim Nannery wrote: I'd appreciate it if some of you would look at http://www.sylvesterneal.com/index2.html especially with Mac / Safari browsers. I have (and test in) Safari Win 3.0 and all seems fine but I don't have enough faith in it for final production. CHOP If you do see a problem, let me know what browser and O/S you are using. Constructive comments always appreciated Finally something I can contribute to the list! ;-) Only 'major' problem I see in Safari and FF 2+ on my Mac is that the Kiwanis' logo slips under the top nav bar. It should be easy to move it up a bit but the 'solution' is probably to keep that bar from rising higher than a minimum value (while forcing the main content to remain below it, also). The 'problem' is that the logo is obscured at anything less than 'normal + 1' step larger. Are you viewing your browser at command(control?)-0(zero) or whatever it takes to make it 'text size = normal'? Maybe by giving the .nav a top: Xem;? Having X whatever it takes to push the nav bar low enough to uncover the logo. Not sure that would work for .contain, however. Since you're using position: relative, that may automatically keep the main content lower, anyway. Oh well, the experts will surely give you the fix, all I'm good for is pointing out the minor problem! :) JC __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Introduction site ridicule
Kevin Stevens wrote: The site is http://www.ratking.co.uk and the default style sheet is http://www.ratking.co.uk/circuits.css I am also interested in any things you would change/add to give a better impression. TIA Purely as a viewer, no way as an expert... I really detest horizontal scrolling. So get a wider monitor! ;-) But it appears that you have tried to avoid that with an 800 pixel image. Unfortunately, that image, in the header div, is inside the container div which has 10 px padding, on all sides. I think that makes for a 820 pizel, no-horizontal-scrolling default? I'd like to see some comments about overflow:hidden; in #container, which I assume is an attempt to further prevent those scroll bars. However, FF 2.0.4 doesn't seem to handle things that way. Oops, I now see that html #container reverts to overflow:visible;. Is the * supposed to prevent newer browsers from seeing that new definition? Hey, I told you I'm just an inquisitive viewer, not any kind of CSS expert. Thanks for letting me ask a question in your post, Kevin! :-) xABD __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Center liquid thumbnail gallery div
At 9:46 PM -0500 9/2/07, [EMAIL PROTECTED] wrote: I'm trying to center the #gallery div within the parent #main div and keep them both liquid. Would the floats have anything to do with it? container has 'float: left;' and gallery has 'float: right;'. I'm mainly guessing (that's my level of expertise!). Have you tried leaving our one or both floats and added a 'padding: 0 auto;'? BTW, I don't find the current operation at all bad, at least in FF. However, the footer is cutting off the size and price of the last row of images. Nice images, also! ;-) xabd __ 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/
