[css-d] Does line-height override height in IE6 and lower?
Hi all - It may turn out that I need to describe the particulars of my problem, but first I thought I'd try paring the case down to just its bare essentials. I have an unordered list. Each list item is a single word long and has a height of 12px applied to it. However, in IE6, the base line-height I've applied earlier in the document (which is part of a collection of general browser reset rules I use for all my projects) is calculating to a value larger than 12px. In all browsers except IE6 and lower, changing the height does what I expect. That is, if I make the height of the list element 2px, all but 2px of the list element's content disappears. In IE6, because the line-height is calculating to a larger value, changing the height has no effect. Is this part of an already documented bug? I've been googling for a good hour trying to find another documented instance of this, and I can't find anything. Thanks for your help! Matt __ 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] A strange Safari bub - related to negative margin?
Hi all - I've never encountered a Safari-only bug before. I'm stumped. The draft page with the problem can be seen here: http://thenestedtest.com/waterworks/ww_d1.html The CSS for it is here: http://thenestedtest.com/waterworks/styles.css The problem is with the navigation. In Firefox, Opera, Camino, the rollovers work as planned. The line items each receive a top border that just overlaps the dashed top border set on the ul. I accomplished this by putting a negative margin on the links within each li. On hover, I also adjusted the padding to make the text stay visually put on rollover. But then in Safari, some combo of the padding and the negative margin causes the text to jog up and down by one pixel. Again, I'm STUMPED. Does anyone have an idea of what might be going on? Thanks! matt __ 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] A strange blockquote issue in IE6 - hasLayout related
It looks like the 'Magik Creeping Text'[1] bug. I knew it as 'the MSIE staircase'. Thanks, Georg! I looked all over PIE - I don't know how I missed this article. What a strange bug. I don't think I'll ever really understand hasLayout. It's getting to the point where if a bug looks completely nonsensical, I just assume it's a hasLayout bug. The first thing I do is add height: 1%; Matt __ 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] A strange blockquote issue in IE6 - hasLayout related
Hi all - So I have this problem, and I found a fix. Now I'm looking for *why.* Here's the site: www.thenestedfloat.com Here's the css: http://www.thenestedfloat.com/wp-content/themes/ThickFloat/style.css On my blog, any time I use a blockquote, all text in the left column that follows the blockquote has its margins re-rendered in IE6. The result is that the left side of that main content column is clipped. The fix was to trigger hasLayout on the blockquotes - I used height: 1%; So without seeing the problem in action, is there anyone that has insight into the *why* of this? Why does an element not having layout impact the flow of the rest of the document? I wish there was some way I could mark a list post as low priority, as this is a question of purely academic interest. Thanks! Matt __ 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] Sidebar getting dropped in lte IE6
Probably a problem with the italics. Anyway. Try
#content {overflow-x:hidden}
and apply this hack via a Conditional Comment.
Ingo
--
http://www.satzansatz.de/css.html
Excellent! That worked! Thanks, Ingo.
Now: why did it work?
1) I've never heard of a bug that causes italics to influence the width of
an element. How does that work?
2) As I understood it, overflow-x is a CSS3 property that isn't supported by
IE6. So why does feeding that declaration solve the situation?
Thanks again!
Matt
__
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] Sidebar getting dropped in lte IE6
Hi all - Once again, IE 6 and under has me stumped. On this page: http://www.southernenvironment.org/newsroom/philreed/winners.htm the photo and blurb that should be up there next to the center column content is getting pushed down, right past the bottom of the content column. The thing that has me confused is that this page: http://www.southernenvironment.org/newsroom/philreed/judges.htm is almost identical on a structural level, but doesn't exhibit the same behavior. When I compare the two files, the only difference as far as I can see is the number of unordered lists in the center column. That, and the first file doesn't use any h3's in the content column. I've focused on those two differences in my debugging, but no dice. Both these pages draw on two CSS files, which can be found here: http://www.southernenvironment.org/css/main.css http://www.southernenvironment.org/css/philreed.css Totally confused! Any ideas? Thanks for your help - Matt __ 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 browswer views
There are a number of different pay sites out there, and if you want super-reliable, fast service, they may be the way to go. browsershots.org is what I use. It's an amazing free resource. The only downside is that you have to wait - sometimes a couple hours depending on which browser you're most concerned about. Plus, sometimes the browser you may need the most isn't offered at that exact moment. But usually I've found that the IE browsers are available, and they return results pretty quick. Plus, again, you can't beat free. matt __ 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] Browser alignment differences
I'm not sure if this will actually fix your problem, but I think you intended to place your text-align: center declaration on the body, not on the container. (That is, I think you intend to use this to correctly center your layout for IE 5. If that's the case, put it on the body element instead.) That *might* fix your problem. Also not a direct answer, but I notice that in FF, the black 1px border on your h1 overlaps your body background image by one pixel on each side. Wouldn't it be easier to shrink the image by two pixels, and bring your border inside the body background image? I've found that overlapping like this makes things unnecessarily complicated - and might also be contributing to this problem you're seeing in IE. Let us know if that helps. Matt __ 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] Browser alignment differences
Sadly, none of that did anything to fix the problem. Any ideas on making the container extend down to 100% of the vertical space? Well, for starters, you might want to think about changing your use of that background image. If you make the container div wide enough to contain the image bg image(looks to be approx. 750px?), tile the image down that, and then wrap the content in another div, you'll have more flexibility. Ultimately, you probably won't want the shadow to tile all the way down to the bottom of the page if the content isn't long enough to fill the screen. If that's the case, you'll want to learn how to clear a container ( http://www.quirksmode.org/css/clearing.html). Clearfixing (google it) is another option. This is also likely to fix your current borders problem. IMO, it's hard to do too much layout testing until you have more dummy content on the page. You may want to beef up your html with some more test material (like columns, images, text, etc) __ 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] Browser alignment differences
Still, if you ever end up with a page where there is a small amount of
content - especially on a big screen - that container will still stretch to
the bottom of the page, leaving a largely empty column.
...but I'm glad it's working!
Try adding...
html, body {height: 100%;}
#container {min-height: 100%;}
* html #container {height: 100%;}
...and restyle the background to avoid visible overflow...
html, body {background: #fff url(../images/bg.jpg) center repeat-y; }
__
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] How to Filter Out Explorer 7 and Below
The reason this hack rubs me the wrong way is that you're using the hack to pass a value to FF and other compliant browsers. IE7 gets the unblemished, unhacked version. It's the exact opposite of the way I usually work. (Also, calling Safari a minority browser is absolute foolishness. Konqueror or Epiphany *maybe* but definitely not Safari.) matt __ 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] How to Filter Out Explorer 7 and Below
The real foolishness is arguing over browser market share and which browsers are worth supporting and what consitutes being in the minority, among other things. Any browser can be a minority browser, depending on the site in question. On my web site, for example, IE/Win (all versions) is a clear minority browser. On other sites, the story will be different. So let's concentrate on whether hacks are useful or not, please. Excellent point - I really need to keep reminding myself of that. I just wish I could get my boss to understand that it's a problem when page x renders like a busted up jigsaw puzzle in Firefox - especially when a full sixth of our total audience uses it. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Totally stumped on an IE 6 bug...HELP!
This one has officially gotten the best of me. I have this layout: www.thenestedfloat.com/examples/prism/index.html with CSS located here: www.thenestedfloat.com/examples/prism/style.css It works exactly how I want it to in all browsers except IE 6 and under. The problem: while the nav bar spans the entire wrap div, the other elements (including, most noticeably here) the footer. If you look at the footer, it extends almost the whole width of the wrap, but comes about 40px short. (The same is true of the header and content divs, but I'm away from an ftp program with which to make the problem more apparent. I'm absolutely stumped. Clearly, it's a horizontal formatting issue, but I've tried taking virtually all the horizontal formatting off this layout to try and find the culprit, but with no luck! Any ideas? Thanks in advance! Matt __ 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] Totally stumped on an IE 6 bug...HELP!
Thanks, Gunlaug. That worked great!
The only problem remaining seems to be that, according to what
browsershots.org is showing me, IE 5.0 reads height:1% and collapses the
container around its contents. Do you know if there's a separate solution
for that browser? (It's not a deal breaker, as IE5.0 appears to deal with it
just fine.)
Thanks!
Matt
On 1/22/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Matt Dawson wrote:
www.thenestedfloat.com/examples/prism/index.html
You're running into IE6' 'auto-expansion' bug - IE6 doesn't respect
declared dimensions on containing-elements if content is too big.
A couple of elements are pushing their containers - they are too wide,
and IE has problems calculating how wide each element/container really
should be in the end.
The following addition / correction should bring old IE back on track...
div#nav ul {width: auto; height: 1%;}
div#footer {width: auto;}
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] Problem with images and floats
This is a total shot in the dark, but it sounds a whole bunch like you're triggering quirks mode in IE. (Those sound like standard IE5 behaviors - and while I'm not sure that's exactly how many IE5 behaviors are triggered by quirks mode, I know some of them are.) On looking at your namespace definition, it looks like you have an extra variable in there - an unnecessary lang=en attribute-value pair. You should use: html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en Yours reads: html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en Let me know if this fixes anything. I'm very curious. Matt __ 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] Problem with images and floats
I should also point out that your namespace was correct for XHTML 1.0Transitional - just not the XHTML 1.1 that you're using in this document. Matt __ 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] as inside inline lis break free of their containers
Everything is unstyled apart from li{display:inline} and the a, which
has strong padding - but the y-padding extends beyond the ancestral
elements.
It would help to have some context regarding what you're trying to
accomplish. It would make sense that padding on your anchor elements would
extend outside of the list items, because they're inline, and therefore
subject to the inline box model (important because vertical margins and
padding don't render the same way .)
Also: the anchors are also inline (unless you're declaring them to be
display:block) and so shouldn't have any vertical padding to begin with. So
*are* you declaring them to be display:block?
More specifics would help.
Matt
__
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] how to hyperlink a background image?
I think everyone might be misunderstanding her question. She may just be referring to image replacement, which is a perfectly valid technique used all over the place: http://www.mezzoblue.com/tests/revised-image-replacement/ matt i don't think you should do this. Users expect links to be indicated visually and if they just click on some part of a page at random and it sends them back to your home page they are likely to get all frustrated and just go away. Unless you are dealing with a specifically limited audience who can learn the convention (say a group of folks behind a cooporate firewall), I'd stay away from doing this, even if you can. __ 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] color:none?
none is not a valid value for the color property. Now, I assume what you're trying to do is make the text of a link not display. There are a number of ways to replace text with an image. The best place to start your research is at Dave Shea's mezzoblue site. He keeps an updated tally of all the techniques to replace text with images. http://www.mezzoblue.com/tests/revised-image-replacement/ On 1/15/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is there a way to set a font color to none? I want to make some graphic-only buttons in a multi-skin site, and I can't remove the values. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] color:none?
As far as I know, the transparent value is only defined for use with color in the CSS3 specs and is, as of yet, unsupported by any browser. If you find I'm wrong about that, let me know - it'd be mighty useful. Matt On 1/15/07, Bjoern Hoehrmann [EMAIL PROTECTED] wrote: * [EMAIL PROTECTED] wrote: Is there a way to set a font color to none? I want to make some graphic-only buttons in a multi-skin site, and I can't remove the values. It is generally possible to use `transparent` as color; where that does not work you could set the color to the background color, and if that is not possible, you could try to remove the text with the 'content' property; if that does not work either, then there is no good way. By the way, its best to start new threads using the New Mail feature of your mail client instead of replying to some other message and changing the subject. -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Request for site check (and critique if you've got time!)
Thanks David and Ian! David - I've been having problems with that extra horizontal scroll for some time - it just keeps popping back up. For some reason, when I add padding to the global nav links, it IE6+ wants to push the global nav out of the defined box I've set for it. (I won't go too much farther into it than that, as I've now found a solution). Thanks for pointing it out! Also: that missing a was actually an escaped a I was using in a hack to target IE5, but because you caught that other bug, it forced me to find another way to deal with the problem - so now my page is validating again. Whew! On 1/14/07, ~davidLaakso [EMAIL PROTECTED] wrote: Matt Dawson wrote: http://www.thenestedfloat.com I'd really appreciate a site check. I'm on a mac, so I've done only limited testing in all versions of IE/Win. Matt re: xp Looking good in latest version of opera and ff. If it makes any difference to you, you are drawing a small horizontal scroll bar in ie7.0 and ie 6.0 (but not in ie/5.5 nor 5.01). Your very nice logo is a no-show in the dead ie/5.01. The page holds a very nice font scaling with and without a side bar in place and folds nicely. A missing letter a in margin is keeping your css file from validating without error (tsk, tsk). It is a nice, clean, minimal design. Nice job, Matt. Best, ~dL -- 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/
[css-d] Request for site check (and critique if you've got time!)
Hi everyone - I've recently finished a redesign of my site, a blog dedicated to - what else! - web design and web standards. http://www.thenestedfloat.com I'd really appreciate a site check. I'm on a mac, so I've done only limited testing in all versions of IE/Win. Let me know if you find anything amiss. (I'm particularly concerned that all parts of the design - header, body, and footer - are all centered, as I know centering using auto margins in IE can be problematic, and I'm mixing my methods here.) Also, I'd really appreciate any feedback you have about the look or feel of the site. Thanks so much! Matt __ 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] page check please
Though I believe everything is working as you intend, I would suggest rethinking the header rollover trick. When I roll over the header image, the image extends, and thus increases the height of the page. But then if I move on to the navigation bar - in an effort to navigate to a particular section - the page shrinks, and my mouse pointer is effectively pulled away from the nav bar. i have to scroll up the page to get to it, now that the page has reverted to its shorter length. For what it's worth, I'm on Firefox 2.0 on the mac. I'm actually not sure how other browsers handle this type of scenario - though now I'm intrigued to find out! matt On 1/13/07, Jehangir Larry [EMAIL PROTECTED] wrote: Appreciate a page check - different user agents (specially older IE), with suggestions for improvement. www.teerthyatri.com Many TIA. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a little
wonky. If I resize the size of my browser window, the left two boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with is a
scenario at certain browser window sizes where the third column obscures one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first and
third letter boxes fall below the viewport, and middle box doesn't show up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
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] Page check for newbite
Yeah, it applies on that page too.
Fixed position can be a bit tricky for that very reason. Floats will push
each other out of the way and never overwrite each other, but the same can't
be said for positioned elements. Any time you use positioning, you need to
test (or at least think through) as many conceivable scenarios as possible.
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Thanks so much. (The specific reason I set it up the way I originally had
it was ignorance :) although I don't have that excuse, really, after going
through Eric Meyer's really excellent book *CSS Web Site Design*.)
I guess that same solution would apply to my wrong-headed layout here?:
http://www.callibeth.com/galleries.htm
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 4:36 PM
To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do
with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a
little
wonky. If I resize the size of my browser window, the left two
boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The
reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with is
a
scenario at certain browser window sizes where the third column obscures
one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first and
third letter boxes fall below the viewport, and middle box doesn't show
up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page check for newbite
The short answer is no, that's not possible. Granted, you could do some
complex math and set up max and min widths for the containing element, but
that's not universally supported and...well, it's just overly complicated.
If you want to use percentage margins to separate the columns, consider
floating them to position instead. This will require an extra container div
to hold the three columns, as your current markup would have them floating
up to the top of your header.
Floating isn't the only option: you could also wrap those columns in a div,
center the containing div, and use relative positioning to place the columns
within the containing div. It all depends on the final look you want.
(If you need more specific help on this, I'd be glad to consult off list.)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Wow, what an easy fix. Thanks.
Another question: how to think about px versus percentage when setting up
the margins for these boxes on the galleries page? I'd like to use
percentages to accommodate different size viewports, but if my boxes are
px-sized, is that possible?
Before CSS, I used to think of myself as a very logical person ...
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 5:07 PM
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
Yeah, it applies on that page too.
Fixed position can be a bit tricky for that very reason. Floats will push
each other out of the way and never overwrite each other, but the same
can't
be said for positioned elements. Any time you use positioning, you need to
test (or at least think through) as many conceivable scenarios as
possible.
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Thanks so much. (The specific reason I set it up the way I originally
had
it was ignorance :) although I don't have that excuse, really, after
going
through Eric Meyer's really excellent book *CSS Web Site Design*.)
I guess that same solution would apply to my wrong-headed layout here?:
http://www.callibeth.com/galleries.htm
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 4:36 PM
To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do
with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a
little
wonky. If I resize the size of my browser window, the left two
boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The
reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with
is
a
scenario at certain browser window sizes where the third column obscures
one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the
left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first
and
third letter boxes fall below the viewport, and middle box doesn't
show
up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http
Re: [css-d] understanding negative margins and floats
It took me a minute to figure out what you were asking - but once I popped the hood, it makes sense. Floating an element takes it out of the normal flow of the document. In the case of your navigation bar (on the left), you have 4 nearly-identical speced elements (ie same size, proportions, etc.) each one having a class navigation. The rules about where an element floats *to* in any given document can be pretty complicated. But the simple explanation is that they float relative to their containing element. Since all of these navigation divs have the same containing element (in this case, the body element), AND because there's no room for them to cozy up next to each other in order (because they're width is costrained) they're all going to float to the same location. Notice that the last navigation bar (the one with its color set to green) is the one on top, as you'd expect). The important part is that first one, though: a floated element is taken out of the normal flow of the document. They can be contained in a couple of ways; one of the simplest (but sometimes problematic) solutions is to also float whichever element you want to be the container for the box in question. For a good float tutorial, check out Eric Meyer's CSS: The Definitive Guidehttp://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330/sr=8-1/qid=1164918709/ref=pd_bbs_sr_1/105-5469553-7720434?ie=UTF8s=books. It has the best explanation of floating behavior I've seen. Personally, negative margin layouts make my head hurt. On 11/30/06, mean dspt [EMAIL PROTECTED] wrote: Hi, I was experimenting with layouts from Layout Gala http://blog.html.it/layoutgala/ it uses exessively negative margins and floats for layouts. I've modified one of the layouts, and added some new divs. The sample page is there http://pmplus.org/layout7.html You can notice the side columns are strangely rendered. I can't understand the behaviour of .navigation and .extra divs. Why are they stacked one over each other, instead of running one beneath another? there's no absolute or relative positioning used... What rules make them overlap? Yegor __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with a CSS bug specific to dreamweaver...
HOLY CRAP! I can't believe that worked. Wow. Thanks, Philippe! You're right - this should be filed under most ridiculous bug fix ever. Matt On 10/25/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Oct 25, 2006, at 6:38 AM, Matt Dawson wrote: And here's where the problem is: I've applied a tiled background image to #main_body to make the blue main content column stretch to the footer, even if the right sidebar is longer. Works fine in all browsers. BUT in dreamweaver, adding this tiled image to the background through css causes all of my text to black out in design view - that is, it looks like someone took a black higlighter to those two columns. As I've mentioned in past emails, I have to use Dreamweaver, as it's the software we've committed to as an organization. They *still* haven't fixed that bug ? I reported that problem while beta testing Dreamweaver back in 2004. (and I haven't used that app since those betas timed out). The fix that worked back then is absolutely stupid. background: url(../images/lt_blue_tile_homepage.gif) repeat-y 0px 0px; note the addition of px to position co-ordinates: instead of 0 0 make it 0px 0px. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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 with a CSS bug specific to dreamweaver...
Hi all - I've already gotten so much great help from the list on this project - so thanks to everyone. My problem is I have this css-based layout: http://www.southernenvironment.org/test/index2.html that works in all browsers but IE5 and IEMac (I'm working on separate hacks for those), but has an annoying bug in dreamweaver. My layout is based on instructions from Dan Cederholm's Bulletproof Web Design. In short, I have three columns. The main content column and the right sidebar are situated in a wrapper div (called #main_body) that are floated to the left. And here's where the problem is: I've applied a tiled background image to #main_body to make the blue main content column stretch to the footer, even if the right sidebar is longer. Works fine in all browsers. BUT in dreamweaver, adding this tiled image to the background through css causes all of my text to black out in design view - that is, it looks like someone took a black higlighter to those two columns. As I've mentioned in past emails, I have to use Dreamweaver, as it's the software we've committed to as an organization. Has anyone encountered this problem? Is there a fix? (Oh, and I did also ask about this on the Adobe forums. So I apologize if any of you already came across this question there...) Mat __ 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] Using Dreamweaver with standards-based websites?
Wow! I'm away from my email for a day and look at all the terrific replies! Thanks to everyone for your advice. For those who mentioned it'd be easier if you could see the design, I've posted it here: http://www.southernenvironment.org/test/home_redraft.html For comparison sake, check out the current live version of our homepage http://www.southernenvironment.org/index.htm Table soup. Seriously. Wanna feel my pain? Lift the hood on that bad boy and take a gander. So anyway, I'm aware that my css for the redesign is a bit soupy itself; if I were to move forward, I'd start breaking this puppy into some separate sheets - one for main page layout, one for fonts, maybe one for images. Our site has more than 150 individual pages, with at least half a dozen different kinds of layouts, so it'd be tricky (and fun) to figure out the best way to organize the css. My main problems right now in dreamweaver: the left most column (what we call the toc, or table of contents) completely dissapears from the design view in dreamweaver 8. Someone mentioned negative margins wreaking havoc. Could that be it? Also: the header navigation and the footer are a bit quirky. In dreamweaver, the header list items double up (ie. Our Programs appears on two lines rather than one - not a big deal). Looks fine in all browsers I've tried. Also an issue: the footer is a bit wonky in dreamweaver - the blue border beneath the footer navigation shows in dreamweaver as longer than the border currently applied to the bottom of the three column container. Again, looks fine in all browsers. But then again, I'm not very pleased with the way the footer looks now. The most annoying problem is that missing table of contents. Any ideas? Unfortunately, the overall layout of the site isn't really up for discussion right now in our organization. For instance, elminating (or at least drastically simplifying) the table of contents - as I'd like to do - isn't an option. But I'd love to hear your opinions on the overall look of the page. Thanks so much to everyone for your help! matt On 10/17/06, Stephanie Leary [EMAIL PROTECTED] wrote: Matt Dawson wrote: snip I downloaded the trial version of Dreamweaver 8 and.no dice. The page is every bit as fractured in design mode in 8 as it was in MX. Is all hope lost? I won't be able to get approval for reworking our website with a CSS layout unless there's some program out there that would let people make simple WYSIWYG edits. Is there another editor out there that might work? Is there a setting in Dreamweaver that I'm just missing? Or am I just SOL? Dreamweaver handles some CSS layouts better than others. Negative margins almost always give me trouble, for example, but I've had good luck with a lot of the layouts from positioniseverything.net. If you're going for something relatively standard, like 2 or 3 columns with a header and footer, try downloading a handful of sample layouts from the usual suspects and see what works. If you have a minute, let Adobe know what kind of layout you were trying to use: http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform They do pay attention to that form -- or at least Macromedia did; I presume there's still someone listening on the other end. Filing a bug report won't solve your immediate problem, but it might lead to better support in DW9. -- Stephanie Leary Web Communications Specialist Texas AM University System http://tamus.edu __ 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/
[css-d] Using Dreamweaver with standards-based websites?
I work as a web manager for a smallish nonprofit. Though I'm the primary keeper of the site, there are a number of others in the org that edit it. Dreamweaver is the program that everyone's familiar with, so that's what we use. In my spare time, I've been redesigning the homepage with CSS - I want so badly to switch from our table based layout to something that I can actually understand. All of my redrafting has been done by handcoding. I didn't think twice about the fact that it looked like crud in Dreamweaver MX, as I'm aware that its support for CSS is extremely weak. Well, I finished a draft last night, and having heard that Dreamweaver 8 had far stronger CSS support, I started getting excited. If Dreamweaver 8 made my redraft editable in design mode, maybe I could sell this to everyone else who works on our site. I downloaded the trial version of Dreamweaver 8 and.no dice. The page is every bit as fractured in design mode in 8 as it was in MX. Is all hope lost? I won't be able to get approval for reworking our website with a CSS layout unless there's some program out there that would let people make simple WYSIWYG edits. Is there another editor out there that might work? Is there a setting in Dreamweaver that I'm just missing? Or am I just SOL? Thanks for your help! Matt __ 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] Centering a floated, unordered list in its container.
Hi all - I'm STUMPED. I'm sure most of you use unordered lists to do horizontal navigation bars. You're taking an unordered list, floating the list items to the left, and applying padding and margins to space the items out, apply background images, etc. But now that it's floated, what if you want to center the list in, say a containing div? That's what I'm trying to do, and I've gotten myself totally stumped. You all may not need the example, but the code looks something like this: div id=navbar ul li id=homea.../a/li li id=abouta.../a/li li id=contacta.../a/li /ul div The whole div is contained by another div that is floated and cleared because of the way I've done the overall page layout. And as I said, the list items area floated left to get them to snap horizontal. The page is fixed width, 720px. How can I center this in a way that increasing or decreasing the font size in the browser isn't going to totally break the centering? HELP! (And thanks :) ) Matt __ 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] Adding a top border makes DIV snap to the top. Why?
Hello all - Here's a very basic question. I've set up a very basic example html file attached to this email. In it and the css file also attached, you'll see that I'm setting up a centered content column with a fixed width of 500px and fluid borders. In most pages, I would in fact these elements to behave just as they are here - the content column is centered and is snapped to the top of its parent, the body element. But if I delete the red border on the content column, the column unsnaps from the top of the body. Why is that? I know the example html file is very basic, and something about its simplicity probably explains this behavior. Oh, I'm viewing in Firefox 1.5. Thanks for your help! Matt __ 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] Using display: inline; for navigation lists
Hello all - I'm a complete CSS novice, with only about ten months HTML experience (all learned from helping with a table-based redesign of my company's website) and only one month of self study in xhtml, css, and standards-based coding. So, you know, take pity on me and stuff. On a couple sites that I've looked at in the last couple weeks (Dan Cederholm's simplebits.com being a perfect example), the li elements that make up the navigation bar are styled to float: left. However, on Dan's site, I don't see a display: inline rule applied to any part of that list. I noticed that in the first chapter of his Web Standards Solutions, you use display: inline to take the first step towards making the example list horizontal. What's the benefit of displaying the list as inline if floating each li element left within the containing block could accomplish the same effect? Are there any examples where you *have* to use the display: inline rule to acheive the intended effect of taking a list of li elements and making them align horizontally. In looking at a bunch of different examples from across the web, I see that this style is used pretty consistently for this kind of use. I just can't figure out *why.* Thanks so much for your help! Matt __ 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/
