[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/
Re: [css-d] One Bullet Missing in IE
On 9/6/07, patrick mattison <[EMAIL PROTECTED]> wrote: > > I'm having a bit of a problem here. For some reason the red square > bullet before "About" won't show up in IE, however the bullet for > "Career and Education" shows up fine. Any suggestions? > > Below is the markup and the css: > http://www.liquidscience.net/andrew/testercopy.html > http://www.liquidscience.net/andrew/ag_style_1.css Specifically, it doesn't show up in IE 06 or IE 05.1, but it does show up in IE 07 on my Win/XP system. I'd like to see an answer to this one. I looked at this question when you first posted it, and can't see anything to cause the missing bullet. Beth __ 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] Newbie CSS callibeth website questions
Hi, I'm still working on my first CSS website, and struggling with some very simple CSS problems on a very simple web page ... I think. This test site page is here: http://www.callibeth.com/dev2/index.htm and the css is here: http://www.callibeth.com/dev2/css/main.css In FF2, I'd like a little more room above the text in the quote div, but if I add even 1px of top padding, the quote div height expands from 47px to 58px, and space appears below the quote div. Something to do with #quote and p #indexintroquote, but in spite of looking around the Internet for possible answers, I'm clueless. In all IE browsers, the space between the background image at the top and the #bethleesub text is a good deal greater than that in FF2. Is there a way to make that space more regular across the browsers, or is this the normal sort of difference we just put up with? And the footer doesn't quite stick to the bottom of the viewport in any version if IE. In IE6, there's space between the #quote div and the navigation bar that isn't there in FF2 and IE7. Why, or, at least, how to fix? In IE5, there are 3 problems: 1. There's no light-blue background in the #quote div even though I thought I specified one. Is that something I just lose? If there *was* a light-blue background I'd probably be having the IE6 problem mentioned above. 2. Any ideas about what to do about the navigation bar that is not styled very happily in this browser? 3. The three main boxes are not centered. Don't know why. What's the best way to address that? And help with these problems, or any other problems I don't see yet, would be much appreciated. Regards, Beth Lee 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] Newbie CSS callibeth website questions
On 2/18/07, ~davidLaakso <[EMAIL PROTECTED]> wrote: > > Beth Lee wrote: > > This test site page is here: http://www.callibeth.com/dev2/index.htm > > and the css is here: http://www.callibeth.com/dev2/css/main.css > > > > In FF2, I'd like a little more room above the text in the quote div, but > if > > I add even 1px of top padding, the quote div height expands from 47px to > > 58px, and space appears below the quote div. Something to do with #quote > and > > p #indexintroquote, but in spite of looking around the Internet for > possible > > answers, I'm clueless. > [Many other questions trimmed] > With regard only to the quote issue: > > There is (I think) a "collapsing margin" [1] issue at work as well-- it > is easier to see in Opera/9.02. You may do better by deleting the > height. Adding a 1px padding-bottom for the margin problem. And zeroing > out the padding, and margin on the font (except for the padding-top). A > ie height correction hack is for ver 6 and down: > > div#quote { > /*min-height: 47px; */ << padding-bottom: 1px; << add for margin-collapsing*/ > } > > #indexintroquote { > margin-top: 0; margin-bottom: 0; padding-top: 7px; padding-bottom: 0; > <<< add these > } > > hack for ie/6.0 and down > * html div#quote { > height: 0; > } > > [1] <http://www.w3.org/TR/CSS21/box.html#collapsing-margins> > > PS I think you need a more suitable doctype. > > Thanks for the reply. It works beautifully. I wish I knew why. I looked at margin-collapsing, but I couldn't figure which margins could be collapsing. I thought the applicable divs all had 0 top and bottom margins. What would be a more suitable doctype? A link to a good explanation would be helpful. (This is a web certification project, and the course instructs us to use this doctype, so I'm not sure I can change it on this website, but I'd like to know the pros and cons for the future, or maybe for arguing with the instructors :) .) Beth __ 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] Newbie CSS callibeth website questions
On 2/19/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > > Beth Lee wrote: > > > What would be a more suitable doctype? A link to a good explanation > > would be helpful. (This is a web certification project, and the > > course instructs us to use this doctype, so I'm not sure I can change > > it on this website, but I'd like to know the pros and cons for the > > future, or maybe for arguing with the instructors :) .) > > You have standardized cards on your hand :-) > > Thus, 'XHTML 1.0 Strict' _might be_ a more suitable doctype, since we > *MAY* serve 'XHTML 1.0' as 'text/html' so all browsers understand it. > If your instructors also insists that all projects shall be rendered by > Internet Explorer, then 'HTML 4.01' Strict is an even better choice > since 'HTML 4.01' *SHOULD* always be served as 'text/html'. > Thanks, Georg, for pointing me in the right direction. I've chosen XHTML 1.0Strict, which immediately solved a couple of problems in IE6. (When I e-mailed the instructor, he recommended XHTML 1.0 Strict serving text, even though the documentation in the online course instructs us to serve xml to XHTML 1.1. They need to update their documentation.) And now, thanks to you and the various articles I've read on the Internet about the subject, I have a better idea about doctypes and the serving of those doctypes. I figured out how to get the 3 boxes centered in IE5 -- by adding a "text-align: center" rule to the wrapping div. So that's fixed. And then I figured out how to get the vertical lines (side borders) of the navigation bar to work in IE5 by adding "height: 0;" -- this information from a css-discuss archived conversation. But there's extra space below the vertical lines now within the navigation bar, in IE5 only. Any ideas on how to fix this -- it's the broken box model again, right? -- or even *whether* to fix this? How pernickety to be about styling in older browers? Beth __ 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] Newbie CSS callibeth website questions
On 2/25/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > > Beth Lee wrote: > > >>> <http://www.callibeth.com/dev2/index.htm> > > Myself: I tend to reduce support for older versions after a few years, > *when* there are at least a couple of later (and hopefully improved) > versions of that particular browser available. > IE/win users have IE6 and IE7 available now, so IE5/win gets only the > very minimum of my attention - if/when I have time for it. > > > Having written all that ... the following CSS addition will probably fix > IE5/win well enough for comfort, without disturbing later versions... > > * html ol#navlinks li {margin-bottom: -.5em;} Thanks, Georg. Finally, 1 page works across most browsers! Woo hoo. And, more important, I'm finally getting the idea of how to approach the various issues that crop up. I was beginning to think that would never happen. __ 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] Text around Images
On Sat, Mar 12, 2011 at 6:29 PM, tedd wrote: > There was a css article about how one could slice an irregular image such > that the text in an adjacent textarea appeared to move around the image. > > Does anyone have a reference to that article or other such resource with > regard to displaying text in other than standard justifications? This 5-year-old tutorial http://www.alistapart.com/articles/sandbags/ uses php and css, a little more complicated than the one I remember, which had text flowing around a cartoon chef, I think. Oh, wait! Here it is: http://meyerweb.com/eric/css/edge/raggedfloat/demo2.html Beth __ 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] Inaccessible block at some screen resolutions
On this page: http://www.callibeth.com/about.php the bottom of the div gmain3 is covered up by the footer when the height of the browser windows is between 305px and 750px tall. It's been 4 years, and it's time to redesign, but I'm looking for a quick fix in the meantime. Can anybody suggest something? I rue the day I foolishly embraced the sticky footer. Regards, Beth Lee __ 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/
Re: [css-d] Inaccessible block at some screen resolutions
On Fri, Aug 5, 2011 at 12:03 AM, mouryan ekambaram wrote: > If you have not solved the problem yet making following changes in > main.css file at line 621: > #gmain3 { > background-image: url("../site_images/backlt2.gif"); > color: #FF; > float: left; > margin: 0 2em 2em; > padding: 12px; > width: 722px; > } > Eka > On Thu, Aug 4, 2011 at 10:48 PM, Beth Lee wrote: >> On this page: >> http://www.callibeth.com/about.php >> the bottom of the div gmain3 is covered up by the footer when the height of >> the browser windows is between 305px and 750px tall. >> Thanks for your reply. Your suggestions do the following: 1. correct the syntax of the background-image selector. I wrote this stuff when I was a real newbie (now I'm only a quasi-newbie), and it turns out that I don't need the background-image line at all. 2. change the margin from [0 2em 0 2em] to [0 2em 2em 0]. This change doesn't seem to affect the problem at all. My original statement of the problem was slightly wrong. The issues actually lies within the 665-775px browser-window height. Within these resolutions the gmain div is covered up by the footer and there is no scroll bar to allow the user to access the bottom of the gmain div. At larger and smaller heights this is not a problem. Beth __ 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/
Re: [css-d] Inaccessible block at some screen resolutions
Earlier, I've written at various times: > On this page: > http://www.callibeth.com/about.php > the bottom of the div gmain3 is covered up by the footer when the height > of > the browser windows is between 665px and 750px tall. > >>> Within these >>> resolutions the gmain div is covered up by the footer and there is no >>> scroll bar to allow the user to access the bottom of the gmain div. At >>> larger and smaller heights this is not a problem. > On Vista, I see the problem in Chrome and Safari , but not in FF and Opera. Even further clarification of the problem: Besides the inaccessible content at a set range of browser window heights, the footer text was repositioning around the gmain3 div as a float in that same range. I got some help by consulting http://www.cssstickyfooter.com/using-sticky-footer-code.html. The first problem -- inaccessible block of text -- was solved by increasing bottom padding on the gmain3 div's to equal the depth of the footer. That's relatively easy to understand. No pun intended, but I'll let it stand. The second problem -- floating footer text -- was solved by adding the class .clearfix to the gmain3 div and adding this clearfix hack to the css code: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ I thought the clearfix hack was for browsers that are dead and/or dying. Not so? It seems to fix the the clearing problem in my updated webkit browers on Vista. Beth __ 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/
Re: [css-d] Image going off page
On Thu, Aug 11, 2011 at 2:05 PM, Tindle, Terri wrote: > I took over a very complex website from a web designer. I'm trying to use > her template to build a new page. The only issue is that in resolution 800 x > 600, the main image goes off the page. To be honest, she is using at least 6 > different css sheets and I don't even know where to start. Is it possible to > build a custom class that takes care of this problem without having to sort > through all the css? > > This site is supposed to go live within the next hr so I am a little in panic > mode. A quick look show that it's fixed by removing the inline style on the image and then changing the div#tipTop text-align from right to center at line 168. I don't see that it changes anything else. Beth __ 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/
Re: [css-d] Sticky Footer Cuts Off In FF 4 & 5 Both Mac & Windows
> Have you reproduced that on a real machine ? The problem seems to occur only if the page is opened in a browser window < 1120px wide and then scrolled right. __ 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/
Re: [css-d] Sticky Footer Cuts Off In FF 4 & 5 Both Mac & Windows
On Sun, Sep 11, 2011 at 10:43 AM, David Laakso wrote: > > On 9/11/11 11:02 AM, Elli Vizcaino wrote: >>> >>> Oops, forgot one thing. >>> To minimise the issue, you can give your footer a min-width, matching the >>> fixed >>> width of your main content. >>> >>> #footer-wrapper { min-width: 1116px } >> > > Yes, that helps and there was never any real problem other than that in Mac > OS X 10.4 FF/3.6.22. Unless, of course, the user is a deviant and has > minimum font-size set at 16px or greater in her browser prefs. Not true. The problem was showing up in Vista FF/4.something-or-other, and I'm no deviant. No special settings, anyway :) The fix did indeed work, and not just for www.E7Flux.com, but also for my site's wrapper and footer at www.callibeth.com. Hence my own interest in the question. Beth __ 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/
Re: [css-d] @Fontface Not Working?
> Am working on a coming soon page for my site and @font-face doesn't seem to > be working. Not sure why .I implemented @font-face on another project and it > was fine. Now it's not working for this. I am using a different font now - > could this have something to do with it? I believe you need quotes around multi-word font family names -- both for the @font-face declaration and for the standard rule. Beth __ 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/
Re: [css-d] no ul list style with reset.css
On Sun, Nov 4, 2012 at 7:23 AM, Koen van der Drift wrote: > Consider the following html5 and css code: > > > > > one > two > > > > > > > main.css: > > .test ul > { > list-style: disc; > } > By using the selector ".test ul", you are mistakenly targeting the ul child of some element styled with class "test". But you want to target the ul element that itself bears the class "test", so the proper selector is "ul.test". -- Regards, Beth Lee callibeth.com __ 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/
Re: [css-d] Amazing CSS
>-Original Message- >From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of >Charles Miller >Sent: Tuesday, September 15, 2009 4:04 PM >To: CSS-D CSS-D >Subject: [css-d] Amazing CSS > >On Sep 15, 2009, at 2:53 PM, Shawn Lawler wrote: > >> I think this what you're looking for mate: >> http://www.scottjehl.com/v7/index.php/process/html_text_drop_shadows > >The Matas text comes off to my eye with much more finesse. Don't think >it's just white vs dark blue. The example on the Jehl site is too >thick a shadow to appeal to me. > >I agree with the gist of Jehl's comment: > >"The result is a hard-edged offset shadow that's not necessarily >pretty, but it gets the job done." > >To me that suggests that the effect cannot be fine tuned. If I'm >wrong, please let me know. > >Chuck M What about this? http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow I've been meaning to try it out, but haven't done so yet. Beth Lee http://www.bethleedesign.com/ __ 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] getting a horizontal list to float to the right
Do you need to set a width on the ul#nav? If you remove the rule width:550px, it works as I believe you want it to. Beth On Fri, Feb 19, 2010 at 10:20 AM, Chris Kavinsky wrote: > I'm working on a site with a horizontal navigation. Ideally, I would > like the list to float to the right side of the frame, but due to > applying float:left to the individual li items, I can't get it to work > properly. Am I doing something wrong, or is there a trick for this > without sieeting a specific width on the items? > > Here's my css code for the nav: > > ul#nav { > margin:0; > padding:0; > float:right; > text-align:right; > width:550px; > list-style:none; > } > > #nav li { > margin:0; > padding:0; > font:italic normal 1.1em Georgia, "Times New Roman", Times, serif; > display:block; > float:left; } > > #nav li a { > color:#000; > text-decoration:none; > padding-left:15px; > text-align:right; > } > > #nav li a:visited { > text-decoration:none; > color:#000; > } > > #nav li a:hover { > text-decoration:none; > color:#be7734; > } > > here's the live site for reference: > http://www.associationdatabase.com/aws/360/pt/sp/home_page > css file: http://209.235.212.107/screen.css > __ > 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-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] ID vs. Class
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Monday, July 19, 2010 8:50 PM To: css discuss discuss Subject: [css-d] ID vs. Class >> I understand the difference between class and ID to a basic level. ... >> - what's the real difference other than using it once or multiple times? 1. If you use an ID multiple times, your HTML won't validate. Maybe you don't care about that. 2. There is a difference between ID and class in the "cascade" in css. If a div has both a class and an ID, the ID rule trumps the class rule, since an ID has more specificity than a class, You can use the cascade to streamline your stylesheet. 3. If you use Javascript, your getElementById functions could go blooey if there are multiple divs with the same ID. (If there's a more technical terms for it, I don't know it.) Beth __ 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] ID vs. Class
Chris writes: >>3. If you use Javascript, your getElementById functions could go blooey if >>there are multiple divs with the same ID. (If there's a more technical terms >>for it, I don't know it.) >But it's OK if they classes? Well, you can't use getElementById (obviously), but you can use getElementsByClassName. >> Really for this because it is only appearing once for now I should use ID - >> but there's a good chance I may use it again later on this page - so class for now is OK? Sounds like class is the way to go. Beth __ 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] navigation link a different colour when page is active
On Mon, Aug 2, 2010 at 6:01 AM, Shortie Designs wrote: > Sorry - my original email was unclear - I"m trying to make the current page > in the navigation bar appear active - so when you are on the page - the name > of it will appear in different colour font in the navigation bar - this way > the user knows they they are on the 'home' or 'about us' page. Add to the css: .current {rules differentiating the current-page link} On each page, add class="current" to the navigation link for that page. Regards, Beth Lee www.bethleedesign.com __ 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] Webkit problem with a list - I just can't figure it out
On Fri, Aug 13, 2010 at 9:36 PM, Nate wrote: > Hey guys, > > There is a problem with the way a nested unordered list in my sidebar is > rendering. In Firefox everything is working fine (doesn't it always?), > but in webkit browsers the first li renders properly while it's siblings > are bumped to the right about 50px. I think your nested list items would render correctly if they were surrounded by tags. Beth __ 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] Odd behavior of main div
On Sat, Aug 14, 2010 at 7:05 PM, William Gaffga wrote: > Hi ... I'm working on a new portfolio site for myself and I've stumbled > across something I just can't seem to figure out, namely, why the Main div > on the page is shifting left by 8 pixels on 2 of my pages. > This is the site: http://www.wilyguy.net/portfolio/index.html > CSS is found here: http://www.wilyguy.net/portfolio/portfolio.css > > These are the offending pages: > > 1. http://www.wilyguy.net/portfolio/html.html > 2. http://www.wilyguy.net/portfolio/images/grfx.php > > So ... the main div is being moved if some content is going beyond some > boundary, as both cases have solutions by minimizing the content. This, > again, makes no sense. > If it extends below the viewport, the main content div shifts. That's the boundary. (On my MacBook, the Manuals also shifts also for this reason.) I don't see any reason it should be so, but it's a clue. As far as I can see, you have no width margins or padding on html, body, or main div, and your 1px borders shouldn't have any effect. Beth __ 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] Adjacent Sibling Selectors in Reverse?
On Mon, Aug 30, 2010 at 1:16 PM, Rick Gordon wrote: > Yes, Tim, I understand that, and in fact, I am currently addressing the h2. > > The reason why I was trying to do it the other way is because the context is > for EPUB formatting, and space above the h2 causes it to fall lower on the > page if the h2 is at the top of a page. By addressing the p prior to the h2, > I could adjust the margin-bottom of that, rather than the margin-top of the > h2. > > Rick Gordon What giving the selector h2:first-of-type a smaller top margin than other h2 elements? Beth __ 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] IE Problem - logo appearing on top of text
> --- On Tue, 31/8/10, Timariane Thornewig wrote: > >> I was wondering if someone can help me out, I'm a newbie. >> The logo is appearing on top of my text in several versions >> of IE. and then ... On Mon, Aug 30, 2010 at 7:24 PM, Timariane Thornewig wrote: > I just tried to adjust the CSS and I created another version of the HTML > called: > http://www.ashelighting.com/controldesign2.html Float your sidebar div left, and don't float your main div. That fixes it for me. __ 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] problem: printable version of page
>> http://chmackellar.ehclients.com/printable_catalog >> I am making a print version of the above web page. >> If you go to this page and click print, then view a >> preview of the page, you will see that there is a >> ton of space right under the "collection" header, >> making most of the first page blank. Does anyone know >> why this is? I'd like the photos to start right under >> the "collection" header just as it does in the browser. I get various results with various browsers using an Epson WorkForce printer on Vista OS. Chrome -- no extra space below "Collection". IE8 -- no extra space below "Collection". Safari -- no extra space below "Collection" except that the space for the images, which are missing. Firefox -- rest of 1st page below "Collection" is blank; images being on page 2. HTH. Beth __ 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] Textarea not showing up
On Sun, Nov 7, 2010 at 9:58 AM, Rory Bernstein wrote: > Hello. > http://www.glitterlemonade.com/model_citizen/donate_occasion > > I have a textarea coded onto the form on this page, but it is not showing up. Your "homepage_maincontent" div is being taken out of the natural flow with the rule position: absolute. Change that to position: static (or just take it out altogether) to start fixing your layout. Regards, Beth Lee www.bethleedesign.com __ 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] Horizontal drop-down menu placement: FIXED!
Hi Steve, http://www.caramiadesign.com/md/ The page looks good on a wide screen, but, as David mentioned, your .container div (the one containing the nav) is pushing the page width out to the right -- by about 380+px past your design, hence the horizontal scroll bar. When I look at it in a 1024 x 768 window or smaller, the drop-down disappears out the right side of the window. Beth __ 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] OK to insert block-level tag inside div?
On Thu, Nov 18, 2010 at 2:34 PM, John wrote: > I now get that an ID must be used only once on a page. Within div tags (from > code generously provided here) I've been able to format specific bits of > content, like text, using classes and tags. > > But I'd like to ad a dotted line between to paragraphs, and that seems to me > to be a block-level tag required to do it. Is this correct? > > Can I throw in a and apply a border-bottom to that or is that > considered bad coding? A paragraph *is* a block-level element. Why not throw in some padding-bottom and apply a dotted border-bottom to that? You can add a class of 'last' to the last paragraph to override the border. Beth __ 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] How to avoid quirks mode
On Sat, Nov 20, 2010 at 9:13 AM, Keith Purtell wrote: > I have a newbie question. I'm aware from discussion here that IE may run > in "quirks mode" depending on how the html document is set up. But, it > wasn't until viewing a css tutorial on lynda.com that I saw a specific > way to prevent (most) IE quirks. Author Bill Weinman suggests the > following code at the top of each html document. I've made the change > throughout my site, but I want a second opinion about whether this is > best practice. Thank you. > > (I noticed that after I made this change and opened ea page, Dreamweaver > showed an alert that it had added a closing space and forward slash to > many of my tags. Mostly in the head, but also with images and some code > that embeds a Flash object for playing mp3 files. I'm curious as to why > it did that.) > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > http://www.w3.org/1999/xhtml";> > I'm assuming from your post that you had no doctype declaration on your pages until you saw the css tutorial. Putting anything before the doctype declaration (!DOCTYPE ...) throws a web page into quirks mode. If you don't declare a doctype, your entire page comes before the doctype declaration, so you're likely to be serving HTML -- and your page is in quirks mode. HTML doesn't require that all tags be closed (e.g. stuff here) or self-closing (e.g. ), but XHTML does require it. So when you "changed" your doctype to XHTML by adding that specific doctype, DW fixed your page so that all opened tags are closed. There's more to know about IE8-and-below not supporting XHTML, but I haven't wrapped my head around that yet. Regards, Beth Lee www.bethleedesign.com __ 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] Help with IE6 and #&*? Box Model
Hi all, I'm moving a site from tables into html5 and css, and onto WordPress. The head of the organization is concerned that the front page drops the 2 rows of 3 images out of alignment in her browser, which is ... AOL. Aargh. I've added a conditional statement to serve iecss.css to IE6, and I've tried a number of rules in it, but haven't managed a fix. The page is here: http://ohalah.org/wp/resources/member-sites The site is using the html5 doctype, which throws the page into quirks mode for IE6, yes? The page validates as html5. I could serve some other doctype to just the home page to avoid quirks mode, or deal with quirks mode. Any philosophy or wisdom on which approach is better? I kind of lean toward keeping the entire site as html5, since time is only marching forward. Regards, Beth Lee www.bethleedesign.com __ 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] Help with IE6 and #&*? Box Model
On Thu, Dec 16, 2010 at 10:34 PM, Beth Lee wrote: > Hi all, > > I'm moving a site from tables into html5 and css, and onto WordPress. The > head of the organization is concerned that the front page drops the 2 rows > of 3 images out of alignment in her browser, which is ... AOL. > > Aargh. > Aargh again. The URL I gave was one of only 2 remaining tables on the site. I have other issues with those. I meant to reference this URL regarding the IE6 box model: http://ohalah.org/wp/index.php Beth __ 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] Help with IE6 and #&*? Box Model
> http://ohalah.org/wp/index.php Felix wrote: > IE6 use is down to less than 5%, deprecated by M$ even. Yes, I wasn't going to worry about IE6, until I had a specific reason to do so. Philippe wrote: >As far as I can see without checking in IE 6 ... > the issue is not one of box model, but margin-doubling on floated blocks > Your images have a left margin, IE 6 doubles that, and making a mess. > The usual fix: Worked beautifully. Thanks so much! Georg wrote: > While you're fixing IE6, note that you have serious typos in the IE6 > stylesheet link in that page... Thanks for pointing that out. I dispensed with the extra stylesheet because the margin-doubling doesn't require one, but no wonder I was getting nowhere with that stylesheet. As I sent my post last night, I felt like the shoemaker setting out shoe leather and lasts for the elves, knowing that when I woke up this morning I would find my web page stitched together properly. Thank you all! Beth __ 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] spacing on right side
Matthew, you write: >> I almost have this how I want it. I would like to not have the space to the >> right of each testimonial. Anyone know how to fix this? >> http://ecoitsf.com/test/testimonials.shtml >> blockquote { >> >> color: #BBB; >> color:#333; >> font-size: .8em; >> font-style:italic; >> margin-top:0px; >> margin-left:-5px; >> line-height: 1.3em; >> } My Chrome browser is adding "margin: 1em 40px;" to your style sheet because you haven't specified a right or bottom margin. Add the following line to your blockquote statement: margin-right: 12px; Or just have one line for the margins: margin: 0 12px 16px -5px; (Why do you have 2 colors in your statement?) Regards, Beth Lee www.bethleedesign.com __ 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/
Re: [css-d] browser check
On Fri, 11 Feb 2011, Matthew P. Johnson wrote: >>> I am almost finished with our house site. Can you let me know if it >>> displays correctly in your browser/os? >>>... >>> http://applegateelements.com/ >> Is this how you want it to look? <http://t.cfaj.ca/applegate.jpg> > Oh man what browser/os is this? It does not look right at all. On Windows Vista, looks fine in Chrome, IE8, Firefox, and Safari, as long as the window is large enough. But look at it in a 800x600 window. The header image reduces to fit, while the navigation bar causes a scroll bar, so that there is a gap to the right of the header image when you scroll right. Kind of strange looking, I think. I'd say that wasn't a problem, since so few people browse on their computers at 800x600. But given this behavior, I'm surprised that it looks fine on a Droid X -- the entire image and navigation magnify and reduce together. Regards, Beth Lee www.bethleedesign.com __ 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/