Re: [css-d] page gap in IE edge/11
Tom Livingston wrote: Here is a sample page: https://tomliv.com/wip/ I've tried various page sizes on load and resizing and can't track down the space I am getting in IE Edge and 11. Can anyone tell me where the extra space in the page is coming from? The page scrolls for a bit for 'no apparent reason'. It's fine in FF, Chrome and Safari. I am using transition to vertical center the content at a viewport height greater than 750px. Thanks Not sure if you are expecting a specific look here but.. In Firefox-45.8.0 and Seamonkey-2.46 on my "Mozilla/5.0 (X11; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0" Gentoo linux stable builds, with both browsers sized at about 60% of available desktop real estate on a 27" ISP monitor at 1920 by 1080, display a vertical scroll bar and scrolling is necessary. If I maximise the browser windows, the vertical scroll bar disappears. However the content displayed, appears to be aligned to the bottom of the viewport and not centred. Michael __ 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] Responsive grid layout with graphics and scaling
There's an R missing in the URL - it should be http://turnkeysolutionsinc.com/ Mike On 07/06/2016 09:38 AM, Tom Livingston wrote: I'm getting a server error. On Wednesday, July 6, 2016, Karl DeSaulniers <k...@designdrumm.com> wrote: Hello Tom, As well as everyone else. Can I invite you to take a look at a new website of mine? Please let me know if it breaks for you? Should be fully responsive "as in" you can shrink the window and it responds. TIA http://tunkeysolutionsinc.com @Tom — if you take a look at the images on this site, you will see how I implemented what you're requesting I believe as well as the code pen below. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers <k...@designdrumm.com wrote: Hey Tom, I had this in my codepen. Made a few adjustments to taylor to your needs (hopefully). I "think" this is what you're going for. The :nth-child stuff is just for demo purposes. This also doesn't use flex. You will have to season to taste though and make it work for you. http://codepen.io/designdrumm/pen/BzRrKg Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jul 1, 2016, at 12:44 PM, Tom Livingston <tom...@gmail.com wrote: On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell <ch...@chrisrockwell.com wrote: Hi Tom, OK, I think they should scale, by default, at the same time also. I'm apparently pretty dense this week but are you finding otherwise? Consider this: http://codepen.io/anon/pen/GqmdxG - is that the behavior? This is great, yes. However, will it work without flex? Sorry, don't have time to play with it right now... Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.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] New website
Karl, I used a different speed test that gives a LOT of tips on each aspect of the time to completion. There is a wealth of insight in the tips, in a few cases they fizzle out (tips) but this list is awesome with feedback! In my 1st test page load speed was 5.1 seconds, a second one 4.9 seconds. https://gtmetrix.com/reports/tpsautoshippers.com/5MxjYmgX The biggest takeaway in that was the first file took 1.2 seconds to be requested and delivered. One site I have on shared hosting (about 1,500 sites total) loads the first file in 111 milliseconds, about 10 times faster. I would try to get that below a 1/2 second, preferably 1/4 second (250 milliseconds). I have target page load times of: non-profit (1.5 seconds or less); for profit 1.2 seconds (usually have lots more trinkets, scripts and graphics). On that test site a B minus grade on both tests (PageSpeed & YSlow) is readily achievable with MOST themes PROVIDED your host allows GZIP for all files AND has a caching firewall between the server and the Internet. As to some of their 'advanced' score categories - few shared hosts allow setting header expiration headers nor enitity tags. so don't swaet trying for A minus or above, especially if you have multiple scripts and css files loading. Mike On 01/29/2016 10:35 PM, Karl DeSaulniers wrote: Looks like its a varying degree. My test was a little quicker. http://www.webpagetest.org/result/160130_ED_5MQ/ I guess I can look into gzipping the transfer. That's something I don't think I've done. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jan 29, 2016, at 9:08 PM, Chris Rockwell <ch...@chrisrockwell.com> wrote: Hi Karl, I loaded the site on a Nexus 5 and the breakpoints seem to work fine. What really stands out to me is the slow performance: http://www.webpagetest.org/result/160130_65_54P/. It loaded very slowly. I would focus on performance first, which does have an effect on seo. I use chrome Vox to test with a screen reader. Chris On Jan 29, 2016 9:49 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: Hi All, I would really appreciate feedback from you guys on this WordPress website I just finished. It "should" be responsive on most if not all screens and work on old IEs as well. Any tips for SEO would be great, but OT for this list, so send off-list if you feel obliged. My SEO foo is rookie at best. Not sure how it works on assisted devices, hoping it does. I am actually excited to share, so If you run into any snags, let me know if you would be so kind, but over all, what do you think? :) TIA http://tpsautoshippers.com Best, Karl DeSaulniers Design Drumm http://designdrumm.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/ __ 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-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] styles for hover effects and touch
Tom Livingston wrote: List, How do you handle hover events on touch devices? Currently I don't. Until you brought this to my attention, I hadn't considered how problematic the :hover property could be on touch screen devices. For example, a button whose bg color changes on hover. On iOS, the hover change happens on tap. Not really a big deal but I'm not a fan of this personally. At my site http://www.thetangos.com/ the main navigation links should only display a text color change on hover. However after reading this post I noticed that for some reason yet to be discovered my Andriod 4.3 device will also show a momentary background-color change as well as the text color change on tap. I wasn't expecting to see the background-color change. Is it just a matter of moving the hover styles to a wider breakpoint? This seems simplistic, but technically would work provided you don't mind hover effects not working if you narrowed your browser window enough. I'd rather not add script just for this issue. Am I missing another simple solution? Thanks I think how simple the solution will be depends on how the :hover property is used. I found this interesting article this morning, http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/ Mike __ 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] css validation error
I need a little help understanding this error.
All css validates except this part.
css error = Unknown pseudo-element or pseudo-class :required
I have this html in a table for a contact form and all html validates.
input type=text placeholder=First Name name=first maxlength=40
required=required /
In the css I have this
input:required, textarea:required{add styles}
From all the information I have been able to find (which is mostly a
couple of years old) what I have in the css is the correct way of doing
this. So either my information is wrong or I have misunderstood it.
TIA
Mike
__
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] Mobile Issues to Solve
This is my first attempt to make a site responsive. My approach was keep everything as much as possible, device resolution independent using a single css file. I do have a couple of problems I would like to solve. The header is to large on screens =480px and the tap targets (nav links) are to small on screens =320px. What would be the best way to target these 2 items directly without affecting screens =480px? I can only test on a Samsung G-S4 and a high resolution desktop. I'm Still learning media queries. The site is at http://www.thetangos.com I am NOT a designer. I would like some constructive feedback on the site as well (off list please). TIA... Michael __ 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] Mobile Issues to Solve
Philip Taylor wrote: Mike Manley wrote: This is my first attempt to make a site responsive. My approach was keep everything as much as possible, device resolution independent using a single css file. I do have a couple of problems I would like to solve. The header is to large on screens =480px and the tap targets (nav links) are to small on screens =320px. What would be the best way to target these 2 items directly without affecting screens =480px? I can only test on a Samsung G-S4 and a high resolution desktop. I'm Still learning media queries. The site is at http://www.thetangos.com I am NOT a designer. I would like some constructive feedback on the site as well (off list please). As The Tango's (The Tango's what ?, one is forced to ask) is text, Thats a very long story but the short version is, It is Nick Name given to me many years ago. why is it presented as a graphic ? If it were text, it could automatically adjust to better fit the available width ... Philip Taylor I tried to do it as text and couldn't get it to sit nicely next to the graphic. You are correct it be text so I will give it another go. TIA...Michael __ 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] why are ems rendering large?
-- Original Message --
From: Karl DeSaulniers k...@designdrumm.com
To: CSS-Discuss Discuss css-d@lists.css-discuss.org
Sent: 7/25/2014 4:59:48 AM
Subject: Re: [css-d] why are ems rendering large?
Actually, I believe ems are based on the prior font-size of the element
in which its contained. rems are based on body.
For example, If you have a div in the body with no font-size set and a
span inside that div with font-size set to 120% then it will be 120% of
the body font-size.
However, if the div has a font-size of 110%, then the span would have a
font-size that is 120% of 110% the divs calculated font-size would be
of the body font-size.
Stay with me.. :)
Example 1:
Body font-size = 16px
div font-size = none set
span font-size (120%) = 19.2px
Example2:
Body font-size = 16px
div font-size (110%) = 17.6px
span font-size (120%) = 21.12px
Please someone correct me if I am wrong.
Well, your math is correct, but it shows that the calculated font size
is based on the span's parent font size which is the div.
Now if you had used a rem in your calculation this wouldn't have
occurred because the font size would have been base on the Root font
size; that's the definition of rem, a root-based em.
That's beauty of using rems, they are stable in that they're based on
the root font-size, but they are dynamic and relate to size changes of
objects and screens.
/* Example3: */
body {
font-size: 16px;
}
div style= font-size: 110%/div /*= 17.6 px
*/
span style= font-size: 1.2rem/span /* (1.2 * 16px) = 19.2 px
*/
Michael Rose
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.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] FireFox issues displaying height of div
Richard Wendrock Forum wrote: Does anyone know of an issue with FireFox not displaying the height of a div properly? The column on the right with the blue background appears correct in IE and Chrome. For some reason the column does not extend below the link. http://advres.thehomepagestore.com/consulting_unconventional_resources.php I don't see the issue you are referring to in my browsers. Seamonkey-2.26.1 or Firefox-24.6.0 on Gentoo-Linux-x86_64 Mike __ 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] Z-index or stacking issue
Good morning, I have a small problem with a site which I hope someone can assist. The site is www.deveron.org and the problem concerns the horizontal and left-hand navigation lists. I have just separated some of the navigation into the two menus from one horizontal one. Now the drop-down from the horizontal menu falls behind the left-hand menu and is inaccessible. I am assuming this is a relatively minor problem concerning the stacking contexts of the two lists and/or the z-index. The drop-down menu is using a set of scripts from the Live Web Institute and there are some slightly strange z-index values. Any help appreciated. I have tried looking using Firebug but so far can't see what needs to be changed. regards, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 __ 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] Implementing Responsive Design
FYI only recently has the 'smart phone' (all MQ capable) sales passed the 'feature phone' in sales percentage. Many present day low end 'feature phones' and most older (sold in 2009-2012) 'feature phones' lack the MQ support. As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are much more powerful than the 'smart phones' of 2011 and before. HTH, Mike On 08/23/2013 12:11 AM, Eric wrote: Hi Colin, Yeah that approach is called mobile first. It's gotten to be really popular. A few months ago though I read a good article call Desktop First that argued the opposite approach...but I can't find it again (I'll keep looking). BTW - when was that book published? I thought most mobile UAs supported MQ's by nowI could be wrong. As for me I work from the desktop down, it just makes more sense for me. Eric On August 22, 2013 at 9:10 PM Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: Been reading Implementing Responsive Design by Tim Kadlec--which is surprisingly well-written for an IT book. Kadlec seems to recommend building a site's CSS from the cell phone up--because some phones still don't handle media queries. In other words he starts off by making his sites look good at the smallest resolution, and then uses media queries (and sometimes Javascript) to add floats and what ever else is needed to make the site look right as the view port increases. This came as a surprise to me. I assumed everybody did the opposite: still build for the desktop, then fiddle with media queries and viewport widths to make the site acceptable for pads and phones too. His approach does sometimes require Javascript, to loop through all the block elements of a certain class and then add to add CSS as needed. What are the group's thoughts about this approach? Do you build from the desktop down, or from the cell phone up? -- /* Colin (Sandy) Pittendrigh --oO0 */ __ 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] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
In Yahoo Groups the main page (5 message preview) will display the CSS within in body style/style tags unless it is commented out. Mike On 05/22/2013 04:18 PM, David Hucklesby wrote: P.S. You surround your CSS with HTML comments. That was only needed for the very first browsers. I don't think anyone now uses browsers so old they display the CSS on the screen. :-) __ 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] Drop down menu pushing content down
Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/wb/ I think the problem is the drop-down nav menu on the left. The sub uls expand the width of the top level ul to accommodate them and this is pushing the main content down. If anyone can suggest a solution it would be appreciated. regards, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 __ 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] Drop down menu pushing content down
On 19/03/13 13:55, Laura Valentino wrote:
On Tue, Mar 19, 2013 at 12:17 PM, Mike m...@integrawebdesign.co.uk wrote:
Hi guys,
I hope someone can help with a little problem. A new website I am
designing looks perfect in Firefox 18 on Linux and in Safari. But it's not
right in Opera on Linux, Chrome on Windows and probably several others. URL
- www.integra-server.co.uk/lnp/**wb/
http://www.integra-server.co.uk/lnp/wb/
On my windows desktop computer it looks ok in Chrome but not in IE 9.
Could it be something to do with how different browsers interpret the box
model? (some count the padding as part of the width and some don't). If
floated content is too wide for the container it gets pushed down.
Someone helped me with this issue on here recently and gave me this code to
put in the css to fix it.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Regards,
Laura
Thanks, Laura, but it doesn't solve the problem. In fact, it reduces the
widths of the boxes and makes it look worse.
Mike
--
Integra Web Design
Braehead, Rhynie, AB54 4LS
01464 861535
__
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] Drop down menu pushing content down
On 19/03/13 15:32, Hahnel, Fred (DET-MRM) wrote: -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Mike Sent: Tuesday, March 19, 2013 8:17 AM To: css-d@lists.css-discuss.org Subject: [css-d] Drop down menu pushing content down Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/wb/ I think the problem is the drop-down nav menu on the left. The sub uls expand the width of the top level ul to accommodate them and this is pushing the main content down. If anyone can suggest a solution it would be appreciated. regards, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 The content div needs a width. Try 760px You can 'play' with this live by using a Developer Tool for the browser -Fred Hahnel __ 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/ This message contains information which may be confidential and privileged. Unless you are the intended recipient (or authorized to receive this message for the intended recipient), you may not use, copy, disseminate or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and delete the message. Thank you very much. Thanks Fred, that's sorted it, I think. Certainly in Opera and IE8. I knew it had to be something simple. cheers, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 __ 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] Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.12
David Laakso wrote: Do see a flash of white in any browser on your Mac when you click the page navigation links? And if so, in what browser? aside Opera Mobile nor OperaMini do not exhibit this problem when viewed on an Android/2.3.6 mobile-device. Thanks. Best, David Laakso I see the effect in Epiphany-2.30.6 powered by WebKit on Gentoo Linux-x86_64. It happens only when I first open a link, on subsequent links the problem disappears which doesn't make sense as the files should be cached when the page is first loaded. Possible caching bug in these browsers??? Also checked in SeaMonkey-2.14 and Firefox-10.0.11 and the problem isn't present. Mike __ 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] Problem with margins
Greetings,
I cannot get this declaration to work:
p.date
{margin-bottom:-10px; margin-top: 40px}
It is at the bottom of the CSS file.
It is used to style the page below.
I have gone through both the CSS and HTML numerous times and cannot find
the culprit.
Both the CSS and HTML validate.
Thanks,
-Mike
HTML Validation
http://epicroadtrips.us/2010/mich-ont/betsy_journal/index.php
http://validator.w3.org/check?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2Fcharset=%28detect+automatically%29doctype=Inliness=1group=0user-agent=W3C_Validator%2F1.3
CSS Validation
http://epicroadtrips.us/2010/mich-ont/betsy_journal/php-nav-index_style.css
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2Fphp-nav-index_style.cssprofile=css3usermedium=allwarning=1vextwarning=lang=en#errors
__
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] Problem with margins
On 11/1/2012 4:50 PM, Jukka K. Korpela wrote:
2012-11-01 22:32, Mike Breiding - Morgantown WV wrote:
I cannot get this declaration to work:
p.date
{margin-bottom:-10px; margin-top: 40px}
It would in general be useful to specify what to work means, i.e. what
is the expected effect and how the rendering differs from it.
To me, this was obvious.
But I see now it might only be obvious to me as I ahve been a bit
fixated on it.
However, in this case, if you open the page...
http://epicroadtrips.us/2010/mich-ont/betsy_journal/index.php
e.g. in Chrome, right-click a paragraph in the date class and select
Inspect element, you will see, under Matched CSS Rules, that the
element matches the rule but the rule is overstruck. And the reason can
be seen there too: there is also the rule with the selector
div#content p
and it sets the margin property. As the selector is more specific than
p.date by the cascade rules, this declaration wins.
To make your rule apply to the paragraphs, you can e.g. replace the
selector p.date by
div#content p.date
which is even more specific than the selector that now wins.
Ah-ha! This fixed the problems and a good lesson is learned: Be specific!
Thanks,
-Mike
Yucca
__
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] Font shorthand errors
The W3C CSS Validation Service gives me these errors. After reading the CSS3 standards for the font short hand I can not understand why I am getting the errors. 45 #content Value Error : font / is not a font-family value : 1em / 1.5em Rockwell,Helvetica,Sans-serif 99 .sub Value Error : font / is not a font-family value : 16px / 1.6em Rockwell,Helvetica,Sans-serif 130 .sub a span Value Error : font / is not a font-family value : 16px / 1.6em Rockwell,Helvetica,Sans-serif 175 p.credits Value Error : font / is not a font-family value : bold 0.8em / 1em Rockwell,Helvetica,Sans-serif 188 p.time Value Error : font / is not a font-family value : 1em / 1.5em Rockwell,Helvetica,Sans-serif The main CSS file can be found here. http://www.thetangos.com/styles/main.css Could someone explain this to me TIA Mike __ 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] firefox shows element too low
I have been called on to fix a website which I have done well enough
code-wise but now I'm out of my comfort zone with css - so here I am!
Everything seems ok in IE8 (Windows XP) and Chrome and Safari but in
Firefox 6 there is an element which appears a couple of pixels too low
on the screen.
Can you help me tweak this or point me at some documentation please?
I have seen references to vertical-align but the element (which is the
word 'Search' with a box around it) needs to align with a white
rectangle embedded in a jpeg image. I'm not at all sure about what is
actually happening.
In case it matters, when I view source of the page with the problem I
see two blank lines at the top then ...
- - - - - - - - html excerpt - - - - - - - - - - - - - - - -
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=enhead
- - - - - - - - /html excerpt - - - - - - - - - - - - - - - -
... which is produced via a template in a CMS package.
Here is an excerpt from the the existing css (which I didn't write) ...
- - - - - - - - css excerpt - - - - - - - - - - - - - - - - - -
#header #toolbar-top { float: right; padding: 0; margin:5px 25px 0px
0px; display:inline; }
#header #toolbar-top .label { display: none; margin:0px; padding:0px; }
#header #toolbar-top input.searchinput { float: left; padding-right:
25px; border:0; width: 105px; height:20px; background-color:transparent;
color:#66; }
#header #toolbar-top input.searchimage { background-color:transparent;
float: left; width: 27px; height: 20px; }
#header h1 a span { display: none; }
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#header #toolbar-top {
float: right;
padding: 0;
/* margin:-5px 25px 0px 0px; */
margin:3px 25px 0px 0px;
display:inline;
}
}
- - - - - - - - /css excerpt - - - - - - - - - - - - - - - - - -
I tweaked the Safari top margin by 8 pixels from -5 to 3 to get the
element to display at the correct height in Chrome and Safari.
Thank you very much for any pointers ...
Mike
__
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] White space in IE
Hi, I have just set up a site for a fishing festival, www.deveronfishingfestival.co.uk, and have a little problem with the header. This works fine in Firefox but, inevitably, not in IE. There is a rotating header picture with two overlying buttons. In FF these buttons appear correctly over the top of the rotating images but in IE they cause a white space above the images and don't overlap. I can't easily check IE as I use Linux so any assistance would be appreciated. regards, Mike -- Mike Davies Integra Web Design, Rhynie, By Huntly, AB54 4LS 01464 861535www.integrawebdesign.co.uk __ 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] ie6/7 shrink-wrapping with floated children
I'm a little rusty on my hack management, but do I remember correctly that there is no workaround for the following IE6 and IE7 bug: doctype html div style=position: absolute; div style=float: right;X/div /div (the outer DIVs shrink-wrapping is incorrectly defeated by the floated child so it instead spans the full page width) Is the only workaround for the wrong size to set an explicit width? Best regards Mike Wilson __ 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] Opera help
Hello list! I'm having an issue with a form and Opera. Page is here and CSS can be viewed in the normal manner: http://www.jhsph.edu/_beta/2009.10.06_health_disparities/index.html The problem is the search box. I've tested the page in FF (Mac/Win), Safari, Opera, IE6, IE7, and IE8. The form is in the proper place in all except Opera, which surprises me as Opera is a browser that rarely gives me grief. At any rate, I can't figure out what's causing the search box to be lower than it should be and I am here asking for fresh eyes to take a look. As always, I am grateful for this resource and thank you in advance for taking the time to assist. -Mike __ 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] Opera help
Sorry, I guess I should have specified that the issue is occurring in Opera 9/Mac On Thu, Apr 15, 2010 at 2:39 PM, T. R. Valentine trvalent...@gmail.comwrote: On 15 April 2010 13:31, Mike Smith grum@gmail.com wrote: Hello list! I'm having an issue with a form and Opera. Page is here and CSS can be viewed in the normal manner: http://www.jhsph.edu/_beta/2009.10.06_health_disparities/index.html The problem is the search box. I've tested the page in FF (Mac/Win), Safari, Opera, IE6, IE7, and IE8. The form is in the proper place in all except Opera, which surprises me as Opera is a browser that rarely gives me grief. At any rate, I can't figure out what's causing the search box to be lower than it should be and I am here asking for fresh eyes to take a look. It looks the same in Opera 10.51/XP and FF 3.63/XP. -- T. R. Valentine Your friends will argue with you. Your enemies don't care. 'When I get a little money I buy books; and if any is left I buy food and clothes.' -- Erasmus __ 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] Opera help
On Thu, Apr 15, 2010 at 3:09 PM, Tim Snadden li...@snadden.com wrote:
To solve your immediate problem try...
div.searchformDiv { overflow: auto; }
FWIW I'd suggest that the way that the nav bar has been set up is a
bit odd. Of course, I don't know the back story. I'm happy to
elaborate if you want. Also, the background images for the hover
states aren't preloaded so there is a lag between hovering and seeing
the hover state correctly.
Cheers, Tim
Thanks, Tim, that did the trick.
I know the set up on the nav bar is a but odd, but I'm dealing with a
cantankerous CMS. It's just the way it is.
I am curious to know why this was happening in Opera 9/Mac. I checked in
Opera 10/XP and like TR said, it loads fine.
Thanks again!
-Mike
__
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 replace this table row in CSS-only ??? [ solved ]
I still do not fully understand how this works, so I must muck with line-height in 2 places whenever I change 1 font-size. That it appears to work in my meager suite of browsers is a good thing: http://helices.org/mds_resume.html Thank you. Best Regards, Mike Mike Schleif wrote: OK, I have two (2) elements sitting on an hr /, one left justified and the other right justified: Abe Lincoln Biographical Info - NOTE: The left text is larger (e.g., h2) than right text; but, BOTH must share same baseline. I can do this easily with table. I'm having a bear of a time doing this with CSS only. I've tried various combinations of div, span, position, float, etc. NO combination meets all expectations. What do you think? Best Regards, Mike __ 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/
[css-d] How to replace this table row in CSS-only ???
OK, I have two (2) elements sitting on an hr /, one left justified and the other right justified: Abe Lincoln Biographical Info - NOTE: The left text is larger (e.g., h2) than right text; but, BOTH must share same baseline. I can do this easily with table. I'm having a bear of a time doing this with CSS only. I've tried various combinations of div, span, position, float, etc. NO combination meets all expectations. What do you think? Best Regards, Mike __ 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 replace this table row in CSS-only ???
No I've also tried font-size Best Regards, Mike Pi Dizayn wrote: On 06.02.2010 01:09, Mike Schleif wrote: OK, I have two (2) elements sitting on anhr /, one left justified and the other right justified: Abe Lincoln Biographical Info - NOTE: The left text is larger (e.g.,h2) than right text; but, BOTH must share same baseline. I can do this easily withtable. I'm having a bear of a time doing this with CSS only. I've tried various combinations ofdiv,span, position, float, etc. NO combination meets all expectations. What do you think? Best Regards, Mike Do we have to use h2 tag? __ 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 replace this table row in CSS-only ???
I googled this; but, 2 problems: [1] the 2 texts right and left were aligned to TOP not baseline [2] couldn't get the hr to display beneath both texts Best Regards, Mike David Laakso wrote: Mike Schleif wrote: OK, I have two (2) elements sitting on an hr /, one left justified and the other right justified: Abe LincolnBiographical Info - NOTE: The left text is larger (e.g., h2) than right text; but, BOTH must share same baseline. I can do this easily with table. I'm having a bear of a time doing this with CSS only. I've tried various combinations of div, span, position, float, etc. NO combination meets all expectations. What do you think? Not much :-) . Best Regards, Mike Some methods explained here, dunno if these will solve your problem or not (and the world will not end if you use a table): http://www.communitymx.com/content/article.cfm?cid=529B0 Best, ~d __ 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 replace this table row in CSS-only ???
OK
But, as I said, the LEFT text must be much larger than right; and with
this, the baselines right and left do NOT coincide ...
Best Regards,
Mike
Pi Dizayn wrote:
style type=text/css
!--
#right {
float: right;
}
--
/style
span id=rightBiographical Info/span
spanAbe Lincoln/span
hr /
On 06.02.2010 02:26, Mike Schleif wrote:
No
I've also tried font-size
Best Regards,
Mike
Pi Dizayn wrote:
On 06.02.2010 01:09, Mike Schleif wrote:
OK, I have two (2) elements sitting on anhr /, one left justified and
the other right justified:
Abe LincolnBiographical Info
-
NOTE: The left text is larger (e.g.,h2) than right text; but, BOTH
must share same baseline.
I can do this easily withtable.
I'm having a bear of a time doing this with CSS only.
I've tried various combinations ofdiv,span, position, float, etc.
NO combination meets all expectations.
What do you think?
Best Regards,
Mike
Do we have to use h2 tag?
__
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] How to replace this table row in CSS-only ???
Very interesting. I fail to understand HOW it works? What keeps the left-text-baseline at the same position as right-text-baseline? When I manipulate font sizes, the baselines move ??? Best Regards, Mike Chris F.A. Johnson wrote: On Fri, 5 Feb 2010, Mike Schleif wrote: OK, I have two (2) elements sitting on an hr /, one left justified and the other right justified: Abe Lincoln Biographical Info - NOTE: The left text is larger (e.g., h2) than right text; but, BOTH must share same baseline. I can do this easily with table. I'm having a bear of a time doing this with CSS only. I've tried various combinations of div, span, position, float, etc. NO combination meets all expectations. http://cfajohnson.com/testing/baseline.html (May need some adjusting) __ 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] Calndar display in IE6
On Mon, 2009-10-26 at 11:25 -0700, David Hucklesby wrote: Mike Davies wrote: hi, I am having a problem with the display of an availability calendar on a website I am working on. It is based on the Website Baker CMS software. http://druminnor.co.uk/pages/cottage/availability.php In Firefox this is displayed as a 3 column calendar but in IE6 only as 1 column... Interesting. I am seeing alternate rows of two columns and one column in all my browsers, including Firefox 3.5. I think it would be easier to debug if you were to correct the markup errors first, pretty please: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fdruminnor.co.uk%2Fpages%2Fcottage%2Favailability.php (If that link breaks, try http://bit.ly/326R89 ) Cordially, David -- Thanks David. Unfortunately it is difficult for me to debug to correct markup errors. My page template validated but for the content the code is generated by the CMS. Mike -- Mike Davies Integra Web Design, Rhynie, By Huntly, AB54 4LS 01464 861535www.integrawebdesign.co.uk __ 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] Calndar display in IE6
hi, I am having a problem with the display of an availability calendar on a website I am working on. It is based on the Website Baker CMS software. http://druminnor.co.uk/pages/cottage/availability.php In Firefox this is displayed as a 3 column calendar but in IE6 only as 1 column. I didn't write the css for this but added a 'width:30%' to the #mod_bookings .bookings_sheet rule to see if that might help. I can't see what may be causing the problem and any help would be appreciated. regards, Mike -- Mike Davies Integra Web Design, Rhynie, By Huntly, AB54 4LS 01464 861535www.integrawebdesign.co.uk __ 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] Padding/margin issue
Hi list, I've been working on this site and I'm having an issue with the red banner at the top of the page. It should go across to the right border of the box it's in, but it won't. Seems to not be working in FF, Safari, Opera, or IE, and it's even worse in IE. I've been looking at the code for so long I'm getting lost in it. I need some fresh eyes to look and offer an assist. Can anyone help out? The page is at: http://www.jhsph.edu/alumni/ and the CSS is linked in the head. Thanks in advance to all who take the time to read this and consider helping. -Mike ps. Happy Birthday to me! Was supposed to have the day off, but irritating issues like this forced me to come in. This is the last issue I have to deal with and then I can move on to other tasks. __ 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] Interesting issue with IE6, borders, and negative margins
On Fri, Aug 7, 2009 at 4:29 AM, Tim Snadden li...@snadden.com wrote:
Give the containing list item 'layout' (
http://www.satzansatz.de/cssd/onhavinglayout.html
). One way is with the proprietary 'zoom'. Put it in a separate
stylesheet with conditional comments.
.activenavpath { zoom: 1; }
Thanks, Tim!
I 3 list!!
__
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] There has got to be a better way
I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? M __ 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] There has got to be a better way
That's pretty much what I did which is why I was seeing if there were other ways; The limitation is that you have to use your image as a background image to do this. I would like to be able to figure out how to wrap the text about the viewable outline of an inline image; like the example below where the x chars define the image and the Ts are text. TTTx Txxx TTTxxTTT TTTT M I may not have gone where I intended to go, but I think I have ended up where I intended to be. -Douglas Adams Ignorance more frequently begets confidence than does knowledge - Darwin From: ke...@rodenhofer.com [mailto:ke...@rodenhofer.com] Sent: Friday, August 07, 2009 10:23 AM To: Gillespie, Michael A (Mike); css-d@lists.css-discuss.org Subject: RE: [css-d] There has got to be a better way Try this...I've used it a few times: http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm Kevin - Original Message - From: Gillespie, Michael A (Mike) [mailto:mike.a.gilles...@usa-spaceops.com] To: css-d@lists.css-discuss.org Sent: Fri, 7 Aug 2009 09:53:53 -0500 Subject: [css-d] There has got to be a better way I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? M __ 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/
[css-d] Interesting issue with IE6, borders, and negative margins
Hello all, I have some HTML being generated by our CMS that is creating a nested list for a menu. The issue at hand: The sub-navigation on this menu is supposed to have a divider between each item. I used a border-bottom on each link to achieve this. However, the last item shouldn't not have this border, so I added a margin-bottom: -1px; to the containing ul and that covers it up in all browsers tested (FF 3.5 on Mac/PC, Safari 4 on Mac, Opera 9.64 on Mac, IE7 on PC, IE8 on PC, Chrome 2 on PC) but not in IE6. In IE6, the border is showing on top of the li below the nested ul. View the page[1] in any browser but IE6 to see what we want. CSS is linked in the header and there is a wee bit of IE6 sniffing going on up there, too. Anyone have a work around? And yes, if I could edit the HTML, I wouldn't be asking for an assist on this issue; I'd add a class=last to the last li and be done with it. ;) I also considered getting rid of the dividing lines altogether but the designer (my superior) doesn't cotton to that idea. :/ Thanks in advance! [1] http://www.jhsph.edu/urbanhealth/about_us/demo.html -Mike __ 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] Interesting issue with IE6, borders, and negative margins
On Thu, Aug 6, 2009 at 11:00 AM, Mike Smith grum@gmail.com wrote: Hello all, I have some HTML being generated by our CMS that is creating a nested list for a menu. The issue at hand: The sub-navigation on this menu is supposed to have a divider between each item. I used a border-bottom on each link to achieve this. However, the last item shouldn't not have this border, so I added a margin-bottom: -1px; to the containing ul and that covers it up in all browsers tested (FF 3.5 on Mac/PC, Safari 4 on Mac, Opera 9.64 on Mac, IE7 on PC, IE8 on PC, Chrome 2 on PC) but not in IE6. In IE6, the border is showing on top of the li below the nested ul. View the page[1] in any browser but IE6 to see what we want. CSS is linked in the header and there is a wee bit of IE6 sniffing going on up there, too. Anyone have a work around? And yes, if I could edit the HTML, I wouldn't be asking for an assist on this issue; I'd add a class=last to the last li and be done with it. ;) I also considered getting rid of the dividing lines altogether but the designer (my superior) doesn't cotton to that idea. :/ Thanks in advance! [1] http://www.jhsph.edu/urbanhealth/about_us/demo.html -Mike Did this make it to the list initially? __ 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] More IE6 hacking
Hello all, I'm working on a page and I'm need of some assistance. Look at it in anything but IE6 to see the correct look. I'm having issues with the box borders in IE6. Specifically, in the Online Extras box, there are 2 borders at the top and in the News Briefs box, there's a border running across the middle of the box and the background tends to disappear as a result of scrolling. I know there are also some issues with the spacing in the header, but I think I can work those out myself. It's the other issues mentioned that are baffling me. Also, I've got some IE sniffing/CSS hacks already happening in the head. Just as a heads up, the Online Extras and News Briefs ribbons are relatively placed background images using a negative margin to achieve the proper spacing. I'm wondering if this is the cause of the border/disappearing background issues. Any and all help is much appreciated. Page URL: http://magazine.jhsph.edu/2009/spring/index.html CSS can be found in the usual ways. Thanks in advance! -Mike __ 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] More IE6 hacking
Forgot about validating. thanks On Tue, Jun 23, 2009 at 10:49 AM, David Laakso da...@chelseacreekstudio.com wrote: Mike Smith wrote: Look at it in anything but IE6 to see the correct look. Page URL: http://magazine.jhsph.edu/2009/spring/index.html CSS can be found in the usual ways. Thanks in advance! -Mike Hmm. You mean like IE/7.0 is correct? Good idea to validate the markup (and correct the CSS error) before posting. __ 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] More IE6 hacking
I guess I should also have prefaced this with the fact that I'm working on a template in a CMS and the CMS tends to spit out bad code. Believe me, my handcoding is far better than what the CMS generates. It's one of the limitations of the job and it's very frustrating. On Tue, Jun 23, 2009 at 11:00 AM, Mike Smith grum@gmail.com wrote: Forgot about validating. thanks On Tue, Jun 23, 2009 at 10:49 AM, David Laakso da...@chelseacreekstudio.com wrote: Mike Smith wrote: Look at it in anything but IE6 to see the correct look. Page URL: http://magazine.jhsph.edu/2009/spring/index.html CSS can be found in the usual ways. Thanks in advance! -Mike Hmm. You mean like IE/7.0 is correct? Good idea to validate the markup (and correct the CSS error) before posting. __ 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] More IE6 hacking
CSS is now 100% valid. Not much I can do with the XHTML at this point. On Tue, Jun 23, 2009 at 11:02 AM, Mike Smith grum@gmail.com wrote: I guess I should also have prefaced this with the fact that I'm working on a template in a CMS and the CMS tends to spit out bad code. Believe me, my handcoding is far better than what the CMS generates. It's one of the limitations of the job and it's very frustrating. On Tue, Jun 23, 2009 at 11:00 AM, Mike Smith grum@gmail.com wrote: Forgot about validating. thanks On Tue, Jun 23, 2009 at 10:49 AM, David Laakso da...@chelseacreekstudio.com wrote: Mike Smith wrote: Look at it in anything but IE6 to see the correct look. Page URL: http://magazine.jhsph.edu/2009/spring/index.html CSS can be found in the usual ways. Thanks in advance! -Mike Hmm. You mean like IE/7.0 is correct? Good idea to validate the markup (and correct the CSS error) before posting. __ 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] More IE6 hacking
Kills the border, IE/6.0.
* html div.rc {height: 0;}
BTW, your cc is hitting IE/8.0 and down.
I leave it to you, or someone else on the list, to correct the issues you
have in IE/7.
Please bottom post. Thanks.
Sorry, I post so infrequently I forget about bottom posting on the replies.
Thank you very much for the IE6 fix, but I don't understand the cc
comment.
__
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] More IE6 hacking
On Tue, Jun 23, 2009 at 4:42 PM, David Laakso da...@chelseacreekstudio.comwrote: RE: http://magazine.jhsph.edu/2009/spring/index.html In the head of the document, you have two conditional comments. This one target IE/6: !--[if IE 6] ... ![endif]-- And this one targets, IE/8, IE/7, IE/6. Do you need to hack the compliant browser, IE/8.0? !--[if IE] ... ![endif]-- Please see: http://reference.sitepoint.com/css/conditionalcomments And, scroll down to the use of CCs in hacks and hack management on this page: http://www.satzansatz.de/cssd/onhavinglayout.html A, Conditional Comments. I understand now. I'll look into it this evening. Thanks again for you help on the other issue. Although I've only needed the help of the list a couple of times in the last year (of working in the field professionally), it's always been during a crunch and the list has always come through. I really appreciate the list and all the people on it who help. -Mike __ 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] Extra padding in IE7 on list items
Hello all, I'm having an issue with IE7 (go figure) and can't seem to figure out what's causing the problem (other than it being IE). But enough IE bashing, here's the issue: I have a menu that uses a ul structure. I've styled the CSS to display it the way I want it to and it looks great in FF and Safari. The problem is that IE is adding a few pixels of padding or margin after each li and I can't figure out why. I'm hoping that fresher eyes than mine can spot something that I've been overlooking. Also, unless the solution is in the HTML, please disregard the craptacular HTML. I'm stuck with this CMS and am hoping to move to cleaner HTML, it just isn't happening yet. The ul is generated by the CMS and looks to be structurally sound. Page: http://www.jhsph.edu/_beta/2009.04.24_MPH/index.html CSS: http://www.jhsph.edu/se/styles/out/578366A6A9400AAC4BCD995BC1037773.css There are 2 others sections of CSS, however, I don't think they have anything to do with this display discrepancy as they are on almost every page of the site and I've yet to have them cause issues in the past. However, if you need to see them: one's embedded in the head, the other is here http://www.jhsph.edu/custom/mod_sitesearch/_includes/css/overlay.css Thanks in advance! Mike __ 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] Extra padding in IE7 on list items
On Tue, May 26, 2009 at 2:35 PM, David Laakso
da...@chelseacreekstudio.comwrote:
Add this declaration to the style sheet to lose the gap:
div.divNav1 ul li {float:left;}
Fix implemented.
I 3 this list. :)
-Mike
__
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] Extra padding in IE7 on list items
On Tue, May 26, 2009 at 2:35 PM, David Laakso
da...@chelseacreekstudio.comwrote:
Add this declaration to the style sheet to lose the gap:
div.divNav1 ul li {float:left;}
I'm wondering if you can offer any insights as to what was actually causing
this to happen.
Thanks again!
-Mike
__
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] CSS statements for horizontal rule
I am trying to use horizontal rules of specific width and position in an xhtml strict 1.0 web page. The width and align attributes work, but do not pass the strict 1.0 validation test (as you probably know). I have tried using both class and id statements in a CSS file (with appropriate selectors in the body). Neither work. I have performed extensive searches on the internet (including the archives of this list), but I have found no information on how to accomplish the desired task. Is it not possible to set these hr parameters under strict 1.0 (and have them pass the validation test)? If not, is there an alternative? I need to say that I have only a beginner's knowledge of CSS. Thank you for your help. __ 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] Eric on CSS
On Mon, Apr 20, 2009 at 6:09 PM, REVA REVA ryphe...@sbcglobal.net wrote: I have a question. The question is I download proj3 files and was analyzing the code for the event calendars. I do not understand why the calendar does not arrow to the next date for the month? How do I get that to work? What do you mean by arrow to the next date for the month? There were two projects in that chapter and the second one had an arrow link to take you to the next month. However there is no HTML document for the next month. If that is what you mean then you would have to create a document for an August calendar and then link to it in the July document. Mike B. __ 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] List-style-type in IE
On Thu, 2009-03-26 at 11:16 -0700, Mark Senff wrote:
--- On Thu, 3/26/09, Mike Davies m...@integrawebdesign.co.uk wrote:
I am trying to remove the bullets from an unordered list, which works
fine in Firefox using list-style-type:none;. But this doesn't appear to
be supported by IE and the lists are showing either with the bullet or
with an indent.
See the left-hand side links on
http://www.deveron-arts.com/wb/pages/artists/david-blyth.php
How can I work round this?
In IE7 the first list seems OK, the second list has indented items.
Personally, I usually use these rules to reset all UL/LI tags:
ul,li {
list-style-type: none;
list-style-position: outside;
}
The list-style-position should help there.
(to be perfectly honest, I'm not sure if this is a 100% foolproof/valid/good
method, but I've never had problems with it)
This seems to remove the bullet but the indent remains as though the bullet
still exists.
--
Mike Davies
Integra Web Design, Rhynie, By Huntly, AB54 4LS
01464 861535www.integrawebdesign.co.uk
__
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] List-style-type in IE
Hi, I am trying to remove the bullets from an unordered list, which works fine in Firefox using list-style-type:none;. But this doesn't appear to be supported by IE and the lists are showing either with the bullet or with an indent. See the left-hand side links on http://www.deveron-arts.com/wb/pages/artists/david-blyth.php How can I work round this? regards, Mike -- Mike Davies Integra Web Design, Rhynie, By Huntly, AB54 4LS 01464 861535www.integrawebdesign.co.uk __ 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] margins and other problems with cobbles CSS/HTML
Thanks,Georg. I will try to get it cleaned up and then resend. -Mike == Gunlaug Sørtun wrote: Mike Breiding - Morgantown WV wrote: HTML: http://epicroadtrips.us/ert2.htm Would be a good idea to move the myriad of inline-styles to the stylesheet, and get rid of the old HTML attributes that replicate CSS styling. Will make it easier to tune the layout to appear as you want, and maintain it. The old HTML attributes are easy to spot by validating the page as Strict... http://validator.w3.org/check?uri=http%3A%2F%2Fepicroadtrips.us%2Fert2.htmcharset=%28detect+automatically%29doctype=XHTML+1.0+Strictgroup=0user-agent=W3C_Validator%2F1.606 ...and the inline-styles are even easier to spot on their own. Having to modify styles both in the stylesheet and in the page makes debugging too time-consuming to bother with at my end, and you already have the necessary IDs, classes and element-names in source-code and stylesheet so you can see where to move those inline-styles. BTW: margins don't fluctuate, but elements move when resized. Also not sure if you want margins or paddings to create spaces with, since you have a mix of both. regards Georg -- Morgantown WV www.EpicRoadTrips.us __ 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] margins and other problems with cobbles CSS/HTML
Greetings, The links below point to my Frankensteind-ed version of a WordPress template. I tried to remove any extraneous CSS and leave only what I *thought* was needed to get the look I wanted. I wrote none of the CSS except for a line or two. I have marked up the page to point to / explain where the problems are. Mostly they are minor and IE 6 related. Some do not show up in FF 3.0. HTML: http://epicroadtrips.us/ert2.htm CSS: http://epicroadtrips.us/css/style.css HTML validation OK http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fepicroadtrips.us%2Fert2.htmwarnings=yes CSS - One error but I cannot find it. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepicroadtrips.us%2Fcss%2Fstyle.cssprofile=css21usermedium=allwarning=1lang=en Thanks, -Mike -- Morgantown WV www.EpicRoadTrips.us __ 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] margins and other problems with cobbles CSS/HTML
Bjoern Hoehrmann wrote:
* Mike Breiding - Morgantown WV wrote:
CSS - One error but I cannot find it.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepicroadtrips.us%2Fcss%2Fstyle.cssprofile=css21usermedium=allwarning=1lang=en
You have:
a:hover {
color: #FFF;
text-decoration: underline;
}
}
Ah, ha! Fixed.
Compare the number of { versus the number of }.
Thanks for the tip.
-Mike
--
Morgantown WV
www.EpicRoadTrips.us
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Form styling
Hi, I am trying to style the layout of a form for a search box on a website at www.deveron-arts.com. The client has asked for it to resemble the google search box in a browser. I know that forms are notoriously difficult to style but I thought this would not be too problematic. I have got the text input and the button as I want them but can't get them to line up. Using Firebug in Firefox I can see space above the text and below the image which I think is the problem. I found something by googling to suggest it is caused by form being a block element adding a return above and below any child elements, and that it could be overcome using display:inline; on the form. But this doesn't seem to have worked in this case. Any suggestions welcomed. regards, Mike -- Mike Davies Integra Web Design, Rhynie, By Huntly, AB54 4LS 01464 861535www.integrawebdesign.co.uk __ 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] Form styling
On Tue, 2008-12-16 at 12:36 +0100, Gunlaug Sørtun wrote:
Mike Davies wrote:
I am trying to style the layout of a form for a search box on a
website at www.deveron-arts.com. The client has asked for it to
resemble the google search box in a browser.
Which browser? There is quite a spread across browser-land.
Firefox, at the top right.
I have got the text input and the button as I want them but can't get
them to line up.
In its simplest and best cross-browser (and version) supported form...
#searchform input {vertical-align: middle;}
...aligns text and button quite nicely.
Thanks Georg, that works perfectly.
--
Mike Davies
Integra Web Design, Rhynie, By Huntly, AB54 4LS
01464 861535www.integrawebdesign.co.uk
__
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] Left column problems in IE 6 @ 800x600
Greetings, IE 6 reduces the left margin enough to knock the left column navigation to the bottom at resolution of 800x600 http://epicroadtrips.us/2007/summer/california/ http://epicroadtrips.us/2007/summer/california/ert_index_style.css It is OK in FF 3.0.3 and Opera 9.5 HTML validates except for ID error which is in the PHP menu. Error Line 203, Column 8: ID currentpage already defined. li id=currentpagea href='index.php'strongW/strongednesday - September Any ideas on how to fix this? Thanks, -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Left column problems in IE 6 @ 800x600
David Laakso wrote:
Mike Breiding wrote:
IE 6 reduces the left margin enough to knock the left column
navigation to the bottom at resolution of 800x600
http://epicroadtrips.us/2007/summer/california/
http://epicroadtrips.us/2007/summer/california/ert_index_style.css
Any ideas on how to fix this?
Thanks,
-Mike
Mike, the difficulty may be pixel width wrappers contained within a
percent width parent wrapper-- affects all browsers at a narrow window,
but only IE/6 drops the left nav.
Aside: the above uri for the style sheet does not point to the actual
style sheet in use.
Howdy,
Ooops. Sorry for the confusion.
I made the changes you suggested below.
Ok in FF but in IE the images area stretched at widths over 800px.
SS:http://epicroadtrips.us/2007/summer/california/streach_in_IE.jpg
After implementing and checking your changes I made these changes:
In order to reduce the width and center the #content p
I removed:
div#content p {color:#000;padding:0px 5px;border:none;}
And changed:
div#content p {margin: 6px 0;} to
div#content p {margin:6px auto; width: 75%}
This had the desired effect and did not seem to effect anything else.
I attempted to add margins to the top and bottom of .pushImgLeft images
by changing this:
.pushImgLeft {position: relative; margin-left: -85px;} to
.pushImgLeft {position: relative; margin-left: -85px; margin-bottom:0;
margin-top: 20px}
But I could see no difference.
The photos are a little tight to the bottom of the p to suit me.
As always,Thanks.
-Mike.
In the head of the document replace these styles:
#intro {margin-left: 50px; margin-bottom: -5px}
#intro p{width: 450px;}
img
{margin-top: 20px; margin-bottom:0}
with these styles:
#intro { border:1px solid red;/*test only*/ }
#intro p{margin: 0 25%;}
#intro img {max-width: 95%; display: block; margin: 10px auto;}
* html #intro img {width: 95%;}
In your external style sheet php-nav-index_style.css replace these styles:
#anchor {width: 100%; margin: 20px 0 15px 0;padding:}
#anchor blockquote p {color: #804000;font-size: 95%; margin-left: -30px}
With these styles:
#anchor {width: 100%; margin: 20px 0 15px 0;}
#anchor blockquote p {color: #804000;font-size: 95%; margin: 0 20%;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
Replacing the current CSS with this should hold the background width
to 75% (same width as the primary content):
Actually, I tried that our already.
The problem then is at 800x600 the blockquote paragraphs are only one
or two words wide making it look like a long list.
Thanks,
-Mike
I think I will just stick with it as is - full width
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
It seems to make no difference in FF, IE or Opera at various screen sizes.
Curious about what those rules were for.
Thanks for pluggin' away at this.
-Mike
Yes, I know, it is problematic at 800. Trying to cram 5 pounds of apples
in a 3 pound bag ain't easy...
The blockquote /may/ be a little bit wider at 800 if this is added:
#two blockquote p {
width: 100%; - add
}
Please see this file which has that change added:
http://www.chelseacreekstudio.com/ca/cssd/mike.htm
Other possibilities might include:
1/ reducing the width of the image thus giving the blockquote more width.
2/ and/or cheating and gaining more width for the quote text by deleting
the opening and closing blockquote and setting a narrow margin right and
left for #two p.
Short of these suggestions, I dunno. Perhaps someone else on the list
has a better alternative?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
Whatever does it for you. Incidentally, I assume it is working for you
local, as the above uri is not clearing the floats in IE/6.
Refer back to http://www.chelseacreekstudio.com/ca/cssd/mike.htm if
clarification is needed.
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
-Mike
Oh, my. But wait. You may want to put
.both {clear: both;}
back in?
-Done.
-Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
Oh, my. But wait. You may want to put
.both {clear: both;}
back in?
-Done.
-Mike
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
This is fun, Mike. Now what we'll do to keep the bird cage from being
taller in IE/6 than the silly bird inside it? Or do we care?
Hmmm... looks OK on my end!
-Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] float and blockquote
Greetings, I am trying to have the blockquote *only* on the right side of the image. This happens in IE6 but not FF. I tried various things, but to no avail. http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977#bobolink http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/ert_index_style.css Any ideas? Thanks, -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
Mike Breiding wrote:
Greetings,
I am trying to have the blockquote *only* on the right side of the
image. This happens in IE6 but not FF. I tried various things, but to no
avail.
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977#bobolink
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/ert_index_style.css
Any ideas? Thanks, -Mike
Me like!
Thanks, David.
-Mike
This is one way you could do it.
Online please see:
uri
http://www.chelseacreekstudio.com/ca/cssd/mike.htm
css
http://www.chelseacreekstudio.com/ca/cssd/mike_files/ert_inde.css
css
#stuff{background: #f9f9f9;width:75%;clear: both;margin: 40px 0;
overflow: hidden;}
#one{float:left;width:100%;}
#two{ margin-left:225px;padding-top: 10px;}
#two blockquote p {color: #804000;font-size: 95%; margin: 0; }
#three{background: #eee; float:left;width:225px;margin-left:-100%;}
#three img {display: block;width: 225px height: 454px; }
markup
div id=stuff
div id=one
div id=two
blockquote
p.../p
p class=sourcestrongSource:/strong WikiPedia/p
/blockquote
/div
/div
div id=three
img src=mike_files/bobolink.jpg width=225 height=454 alt=
title=Bobolink from pa.us /
/div
/div
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote: David Laakso wrote: Mike, Correction of my error for IE/6 in the markup here (reload to bring the corrected markup): http://www.chelseacreekstudio.com/ca/cssd/mike.htm Correction of my error for IE/6 in the CSS here (reload to bring up the corrected CSS file): http://www.chelseacreekstudio.com/ca/cssd/mike_files/ert_inde.css Best, ~david Thanks, David! Is is up and running: http://epicroadtrips.us/dad/june1977 -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Negative margins for image overflow
Thanks to everyone for their help on this. None of my replies went to the list and I had to set up a new account for get mail to the list. -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Negative margins for image overflow
Greetings, I am using a two column, header/footer layout. I want to use images wider than the right column will allow without breaking the right border. So, I used a negative margin to pull the image into the left column. It appears as I would like it in Fire Fox, but in IE 6.0 the image is clipped. Question: Is there a better way to handle this? If not, can the clipped image be changed in IE6? Thanks, -Mike = Validates: http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/001.html http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/ert_index_style.css Validates except for -- #000 Error: Invalid declaration; missing colon.-- I cannot find the error. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] td widths change with img ???
* Christian Kirchhoff [EMAIL PROTECTED] [2008:03:07:10:51:12+0100] scribed:
Maybe a dumb question, but is the text in column (2) defined to be left
aligned?
Other than that, I cannot think of a reason - if all table rows are in
one table and not in separate ones - why that should happen. Could you
provide a link to an exemplary page showing your problem? Does it happen
only in certain browsers?
Go here:
http://hb.platinumaire.net/form_4.aspx
Enter this string:
{A8D5CDDA-972F-4D33-A7E8-B5342AAE1350}
and submit.
So far, ff 2.0.0.12 and ie 7 both exhibit bad column alignment ...
What do you think?
--
Best Regards,
mds
mds resource
877.596.8237
-
Dare to fix things before they break . . .
-
Our capacity for understanding is inversely proportional to how much
we think we know. The more I know, the more I know I don't know . . .
--
signature.asc
Description: Digital signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] td widths change with img ???
* Scott Sauyet [EMAIL PROTECTED] [2008:03:07:08:59:00-0500] scribed:
Mike Schleif wrote:
Go here:
http://hb.platinumaire.net/form_4.aspx
Enter this string:
{A8D5CDDA-972F-4D33-A7E8-B5342AAE1350}
and submit.
The server is throwing errors when I try this. Do you have a spot to
post just a static copy of the page in question?
-- Scott
http://hb.platinumaire.net/test.html
--
Best Regards,
mds
mds resource
877.596.8237
-
Dare to fix things before they break . . .
-
Our capacity for understanding is inversely proportional to how much
we think we know. The more I know, the more I know I don't know . . .
--
signature.asc
Description: Digital signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] td widths change with img ???
* Christian Kirchhoff [EMAIL PROTECTED] [2008:03:07:18:11:45+0100] scribed: Hello, A look at your html code shows me that the rows are in separate tables. For a start try to combine evrything in one single table by dropping the extra: /table table cellpadding=5 cellspacing=5 width=100% in between the four rows. snip / When I read this, I thought, No way! I didn't do something that bad ; However, when I checked the code; sure enough, my bad, I had done the dork ; Thank you, thank you, thank you ... -- Best Regards, mds mds resource 877.596.8237 - Dare to fix things before they break . . . - Our capacity for understanding is inversely proportional to how much we think we know. The more I know, the more I know I don't know . . . -- signature.asc Description: Digital signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] td widths change with img ???
I have dynamically generated tabular data.
The leftmost cell in each row will be either an image, or blank. The
images can vary in width. Height is not an issue.
The displayed images are to be maximum width 150px. I would prefer that
smaller images remain smaller; but, can live with stretch.
Most irritating problem is that text in column (2) does NOT left justify
in a straight vertical line ;
Table cell border is ONLY for testing:
td class=MenuPicture style=border: solid black 1px; width=180 px
div class=Image
img src=/modules/displaythumb.aspx?id=%= modID % /
/div
/td
Current CSS:
.Image {
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
text-align: center;
width: 100%;
}
.MenuPicture {
/*
align: absmiddle;
border-style: none;
padding: 0px;
text-align: center;
*/
}
What am I missing?
--
Best Regards,
mds
mds resource
877.596.8237
-
Dare to fix things before they break . . .
-
Our capacity for understanding is inversely proportional to how much
we think we know. The more I know, the more I know I don't know . . .
--
signature.asc
Description: Digital signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clickable CSS image map and IE
On Thu, Feb 14, 2008 at 6:15 PM, Debbie Campbell [EMAIL PROTECTED] wrote: Hello all, I've made a CSS image map that's working in FF but not in IE. I've put a border around each link so you can see it here: http://www.redkitecreative.com/projects/lakota/homes_platmap.php It's fine in FF, but in IE 6 or 7 you can only click the link if you put the cursor right on the green border. If I turn off the borders, there's nothing to click on at all. Clicking activates a lightbox effect using Javascript. I tried adding in a bit of text in each href tag and hiding it with CSS, but that also did not work in IE. Help is much appreciated. The only thing I can think of would be that you have nothing inside the links in the HTML. What would happen if you inserted a nbsp; or a spacer img? If you view the site without styles, then the map and links do not exist at all. hth, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish Menu Over Flash
From: [EMAIL PROTECTED] How can I make Suckerfish menu to appear over expanding flash ad? In general if the flash movie ad is static (does not expand)it works fine. When the flash ad is expanding the menu is hidden underneath it. Have you tried setting the z-index property of the menu higher than that of the Flash object? You may need to experiment with various values (1, 100, 1000, etc) if you don't know the z-index value of the Flash object. -- Mike Johnson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Use of !ie and !important
david wrote: !important is not a hack. It's an official W3C thing, That doesn't mean is can't still be called a hack... '-p -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div's not lining up in IE (any :P)
On Dec 28, 2007 11:00 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It is a collapsing margins[1] case, where the original 20px margin-top
on #spotlight escapes the #content div in non-IE browsers, while IE/win
contains that margin within the #content div and thereby pushes
#spotlight that much down relative to the left div.
One way to fix the line-up across browser-land, is therefore to zero out
the escaping margin...
#spotlight {
margin: 0 40px 0 230px;
}
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
http://www.gunlaug.no
Thanks, Georg. I knew the list would have the answer and teach me why it
wasn't working. ;)
Mike 3 list.
I also added
#content {
padding-top: 20px;
}
to keep the proper spacing, as that space is used in other areas of the
site.
Now to get on with reading the rest of this thread and learning more.
Thanks again,
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal list in ie 6
Switch margin-left to padding-left?
On Dec 28, 2007 7:01 AM, Ross Hulford [EMAIL PROTECTED] wrote:
I have done this and fixed it before but I cannot remember how I did it!
At
the moment my list steps in ie 6
Item1
Item2
Item3
The css
#middleMenu li a{
height:20px;
display:block;
float:left;
margin-left:20px;
font-size:11px;
text-decoration:none;
color:#FCEE21;
background-color:#00;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Div's not lining up in IE (any :P)
List, Working on a site and all works as it should except for one area. I have a div floated left and it's supposed to line up vertically with the div in the content area. It does just that in FF and Netscape9, but IE6 and IE7 have the left floated div a little higher than the content one. Can anyone tell me why and how to fix? Finally, I know that most of the images are not loading (don't need them to), this is happening whether the images are there or not. Temp site: http://www.grum.com/temp/j/index.html css: http://www.grum.com/temp/j/css/jh-main-screen.css TIA, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site test
Hello all. First time poster. Just wondering if I could get a site check on this temp site: http://www.grum.com/temp/al/index.html I managed the HTML/CSS, not the graphics, so I'm looking to see what, if anything, breaks (I know the h1 in the banner does on increased font-sizes). Also would like to know what can be done about centering the menu better. Finally, I've tested in FF 2.0.0.11 and IE 6 on Win2K Pro. All seems to display as it should... anyone having issues with other browsers/OS are encouraged to reply. Thanks in advance, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE and blocking content
Hey guys, Just wanted to ask as to why IE (esp 6 and 7) block some javascripts and css? I am making a site that uses DW spring framework and IE just blocks the script and everything. I wanted to ask whether there are some workaround on this or just simply make a script to do detection for IE and don't load the script? Regards, - Ray ___DISCLAIMER___ This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent Universitas Ciputra as an academic institution. Finally, the recipient should check this email and any attachments for the presence of viruses. Universitas Ciputra accepts no liability for any damage caused by any virus transmitted by this email. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check / CSS feedback please
From: Gunlaug Sørtun [EMAIL PROTECTED]
Mike A wrote:
http://www.webdev-academy.com/test-layout/index.html
Looks like a variant of...
http://www.positioniseverything.net/articles/onetruelayout/anyorder
Sort of, and others. What makes it completely different are the extra
wrapper and side margins to display an extended background to 1) the header
area, and 2) the rest. They caused complications, especially with negative
margins.
Does it work, especially when browser is resized?
div#navigation {
margin-left : -100.01%;
}
...will make Gecko browsers offset that container slightly too far to
the left at certain window widths - a couple of pixels on my 3800 wide
screens. Similar but smaller errors appear in other browsers on wide
windows. Better make that 100% sharp.
Yes. Done. Thanks!
Content in the overlayered header will easily be overlapped by main
container when subjected to font resizing - especially on narrow
windows. If the header ends up with only an image then it won't be a
problem.
Agreed. The spec was fixed header height because it will contain an image,
search form and a couple of menu links. Wholly unsuitable for headers
containing more text.
A min-width wouldn't hurt, as it does look a bit cramped on narrow
windows. For the same reason the...
Done. Thanks again!
div#main-wrap {
margin : 100px 7% 0% 7%;
}
...might better be replaced with something like...
div#main-wrap {
margin : 10px auto 0 auto;
}
...and the page be given a max-width in percentage instead. Will make
much better use of available window that way.
Much as though I would like to the colored margins must be variable, not
fixed. However, I shall use your suggested method for an alternative design
demo.
Many thanks for the time and effort put into your feedback Georg!
Anyone: is the page capable of further improvement?
Mike A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Tests
From: David Hucklesby [EMAIL PROTECTED] On Mon, 19 Nov 2007 16:54:52 +0100, Gabriele Romanato wrote: Dear all, after a long period of depression, ... Odd, that. So many highly talented people I read about seem to have suffered depression, at least in some part of their lives. Hmm. I'm about to publish a book on CSS. during the development, I've collected a long series of tests on CSS. here they are: http://www.css-zibaldone.com/test Thank you so much for this, Gabriele. I just took a few minutes to look, and I will be back to study your examples more. This definitely looks valuable. It certainly is! I have already had a look with a view to fixing a strange issue that's been bugging me (layout example at http://www.webdev-academy.com/example/test-layout.php - IE of course). Gabrielle has helped me understand the problem (example at http://www.css-zibaldone.com/test/css21/floats/shrink-auto/index.html). Also, I am passing Gabrielle's link to postgraduate students I assist. Impressive reference, especially it's relevance to today's browsers compared to the glut of inconsistent material presented by search engines. I will play with it a bit more tomorrow. Thank you Gabrielle! Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] header 3px shift
Can someone please say why there is a 3px margin in the header at http://www.webdev-academy.com/template2/index.html. Many thanks, Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 3 col layout problem
I have a problem at http://www.webdev-academy.com/test-layout/. The page validates. The main problem is that IE6 throws the layout on browser resize. It also has what looks like FOUC. Other browsers sort of keep the format on browser resize. Hoping someone can provide feedback or direct me to a similar layout that works (searched for ages without luck). Thanks! Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 3 Col layout problem
Sent this to the list some hours ago but I notice from the site it didn't get through... I have a problem at http://www.webdev-academy.com/test-layout/. The page validates. The main problem is that IE6 throws the layout on browser resize. It also has what looks like FOUC. Other browsers sort of keep the format on browser resize. Hoping someone can provide feedback or direct me to a similar layout that works (searched for ages without luck). Thanks! Mike A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] decimals in widths?
(Smarter folk, please feel free to correct me if I'm wrong... ) Pixels are inherently a binary unit - either it's a whole pixel that's active or a whole pixel that's inactive, so a fractional pixel doesn't exist - but the browser is probably seeing your decimal unit, and is either rounding up or down (depending on how it's programmed to handle that). I don't know if it'll cause problems in any sort of immediate sense, but due to the fact that you never really know what the users are going to do to your website. -Michael Brian Cummiskey wrote: Hi all, I have a dynamic list of items that displays inline in floated div's. I was doing some math on how many, and out of the available space, to split it evenly (as they are aligned center) ie, wrapper is 500px 2 items each gets 250px of space/margin width. i have an odd shape on this one page, and the server-side math has created 3 div's to fill the space as: div style=width:123.px; within 370px of a wrapper. It seems to display fine in everything i've looked at with it, but i'm curious if this is a bad idea? Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wierd, Wierd Problem NOT Quirks
From: [EMAIL PROTECTED] At least I don't think it is. As I was studying quirks, it seems that if the code breaks after putting an appropriate doctype at the beginning of the document, then it is playing according to the quirky rules of earlier browsers. But this problem appears in IE6 and the latest FF with the appropriate doctype. Strangely, this behavior was not evident before I rewrote the css as a python script so I could interpret certain spacing variables (the site resolves in different screen resolutions). Just for fun, I decided to copy the rendered?code and create a new page based on it...but the same problem persists. Please help! Here is the earlier email: Ya gotta try this just for fun even if you don't answer my question. Go here in BOTH your IE browser AND your FF browser: http://lafontainerealestate.com/lafontainerealestate.com/1280/s/c/x/en-us/test (This is set for a screen resolution of 1280, forgive me.) Now, mouse over Properties in both browsers. Notice the spacing is just fine in IE, but no action on the mouse-over! Notice the spacing is all_screwed_up in FF, but the mouse-over works. You can read the source to see my css code. Perhaps get it to validate first! Try Firefox with the Developer and Firebugs extensions, and the Yahoo YSlow tool. They will highlight errors. Once the mark-up's corrected you can drill down to CSS issues. HTH... Mike A. https://addons.mozilla.org/en-US/firefox/addon/60 https://addons.mozilla.org/en-US/firefox/addon/1843 http://developer.yahoo.com/yslow/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top?
Just to close this issue off, I can now report that the latest
working draft of the CSS 2.1 spec has actually solved the problem
I mentioned.
Compliant browsers should now support percentages on relative
positioning of an element even when the parent's size is dependent
on the element's size.
Though, this support is currently only available in IE but at least
Mozilla has a bug report for it.
Best regards
Mike
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf
Of fantasai
Sent: den 24 augusti 2007 09:11
To: Mike Wilson
Cc: [EMAIL PROTECTED]
Subject: Re: [CSS21] clarification needed for top and bottom property
Mike Wilson wrote:
Oh, I would be very happy if browsers actually did support the |top|
property in this scenario, but Gecko, Safari and Opera all behave the
same in this respect, ie ignoring it, which is striking when being
off-spec.
We also had a discussion over at css-discuss where arguments were
laid out why it had to be this way, correlating it to the (natural)
problems of doing the same with |height| property (that leads to
recursion).
Personally I think it would be possible to fix this for the |top|
property, but what do all the browser implementor experts out there
say?
And if the spec wants it to be possible, we may need a clarification
for that so there is no chance of misinterpretation :-).
The spec was actually changed so that percentages for top/bottom *do*
work. Behavior in this case was previously explicitly undefined:
http://www.w3.org/TR/CSS21/changes.html#q53
So that means at some point the browser implementors discussed it and
decided it should be possible. I guess it just hasn't been done yet. :)
~fantasai
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf
Of Mike Wilson
Sent: den 23 augusti 2007 16:41
To: [EMAIL PROTECTED]
Subject: [CSS21] clarification needed for top and bottom property
Consider the following example:
div style=position: absolute;
div style=position: relative; top: +50%; left: +50%;
Somebr
content
/div
/div
See also
http://inigent.se/test/test-top-percentage.html
with the two DIVs styled in color as:
div { border: 1px solid green; }
div div { border: 1px dotted red; }
DESCRIPTION OF EXAMPLE
The two DIVs' sizes will both be based on the size of Some
content and as the outer DIV is positioned it establishes a
positioning context. Following the spec, expectation is that
the inner DIV will be positioned down and right of the outer
DIV according to the specified percentages.
OUTCOME
In standard browsers only the right shift happens and the
|top| percentage setting is ignored.
(Notably, IE performs the shift in both directions).
CURRENT SPEC
There are probably good reasons why UAs have chosen to do like
this, but it cannot be deciphered from the current spec, see
text for |top| property in 9.3.2:
http://www.w3.org/TR/CSS21/visuren.html#propdef-top
Percentages: refer to height of containing block
...
The values for the four properties have the following
meanings:
...
percentage
The offset is a percentage of the containing block's width
(for 'left' or 'right') or height (for 'top' and 'bottom').
As can be seen there is no mention that percentage-based
positioning is ignored when the containing block's size is
dependent on the current element.
Contrast this with the |height| property which is also ignored
when assigned a percentage with a dependent containing block
in 10.5 (important part marked with *):
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Percentages: see prose
...
Values have the following meanings:
...
percentage
Specifies a percentage height. The percentage is calculated
with respect to the height of the generated box's
* containing block. If the height of the containing block is
* not specified explicitly (i.e., it depends on content
* height), and this element is not absolutely positioned, the
* value computes to 'auto'.
CLARIFICATION
So, if UAs are correct in honoring the |left| property but not
the |top| property in this example, this could be clarified in
9.3.2 by adding something like the following text to the
prose section:
percentage
The offset is a percentage of the containing block's width
(for 'left' or 'right') or height (for 'top' and 'bottom').
* If the height of the containing block is not specified
* explicitly (i.e., it depends on content height), and this
* element is not absolutely positioned, the value for 'top'
* and 'bottom' computes to 'auto'.
Best regards
Mike Wilson
__
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
Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top?
Oops, the phrasing should of course be: Compliant browsers should now support percentages on relative positioning of an element even when the *containing block's* size is dependent on the element's size. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike Wilson Sent: den 29 augusti 2007 09:26 To: 'CSS-D' Cc: 'Philippe Wittenbergh' Subject: Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top? Just to close this issue off, I can now report that the latest working draft of the CSS 2.1 spec has actually solved the problem I mentioned. Compliant browsers should now support percentages on relative positioning of an element even when the parent's size is dependent on the element's size. Though, this support is currently only available in IE but at least Mozilla has a bug report for it. Best regards Mike __ 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] Inheriting background colour in IE
Hi there,
I'm creating a table that has alternating odd/even stylings. eg.
#nutritiontable tr.odd {background: #f9912e; color: #fff;}
#nutritiontable tr.even {background: #e67000; color: #fff;}
The catch is that the table has rounded corners so in the last row,
className = bottom, I apply the following:
tr.bottom td.foodcolumn {background: url('img/nutri_chart_botleft.gif')
no-repeat bottom left;}
tr.bottom td.savingcolumn {background: url('img/nutri_chart_botright.gif')
no-repeat bottom right;}
which works fine in Firefox, but in IE6 the background colour from the
.odd/.even is reset. I've tried to set it to inherit but nothing seems to
work unless I hard code the colour into the .bottom elements which isn't
ideal because it's not known whether the .bottom row would be an .odd or
.even one (the number of entries might be variable).
Any suggestions on the best way to achieve this?
-mike
Disclaimer
The information in this email and any attachments may contain legally
privileged, proprietary and confidential information that is intended for the
addressee(s) only. If you are not the intended recipient, you are hereby
notified that any disclosure, copying, distribution, retention or use of the
contents of this information is prohibited. When addressed to our clients or
vendors, any information contained in this e-mail or any attachments is subject
to the terms and conditions in any governing contract. If you have received
this e-mail in error, please immediately contact the sender and delete the
e-mail.
__
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] relative positioning inside absolute positioned element- why not percentage for top?
Hi Philippe, I have put a new test file on http://lahall.se/test/test-top-percentage.html How much offset for top do you actually expect ? Half (50%) of the DIV's height (both DIVs have the same height as the outer DIV adapts to the inner DIV's size). CSS 2.1, 9.3.2 Box offsets For 'top' quote Percentages: refer to height of containing block /quote But the height of the containing block [1] in this case depends on the element itself (the height is auto), which makes the whole thing pretty much undefined. The height of the outer DIV is calculated using the rules in 10.6.4 and 10.6.7 so it gets a size adapted to fitting its children. Looking at the green border indicates that this works correctly. Or are you saying that the height of the containing block used for positioning will be different from the calculated size of the actual element? This doesn't seem to be the case as the other, absolutely pos'd, child DIV finds bottom:0 nicely. Also, what is strange is that standard browsers do use the calculated width for the left: -50% shift. I would have been less surprised if none of the shifts had worked... Then, regarding the computed values for relative positioned boxes, 9.3.2 makes an explicit reference to 9.4.3 [2]. Result: unless the absolute positioned has a height explicitly declared, the rel. pos. box won't move. 9.4.3 mainly concerns the case when top hasn't been assigned a value (auto), right? The relative child has been assigned a top value (-50%) so the browser shouldn't have to find out a computed value in that sense? (Sorry if misunderstanding this) Anyway, I don't find how top and left are handled differently here either, so why left gives an effect, but not top, is still a mystery to me... of course, you could make the rel.pos. box an absolute positioned box, and solve the issue. Unfortunately not, as I need the inner DIV stay relative to have it control the size of the parent. The content presented inside the inner DIV could be of different sizes, and I want it to move halfway up and left. Then the outer DIV / containing block needs to be of the same (unknown) size which is accomplished by using a static or relative child. Many thanks for your input. I really hope we can make some sense out of this! Best regards Mike BTW: Just joining the list on Monday it seems my posts are not getting through to everybody (can't see my posts in the public archive). Is this normal? __ 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] relative positioning inside absolute positioned element- why not percentage for top?
[Forwarding Philippe's reply to the list]
On May 10, 2007, at 4:57 PM, Mike Wilson wrote:
Or are you saying that the height of the containing block used for
positioning will be different from the calculated size of the actual
element? This doesn't seem to be the case as the other, absolutely
pos'd, child DIV finds bottom:0 nicely.
Yes. The height of the parent div (containing block in this case) is
'auto'.
'height' refers to a declared value.
The computed size is a different matter in this case (actual,
calculated height).
The other child div behaves differently because it is _absolute_
positioned. Because for absolute positioned elements height can
always be resolved.
Percentage values for height and by extension offset ('top') are a
complicated matter. Basically, only absolute positioned element know
their 'height' based on the intrinsic values (computed).
10.5 states this quite clearly
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Similarly as with your 'top' offset, your relative positioned element
won't be able to calculate a height in percentage.
Width is different as it can always be resolved.
(although you might run into problems, depending on how various UA
will understand the shrinkwrapping of absolute positioned elements.
Your basic testcase works in current versions of most UA. If it
becomes more complicated - type of nested elements in your absolute
positioned div, you'll probably notice differences).
And if you use any other unit of measure (px, em, ex, ...) the
relative positioned element will move upwards, because that doesn't
depend on the height of the parent element.
IE Windows is a separate case, there you have the concept of
'hasLayout' rearing its ugly head.
http://www.satzansatz.de/cssd/onhavinglayout.html
BTW: Just joining the list on Monday it seems my posts are not
getting through to everybody (can't see my posts in the public
archive). Is this normal?
That I can't help. Your messages make it to the list.
Maybe you'll need to ask the list admin directly (the email address
should be listed in the welcoming email you received when you signed up.
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/
Re: [css-d] relative positioning inside absolute positionedelement- why not percentage for top?
Thanks for your insights Philippe!
Or are you saying that the height of the containing block used for
positioning will be different from the calculated size of the actual
element? This doesn't seem to be the case as the other, absolutely
pos'd, child DIV finds bottom:0 nicely.
Yes. The height of the parent div (containing block in this case) is
'auto'.
'height' refers to a declared value.
The computed size is a different matter in this case (actual,
calculated height).
The other child div behaves differently because it is _absolute_
positioned. Because for absolute positioned elements height can
always be resolved.
Percentage values for height and by extension offset ('top') are a
complicated matter. Basically, only absolute positioned element know
their 'height' based on the intrinsic values (computed).
10.5 states this quite clearly
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Ok, looking at 10.5 (and 10.2) I find that when we have
parent.height = auto
parent.width = auto
relativechild.height = nn%
relativechild.width = nn%
then the CSS rules say that the child height should be reset to auto:
relativechild.height = auto
and the child width is undefined:
relativechild.width = undefined
I can clearly understand why, as a layout calculation would otherwise
easily lead to an endless recursion in the UA.
But extending this reasoning to the offset properties, like left and
top, seems unfair as they cannot cause any layout recursion. The child
height and width may cause recursion as the parent element may base its
own size on the child size, but the parent element will never base its
own size on a child's offset.
The specification is very clearly written for height percentages (10.5):
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to 'auto'.
but I lack the corresponding text for top percentages (9.3.2) which
are only specified as refer to height of containing block.
So, could you comment if my reasoning below is plausible? :
1) The spec doesn't mention special handling of percentage offsets when
the parent's size is dependent on child size.
2) Standard browser makers have made an educated guess that the spec's
reasoning behind height/width should be extended to the offset
properties (which is not implied by the spec).
3) When I set a top percentage the standard browser resets top to auto
which is why I see no upwards shift.
4) When I set a left percentage the standard browser is free to do what
it prefers as this is undefined and, as they probably reason the
way I do above, can calculate the correct widths without risk of
recursion and then use a percentage based on that, which is why I do
see a left shift.
And if you use any other unit of measure (px, em, ex, ...) the
relative positioned element will move upwards, because that doesn't
depend on the height of the parent element.
Yes, I have noticed this also. Too bad it is 50% of an unknown height
I need ;-).
Best regards
Mike
__
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] relative positioning inside absolute positioned element - why not percentage for top?
I have a problem with relative positioning, containing block,
and percentages.
I have an absolutely positioned outer DIV, and a relatively
positioned inner DIV. My goal is to shift the inner DIV
halfway to the left and up, using percentages. See code
below:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
meta http-equiv=Content-Type
content=text/html; charset=ISO-8859-1
titletitle/title
style type=text/css
body { margin: 50px; }
div { border: 1px solid green; }
div div { border: 1px dotted red; }
/style
/head
body
div style=position: absolute;
div style=position: relative; top: -50%; left: -50%;
Some multi-br
line content
/div
/div
/body
/html
My expectation is to see the text with the red border
shifted both up and left from the green (outer) box. In
standard browsers like Firefox and Opera I only get a shift
sideways and not upwards, though in IE I get both
directions.
I have been trying to find support for the standard browsers'
behaviour in the CSS spec, but have failed. Sections 9.3.2,
10.6.4 and 10.6.7 suggest, at least to me, that I should be
getting the upwards shift with my layout.
Can anybody point to something that explains this? Did I miss
something in the spec or are both Firefox and Opera wrong
(not likely) ?
Best regards
Mike
__
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] Inline paragraph with headers
I would like to be able to use a Header and a paragraph on the same line in this page: http://JuniorNatureCamp.org/staff/ Where there is an H5 such as: h5Jeff Altemus - Director/h5 I would like to add a paragraph such as pFirst and Second Week/p The result would be h5Jeff Altemus - Director/h5 pFirst and Second Weeek/h5 with no line break and maintaining the styling for the H tag. I have tried using display: inline but this does not seem to be the way to go. The CSS is in both the head and here: http://juniornaturecamp.org/ert_index_style.css Any suggestions? Thanks, -Mike __ 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] [ADMIN - OFF TOPIC] Re: Inline paragraph with headers
At 10:11 AM 3/8/2007 , Alex Robinson wrote: Please take this discussion off list or to another more general web discussion list. Thanks to everyone who replied. Please email me privately if you have further advise. -Mike __ 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] layout breaks in IE 6
At 06:18 PM 2/27/2007 , Gunlaug Sørtun wrote:
Mike Breiding wrote:
The following layout breaks in IE 6.o
http://montrails.org/
Indeed.
Start by adding the following at the very bottom of your stylesheet...
@media screen {
* html #topbar, * html #name {overflow: hidden;}
* html #contenttext {overflow-x: hidden;}
* html #logo {margin-bottom: -4px;}
}
...and IE6 should not treat it too badly.
- These rules are preventing IE6' 'auto-expansion' bug - IE doesn't
respect dimensions if content doesn't fit inside.
regards Georg http://www.gunlaug.no
Thanks, George. That did the trick.
-Mike
__
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] layout breaks in IE 6
The following layout breaks in IE 6.o http://montrails.org/ http://montrails.org/mrtc_style.css Any suggestion on how to fix this would be appreciated. -Mike __ 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] Question on background images
Is there a desired width ( or rule of thumb) for a background image that is repeated? That is a ramp of color with no pattern. Mike __ 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] First timer looking for css review
Thanks again Francky! I especially like this part: [1] ... and you'll see some other things to correct. ;-) No kidding. Mike __ 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] First timer looking for css review
Finally got this part sorted out. I was confused a bit with the footer bar but found a misplaced /div tag. I found this site to be very helpful in sorting out the various containers: http://www.ilovejackdaniels.com/css/view-page-structure/ Scroll down towards the bottom and insert your site URL. On to the next fix. Thanks! Mike Site: http://scottriggs.com/2007/index.html CSS: http://scottriggs.com/2007/css.html In your construction, the Scott Riggs image (rtcol_pichome.jpg) is connected to the bottom of the right column. If the left column is longer, this bottom is not the bottom of the combination, and a white gap under it (towards the footer bar) is showed. What you can do, is to connect the image to a bottom line div under both columns (i.e. in the footer bar), and then working upwards. This can be done by isolating this div from the normal flow (with a float: right), and giving this div a negative margin-top of the amount of the height of the image. Then it is pushed upwards. :-) Remaining problem is, that the man's head can go so far upstairs, that the image part over there is covering the under parts of the 3 images (or something else) in the right column. This will occur if the left column is too small. To avoid this, we can give the right column an empty space under the content, which is some larger in height as the img. We can do this by adding a div at the end of the right column, with only a height in it. Here is a testpage http://home.tiscali.nl/developerscorner/css- discuss/test-indexv2.html. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
