Re: [css-d] line-height: 2;
On Sun, 2 Sep 2007, trevor bayliss wrote:
What is line-height: 2; what value is interpreted by the browser? An em
value or px? Sorry about this newbie question, thanks for input
#footer p {
font-size : 75%;
line-height: 2;
margin-top : 0;
margin-bottom : 0;
}
Felix explained well what it means by the specifications (and, as far as I
know, in implementations as well), so I will just throw in some educated
guesses of what the style sheet author _meant_.
This is apparently for a footer element, where paragraph (p) markup is
used, for some reason, inside div class=footer.../div. The font size
there is set to 75% of the enclosing element's font size, which is
assumably the overall size for copy text. The line-height value is of
course computed from this inner, reduced font size, and it implies that
the lines of the footer paragraph will be rather far apart from each
other.
My guess is that this is really not what the author meant. The footer is
probably short, assumed to fit on one line, and the line-height value is
meant to create some vertical spacing above and below it. And that's
what it does, but and undesired effects will be caused if the page is
viewed in a narrow window, forcing the footer to wrap into two (or more)
line.
If this guesswork is close to truth, it would be both simpler and safer to
leave line-height untouched (defaulted) and directly set margin-top and/or
margin-bottom to values that create the desired vertical spacing.
By the way, people with good experience with word processors may easily
get mislead into thinking that line-height: 2 means double spacing.
Word processors let you set line height using unitless numbers, but the
numbers have meanings different from the line-height numbers in CSS. If
you set line height to 2 in Microsoft Word, the actual height will be 2
times the default line height for the font in use. This default is
selected by Word according to the font and it is larger than the font
size, typically 14pt for a 12pt font. This creates the same effect as
adding empty lines between all lines. If you wanted to create such a
double spacing effect in CSS, you would have to set line-height to a
value larger than 2 - typically something like 2.4.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
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] Are table-based layouts still needed
Marcelo de Moraes Serpa wrote: In other words, can pure CSS layouts do everything a table-based layout can do? I ask this becouse I still see many famous and really relevant websites with a dirty table-based soup layout. I wonder wether was lazy, or if he didn't know that he could do it with divs and CSS or if he knew that this kind of layout was viable to do with CSS. Well, just a thought :) Well, one thing Ye Olde Table Layout can do for you is give you a multicolumn layout without a lot of worries about browser compatibilities or bugs. It even works with CSS turned off. Outside of that, CSS is much more manageable! ;-) -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are table-based layouts still needed
In other words, can pure CSS layouts do everything a table-based layout can do? I also tought that table layouts would take a lot of time to disapears but I must say that it tends to disapear more quickly than I tought. I often use Ouline table cells option of webdevelopper extension on websites I surf on and I can tell that it's now pretty rare to find a recent web site made with tables. I think that a lot of people still use table layouts for html emailings. I personnaly think it's a error because most people have external sources disabled in their email clients or webmail, and having the layout of the table without images doesn't look professional at all. Personnaly I prefer text mail rather than html mails. -- Fabien Meghazi Website: http://www.amigrave.com Email: [EMAIL PROTECTED] IM: [EMAIL PROTECTED] __ 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] Sorry the subject is different-my last post was not site check please
Hi Trevor,
On 03/09/07, trevor bayliss [EMAIL PROTECTED] wrote:
CSS guru David Laakso very kindly gave me some code:
br.both {
clear : both;
}
br.right {
clear : right;
}
br.left {
clear : left;
}
.clear {
height : 0;
clear : both;
}
This effectively defines some helper classes for clearing - making
sure that any floats are placed and further content appears below
them.
For example, with the following HTML extract:
div style=float: left; width: 20em; background: #ccc; color: #000;Left/div
div style=float: right; width: 20em; background: #ddd; color:
#000;Right/div
div style=float: left; width: 20em; background: #eee; color:
#000;Left again/div
div style=float: left; width: 20em; background: #eff; color:
#000;Not floated/div
try putting
br class=both /
at various points in between the lines. Then try br class=left /, etc.
http://www.quirksmode.org/css/clearing.html
Not quite sure about the strict XHTML part of your question though.
It applies to HTML4 just as well.
cheers,
Tom
__
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] Are table-based layouts still needed
I still see many famous and really relevant websites with a dirty table-based soup layout. I wonder wether was lazy, or if he didn't know that he could do it with divs and CSS or if he knew that this kind of layout was viable to do with CSS. Most of the sites you speak of, I imagine, are most likely huge enterprise level sites (ebay is the classic example) which are run by expensive backend dedicated software which pulls the data out of databases, and, until they update the entire backend, they're locked into tables and tag soup on the front end. These types of sites aren't done in Dreamweaver. ;) I have seen some larger companies that have finally deployed tableless compliant sites now that IE7 has been released. I expect we'll be seeing more of those over the next year or so, since most larger companies were waiting for that event to happen before investing in large scale backend upgrades (not that it gave us all the compliance and ease of development that we had hoped for!) Re tables for LAYOUT- nope, not needed. Tables do occasionally come in handy for tabular data though. -- Ciao for now, bj mailto:[EMAIL PROTECTED] http://bitchslappin.net - Taking a Hard Look at the Business of Politics http://greenspeak.org - Small scale local environmental action http://kickasswebdesign.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] difficult problem with floating blocks
Hello, I try to do the following design: There are some quantity of blocks. The quantity is different each time I dray the page. They all included in one outer block with width in %. Each block includes: - one image (always the same, width=40px) - one string (there are =15 characters, every character could be different); the length of the line could be more than the width of the image above it I need: 1. All blocks should be the same width. and 2. Blocks should occupy all empty place within outer block line by line, i.e. if, for example, 3 blocks are enough to full the first line, the 4d block should be right under 1st, 5th - under 2nd and so on. By eye blocks should become arranged like in a table. How can I do that? Thanks in advance. -- Evgenia __ 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] different browsers
Is there a website where I can see my menu page with all the different browsers? If not, can someone check www.ttcollectiblegifts.com/dynamicdrive.html using IE6, and send me a screenshot? I was told the menu was large, and I hope I've fixed it, but can't see it with IE6. All help is appreciated. Terri __ 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] different browsers
Hi Terri, On 03/09/07, Terri Houston [EMAIL PROTECTED] wrote: Is there a website where I can see my menu page with all the different browsers? If not, can someone check www.ttcollectiblegifts.com/dynamicdrive.html using IE6, and send me a screenshot? I was told the menu was large, and I hope I've fixed it, but can't see it with IE6. All help is appreciated. These two sites work well: http://browsershots.org/ http://www.browsercam.com/ The page itself is extremely tall in IE6. The vertical scrollbar appears, scrolling down just shows blank content. Also, it looks like you have some CSS styling in the middle of the page, rather than in the head where it would normally sit. cheers, Tom __ 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] IE6 float Bug?
Hi list, I was hoping someone could help me with what appears to be (I think) an instance of the IE6 float/margin bug. The page is here: http://datastream.irregulara.org/ CSS here: http://datastream.irregulara.org/wp-content/themes/irregulara/style.css http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts- grids.css As you can see, I've been experimenting with the YUI GridBuilder. (Weirdness #1: The YUI CSS doesn't seem to validate. The page validates, however.) Page renders properly in Firefox2 (Mac/Win), Safari, and IE7 (with a few tweaks) in IE6, the right column gets pushed underneath the center content area. My questions: 1. Is this an instance of the IE6 float/margin bug? Is there some sort of tell-tale indication I should be looking for? 2. What is the recommended toolset for ironing this out? Firebug? Firefox web-dev extension? Others? I've looked-up and attempted the float/margin fix, but I have yet to get it working. Perhaps I'm misunderstanding something. There is a bit of cleanup to be done as well...there are some inline styles and br / abuse in there, but I don't think that's the issue. thanks in advance... /* scott Johnson [EMAIL PROTECTED] __ 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] Applying icons as background images: good or bad?
I'm curious about what the consensus is on the list about this. I'm sure you all agree it's very convenient to control icons via the CSS, as in a.PDF, a.DOC, a.external-link, and so forth. But there are 2 potential problems with this: (1) It's debatable whether those icons are presentational, or content-bearing. I'd say the former, and their alt text would be redundant: In the case of filetype icons, the link text would always include, for example, (DOC/Word, 64KB), and in the case of external links, the link would have a title attribute saying External link, will open in a new window. (2) They don't print. In fact, CSS-based pages can look suprisingly empty due to the reliance on background images. Mostly this is a good thing, but for icons, perhaps not. On the web I see plenty of examples of both approaches. What do the people on the list think? f __ 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] different browsers
Terri Houston wrote: Is there a website where I can see my menu page with all the different browsers? If not, can someone check www.ttcollectiblegifts.com/dynamicdrive.html using IE6, and send me a screenshot? I was told the menu was large, and I hope I've fixed it, but can't see it with IE6. All help is appreciated. Terri It looks the same in ie6 as it does in ff, opera, and safari. As already mentioned there are markup errors-- validate [1]. If you are on a pc, multiple ie versions are easy to install [2]. If you are on a mac, you can run any windows version of ie with Parallels Desktop [3]. Best, ~dL [1] http://validator.w3.org/ [2] http://tredosoft.com/Multiple_IE [3] http://www.parallels.com/ -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different browsers
Terri Houston wrote:
www.ttcollectiblegifts.com/dynamicdrive.html
I was told the menu was large, and I hope I've fixed it, but can't
see it with IE6. All help is appreciated.
There's nothing wrong in IE6 that isn't just as wrong in any other
browser, so you can test in any of today's browsers by applying font
resizing.
The script-induced positioning of dropdowns (second level menu items)
isn't dynamic - doesn't adjust when subjected to font resizing at the
user end without reload, which may lead to overlapping or non-reachable
dropdowns in all browser.
That's the only on-screen problem that page has, and that hasn't changed
since your last round.
You can either make the javascript dynamic - adjust 'top' without
reloading, or you can leave that positioning to CSS - which is dynamic
by nature and will override the script when 'top: 100%' is declared with
high enough specificity.
You can of course also choose to ignore the problem - write it off as
something that only happens under rare conditions, since you apparently
haven't been able to see it as a problem in any of the browsers you have
available. Again: the problem is *not* restricted to IE6.
-
If you choose to fix it through CSS, then the addition of...
.suckertreemenu ul li ul{top: 100%!important;}
...will override the script and hit the right spot dynamically.
.suckertreemenu ul li ul li ul{top: 0!important;}
...is also necessary to prevent the script from messing up the position
further down.
In addition to that you'll need...
.suckertreemenu ul li a{white-space: nowrap;}
...to prevent overlapping of second-level menu items when some
first-level menu items wrap and become too tall.
IE6 doesn't respect declared width, so it will push the last first-level
menu items onto a new line when wrapping is prevented. That makes the
addition of...
* html .suckertreemenu ul li a{overflow-x: hidden;}
...necessary.
--
The non-valid source code and CSS parts are still there too, but those
are handled by browsers [error recovery] and don't disturb at the user
end. Should be fixed though.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are table-based layouts still needed
bj wrote: I still see many famous and really relevant websites with a dirty table-based soup layout. I wonder wether was lazy, or if he didn't know that he could do it with divs and CSS or if he knew that this kind of layout was viable to do with CSS. Re tables for LAYOUT- nope, not needed. Tables do occasionally come in handy for tabular data though. I agree, some of my clients use tables to update regular information, eg rugby team results, and then tables are a viable, and correct use. Other than that, I try to make sure non use of tables. Peter __ 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] IE6 float Bug?
Scott Johnson wrote:
http://datastream.irregulara.org/
As you can see, I've been experimenting with the YUI GridBuilder.
(Weirdness #1: The YUI CSS doesn't seem to validate. The page
validates, however.)
Page renders properly in Firefox2 (Mac/Win), Safari, and IE7 (with a
few tweaks) in IE6, the right column gets pushed underneath the
center content area.
IE6 is choking on the 'em' sized containers with 'em' sized margins,
probably caused by a mix of not too well tested solutions in that
Gridbuilder and your own choice of selectors from same.
There simply isn't enough room for the wider, fixed-width, elements
inside each 'em' sized container at normal font sizes, and IE6 can't
handle overflow properly - it auto-expands the containers. That's
what's causing the float drop.
You can test by simply adding...
* html div {overflow-x: hidden;}
...which will prevent auto-expansion by hiding the overflow.
All columns will line up correctly then, but, of course, that doesn't
solve anything - just indicates what's wrong with your layout in IE6.
There's too much garbage in that Gridbuilder to do any serious debugging
at my end, so you'll have to work your way through it all, fix the real
problems, and make sure the elements you put in there works with the
'em' sized containers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are table-based layouts still needed
Re tables for LAYOUT- nope, not needed. Tables do occasionally come in handy for tabular data though. Much like H1 to H6 occasionally might be handy for headlines... -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] 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/
Re: [css-d] different browsers
David Laakso [EMAIL PROTECTED] wrote: Terri Houston wrote: Is there a website where I can see my menu page with all the different browsers? If not, can someone check www.ttcollectiblegifts.com/dynamicdrive.html using IE6, and send me a screenshot? I was told the menu was large, and I hope I've fixed it, but can't see it with IE6. All help is appreciated. Terri It looks the same in ie6 as it does in ff, opera, and safari. As already mentioned there are markup errors-- validate [1]. If you are on a pc, multiple ie versions are easy to install [2]. If you are on a mac, you can run any windows version of ie with Parallels Desktop [3]. Best, ~dL [1] [2] [3] -- http://chelseacreekstudio.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/ Yes at www.Browsercam.com - Building a website is a piece of cake. Yahoo! Small Business gives you all the tools to get online. __ 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] Sorry the subject is different-my last post was not site check please
Tom Molesworth [EMAIL PROTECTED] wrote: Hi Trevor,
On 03/09/07, trevor bayliss wrote:
CSS guru David Laakso very kindly gave me some code:
br.both {
clear : both;
}
br.right {
clear : right;
}
br.left {
clear : left;
}
.clear {
height : 0;
clear : both;
}
This effectively defines some helper classes for clearing - making
sure that any floats are placed and further content appears below
them.
For example, with the following HTML extract:
Left
Right
Left again
Not floated
try putting
at various points in between the lines. Then try
, etc.
http://www.quirksmode.org/css/clearing.html
Not quite sure about the strict XHTML part of your question though.
It applies to HTML4 just as well.
cheers,
Tom
Thanks for the reply Tom I checked out the different classes but it seems not
to make any difference if there are or aren`t classes on the brs. Maybe it is
because I checked it on IE?
-
Fussy? Opinionated? Impossible to please? Perfect. Join Yahoo!'s user panel
and lay it on us.
__
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] line-height: 2;
Thanks Jukka, Michael and Felix that is clear. - Boardwalk for $500? In 2007? Ha! Play Monopoly Here and Now (it's updated for today's economy) at Yahoo! Games. __ 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] Underlining back a text inside an a
On 8/31/07, Marcelo de Moraes Serpa [EMAIL PROTECTED] wrote:
Hello list,
I'm creating a horizontal icon-based menu. Each item has an icon and a
legend. Here's the XHTML:
div style=padding-left:10px
ul class=horizontal_list
lia href=editdivimg alt=User_48 src=/images/icons/user_48.png
//divdivEdit Profile/div/a/li
lia href=checkdivimg alt=Okdate_48
src=/images/icons/okdate_48.png //divdivCheck payment
history/div/a/li
lia href=editdivimg alt=User_48 src=/images/icons/user_48.png
//divdivEdit Profile/div/a/li
lia href=checkdivimg alt=Okdate_48
src=/images/icons/okdate_48.png //divdivCheck payment
history/div/a/li
/ul
/div
The question is: How can I get this legend link to be underlined like any
other default link text?
By writing valid xhtml: a is inline - it may not contain block
elements, so the compliant rendering engines will close the a before
commencing the first div (you might even find that it isn't
clickable).
Try this:
liaimg /span class=legendfoo/span/a/li
and style .legend {display:block; text-align:center;}
--
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] jumping lists
I'm working on a site redesign, and am experiencing some jump in the navigation menu (vertical drop-down). Can anybody help me figure out how to smooth this out? Here's the url: http://www.ambientglow.com/garage/glow/index.html Here's the css for the menu: http://www.ambientglow.com/garage/glow/_css/glow-menu.css here's the css for the page: http://www.ambientglow.com/garage/glow/_css/glow.css Any suggestions are appreciated! Thanks, Peg __ 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] Website page needs css validation and cross-browser help
The page is here:
http://www.callibeth.com/galleries/gallery1/evelyn.php
The HTML validates, and the CSS validates except for two instances of this
rule:
* html div#__ {
overflow-x:hidden; /* hide horizontal overflow in IE5.x - 6 */
}
First, can I get a reminder hint as to why I have that hack? Second, if I
need my css to validate, can I serve it as a conditional comment; if so, how
do I do that?
I submitted it to browsershots.com and see a problem in IE across versions
and operating systems: the container or outer div -- can't tell which -- is
not presenting a scroll bar if the content doesn't fitabove the footer.
Although Firefox is not a problem, Safari 3.0.2 on XP is. How to fix?
Thanks,
Beth Lee
www.callibeth.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] Help identifying float bugs and fixes
Hello,
My site looks fine on most browsers, but there are problems in MSIE
5.5 and 6 and in Mac IE 5.2.
My site:
http://trinitychamberconcerts.com
the stylesheet:
http://trinitychamberconcerts.com/newstyles.css
and screenshots in the offending browsers:
http://browsershots.org/http://trinitychamberconcerts.com/dev/index.html
In MSIE 6, the right sidebar does not float properly, and the right
margin of the main container div disappears off the right of the screen.
In MSIE 5 and 5.5, the sidebar floats, but the container div is not
aligned properly:
#container {margin: 1em auto;}
I've looked through Position Is Everything and other browser bug
sites and have not been able to pinpoint the problems with my site.
The site does validate as XHTML 1.0 Transitional, and the CSS
validates as well.
Any tips would be greatly appreciated.
Thanks!
Ryk
__
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] Center liquid thumbnail gallery div
Also, I'm seeing something else.
* html #wrapper {
overflow: visible ;
}
shows the content in .thumbwrap in IE6 but pushes the wrapper over to the
left
and pushes the footer down. If I remove the above rule the #wrapper
positions correctly
but then the content in .thumbwrap is cut off by the footer when the window
narrows.
Could anyone help with that?
TIA Scott
__
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] Help Me Obi Wan: Son of IE6 Float Problems
I'm asking here on the list because if I have a CSS problem it's usually beyond what other sources are able to help me with. This seems to be where willing pro's are willing to dig into someone else's code for free out of the kindness of their hearts and I appreciate it greatly. This is an IE6 float problem. Works in everything else under the sun (FF 2.x, IE7, Opera, Safari, etc.) but the floats don't sit side by side in IE6. I assume this is some kind of auto-expand issue but nothing I've tried has been able to fix it. I should have started testing in IE6 much earlier. Here's the URL: http://dev.laurelhurstoil.com/index.html It's supposed to be a simple-ish 2 (3 in some places) column layout. The bug should be obvious in IE6... columns don't sit side by side. It pushes the sidebar column down, and one of the sub-sidebar columns as well. I would love a little help since I've killed almost a whole day of work trying to debug this and I'm out of ideas. I've tried various overflow:hidden solutions, as well as just lowering widths by a pixel or two. Thanks in advance for your eyeballs and help. Daniel __ 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] Website page needs css validation and cross-browser help
Beth Lee wrote:
http://www.callibeth.com/galleries/gallery1/evelyn.php
The HTML validates, and the CSS validates except for two instances of
this rule:
* html div#__ { overflow-x:hidden; /* hide horizontal overflow in
IE5.x - 6 */ }
First, can I get a reminder hint as to why I have that hack?
Probably to prevent the auto expansion bug in those IE versions. They
don't respect declared width without such a hack.
Second, if I need my css to validate, can I serve it as a conditional
comment; if so, how do I do that?
No need for 'CC', as 'overflow-x' is perfectly valid CSS3.
Your page validated here...
http://jigsaw.w3.org/css-validator/validator?uri=http://www.callibeth.com/galleries/gallery1/evelyn.phpwarning=1profile=css3
Congratulations! No Error Found.
I submitted it to browsershots.com and see a problem in IE across
versions and operating systems: the container or outer div -- can't
tell which -- is not presenting a scroll bar if the content doesn't
fitabove the footer. Although Firefox is not a problem, Safari 3.0.2
on XP is. How to fix?
You need a space as tall as the negative margin provided for footer, at
the bottom of the main container. Something like...
#container {padding-bottom: 6em; overflow: hidden;}
...will do. The 'overflow: hidden' is there to expand the container in
standard compliant browsers.
Note that you have a strange mixture of 'em' and 'px' that causes the
layout to break with the slightest font resizing.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help Me Obi Wan: Son of IE6 Float Problems
Daniel Talsky wrote:
This is an IE6 float problem. Works in everything else under the sun
(FF 2.x, IE7, Opera, Safari, etc.) but the floats don't sit side by
side in IE6. I assume this is some kind of auto-expand issue but
nothing I've tried has been able to fix it. I should have started
testing in IE6 much earlier.
It's useful to test in IE6 from the very beginning, but don't design
for/in it.
Oh, and yes, the 'auto expanding' is at play, along with the 'hasLayout'
bug. IE6 handles all-floats - without margins and with restricted width,
a lot better.
http://dev.laurelhurstoil.com/index.html
Adding the following after all existing styles...
* html #main,
* html #sidebar-container,
* html #sidebar-alpha,
* html #sidebar-beta {
overflow-x: hidden;
margin: 0;
float: left;
}
* html #sidebar-alpha,
* html #sidebar-beta {
float: right;
}
...will make IE6 (and even some older versions) handle that page quite well.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
