[css-d] IE height bug
Hello and thank you in advance. I'm using IE9. 1. www.913thewalk.com/shows The menu works fine until you have a child page whose name takes more than one line (hover over shows in the nav and look at Adventures with Aunt Karen). In Chrome this height autoexpands to fit, in IE it doesn't. Any idea why? 2. Click on Daily Bible Reading under Community In Chrome there's a picture there, in IE it's gone. Where did it go? -bRETT __ css-discuss [css-d@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] Hover Background Change
http://ccbci.org/the-courses/graduation-requirements/ Hover over elements in the table in the content section. Certain rows will change background color on hover to a flat gray. I didn't code that, and I can't even find the CSS that's doing it with the Chrome Inspector. Also see /the-courses/ and hover over New Testament where it's doing the same thing. Any ideas as to why it's changing the background on hover? -bRETT __ css-discuss [css-d@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] IE Destroys Website
Check out http://ccbci.org/the-courses/ No idea on this one. It seems to work perfectly on Chrome, but collapse in on itself completely in IE. Built on Twitter Bootstrap, which I know is cross-compatible. It's a pretty destructive bug and, in a way, grimly hilarious. Obviously, if someone could find the error I'd be grateful! I've no idea; IE doesn't have much by the way of developer help. -bRETT __ css-discuss [css-d@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] Picture Positioning Issue in FF
You can view the error at http://ccbci.org/see-life/alumni/ In FF (I have 5.0) all of the pictures pile on top of each other in the top right corner. It works perfectly in Chrome 13.0 and in Internet Explorer 9.0. Thanks thanks in advance! Jesus loves you! -bRETT __ css-discuss [css-d@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 Not Wrapping
http://ccbci.org/index-wp.php/?page_id=5 If you mouseover the first menu item, theCOURSES, you will note that the bottom two child items don't line break but instead go off the side of the menu. Can anyone figure out why? I sure can't. -bRETT __ css-discuss [css-d@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] Safari z-index problem with navigation
ccbci.org/index-wp.php In Safari the navigation isn't disappearing from the start, nor are the links clickable. Any ideas? -bRETT __ css-discuss [css-d@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] IE not showing child popout of dropdown
horizonsrhigh.org/wordpress On the navigation bar at the top, if you mouseover Ministries Horizon Christian School in Firefox a little child popout called Test Child will appear just to the right of Horizon Christian School. In IE, this doesn't happen. I have no idea why, except that it doesn't seem to be a z-index problem because the only thing behind the child is the page's background. Thanks for any help in advance. -bRETT __ 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] IE z-index (possibly) problem
Hullo! The issue is at http://www.horizonsrhigh.org/wordpress. I'm having trouble with a dropdown menu in IE, but I'm not sure it's even a z-index bug. See, the first level of dropdown works. Mouseover an item with children, however, and the pop-out doesn't happen in IE. As far as I can tell, the child list isn't being covered by anything, because the only thing behind it is the background (if you go Ministries - Horizon Christian School - Test Child). It does exist somewhere on the page, because if I Control-F search for Test Child when mousing over its parent it finds one instance of the phrase. But I have no idea where it actually is. Yes, I did a Google search (many of them, actually) and a cursory archive search. Thanks! -bRETT __ 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] Divs not floating next to each other
http://www.chiquebulletin.com/events.aspx
The divs are dynamically being created by a SQLReader. The template is all
tables, but the divs are being created inside a td.
To see the divs being created easier, I made their back color silver to see
if they line up, but they do not, and I only see 1 silver block when I
should 10, for 10 divs.
I'm trying to get 3 divs to show in each row.
Here is how I have each div, that is being created, formatted.
.post {
float: left;
width: 275px;
height: 200px;
background-color: Silver ;
border: 1px solid #F30;
}
__
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] Form in IE7 has no left margin
I have a site with a form on it and it displays correctly in IE6, FF3, Opera 9 on WIN, and FF3, Opera 9, Safari 3 on MAC. However, in IE7 WIN the form does not seem to have the 20px left padding as specified in the style sheet. Here's the link: http://www.banacreative.com/demo/waterline/comments.php Is there something about IE7 and padding that I should know about? TIA __ 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] vertical alignment question
How can I vertically align elements? I have an image gallery in which I
want all images to be centered vertically and horizontally. The
horizontal part is easy, but I can't figure out how to center
vertically. Here are my styles:
#pictureWrapper {
position:relative;
background-color:#CC;
height: 363px;
width: 363px;
}
#mainpic {
height: 320px;
width: 320px;
position:relative;
margin:auto;
}
#mainpic img {
margin:auto;
display:block;
}
#mainpic is the first child of #pictureWrapper and I want it to be
centered vertically. But I also need to have the #mainpic img
vertically aligned too, because when the image is landscape oriented
there is a huge amount of space below. Is it possible to align vertically?
__
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] IE6 absolute positioning problem
I have an AP div nested inside a Relative Positioned div. The AP div shows perfectly in FF3 Opera 9.x both Win MAC, but in IE6 I can't even find the div?! This AP div is nested as follows: #wrapper #container #content #maincontent #thisAPdiv. I have tried everything to make this work including listing all of the ancestor divs as above, but still I can't see it. I currently have the position as top:0; left:0; and I have tried everything from +300px to -500px. 50%, you name it, to no avail. I have turned off all BG elements so I could see if it was hiding behind something, but it is not. Argh!! The really strange thing is I have another AP div that does show as expected, however it is not so deeply nested; it is a child of the #wrapper div only. If I move this troubled AP div up to the #wrapper div it shows up! What is the problem here? Does IE6 not like AP divs that are more deeply nested? __ 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] IE6 absolute positioning problem
I should have mentioned that I have given the RP div #maincontent Height:1%; to force hasLayout, but this does not seem to work either. Brett wrote: I have an AP div nested inside a Relative Positioned div. The AP div shows perfectly in FF3 Opera 9.x both Win MAC, but in IE6 I can't even find the div?! This AP div is nested as follows: #wrapper #container #content #maincontent #thisAPdiv. I have tried everything to make this work including listing all of the ancestor divs as above, but still I can't see it. I currently have the position as top:0; left:0; and I have tried everything from +300px to -500px. 50%, you name it, to no avail. I have turned off all BG elements so I could see if it was hiding behind something, but it is not. Argh!! The really strange thing is I have another AP div that does show as expected, however it is not so deeply nested; it is a child of the #wrapper div only. If I move this troubled AP div up to the #wrapper div it shows up! What is the problem here? Does IE6 not like AP divs that are more deeply nested? __ 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] Adding margins to the hr element
I have created the following hr class specifying margins. The curious
thing is that I get a 20px bottom margin as expected, but I do not get a
20px top margin, why not? Also, the hr center itself in all browsers
except IE6 (afaik). How can I get IE6 to center it?
hr.divider {
position:relative;
width:80%;
background-color:#bbb;
margin:20px auto;
}
TIA
__
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] question about combining descendant selectors
I'm wondering if combined selectors have a lower specificity than
non-combined. For example in my stylesheet I have:
.hm #events_snip .date, .article { color: red; }
.hm #news_snip .date, .article { color: green; }
On the page the .article class shows up green, even though it is NOT
descendant from #new_snip, it is descendant from #events_snip. Why does
it do that?
Now, if I have this:
.hm #events_snip .article { color: yellow; }
.hm #news_snip .date, .article { color: green; }
The .article class shows as yellow. I don't understand this.
__
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] IE6 problem with background color on H2 element
I am having a problem with IE6 rendering a background color on the H2
element *sometimes*. In my stylesheet I have:
.news #news_list h2 {
background-color:#000;
line-height:36px;
margin-left:0px;
margin-right:10px;
}
.news #news_list h2 span {
color:#fff;
margin-left:20px;
}
This displays fine in all browsers including IE6 (W). Just below that
div is another div with the following:
.news #events_snip h2 {
background-color:#000;
line-height:36px;
margin-right:10px;
margin-left:0px;
}
.news #events_snip h2 span {
color:#fff;
margin-left:20px;
}
This displays fine in FF (W M), Opera (W M), Safari (M), but NOT in
IE6 (W)
Here is an excerpt of the markup:
div id=news_list
h2spanNews/span/h2
ul
liBlah blah/li
/ul
/div
div id=events_snip
h2spanEvents/span/h2
ul
liBlah blah/li
/ul
/div
Does anyone know why the second H2 element is not displaying properly in
IE6 (W)? The element is there because I can see the text, but the
background is not showing up. Also, if I add display:block; to the H2
element, it acts more like I added it to the span. In other words, it
does not display the full line-height specified, just the text height.
Why is that?
__
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] IE6 Win list-style problem
After further research I discovered that: Regardless of any declarations, IE6 will not display bullets on list items set to display: inline or floated. That is clearly my problem. I will try using a background-image bullet. __ 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] IE6 Win list-style problem
I have a feature box containing a ul which I want styled with bullets.
For some reason, the bullets are not showing up in IE6 Win, they do show
up in FF2 Win, FF3 Mac, Safari 3.2 Mac, and Opera 9.5 Mac. Following is
an excerpt from my stylesheet.
li.farray {
width: 100px;
float: left;
color: #66;
margin-right:0px;
margin-left:30px;
_margin-left:15px;
}
#features ul.featurearray {
width: 280px;
overflow:hidden;
background-color:#DDD;
border:1px #777 solid;
padding-top: 10px;
padding-bottom: 10px;
}
#features ul li {
list-style:disc;
}
To increase specificity I have even tried:
#wrapper #container #content #maincontent #features ul.featurearray {
list_style:disc;
}
and about every other permutation, none will cause IE6 Win to display a
bullet. Can anyone make a suggestion?
To state the obvious, I have checked all ul definitions in all
stylesheets, specifically any stylesheets and definitions that are
loaded *after* this.
Going crazy!!
__
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] Styling area with cursor:pointer doesn't work in IE - what now?
Hi list, In 2005, someone had a similar question, but there was no response: http://archivist.incutio.com/viewlist/css-discuss/52019 Using cursor:pointer on an area appears to work in Firefox 3 (and probably other browsers), but not IE7. Is this a known limitation? Are there sensible workarounds? We'd really like to use a pointer mouse cursor for the areas since they are they only parts of the image map that are clickable. Thanks! Brett __ 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] Define text attributes only for Windows
Is there a way to set text attributes separately for Windows/PC machines? Windows displays text larger than on a Mac so I'd like to adjust all text for the PC to better match the MAC. Can this be done? I have used the underscore _hack to target IE, but I really need to target all PC/Windows machines. How can this be done? 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] Define text attributes only for Windows
For example, Win2000 in IE6 and FF2.0, both browsers display the text much larger. David Laakso wrote: Brett wrote: Is there a way to set text attributes separately for Windows/PC machines? Windows displays text larger than on a Mac so I'd like to adjust all text for the PC to better match the MAC. Can this be done? I have used the underscore _hack to target IE, but I really need to target all PC/Windows machines. How can this be done? In what PC operating system and in what PC browsers and browser versions is the text larger than on a Mac? __ 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] Define text attributes only for Windows
Georg, Thanks. Of course you are right, there are way too many variables to make every OS and every browser look exactly the same, and it's a fools dream to attempt it. I really just want to have the text size a bit closer between the two platforms. I design on a MAC and I try to set text sizes suitable for a normal text setting on the PC, and to accommodate up to two increases in text size without drastically altering the layout. I guess this is just another joy of designing for the web. __ 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] Define text attributes only for Windows
David, Yes, both of the browsers are set to display the normal text size. __ 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 div border problem
Georg, Thanks, that worked great. And thanks for taking the time to answer. Best, Brett __ 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] IE6 div border problem
I have a long div with a border, which contains floated ul li elements. I have a clearing element after the last li element, so the div will expand to contain the floated elements, and the border will will surround everything. It all works well in FF, Safari, and Opera, and even works initially in IE6 - at least before scrolling. As soon as the page is scrolled in IE, the div border breaks (has gaps), but the clearing element at the bottom has a complete border. Is there some trick that can fix this in IE? 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/
[css-d] background image not displaying
The site looks fine in IE7 but in Mozilla Firefox, if you right click view background image, the image is there, but just doesn't show. My body is set to gray and the entire site has a gray background and doesn't repeat my background image in firefox like it does in IE7. Can anyone see what is going on? www.saveholytrinity.com 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/
[css-d] css layout issue, centered, three column layout
Hi, I am pretty new at web design and css. I started with a three-column layout that the center content stretched to fill the screen width, with left and rights static width of 200px. Which worked but I didn't want it to stretch. I decided to make a centered 1000px layout, the centercontent is perfect because it has margin left and right of 200px, but the left and right contents are all over the place. I tried float:left for the left and float:right for the right, and now it looks different in IE7 then firefox, but the three columns are out of whack. I believe I need something with a wrapper, but I keep getting it more out of order the more I mess with it, any suggestions? http://www.liaace.org note: the word Sponsors is actually the right column that is not on the right! Thanks, Brett __ 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] Crashing IE7 with CSS a.k.a. IE7 doesn't like button[value]
A few days ago, while testing for coherence in a webpage, IE7 crashed on me. I've isolated the offending code here: http://www.mundoplus.tv/atnbueno/ie7crash.html After a few tests (actually, a lot of them) I've found it's simply more of IE lack of support for the button tag. No CSS applied to button[value] is shown, and any value for value crashes (closes down) the current IE window. So remember, don't style with the button[value] selector. Yes, the code effectively crashes my IE7 immediately. I don't think the problem is the button tag, which I have used extensively for many years. The problem in the code on that page is the lack of a space between the two parts of the selector. Add a space and no crash. Still, you are right. Pretty pathetic. __ 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] Maps, Google or Virtual Earth use
I am wondering if anyone out there is using either Google Maps or Virtual Earth? Have you been able to embed stuff into a CSS file if you have? Just starting a project with maps and wanted to know how people are doing them. Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with text content spilling out of container
Hi All, I have created some nesting div's that I want to be liquid. The problem is the content of the innermost div will not push out the containing div but simply spills over. Is this what clearing the float is for? Can someone please look at my code and tell me how I accomplish this. I have tried overflow:auto however it always creates scroll bars V H which I really don't want. By the way, you will notice that the only float elements I have are the little rounded corner png's inside #ibox. And what I find interesting is that they are behaving properly, it is the text inside #ibox that is spilling out. How can I keep the text from spilling out? As a general question, it seems as though CSS only concerns itself with width:% and does not really consider height:%, is that true? If you look at my link and adjust the browser window, it appears to change only in relationship to the width of the window not the height. I really want to take advantage of the scalability of liquid design and make it possible for viewers with larger monitors to receive more content above-the-fold. The only way to do that is to not make elements fixed width. http://www.belleartae.com/arrow/index.html Many thanks for any help. Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] practicality of user stylesheets
Felix Miata wrote: | I'm curious how well or whether those on the list agree with me on the | result's relative functionality, particularly considering the complexity | of the original, and the limited amount of time I spent doing anything | beyond reducing. | I'm also curious if anyone tries user styles testing for breakage during | their own development I cannot comment on the specific results of your labors against a stupendously over-wrought use of CSS. I suspect the styles you had to wade through were not made with human intervention. The issue may not be one of relative functionality but how CSS is being mis-used. We are seeing a lot of bad CSS nowadays. I guess this is one fruit of the efforts of the CSS advocates who enrich this mailing list. CSS is now considered the proper way to go for enterprise-level applications. Part of the blame can be put upon this influential collection of experts. g For instance: my company recently got rid of a simple Excel spreadsheet to handle employee travel and expense reimbursements. We now have a browser-based application designed by the infamously inefficient SAP. The CSS for this two-screen app is about 300,000 bytes. It clearly was generated by software -- no human being could be that meticulously dense. One wonders how the browser is even able to parse the monster. So, individual solutions like user CSS may not be practical in dealing with travesties of the sort you point out. Most of us do not have your abilities or desire for Sisyphean challenge. We have to keep educating... Brett Merkey __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Headers and Footers
George L Smyth wrote: || || Here is a simple example: || Non-Scrolling Header and Footer; Printing Repeated Headers and Footers || http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html | | Thanks for the link, this works fairly well. | | The only negative is that putting multiple lines into the footer results | in only a single line on the second through penultimate pages in Firefox | (works in IE7, with a little work). | | I've been unable to figure out how to expand the footer in Firefox - any | ideas? I can squeeze everything into a single line, though it doesn't | look very good. I'm just not understanding why Firefox is having a | problem with multiple lines. Might this be a bug? I have only tested the footer extensively as a one line column total display. However, I had no trouble adding multiple lines to the footer with Firefox 1.5 just now. If by multiple lines you mean multiple rows within the TFOOT element, then Firefox seems to have no trouble that I can see. Brett Merkey __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Headers and Footers
George L Smyth wrote: | I have put together a table to display information and my co-worker wants | to be able to print it out. No problem, I've used print style sheets to | take care of that. | | Now he wants each page to have a header and footer and I can't think of | any way to do it. Is this possible? It depends on what you mean by header and footer. It is not possible in general to create pages with determined headers and footers with HTML and CSS. However, you seem to be referring to data tables. For data tables, yes it is possible to specify repeating data headers and footers when the table is printed. Here is a simple example: Non-Scrolling Header and Footer; Printing Repeated Headers and Footers http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min/max-width problem in IE6
Hi All,
I'm still having a few problems with my mix/max width expression in IE6.
Currently, my #mainwrap is:
#mainwrap {
position:relative;
width:99%;
min-width:780px;
max-width:950px;
margin:0 auto;
text-align:left;
font-size:95%;
}
And my IE6 expression is:
#mainwrap {width: 780px /* fallback value */;
width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
1024 ? 950px : (((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) 800 ? 782px : 99.7)); }
I'm having trouble in declaring a value for when the site is between 950
and 782px and I'm yet to find a happy medium. At the minute, everything
below my #pNav seems to jump out of the rest of the site and only
returns when the browser hits 782px - which I know is how it's intended
to work. My problem is finding a value to replace 99.7%.
I would be most grateful if someone could have a look at where I'm going
wrong.
The website in question is www.midlandsco-op.com/xmas and the CSS can be
found at http://www.midlandsco-op.com/xmas/css/master.css and
http://www.midlandsco-op.com/xmas/css/ie.css
Hope someone can help.
Regards,
Brett
The contents of this e-mail and any attachments are confidential to the
intended recipient. If you are not the intended recipient please do not use or
publish its contents, contact Midlands Co-operative Society Ltd. immediately on
+44 (0) 1543 414140 and delete it.
Although this e-mail and any attachments are believed to be free from any virus
or other defect it is the responsibility of the recipient to ensure that they
are virus free.
This message has been scanned for viruses by BlackSpider MailControl -
www.blackspider.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Min/max-width problem in IE6
Morning all,
I'm having a problem with my min/max-width site in IE6. As we all know, IE6
doesn't support this CSS but I'd like to know a bulletproof way of getting it
to work!
I've noticed that simplebits.com uses this method of CSS for his wrapper div
and I've tried to replicate it in the site I'm creating but without success. It
works fine in FF, Opera, Safari and IE7 (as to be expected) but I was wondering
if someone could look over my code and point out where I'm going wrong and
suggest any fixes.
I currently have this:
#mainwrap, #header {
_width: expression(((document.body.clientWidth)) 800? 780px:
((document.body.clientWidth)) 1024? 950px: auto );
}
declared in my ie.css file but it doesn't seem to like it when I scale my
browser window in - I get a horrible horizontal scrollbar !¬(
My styles for the body tag are:
body {
margin:0;
padding:0 8%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color:#000;
line-height:1.25em;
text-align:center;
}
And this for my wrapper:
#mainwrap {
position:relative;
min-width:780px;
max-width:950px;
margin:0 auto;
text-align:left;
font-size:95%;
}
The site lives at www.coopintranet.co.uk/xmas and the two CSS files can be
found at www.coopintranet.co.uk/xmas/css/master.css and
www.coopintranet.co.uk/xmas/css/ie.css
Hope someone can help,
Regards,
Brett
The contents of this e-mail and any attachments are confidential to the
intended recipient. If you are not the intended recipient please do not use or
publish its contents, contact Midlands Co-operative Society Ltd. immediately on
+44 (0) 1543 414140 and delete it.
Although this e-mail and any attachments are believed to be free from any virus
or other defect it is the responsibility of the recipient to ensure that they
are virus free.
This message has been scanned for viruses by BlackSpider MailControl -
www.blackspider.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min/max-width problem in IE6
Hi Ian,
Thanks for the reply. I've made the change to the CSS as you specified
but now the site is fixed in FF and I'm still getting the problem in IE.
I've uploaded the new CSS so you can see what's happening.
http://www.coopintranet.co.uk/xmas/
Any other ideas?
Brett
Morning all,
I'm having a problem with my min/max-width site in IE6. As we all
know, IE6 doesn't support this CSS but I'd like to know a
bulletproof
way of getting it to work!
I've noticed that simplebits.com uses this method of CSS for his
wrapper div and I've tried to replicate it in the site I'm creating
but without success. It works fine in FF, Opera, Safari and IE7 (as
to
be expected) but I was wondering if someone could look over my code
and point out where I'm going wrong and suggest any fixes.
Brett
I find that site needs horizontal scroll bar in FF if window resized.
Change #mainwrap div in may style sheet to:
#mainwrap {
position:relative;
width:99%
min-width:780px;
max-width:60em;
margin:0 auto;
text-align:left;
font-size:95%;
}
As you know IE6 does not recognise min or max width.
You will also need to change your font-size in the body to 100% (you
will of
course also need to look at the rest of your font sizes but this
change to body
font tag is a MUST DO).
Ian
BTW. You should also define background in body as not everyone has
their
default colour as white - see David Laakso!!
The contents of this e-mail and any attachments are confidential to the
intended recipient. If you are not the intended recipient please do not use or
publish its contents, contact Midlands Co-operative Society Ltd. immediately on
+44 (0) 1543 414140 and delete it.
Although this e-mail and any attachments are believed to be free from any virus
or other defect it is the responsibility of the recipient to ensure that they
are virus free.
This message has been scanned for viruses by BlackSpider MailControl -
www.blackspider.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min/max-width problem in IE6
Hi Georg, That's exactly what I was looking for (and not a million miles away from Ian Young's earlier suggestion). However, I still have a problem with IE6. When I scale the window in the page width doesn't change (much) until the right hand side of the window hits the right hand side of the page. Only then does it change width. Any ideas? Thanks for your help so far. http://www.coopintranet.co.uk/xmas Brett -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: 18 October 2006 12:01 To: Brett Derry Cc: CSS Mailinglist Subject: Re: [css-d] Min/max-width problem in IE6 Brett Derry wrote: www.coopintranet.co.uk/xmas Further to my last email, I've played around a little with my margins on my wrappers and changed my _width: expression in my ie.css stylesheet and it seems to have sorted it! As far as I can see you now have a solution that makes IE6 freeze on min- width. The reason is that the IE-expression you use is a Quirks mode version, that IE6 chokes on when in standard mode. If you want it to work flawless, then a dual mode expression is a better choice. Several versions here... http://www.gunlaug.no/contents/wd_additions_14.html ...and I think the pixel-based min/max-width expression is what you want. Note: no min/max solutions for IE6 are bullet-proof, as they rely on javascript support. Apart from that; IE-expressions are as bullet-proof as any other solutions - when done right. regards Georg -- http://www.gunlaug.no The contents of this e-mail and any attachments are confidential to the intended recipient. If you are not the intended recipient please do not use or publish its contents, contact Midlands Co-operative Society Ltd. immediately on +44 (0) 1543 414140 and delete it. Although this e-mail and any attachments are believed to be free from any virus or other defect it is the responsibility of the recipient to ensure that they are virus free. This message has been scanned for viruses by BlackSpider MailControl - www.blackspider.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content above Navigation
Hi Tim, Ordered floats is the way forward. http://www.positioniseverything.net/ordered-floats.html HTH, Brett ** Hi All. I'm soon going to be working on a site for a client who has asked for the main body content of the code to be above the navigation in the source for SEO / Accessibility reasons. This makes sense but wanted to get an idea of which methods people use for this. The way I've seen this done before is too apply padding to the main content div which forces the main content down the page. The top navigation can then be given an absolute position to 'layer' over the space created by the padding. Does anyone use any other methods or is this the excepted way of doing this? It would be simple if all the divs could be absolute positioned but as there are varying page lengths across the site I don't think this would be an option. Thanks in advance for any help. Tim The contents of this e-mail and any attachments are confidential to the intended recipient. If you are not the intended recipient please do not use or publish its contents, contact Midlands Co-operative Society Ltd. immediately on +44 (0) 1543 414140 and delete it. Although this e-mail and any attachments are believed to be free from any virus or other defect it is the responsibility of the recipient to ensure that they are virus free. This message has been scanned for viruses by BlackSpider MailControl - www.blackspider.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] checkboxes and css
Add a little left margin to your #zoeken input
#zoeken input {
font-size:11px;
color:#66;
vertical-align:middle;
margin-left:5px;
}
And it'll line up.
Brett
-
http://www.myredmonkey.co.uk
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Sander van
Surksum
Sent: 22 September 2006 14:04
To: css-d@lists.css-discuss.org
Subject: [css-d] checkboxes and css
Hi all,
Is there a possibilty to style checkboxes?
How can I attach a style to a checkbox? Do I have to use class or id
I have a checkbox but it has a padding or a margin around the box that I
whanna remove
see http://www.johnsten.com/css/bla.html
the checkbox has to be aligned to the left the same as the input field.
Regards,
Sander
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
The contents of this e-mail and any attachments are confidential to the
intended recipient. If you are not the intended recipient please do not use or
publish its contents, contact Midlands Co-operative Society Ltd. immediately on
+44 (0) 1543 414140 and delete it.
Although this e-mail and any attachments are believed to be free from any virus
or other defect it is the responsibility of the recipient to ensure that they
are virus free.
This message has been scanned for viruses by BlackSpider MailControl -
www.blackspider.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet not read by Firefox?
Hello Albert, The problem probably comes from the use of the TITLE attribute. This attribute does not have side effects in other elements, but in LINK tags for external stylesheets, the situation is different. Here is one reference that should help out: http://devedge-temp.mozilla.org/viewsource/2002/preferred-stylesheets/index_en.html Brett Merkey Albert van der Veen wrote: | Hello list, | | I have a strange problem with my print stylesheets in Firefox: they don't | seem to be read at all. This is the code I'm using in the HEAD section: | | link title=standaard rel=stylesheet type=text/css | href=fileadmin/templates/depont.css media=screen / | link title=print rel=stylesheet type=text/css | href=fileadmin/templates/depont_print.css media=print / | | Printing this page (in FF, IE prints correctly) shows what I mean: | http://www.depont.nl/nl/pers/persberichten/bericht/pers/179/ | | Am I overlooking something obvious? | | thanks, | Albert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footerStickAlt method not working on my site
On 6/9/2006 7:10 AM, Alex James wrote: Brett wrote: Please see http://dawkins.ctat.cs.cmu.edu/ My goal is the same as footerStickAlt [1]. I can't get this footer to stick to the bottom of the page in any browser. Brett, Try the following: Remove margin-bottom:10em; from the #nonfooter declaration. Add clear: both; to the #footer. In FF this will now stick unfortunately it's still not expanding to the full width of your layout. Maybe some one else can shed some light on this? I'm confused as firstly you didn't declare a negative value for margin-top in the #footer like the Man-In-Blue[1] example and secondly why adding the clearing property partially works? Oh, and that mainstyles.css file is a beast! Thanks, Alex [1] http://www.themaninblue.com/writing/perspective/2005/08/29/#content I've removed #nonfooter's margin-bottom, and added clear:both to #footer (I believe I've tried this before). The result is good for long pages, but short pages are still problematic (see http://dawkins.ctat.cs.cmu.edu/index.php?id=download ). I could add a negative margin to #footer as per the Man-In-Blue example, but in that example, the negative margin moved the footer from outside the viewport into it. On my page, the footer is already inside the viewport, so adding a negative margin would just push it up further. As I mentioned, I think something interesting is going on with the computation of 'height'; I think height isn't taking the height of my #sponsors div into account. Also, using the webdeveloper toolbar, I can see that the footer isn't even being pushed to after the #nonfooter div (which is the premise of footerStickAlt)! Sorry for the beastly mainstyles.css. I could certainly split it up in the future. Thanks, Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footerStickAlt method not working on my site
On 6/9/2006 9:31 AM, Alex James wrote:
How about just organizing some of those ID's classes into shared
declaration's? For example you could declare the following:
#centercontent h1, #centercontent h2, #centercontent h3, #centercontent
li a { font-weight:normal; }
Apply this method through the rest of the stylesheet and it may save
some scrolling!
Sure, I'll do that. I'm more concerned about the pesky footer
positioning at the moment! ;)
Brett
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footerStickAlt method not working on my site
Please see http://dawkins.ctat.cs.cmu.edu/ My goal is the same as footerStickAlt [1]. I can't get this footer to stick to the bottom of the page in any browser. My guess is that this has something to do with a series of background images that are generally not being computed as part of 'height'. Or perhaps the use of absolute positioning. I'm really at a loss. Sorry there is so much to look at on this page. It's a local copy of a live site. Thanks, Brett [1] http://www.themaninblue.com/writing/perspective/2005/08/29/#content __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 doing something quite funky to horizontal li's
Humbling List, Please see http://www.andrew.cmu.edu/user/bleber/css/test.html I'm looking to center two horizontal boxes (simple enough task). It looks fine in Mozilla, while IE 7 staggers the two boxes so one is lower than the other. I'm using standalone IE6, but that seems to have fallen back to the IE7 beta renderer. Maybe someone with non-IE7 setup can advise how to get those two boxes to be in a straight horizontal line. Thanks, Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 doing something quite funky to horizontal li's
On 6/7/2006 5:07 PM, Bill Brown wrote:
Humbling List,
Please see http://www.andrew.cmu.edu/user/bleber/css/test.html
I'm looking to center two horizontal boxes (simple enough
task). It looks fine in Mozilla, while IE 7 staggers the two
boxes so one is lower than the other. I'm using standalone
IE6, but that seems to have fallen back to the IE7 beta
renderer. Maybe someone with non-IE7 setup can advise how to
get those two boxes to be in a straight horizontal line.
Thanks,
Brett
Brett,
Try this:
#container ul li {
display: inline;
float: left;
}
That should work in all IEs, I believe.
It most certainly works on my machine. Thanks!
I think my mental error was that I put a class on the a elements, and
was not even styling the li elements (which is what I would normally
do). Strangely enough, it looks like I need to float the a's too. Go
figure.
Thanks,
Brett
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Browser Cache?
On 5/26/2006 3:51 PM, Jan Brasna wrote: Eg. by adding a timestamp to the stylesheet's URI: link href=style.css?20060526T2150 ... Could you expand on this, or link to an article that explains why this works? I'm not familiar with the '?' suffix (unless we're using PHP, of course). Is it standard? Thanks, Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Browser Cache?
On 5/26/2006 4:13 PM, Jan Brasna wrote: Eg. by adding a timestamp to the stylesheet's URI: link href=style.css?20060526T2150 ... Could you expand on this, or link to an article that explains why this works? I'm not familiar with the '?' suffix (unless we're using PHP, of course). Is it standard? Brett, ? is not a suffix. It's a query-string separator, see appropriate RFCs on this. It's the same as the PHP mentioned by you - the file requested is the style.css with the parameter. However, as long as it's just a vanilla CSS, the parameter is simply discarded. For the server. Not for the client - different parameter, different cache, different request. So when you change the parameter, the browser requests the fresh version. Thanks for the clarification. Nifty, useful trick ;) I think I'd heard of it before, but had no idea why it worked. Thanks, Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Debugging Techniques.
On 5/15/2006 11:22 AM, Mark D Hiatt wrote: How do you go about debugging a CSS? Are there any tricks you've picked up over the last several months or years that seem to help you when what you meant isn't quite what you're seeing? This has probably been mentioned on this list a number of times, but the Web Developer extension [1] for Firefox is invaluable for debugging CSS. Specifically, I use the the View Style Information, Edit CSS, and Outline functions. Editing CSS 'on the fly' saves a number of unnecessary keystrokes as you tweak your CSS. View Style Information will show you all the style declarations that are being applied to the selected element, and in which file each selector is located. Outline shows you how your layout is formed, without forcing you to manually add borders to elements (as you described). The DOM Inspector (included with Firefox) is also useful for viewing 'computed style'--the computed result of all styles that are applied to an element. Best, Brett [1] http://chrispederick.com/work/webdeveloper/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Shifting content
Hi Debbie, Try playing around with the width value for #content. 75% looked good. Regards, Brett -Original Message- From: [EMAIL PROTECTED] on behalf of Iorhael Sent: Tue 4/25/2006 10:37 AM To: css-d@lists.css-discuss.org Subject: [css-d] Shifting content Hi again, I apologize for the plethara of questions right now...I am going through some of my previous web sites and restructuring the css so that all the elements are in containers (thus stablizing the elements when the browser is stretched). On this one, I created a subcontainer for the banner graphics, and then a separate subcontainer for the content. I finally got everything positioned properly except that I can't get the content to shift over to the left using a negative left margin. How would I shift over the content to where it needs to be? It is a floated element...can you not use negative margins with floats? http://www.drkdesign.com/northwesternesse/microdor/ http://www.drkdesign.com/northwesternesse/microdor/microdorimport.css Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question: container or body
Mark Fellowes wrote: reading and practicing with some tutorials. One question I have, in a few tutorials I noticed the use of a div labeled either container or page-container. Other tutorials did not have that div but made adjustments to the body tag. Is there some advantage to using the container ? Most definitely. But not always, or even most of the time. It depends. I recommend attempting to use the BODY tag as your point of reference first. When/if that does not work out, then create new structures (like div class=container) to ease your layout tasks. Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am having a
problem figuring out why my promotion text area is not centering properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote:
Thanks Brett and Els for your quick responses.
I implemented your suggestions and the promotion text area is now properly
centered. Brett your suggestion to change the height to 48px properly
tightened up the gap that I am seeing on firefox and Safari but still
exists
on IE6. The gap exists right between the the promotion text area dt and the
following dd tags.
It looks like IE is calculating height as height + padding (both defined
in CSS), thereby pushing the dd element down. (I should probably note
here that your use of dl is fairly non-standard and un-semantic.) More
importantly, getting those two elements to line up vertically correct
might not be possible. It might be better to create a single div to
contain the content, and assign a background image to that.
If you want it to scale, you might want to look into boxes with rounded
corners.
Brett
Quoting Brett Leber [EMAIL PROTECTED]:
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am
having a
problem figuring out why my promotion text area is not centering
properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area
that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hybrid layout, wide table (IE6)
Francky,
Thanks for the advice. Using your added styles, the result is better,
but adds scrollbars a bit differently than I'd intended:
http://www.andrew.cmu.edu/user/bleber/css/table_test3.html
Whereas in example 1 scrollbars appear for the container div (#preview),
example 3 creates scrollbars for the the entire layout table. In the
context of the project where this would be used, this produces a bizarre
effect. The issue is that scrolling the entire layout table is likely to
be very disorienting for a user.
Also frustrating is that the long table (the table with many columns)
increases the width of the layout table, effectively moving the
right-aligned parts of my header and footer off-screen. An inline frame
is starting to look a little more attractive for this disastrous table.
Either that or a fixed width for the container div (#preview). I think
the problem is with IE's interpretation of width:100%; on another area
of the site, this property/value pair produces a table that goes off the
right end of the containing div, with no scrollbars!
thanks again, and sorry for the verbose emails--I just can't think of a
simple way to describe all of this.
Brett
francky wrote:
Brett Leber wrote:
Please consider the table layout and nested divs to be a part of the
design requirements. Also, the following is an IE6 rendering issue, so
please view the examples in IE6.
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
[...]
How can I make example 2 display like example 1?
Hi Brett
Did you try:
* html body { width: 97%; overflow-x: auto; } ?
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hybrid layout, wide table (IE6)
Ingo,
This is great! Your additions seem to replicate the desired rendering.
These should work for the actual web project I'm working on as I've
tried to make my test case a simplified version of the same structure.
For conditional comments, do you think I should target IE6+ with these
additions? Out of curiosity, does IE7b2 render the table similarly to
IE6 (ie, off the screen) without your two additions?
Lastly, how did you know that 'flow:left' and 'zoom:1' would do the
trick? I vaguely remember the redundant but effective 'zoom:1' being
mentioned in an article. Is either or both documented elsewhere?
Thanks again!
Brett
PS - Hopefully I've replied to the list properly. I now see how time can
be switched if I reply to the message that appears /before/ the one from
css-d.
Ingo Chao wrote:
Brett Leber wrote:
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
The innermost table contains many cells in a single row longer than most
browser widths. To display it in the current page, I've used a container
div with overflow:scroll, and a width of 100%. When this table appears
within the divs alone, the overflow works correctly--the table is no
larger than the current browser (viewport) width, and scroll bars appear
[example 1]. When this table appears within a table used for page
layout, however, the width of the container div stretches to show the
entire table, past the viewport's boundaries, producing a horizontal
scroll bar in the browser [example 2].
How can I make example 2 display like example 1?
for
http://www.andrew.cmu.edu/user/bleber/css/styles.css
add
#preview {... float:left; }
#contents {... zoom: 1;}
and hide these from other browsers.
Works here for IE6 + IE7b2.
/**/
Brett, and the one or other who might read this:
please use /bottom/ posting on this list.
For those who read the digest, or those who just try to read and answer
more than one post per evening, it becomes nearly impossible to read
when the flow of the time is switched more than once per digest. ;)
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] hybrid layout, wide table (IE6)
Please consider the table layout and nested divs to be a part of the design requirements. Also, the following is an IE6 rendering issue, so please view the examples in IE6. Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html The innermost table contains many cells in a single row longer than most browser widths. To display it in the current page, I've used a container div with overflow:scroll, and a width of 100%. When this table appears within the divs alone, the overflow works correctly--the table is no larger than the current browser (viewport) width, and scroll bars appear [example 1]. When this table appears within a table used for page layout, however, the width of the container div stretches to show the entire table, past the viewport's boundaries, producing a horizontal scroll bar in the browser [example 2]. (Recall that this is in IE6, not Firefox; Firefox 1.5 doesn't render the two differently.) How can I make example 2 display like example 1? There must be something I can change in CSS that I'm missing. Changing page structure is not an option; minor html changes are OK. I don't want to use an inline frame or new browser window (i.e., I'm hoping for a pure CSS fix here). I also want to keep the layout fluid. thanks, Brett Leber __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Readonly Attribute Selector Problem in Firefox?
Firefox seems to want to force its own readonly gray on form elements when a CSS attribute selector sets the background color to white. Yet, *any* other color value except white will display as desired. Even though the workaround is easy, (just use a value very close to white, such as #fefefe) is this a bug or a behavior by some design whim I don't get? Example here: http://web.tampabay.rr.com/bmerkey/examples/readonly-attr-selector-firefox.html Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check: Style Checkboxes Cross-Browser in Windows - Results
- Original Message - I am experimenting with a Unicode font, Lucida Sans Unicode, to provide a x-browser way to get around IE's inabilities regarding form checkboxes. The font is supposedly on every Windows machine since Win 98 but I find that one machine with that font (and same version 2.0 of the font) fails completely. On the other machines, IE5+, Firefox/Mozilla, and Opera perform as desired. Style Checkboxes Cross-Browser in Windows: http://web.tampabay.rr.com/bmerkey/examples/style-checkboxes.html Results for anyone interested: Failure. At least this particular Unicode font cannot be relied upon for glyph mapping in combination with CSS even in systems where the font is installed and the browser and OS claim to support Unicode. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check: Style Checkboxes Cross-Browser in Windows
I am experimenting with a Unicode font, Lucida Sans Unicode, to provide a x-browser way to get around IE's inabilities regarding form checkboxes. The font is supposedly on every Windows machine since Win 98 but I find that one machine with that font (and same version 2.0 of the font) fails completely. On the other machines, IE5+, Firefox/Mozilla, and Opera perform as desired. I am hoping some people can take a look on their Windows machines and e-mail me privately so I can determine if the one failure was an anomaly or I have one more failed experiment to add to the pile. Style Checkboxes Cross-Browser in Windows: http://web.tampabay.rr.com/bmerkey/examples/style-checkboxes.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pullquotes
Am I missing something or why don't you just style the span class pull accordingly? Why come up with an own element? Chris Heilmann To keep the pulled text from being moved, out of flow. The same text is meant to be in two places simultaneously: in the flow and in a special display. Print and authoring convenience are also important. Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floated Boxes Jumping in IE
Dear all
I have a problem with rendering in IE of a series of
boxes containing textin a liquid layout.
When the screen size changes the boxes flow underneath
each other nicely in Mozilla/Firefox...but in IE they
go higgledy piggledy (sic!) around the page...is this
due to the 3 pixel jog?? I'm not sure?
Have a look at the page in question here:
http://www.english.heacademy.ac.uk/explore/resources/curriculum/activity.php
The HTML in the central content div is as follows:
div id=content
h1 class=resourcesTeaching the Curriculum/h1
div id=book_title
div class=book_headingWaterland by Graham
Swift/div
/div
div class=guideSpace / Topography
Activities/div
div class=cur_acta
href=activity_detail1.phpUsing Maps/a/div
div class=cur_acta
href=activity_detail.phpWater level/a/div
div class=cur_acta
href=activity_detail2.phpTransformative
writing/a/div
div class=cur_acta
href=activity_detail3.phpIllustrated
edition/a/div
div class=cur_acta
href=activity_detail4.phpMarsh Country/a/div
div class=cur_acta
href=activity_detail5.phpHabitats/a/div
div class=cur_acta href=# Suggest a new
activity/a/div
pa href=index1.phpReturn to themes/a/p
/div
The CSS
.cur_act {
float: left;
width: 80px;
height: 80px;
margin-right: 5px;
margin-left: 5px;
background-image:
url(../images/curriculum/green_bg.jpg);
background-repeat: repeat;
background-position: left top;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #00;
text-align: left;
padding: 10px;
font-size: 90%;
border: 1px solid #33CC33;
margin-top: 5px;
margin-bottom: 5px;
}
The address of the whole style sheet is:
http://www.english.heacademy.ac.uk/css/default.css
I would appreciate any assistance or comments anyone
can offer...these floats can be very scary!!
___
Yahoo! Messenger - NEW crystal clear PC to PC calling worldwide with voicemail
http://uk.messenger.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overlapping divs
In a link list I have on my site I have a problem in
Mozilla browsers..The title
line(style=searchtitleevent) is wrapping on lower
screen recolutions...and overlapping the next div
(searchvenue) causing an unplanned and annoying
effect.
Here is the URL:
http://www.english.heacademy.ac.uk/explore/events/archive/2004.php
and the HTML:
div class=searchresult
div class=searchtitleeventa
href=topics/newlect1.phpTraining Event for New
Lecturers/a/div
div class=searchvenue
emstrongVenue:/strong/em Birmingham Conference
Park - December 2004/div
div
class=searchurlemstrongTheme:/strong/em a
href=newlect.phpNew Lecturers/a/div
/div
the styles are as follows:
.searchresult {
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFCC33;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: #FAF0D0;
}
.searchtitleevent {
text-decoration: none;
background-image: url(../images/icons/events.gif);
background-repeat: no-repeat;
background-position: left top;
padding-left: 25px;
padding-right: 95px;
font-weight: bold;
height: 20px;
position: relative;
}
.searchvenue {
padding-left: 25px;
padding-bottom: 3px;
}
.searchurl {
padding-left: 25px;
padding-bottom: 3px;
}
I would appreciate any pointers as to what I am doing wrong.
___
How much free photo storage do you get? Store your holiday
snaps for FREE with Yahoo! Photos http://uk.photos.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
