Re: [css-d] [ADMIN] Hello, my friends, hello
Hi Eric, I'am a member of the list for already quite some years. And i hope the list will continue as is. I always got great help from the other subscribers. As others also have written, the list is a great place to turn to if you have a problem you can't figure out yourself. And indeed in other places it is often hard to get real help. On css-d i always get help/guidance to come to a solution, and also explanation to the matter. So the list is very much appreciated by me. And even if there are not a lot of subscribers, the list is still very valuable by the people who get help here. Thank you, Erik Visser Op 23-12-15 om 21:35 schreef Eric A. Meyer: Hi, everyone, So apparently the list software died back in October, and none of us really noticed until this month. Or, if people noticed, nobody mentioned it until this month. It took a while to get in touch with someone who could get the software restarted, but I'm told it's back up. If you're reading this, then yes, it's back up. This hiatus and its lack of observance has led me to wonder about the utility of css-discuss, and whether it needs to continue. There are a lot of other venues for discussing CSS these days, and most of the reason for this list existing-- to help people figure out how CSS worked, and fix problems-- is covered much more compellingly by sites like StackOverflow. The resources that used to support css-d, like the public archive and the wiki, have fallen into disuse or disrepair over the years. In general, there's a faded feeling here, at least for me. Thus, I'm now pondering three courses of action: 1. Shut down the list. To all good things, etc. This obviously abandons those who still prize having a mailing list, but that number seems very small. Almost all the discussion in the months leading up to the hiatus was conducted between a small number of subscribers. Of course, a new list could be started by someone else. 2. Hand the list off to someone else, to guide as they see fit. This involves the very difficult task of finding someone who's interested, and making a good choice. This is the least appealing of the three, honestly, because of the possibility of getting things wrong. 3. Convert the list from "Practical discussions of CSS and its use" to more general discussion about anything CSS-related. That would include theoretical musings, discussion of what CSS should or shouldn't be, where it should go in the future, the general theory of CSS, and so on. I'm less inclined to go this route, as there are other places to grapple with the deeper issues of CSS (like www-style, not to mention blogs and social media). At this point, perhaps due to pride and ego but perhaps simply due to feeling that the time has come, I'm leaning toward option 1. January 24, 2016, will be the 14th anniversary of the list. That leaves a month to either settle on a different course of action, or else to plan a shutdown. If anyone has strong feelings that it should be one of the other two options, or a fourth option I didn't list, feel free to let me know off-list. I may not be able to respond to every message, but I will read them all. I expect to make a final decision on or before January 10, 2016. Whatever I decide, I'll announce it here. -- Eric A. Meyer - http://meyerweb.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/
Re: [css-d] review please - an existing site made mobile
Georg schreef op 06-06-15 om 19:44: Den 06.06.2015 14:01, skrev Erik Visser: Any suggestions? I use several techniques for controlling text alongside floats, depending on case and size of image. Thanks all! I'am busy with accounting now (my favourite hobby). So that's why it took some time for me to respond. I'll look into the solutions later on. Thanks again, Erik __ 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] review please - an existing site made mobile
Georg schreef op 04-06-15 om 12:43: Only potential problem I can see, is that text alongside floating images may break up in not so nice ways as space narrows... Screenshot: http://www.gunlaug.com/contents/imagefolders/extra/scr-utr.png Yes, that's what i saw too, and i did not know what to do about it. Any suggestions? Thanks, erik __ 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] review please - an existing site made mobile
Erik Visser schreef op 04-06-15 om 02:58: So tests from iphone and windows phone users are extra welcome! Or is this not the right type of question for this list..? Have to go to webdesign-l maybe? Or is something missing..? Or..? __ 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] Vertical Horizontal Center ?
Erik Visser schreef op 04-06-15 om 03:00: This is what i remember too. Excuses for bloating the list with a not quite helpful contribution. It was 3 am. But that's not a very good excuse. Luckily the real experts came in and helped you out. erik __ 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] review please - an existing site made mobile
An existing site made mobile using the mobile last approach; http://www.utrechtsyogacentrum.nl http://www.utrechtsyogacentrum.nl/styles/ Mobile testing please. I have an adroid (4.2.2) phone myself. So tests from iphone and windows phone users are extra welcome! Thanks, Erik __ 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] Vertical Horizontal Center ?
Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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] styling a menu button using pseudo elements
Hi all,
I've implemented a menu for smaller screens ( 584px and smaller ):
Works quite well. (any comments welcome)
But
Only thing is that i can't get the menu button looking the same on
Android (4.2.2). and my browsers (safari/firefox/chrome) on mac os x.
That is, using the same css, the white lines inside the menu button do
not center very nice on both devices.
This styling looks good on android:
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 6px;
/* background: #fff; */
top: 10px;
left: 16%;
border-top: 1.250em double #fff;
border-bottom: .375em solid #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
And this styling looks good on safari/firefox/chrome (mac os x):
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 6px;
/* background: #fff; */
top: 10px;
left: 16%;
border-top: 1.375em double #fff;
border-bottom: .5em solid #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
The difference is in the border settings.
css:
http://beta.utrechtsyogacentrum.nl/style/responsivemenu/component.css
page:
http://beta.utrechtsyogacentrum.nl/index.php
On other websites i see that it is possible to get the menu button
looking the same both on android and desktop browsers.
I am staring to long at this code (and testing different markup and css).
So i'am very curious how i can get them to look the same.
All comments are welcome.
Thanks, Erik
PS Box-shadow does not seem to work well on android. That is not on my
samsung galaxy with android 4.2.2.
__
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] how to time table on small screens
Chad Lundgren schreef op 27-05-15 om 05:47: I like CSS Tricks's method of dealing with this issue: https://css-tricks.com/responsive-data-tables/ Looked into that and other presented soultions. But i can't figure out how i can put that to work with the time table i'am using. The original table and some smaller versions i made: http://beta.erikvisser.net/yoga_lesrooster5.php Anyone any ideas? Alternatively i could show / hide different versions of the table based on the screen width (media queries). That should work i guess. Although it might not be the most clever solution. And disadvantage is that i have the data multiple times on the webpage. Erik __ 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] make site suitable for mobile/small screens
Tom Livingston schreef op 25-05-15 om 18:21: Looks good. On Monday, May 25, 2015, Erik Visser wrote: Tom Livingston schreef op 25-05-15 om 16:12: Footer width is still not scaling. Even at 480. footer is scaling too now I think so too. From what i can see and test it is already working quite good. It is passing the google test now. Since we don't want to loose google ranking we put it live as it is now. http://www.utrechtsyogacentrum.nl Any comments already? From here on i'll straigthen out the last flaws and issues. And the approach for screens smaller then 480px has to be set. And still a lot of mobile phones have screens smaller then 480px i found out. __ 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] how to time table on small screens
Hi all, On the site i'am reworking for smaller screens there is a time table: http://www.utrechtsyogacentrum.nl/yoga_lesrooster.php Off course there is room to shrink this table some more. But is this the way to go? What are your experiences / advice on how to present such a table on smaller screens. Any examples? Thanks, Erik __ 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] make site suitable for mobile/small screens
Hi all, Here is the site i am woring on to make it suitable for mobile/small screens. It should behave from big screen until 480px. Below 480px additional work has to be done. Thats the next step. http://beta.erikvisser.net How does it behave at your (smaller) screens/browsers? Any flaws? Any comments are welcome. Thanks, Erik __ 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] make site suitable for mobile/small screens
MiB schreef op 25-05-15 om 15:36: Wider displays makes Logomap to fall down, which may not be your focus right now. If this isn’t replaced or something I’d place it with absolute positioning. I guess it’s not supposed to move anywhere where it’s placed now? It was intended but not very consistent. And not a good idea, as your comment confirms. So I changed the lay-out. The logo is now at the same spot on every width. Only at smaller screen widths (below 980 px) the top-banner intentional has less height. __ 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] make site suitable for mobile/small screens
Tom Livingston schreef op 25-05-15 om 16:12: Footer width is still not scaling. Even at 480. footer is scaling too now __ 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] make site suitable for mobile/small screens
Philip Taylor schreef op 25-05-15 om 19:14: I don't think that http://beta.erikvisser.net/images/header1.jpg should scale anamorphically as the window changes width; it would be better (IMHO) if the aspect ratio should remain constant and the viewport onto it change. Ok, good point. This is my fix: - moved the elephant logo image from the masthead into the top of the left column - gave the logo image: position relative and top -7.5em - gave the menu box_1: position relative and top -9.5em - gave the header1.jpg: min-height 7.5rem Last fix is a little cheat to keep header1.jpg looking nice and also to avoid the logo might shove above the masthead in any browser. Looks good on my machine. That is Mac Os X Lion, using: Safari 6.1.6 Firefox 38.01. Chrome 4.3.0.2 Hope this does not give any strange effects in any other platforms and browsers or on small screens / mobile browsers. http://beta.erikvisser.net Thanks again, Erik __ 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] make site suitable for mobile/small screens
Erik Visser schreef op 25-05-15 om 23:42: Chrome 4.3.0.2 should be 43.0.2 __ 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] making a site responsive - first step: making it all fluid
Georg schreef op 21-05-15 om 17:46:
You do not have to make your page responsive on wide screens, in order
to make it fit narrow screens. I suggest you manipulate the original
design through a series of mediaqueries, to make it work on narrower
screens.
That is: a mobile last approach that may be easier to implement in
cases like yours.
That's also an approach to take into account. Nice name Mobile Last
:-) Thanks Georg, also for the css.
Thanks all for the comments. Indeed i know that on small screens things
overlap. That's the challenge for the next step.
What do you think about the current main structure of the site. Is
suitable for making it mobile?
The current main structure is 3 columns (percentage based) in a wrapper.
Completed with a header and footer. Main css for the columns:
#wrap{width:100%; height:auto; float:left; margin:1.25rem 0 1rem 0;}
#left{width:20%; height:auto; float:left; margin:0 0 0 0.6rem;}
#mid{width:60%; height:auto; float:left; padding:0 0 0 0.6rem;}
#right{width:20%; height:auto; float:left; margin:0 0 0 0.6rem;}
Or are there particulary problems to expect when taking this setup as a
base for mobile/small screens?
Thanks you all, Erik
__
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] making a site responsive - first step: making it all fluid
Philip Taylor schreef op 22-05-15 om 10:28: Given that the latter three add to exactly 100%, and ignoring rounding issues, in what circumstances (if any) would you expect them to exploit their floatability ? I am not a native English speaker. (guess yoiu already noticesd) So to be shure. If i understand you correctly, you are asking: in what way do i expect the content to adapt the screen size in a fluid way... Correct? This is where i was thinking about. And why i asked for opinions. But i should have added the following at once. The right column is not used. So could even be taken out. The left column contains the menu. Middle column contains the content. My idea for smaller screens: - hide the left column - show the menu in the middle column This way: - the only visible column on smaller screens is the middle column - the middle column will take the full screen size - the content could be presented fluid in the middle column Does this answer your question? And does this make any sense? Thanks, Erik __ 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] making a site responsive - first step: making it all fluid
Philip Taylor schreef op 22-05-15 om 10:59: No. In simpler words, as the widths of the individual columns add to exactly 100%, it is not at all clear to me when one or more of those columns might appear /underneath/ another column rather than alongside (ignoring rounding issues). Talking about adapting [to] the screen size is too generic -- I was interested solely in why you have CSS that would potentially allow the columns to float, yet size them such that it is not clear in what situations (if any) that floatability might ever be exploited. Ah, yes Now i get it. Even overlooked it when you were pointing at it Maybe i experimented with floating columns and later on forgot to take the float out. I don't remember. Or maybe becuase of some browser issues? Although i have no idea which browser would have problems with percentage columns. Now you pointed at it, it looks strange to me too. Not very clean coded. __ 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] making a site responsive - first step: making it all fluid
Hi all, Thanks so for help and tips on making a site responsive. This is the site i have to make a responsive version for: http://www.utrechtsyogacentrum.nl Reading all information provided i thought making the existing site completely fluid would be a good first step. This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Thanks, Erik __ 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] thoughts on bootstrap and is bootstrap a good approach to setting up a website that fits in different viewport sizes?
Al Sparber schreef op 09-05-15 om 18:30: On 5/9/2015 7:25 AM, Erik Visser wrote: Bootstrap (getbootstrap.com) was brought to my attention. Is this a good bas/general approach? What are your thoughts on and experiences with bootstrap. Or is there another / better / simpeler / leaner / cleaner approach ? In my opinion--yes. CSS is very logical and easy to learn. Learn CSS and your site(s) will be far more efficient, and future-proof. Hi Al, Thanks for your thoughts. Can you explain what are the specific cons of using bootstrap? It has been a while since i was working on a regular basis on websites. But I'am quite familiar with css and html/php/and more. Point is that at this stage i don't have an overview of which items need to be taken care of when developing a responsive website. Were a responsive website stands for: a website that fits all viewport sizes. Where all viewport sizes might be best defined as all major/most used viewport sizes. From smaller mobile devices to bigger screens. I guess that issues that need to be taken care of contain: menu positions and menu-types, viewport size, rearranging text and lay-out, resizing (background) images, ...(more)...? All these issues depend on and/or are related to actual viewport-size of the screen that is used. Since i don't have the overview of these issues that should be taken care of, I thought it might be handy (more practical) to take a ready to use base/template which already addresses all these issues, and learn about these issues from there. Were i guess this base/template is the result of (lots of) webdevelopers that are (or have been) busy converting sites mainly designed for large screens to websites that are more mobile friendly (multi viewport sizes). This must have been done already so often that there might be some good roadmaps and maybe light-weight frameworks/templates including the most nescessary elements to achieve a responsive website. But i'am also glad if you have some good articles or a series of articles that breaks down the task of building a responsive website into a series of issues that need to be taken care of. Where this could be seen as succeeding steps of the issues to address, also a kind of roadmap. Thanks, Erik __ 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] thoughts on bootstrap and is bootstrap a good approach to setting up a website that fits in different viewport sizes?
dear list members, I'am looking into an approach for setting up a website that fits in different viewport sizes. I like the idea of an approach that is quite useable/suiteable as a base/general approach (roadmap) for different websites. Bootstrap (getbootstrap.com) was brought to my attention. Is this a good bas/general approach? What are your thoughts on and experiences with bootstrap. Or is there another / better / simpeler / leaner / cleaner approach ? Thank you, Erik __ 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] which media queries
Dear listmembers,
I am at the start of adapting a site ( http://www.utrechtsyogacentrum.nl
) for mobile devices.
As i understood media queries is the way to go.
I found a site desinged for different screen sizes. Is this site quite
well behaving / designed for mobile devices?
http://www.wezenlijk.info
On this site the css is addressing 4 device-type:
@media screen and (max-width: 760px) {
@media screen and (max-width : 960px) {
@media screen and (max-width: 1152px) {
@media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and
(min-device-pixel-ratio : 1.5) {
Will this do for most commonly used mobile devices?
Here in Holland these will be iPads and the majority of mobile phones
from samsung and apple?
If not, which devices (screen-sizes) should I address too?
Thanks, Erik
__
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] convert traditional site to mobile friendly site
Dear list members, I have to transform this traditional handwritten html website into a mobile friendly website: http://www.utrechtsyogacentrum.nl The google webmaster tools testing page has two complaints. The site is too wide. And links are to close to each other. Other google information pages suggest to use inline styles. But that is against what i know of building websites using css. So i'am wondering: what is the right approach / solution ..? I like the idea of having one site and targetting different devices. Is this the way to go? Should i use media queries and css for all kind of screens: http://www.htmlgoodies.com/html5/css/cutting-edge-device-targeting-with-css3-media-queries.html#fbid=a7t_mgj4iPJ And depending on the device that is reading the website: - leaving out images? or exchange them by small size (width / height) images? - changing the orientation of the page depending on the orientaion of the device visiting the page? - for portrait screens: display a top-menu instead of a left-menu - ... ? So i like some advice from the masters who already converted or designed some website for multiple devices / screensizes. Is there a good step by step guide somewhere? All information and ideas are welcome. Thanks, Erik PS found the google guide already, but i question if this is the best way to go. Is there a robust and simple aproach. https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=en-ENutm_source=MFTutm_medium=incoming-linkutm_campaign=MFT __ 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] site check please
Can you please view this website and give me your comments? Especially from technical point of view. Any quirks or strange behaviour or whatever? I hope i will get an overview of how this site works/acts on different browsers and platforms. http://beta.sterrenhofje.nl Thank you, Erik Visser __ 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] menu test
A client wants elliptical menu buttons with Comic Sans font, Please give me your remarks. And how this menu behaves in the different browsers and/or pplatforms you use. Thanks, Erik __ 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] menu test
David Laakso schreef op 12/11/10 12:49 PM: On 12/11/10 6:45 AM, Erik Visser wrote: Please give me your remarks. And how this menu behaves in the different browsers and/or pplatforms you use. Thanks, Erik uri, Erik? eeehhh.. http://beta.ottermeerhoeve.nl/index.php __ 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] very long page in opera 9.64 and 10.54 on both windows and mac
David Laakso schreef op 6/21/10 11:45 PM:
Erik Visser wrote:
(tested on windows xp and mac os x snow leopard)
both opera 9.64 en 10.54 make this page very long:
http://beta.ottermeerhoeve.nl
This...
/div !-- wrapper_extra --
/div !-- container --
/div !-- minwidth --
div id=footer.../div !-- id=footer --
/body
/html
Becomes this...
/div !-- wrapper_extra --
div id=footer.../div !-- id=footer --
/div !-- container --
/div !-- minwidth --
/body
/html
Thanks David, this fixed it for some pages.
But pages with small photos at the bottom of the left column still have
a long page.
And i think i also found what is causing the long page.
The small photos in the left column are kept together in a div:
div class=foto_colleft vertcalalign
To keep the photos at the bottom of the page, the class .verticalalign
has this css (file style.css):
.verticalalign {
position: absolute;
bottom: 0px;
}
When i remove position absolute. Then the page get its normal length.
But then the photos are not at the bottom of the page anymore.
So one solution might be to apply another method for keeping the div
with small photos at the bottom of the page.
Anybody any idea for an alternative method?
Or is there some other solution to avoud the long pages in Opera?.
Thank you, Erik Visser
__
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] very long page in opera 9.64 and 10.54 on both windows and mac
David Laakso schreef op 6/22/10 6:56 PM: http://beta.ottermeerhoeve.nl Point to the pages that don't work. these (amongst others) have still long pages: http://www.ottermeerhoeve.nl/index.php http://www.ottermeerhoeve.nl/biobloemen.php http://www.ottermeerhoeve.nl/natuurkamperen.php http://www.ottermeerhoeve.nl/natuur.php As i describd before all these pages have small photos on the bottom of the left column. Erik __ 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] very long page in opera 9.64 and 10.54 on both windows and mac
(tested on windows xp and mac os x snow leopard) both opera 9.64 en 10.54 make this page very long: http://beta.ottermeerhoeve.nl css: http://beta.ottermeerhoeve.nl/css/style.css http://beta.ottermeerhoeve.nl/css/makeup.css http://beta.ottermeerhoeve.nl/css/menu.css http://beta.ottermeerhoeve.nl/script/shadowbox/shadowbox.css any ideas on how correct this? Thank you, Erik Visser __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 and ie7 behave differently
I'am working on http://beta.ottermeerhoeve.nl In both ie6 and ie7 there are a couple of empty lines, before the last two text paragraphs are displayed. (above the text Als dit alles je aanspreekt ben je van harte uitgenodigd!) Both ie6 and ie7 display the original page alright (without empty lines): http://www.ottermeerhoeve.nl Any ideas on what is causing the beta version to show up with these empty lines in ie 6 and ie7? Thank you, Erik Visser PS1 css: http://beta.ottermeerhoeve.nl/css/style.css http://beta.ottermeerhoeve.nl/css/makeup.css http://beta.ottermeerhoeve.nl/css/menu.css http://beta.ottermeerhoeve.nl/css/ie.css http://beta.ottermeerhoeve.nl/script/shadowbox/shadowbox.css PS2 ie8 displays both www and beta versions alright (no empty lines here). __ 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] disappearing text in IE6 and IE7 ( but maybe only IE6 )
David Laakso wrote: Tried it again. I still am not able to reproduce the behavior on http://www.daploosdrechtseweg.nl in IE 6 or 7. However, I am able to reproduce the behavior on http://beta.daploosdrechtseweg.nl but only in IE/7.0-- but not IE/6.0. Wish I had a solution rather than just flaky test results to show... can anybody else reproduce this? and maybe have a clue Erik __ 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] disappearing text in IE6 and IE7
at http://www.daploosdrechtseweg.nl and http://beta.daploosdrechtseweg.nl IE6 and IE7: - sometimes show no text at initial load. - sometimes there is text at initial load. but when scrolling down, the text disappears. Anyone any idea why this happens? thanks, Erik __ 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] disappearing text in IE6 and IE7
Erik Visser wrote: at http://www.daploosdrechtseweg.nl and http://beta.daploosdrechtseweg.nl IE6 and IE7: - sometimes show no text at initial load. - sometimes there is text at initial load. but when scrolling down, the text disappears. Anyone any idea why this happens? could it be this bug: http://www.cayenne.co.uk/ie7/disappearing-content.html or http://209.85.229.132/search?q=cache:nHjZjk2Vj2YJ:lists.evolt.org/archive/Week-of-Mon-20070312/188745.html or http://209.85.229.132/search?q=cache:5TmeY2gXnNQJ:www.positioniseverything.net/explorer/peekaboo.html or ...? maybe tomoroow first some sleep now. Erik __ 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] jalbum photobook drops in IE6 after stupid late night changes
Erik Visser wrote:
Gunlaug Sørtun wrote:
table.image_block td .smalltxt {width: 8em!important}
...will for example work fine on an unaltered markup (with those
inline-styles in place).
And i thought !important was a hack for some sort of IE correction.
Obviously never looked into it very well.
On the other hand: it doesn't make all that much sense, to me, to use an
em-sized layout on a site focused on image-presenting. You will end up
having to resize the images in ems too - one way or another, which will
lead to some degree of distortion in all browsers.
Do you see this site as an image-presenting site?
It is a camping ground site.
To give a good impression of their campground we added a lot of photos
to the pages of the site. And we added a photobook.
But stil also a lot of textual information on rates, services, etc.
Besides that.
Ths is not an em-sized layout, or...?
1. The layout is mainly a percentage based layout. Using:
#col_middle {
float: left;
width: 72.5%;
margin-left: 20%;
}
* html #col_middle { display: inline; }
#col_left {
float: left;
width: 20%;
margin-left: -92.5%;
}
#col_right {
float: left;
width: 0%;
}
See: http://beta.ottermeerhoeve.nl/css/style.css
2. Image dimensions are set using em. See:
http://beta.ottermeerhoeve.nl/css/makeup.css
All together the site resizes quite good in most browsers. Doesn't it?
Only the fotoboek which is generated with JAlbum brings in different
styling.. And that's what i'am try to alter/adapt so it fits in the site
without breaking it.
I always thought that a percentage based layout. And em based image
styling were generally a good idea?
Any remarks are welcome.
Erik
__
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] Is List Working?
Robert Lane wrote: I have tried to submit a post about UL positioning and am not seeing it show up. I apologize for this post, it is a test. __ 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/ I have the same problem. did a couple of posts today that did not succeed. 1 reply (as a test) worked. guess something is wrong. Erik __ 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] columns shifting after logo margin change
My questions is about the logo on this site:
http://beta.daploosdrechtseweg.nl
logo css, in makeup.css:
img#logo {
margin-top:-7px;
}
Everything is ok here in FF3 and IE7
My question is:
how can i lower the logo (so it sits on the black bottom border of the
div#masthead) in a simple way.
This is what i tried:
I added in makeup.css:
img#logo {
margin-top:7px;
}
Resulting in:
http://beta.daploosdrechtseweg.nl/new/index.php
Looks ok in IE7.
But in FF3 the columns shift to the left.
To correct this shift i added a negative margin to the left column. In
makeup.css:
#leftColumn {
margin-left:-286px;
}
Resulting in:
http://beta.daploosdrechtseweg.nl/new2/index.php
Now it lloks ok in FF3.
But (as could be expected) in IE7 the column shifts and becomes invisible.
I tried more corrections to get it to look ok in both FF3 and IE7. But
before i add correction after correction. I thought: lets ask the list.
This because i think there must be a quite simple solution in the first
place. So it looks correct i most major browsers (IE6, IE7, FF2, FF3,
Safari, Opera, ..) But i am afraid i miss it completely.
So my question is: how can i lower the logo (so it sits on the black
bottom border of the div#masthead) in a simple way.
About the css.
These are the (too much) css files:
http://beta.daploosdrechtseweg.nl/css/simple.css
http://beta.daploosdrechtseweg.nl/css/complex.css
http://beta.daploosdrechtseweg.nl/css/complex_vnav.css
http://beta.daploosdrechtseweg.nl/css/makeup.css
http://beta.daploosdrechtseweg.nl/css/theme/theme_dap9.css
http://beta.daploosdrechtseweg.nl/css/makeup.css
I know far to much css files. Has to do with design phase. Where
multiple color schemes were available to choose from. They will be
deminished in later phase.
Thanks all, Erik
__
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] Is List Working?
Robert Lane wrote: I have tried to submit a post about UL positioning and am not seeing it show up. I apologize for this post, it is a test. __ 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/ same problem Erik __ 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-d ADMIN: i can reply (so it seems) but i can't post to the list
Hi Admin, It seems that i can reply to messages on the list. But i can't post new threads/questions to the list. Any idea why this is? And what can i do to resolve it? Thanks, Erik Visser __ 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] jalbum photobook drops in IE6 after stupid late night changes
Gunlaug Sørtun wrote: Erik Visser wrote: but still i like to solve it. (if possible) any suggestions? Sure. Don't use pixel-sized elements inside em-sized containers - or the other way round. Such mixes are bound to break. Thanks again. And a sorry also. Because I set out this next question too quick and easy. Yesterday evening it popped up in my head. I remembered that i found that the albun software generated tables with inline styles in pixels. So the containers don't resize when you make fomnt-size smaller. And then off course the lay-out breaks. So i have to: - or change the java software that generates the album - or find a jalbum skin that does not use any inline styles Thanks, Erik __ 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] jalbum photobook drops in IE6 after stupid late night changes
Gunlaug Sørtun wrote:
table.image_block td .smalltxt {width: 8em!important}
...will for example work fine on an unaltered markup (with those
inline-styles in place).
And i thought !important was a hack for some sort of IE correction.
Obviously never looked into it very well.
On the other hand: it doesn't make all that much sense, to me, to use an
em-sized layout on a site focused on image-presenting. You will end up
having to resize the images in ems too - one way or another, which will
lead to some degree of distortion in all browsers.
Do you see this site as an image-presenting site?
It is a camping ground site.
To give a good impression of their campground we added a lot of photos
to the pages of the site. And we added a photobook.
But stil also a lot of textual information on rates, services, etc.
Besides that.
Ths is not an em-sized layout, or...?
1. The layout is mainly a percentage based layout. Using:
#col_middle {
float: left;
width: 72.5%;
margin-left: 20%;
}
* html #col_middle { display: inline; }
#col_left {
float: left;
width: 20%;
margin-left: -92.5%;
}
#col_right {
float: left;
width: 0%;
}
See: http://beta.ottermeerhoeve.nl/css/style.css
2. Image dimensions are set using em. See:
http://beta.ottermeerhoeve.nl/css/makeup.css
All together the site resizes quite good in most browsers. Doesn't it?
Only the fotoboek which is generated with JAlbum brings in different
styling.. And that's what i'am try to alter/adapt so it fits in the site
without breaking it.
I always thought that a percentage based layout. And em based image
styling were generally a good idea?
Any remarks are welcome.
Erik
__
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] jalbum photobook drops in IE6 after stupid late night changes
Hello, Yesterday I made some (stupid) late night changes to the jalbum photobook at: http://beta.ottermeerhoeve.nl/fotoboek/fotoboek.php Everything looked ok in firefox. But IE6 now the photobook drops down from the layout. And the button bar of the photobook is far too small (propably related). I tried all kinds of things this morning. But it did not work. But i think i overlook the obvious. Can someone help me out? Thanks, Erik __ 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] jalbum photobook drops in IE6 after stupid late night changes
Erik Visser wrote: Hello, Yesterday I made some (stupid) late night changes to the jalbum photobook at: http://beta.ottermeerhoeve.nl/fotoboek/fotoboek.php Everything looked ok in firefox. But IE6 now the photobook drops down from the layout. And the button bar of the photobook is far too small (propably related). i updated the css: http://beta.ottermeerhoeve.nl/css/makeup.css the button bar issue is solved. but it stil drops in IE6. anybody? other .css files: http://beta.ottermeerhoeve.nl/css/style.css http://beta.ottermeerhoeve.nl/css/ie.css http://beta.ottermeerhoeve.nl/css/form.css http://beta.ottermeerhoeve.nl/css/menu.css thanks, Erik __ 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] jalbum photobook drops in IE6 after stupid late night changes
Gunlaug Sørtun wrote: Only get a drop in IE6 when resizing to font size: smaller/smallest. Is that the problem? Gunlaug, you hit the nail on the hat! as ever. but still i like to solve it. (if possible) any suggestions? Erik PS If it is of any interest: - jalbum because the owner can generate his own album - the Chameleon skin is the base for the photo album. Because it delivers validated xhtml and css. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] same css different results
Hello,
I have an interesting problem that is bothering me. Two pages using
quite the same css giving different results.
This css:
#col_middle, #col_left, #col_right {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
Is causing this page in Opera to become very looong:
http://beta.erikvisser.net/tro/index.php
CSS:
positioning: http://beta.erikvisser.net/tro/css/style.css
makeup: http://beta.erikvisser.net/tro/css/makeup.css
menu stuff: http://beta.erikvisser.net/tro/css/pde.css
For IE: http://beta.erikvisser.net/tro/css/ie.css
While this page (in base the same layout) is NOT too long:
http://ottermeerhoeve.nl/
CSS:
positioning: http://ottermeerhoeve.nl/css/style.css
makeup: http://ottermeerhoeve.nl/css/makeup.css
menu stuff: http://ottermeerhoeve.nl/css/pde.css
For IE: http://ottermeerhoeve.nl/css/ie.css
Any ideas what causes this difference?
All thoughts are welcome.
Thanks, Erik
PS the valiidator gives 2 errors in the css. this is known and intentional.
__
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] same css different results
Erik Visser wrote:
Hello,
I have an interesting problem that is bothering me. Two pages using
quite the same css giving different results.
This css:
#col_middle, #col_left, #col_right {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
Is causing this page in Opera to become very looong:
http://beta.erikvisser.net/tro/index.php
CSS:
positioning: http://beta.erikvisser.net/tro/css/style.css
makeup: http://beta.erikvisser.net/tro/css/makeup.css
menu stuff: http://beta.erikvisser.net/tro/css/pde.css
For IE: http://beta.erikvisser.net/tro/css/ie.css
While this page (in base the same layout) is NOT too long:
http://ottermeerhoeve.nl/
CSS:
positioning: http://ottermeerhoeve.nl/css/style.css
makeup: http://ottermeerhoeve.nl/css/makeup.css
menu stuff: http://ottermeerhoeve.nl/css/pde.css
For IE: http://ottermeerhoeve.nl/css/ie.css
Any ideas what causes this difference?
All thoughts are welcome.
Thanks, Erik
PS the valiidator gives 2 errors in the css. this is known and intentional.
Maybe i was not clear enough. It is only Opera that is giving this
lng page.
Thanks, Erik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 problem; gap or extra margin? in header
Thought i could figure it out myself. Checked out positioniseverything for ie bugs. But can't find it. In the header there are 2 images. IE7, Firefox and the others display them ok. But with IE 6 there's a gap under the images. Tried all sorts of adjustments. But the gap won't go. This is the page and css: http://beta.erikvisser.net/tro/index.php positioning: http://beta.erikvisser.net/tro/css/style.css styling: http://beta.erikvisser.net/tro/css/makeup.css menu:http://beta.erikvisser.net/tro/css/pde.css menu:http://beta.erikvisser.net/tro/css/menu.css ie only: http://beta.erikvisser.net/tro/css/ie.css Css files are not optimal yet. Especially the 2 css files for the menu should be cleaned up. Rest is quite ok. Any thoughts? Thanks, Erik Another problem is quite a long page in Opera (Mac OSX, Opera 9.02). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 problem; gap or extra margin? in header
Kevin Evans wrote: Hey Erik, The space is probably because CSS sometimes treats images as text with the baseline below, acting as space. To get rid of it you either have to add display: block; to the image or a float: left; to the image On Jul 2, 2007, at 12:31 PM, Erik Visser wrote: In the header there are 2 images. IE7, Firefox and the others display them ok. But with IE 6 there's a gap under the images. Tried all sorts of adjustments. But the gap won't go. Thanks, that did it. Erik __ 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] rubbish on http://css-discuss.incutio.com/?page=FrontPage
goto: http://css-discuss.incutio.com/?page=FrontPage then: resizing images there are links to sites on: - safes - paris hilton - etc. Erik __ 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] @import vs link for stylesheets
David Hucklesby wrote: I didn't mean to be quite so dismissive. But you may like to consider this technique for viewing coding results in several real browsers every time you press save: http://tinyurl.com/y98bx7 How wel is this supported accross browser land? I think i remember that not all browsers support this feature? There is a very comprehensive browser support chart somewhere. But where was it..? Erik __ 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] site check: 24-10reading.nl A PostScript
Gunlaug Sørtun wrote: http://24-10reading.nl/ Too many back and forth corrections between browsers for my taste, so I leave the rest to others. Georg, what do you mean exactly with this? Erik __ 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] site check: 24-10reading.nl
~davidLaakso wrote: Erik Visser wrote: A site check please for anoter site i recently finished: http://24-10reading.nl/ Any remarks, also on the design are very welcome. Thanks, Erik Visser She did well on my end (xp) in ie/7., opera/9.1, and ff (version whatever it is). In ie/6.0 at /text-size largest/, the vertical logo disappears and there is no horizontal scroll-bar with which to retrieve it. See screen shot: http://chelseacreekstudio.com/ca/cssd/ev.gif. i will loook into that one. any idea on why the scrolllbar doesn't appear? (or maybe better: why the left side is chopped off?) However, with both of your sites (and this is a personal opinion that is not shared by all on this or any other list), I find sites that require both horizontal and vertical scrolling when the fonts are scaled to be bothersome. Ok, vertical scrolling is hard to avoid. That is, when the amount of content rises. With all designs there comes a point where you can't keep the content in the browser window. Isn't it? Then the horizontal scrolling. While keeping the same design, this horizontal scrollbar can only be avoided by not using a min-width. Isn't it? Then it comes up to the design how it keeps up without min-width. Especially the 24-10reading client could not accept the horizontal menu wrapping over 2 lines on smaller browser windows / bigger font sizes. So withouut brekaing the design with a horizontal menu bar there isn't a way to avoid this horizontal scrollbar. Or...? Thanks, Erik __ 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] site check: 24-10reading.nl
Daniel Beardsmore wrote: ~davidLaakso wrote: However, with both of your sites (and this is a personal opinion that is not shared by all on this or any other list), I find sites that require both horizontal and vertical scrolling when the fonts are scaled to be bothersome. Not just font size but window size. I think every relatively interesting design will have its limits as to how small the window can go before the design breaks up. Personally I aim to make sure anything I do works on 800x600, but for everyone this will vary. Erik, the site you highlighted will go down to about 850px (in Firefox 2) before the first link in the navigation bar starts to go off the side of the window. I don't think that anything in the design requires a window this wide. Everyone's needs vary, but 850px width for such a simple design worries me personally. I agree with you Daniel. In this case it was the client that came up with the basic design. And initially it had even more white space. My client said he likes space and designs with lots of room. I don't know if i can translate this in understandable English, but he said: I want to create a certain image. And create a certain athmosphere. And thus i told him that in most cases (if not an art work) the primary goal of a website is to provide information to the visitor. And preferable in way so that the visitor can take that info as easy as possible. And that scrolling is very irritating to a lot of people. So at first i made a small version of his design. But he did not like it. It was not breathing the right athmosphere he said. So i expanded the design again until he was satisfied. What can you do if a customer insists? Erik __ 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] site check: 24-10reading.nl
bill scheider wrote: I really like the design of the site; it has a nice, open feel that I like. That's exactly what my cliennt was after. But it takes a lot of space as you noticed. The same as David noted, in IE6 on xp on my machine, the left side logo starts to disappear at text-size 'large'. At text-size 'largest', the logo is gone and much of the information (on the home page, at least) also falls off the left side and, again as David said, is irretrievable. Screenshot on ie6 at text largest: http://first-encounter-design.dreamhosters.com/imgs/24-10.jpg I primarily develop with firefox on linux and mac. So i have to dig into that one. And i guess it is something that should be taken care of, isn't it? (to be honest, I thought IE 6 wasn't able to zoom so i never tested for it stupid eh?) I'd also like to echo what Daniel said about window size. I'm not as averse to a horizontal scrollbar as David is but I sometimes think they're an inconvenience that I can minimize with a little foresight. When designing a site that can be scaled, I design so I won't get a horizontal scrollbar at about 800px wide at medium text in IE David already mentioned the same; thus 800px is a generally accepted rule (of the thumb?) for width without scrolling? and then, if possible, try to not have critical content, i.e., navigation, primary text, fall off if the text is zoomed to large. That's one of the reasons the home disappeared from the menu bar. One other comment I have about your site: I know it's a convention, but it took me a bit to realize that the way back to the home page was through the link on the logo. A home navigation button would have helped. And there quite a couple of places with the link: - terug naar reading Utrecht - Which is the same as home but then i a sentence of the Dutch language. Thanks, Erik __ 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] site check: 24-10reading.nl A PostScript
Gunlaug Sørtun wrote: Erik Visser wrote: Gunlaug Sørtun wrote: http://24-10reading.nl/ Too many back and forth corrections between browsers for my taste, so I leave the rest to others. what do you mean exactly with this? Only that I personally found it hard to keep track of what was targeting which browser where and in what order. We all have our preferences when it comes to how stylesheets are organized. ok, i get it what i basicly did was: 1. take one true layout [1] as base layout this provided 1 css file: style.css all positional css additions are added to style.css 2. for the menu i added Ruthsarian Menus [2] to the layout this provided a second .css file: menu.css which contains everything related to the menu 3. then for visual presentation css i added the makeup.css 4. for ie only css: ie.css So my approach is: take an existing webstandards compliant css layout that have proofed itself (till some extend) and take out or add code blocks and css (like the ruthsarian menu) to this base layout. Why did i choose this approach? Since - i have really limited time - and i'am not that quick at learning it all by myself I decided i better use a good base prooven css layout and from there: - make websites - read a list like this one - read some books - look at tutorials - etc. This might be a slow road for really mastering webdevelopment (xhtml / css / etc.). But it makes it possible (in the time available to me) to better myself while developing websites for customers. Any thoughts from the gurus on this appproach? Thanks, Erik [1] http://www.positioniseverything.net/articles/onetruelayout/ [2] http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check: 24-10reading.nl
Daniel Beardsmore wrote: Hm ... I am no expert, but the design seems simple enough to me that it should reduce in width quite a bit more. agreed lots of whitespace everywhere to reduce I don't know why it stops at ~850px. me neither, but i should look into that later. Personally I find the site a tad bit empty, bare ... Like it's missing something. i totally agree, but when a client insiists.. thanks, Erik __ 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] site check: 24-10reading.nl
sorry, this mail was meant to be sent offlist Erik Visser wrote: Daniel Beardsmore wrote: Hm ... I am no expert, but the design seems simple enough to me that it should reduce in width quite a bit more. agreed lots of whitespace everywhere to reduce I don't know why it stops at ~850px. me neither, but i should look into that later. Personally I find the site a tad bit empty, bare ... Like it's missing something. i totally agree, but when a client insiists.. thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Holy Grail layout + simple javascript = IE6 problems
~davidLaakso wrote: Ingo Chao wrote: David asked me for an example. See this draft, corrections and additions are appreciated. http://www.satzansatz.de/cssd/hgjump.html Regards, Ingo Super example. Ingo. It will make life a lot easier for all attempting Levine's (ALA) version of the Holy Grail [1]. I have used and like Georg Sortun's spin off version very much [1] http://alistapart.com/articles/holygrail Which makes me wonder: where can i find Georg's spin off version? Thanks, Erik Visser __ 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] site check: 24-10reading.nl
Hello dear members, A site check please for anoter site i recently finished: http://24-10reading.nl/ http://24-10reading.nl/css/style.css http://24-10reading.nl/css/makeup.css http://24-10reading.nl/css/menu.css !--[if lt IE 7] http://24-10reading.nl/css/ie.css Any remarks, also on the design are very welcome. Thanks, Erik Visser __ 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] site check: 24-10reading.nl
Erik Visser wrote: Hello dear members, A site check please for anoter site i recently finished: http://24-10reading.nl/ http://24-10reading.nl/css/style.css http://24-10reading.nl/css/makeup.css http://24-10reading.nl/css/menu.css !--[if lt IE 7] http://24-10reading.nl/css/ie.css Any remarks, also on the design are very welcome. Just an addition to let you know that i just found out that the W3C validator is complaining several times about: end tag for br omitted. My client tried to build a site himself, before he came to me. Thius he has some knowledge on building a site. And he will maintain the site himself also. So it seems that he already changed some code. Erik __ 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] site check
~davidLaakso wrote: As of this writing, I no longer see that problem in ie/7.0 on any page. i did not change anything my ultimate dream (as a developer): self correcting code and thus: css Pro 2001.0 and XHTML 2000.0 compliant code wow ;-) thanks Erik __ 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] site check
Hello dear members, A site check please for this site that i finished: http://www.ottermeerhoeve.nl http://www.ottermeerhoeve.nl/css/style.css http://www.ottermeerhoeve.nl/css/makeup.css http://www.ottermeerhoeve.nl/css/menu.css !--[if lt IE 8] http://www.ottermeerhoeve.nl/css/ie.css Any remarks, also on the design are very welcome. Thanks, Erik Visser __ 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] site check
~davidLaakso wrote: Erik Visser wrote: http://www.ottermeerhoeve.nl Nice job, Erik. thanks There is a minor issue (if you even want to call it that) with a sidebar in place in viewing some pages with images in ie/7.0. some? not all pages with photos you viewed? if so, strange... if there's an issue i'am curious what the cause is Hacking ie/6.0 is understandable. Why are you also feeding those styles to ie7.0? maybe stupid,, but i don't remember exactly i think it had to do something with the menu Erik __ 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] The width: expression(...) hack not working
Zoe M. Gillenwater wrote: By the way, Jukka, to start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread by the way: - is there a thunderbird extension to easily split such a thread? - or another way (messing with headers) to split the thread up? then i guess by replying a new thread is started __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help! negative margins doesn't work on IE6
Gunlaug Sørtun wrote: I can't easily read text smaller than that on my screens. I design for 200% font-resizing, or 32px 'minimum font size', in case someone needs even larger text. You should try that. done! the whole thing is now a liquid layout. dropped all those pixels and changed it to ems. please take another peek if you don't mind :) Well, it's 'em-fixed' now (not liquid), and needs a 1400px wide browser-window given my font-size settings. No secret that I prefer 'em-guided liquid' layouts better than 'em-fixed' ones, since I don't like to scroll horizontally just because I want somewhat larger text. so there is: em-liquid ( no max / min width? ) em-fixed( fixed width? ) em-guided-liquid or are there more? does guided-liquid mean: min-width and max-width implemented?? Erik __ 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] Language switching
Paul Novitski wrote: From: Paul Novitski [EMAIL PROTECTED] Here's an example of one technique that I produced using English Japanese text: http://laurietobyedison.com/WOJwords.asp?lang=EN Every bilingual page on the site contains both languages, with only one of them displayed at a time. In the absence of javascript, the Japanese/English toggle requests the current page from the server with the requested language selected (by specifying it in the body class). With javascript enabled, the language toggle simply switches the body class and the displayed language changes immediately. At 3/5/2007 06:28 PM, Chris Chen wrote: Could you elaborate a bit on what you mean by switch body class with a simple example? Hi Chris, Here's one example of this technique. Plug the requested language into the body class: body class=langEN or body class=langES so for every language you have a seperate html file? Erik __ 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] multiple ie's (was: Re: Horizontal list menu misbehaves in IE 6 - update - Firebug lite)
Ingo Chao wrote: Mark Baber wrote: As for IE7 ... last I heard, one can't run IE and IE6 on the same machine, and so I won't be able to test on IE6 if I upgrade. http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-single-machine.aspx - Virtual PC 2004 - Virtual machine image with WinXP/IE6 (500MB virtual hard disk file, vhd) Run virtual pc, add a new virtual machine, assign the extracted vhd file to this vm. How about this then? http://tredosoft.com/Multiple_IE Is that not going to work? thanks, Erik __ 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] submenu's not workng in IE6
I'am working on this site: http://beta.24-10reading.nl/ It's got a horizontal menu with submenus (using a .htc file for whatwever hover), all work like intended. Except... Then there's also a wordpress installation on this site. I altered the wordpress template (mainly the header) so it uses the same menu as the rest of the site. Now this is working cross platform in all major browsers. Except in IE6. That is the normal site works like a charm also in IE6. But the blog... When you hover the menuitems: - reading - workshops - contact a submenu should open. But in IE6 they dont. So the error is in the blog part because the rest of the site works ok. I looked at it for some hours the last days but can't get it to work. It should be something stupid i miss. (i guess) Can someone have a look please? Thanks, Erik __ 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] submenu's not workng in IE6
Ingo Chao wrote: sorry. did not read the post. it does not work on the blog. is the path to the htc correct? And the conditional comment? Tried all sorts of paths to the htc file. And the conditional comment is working in the non blog part of the site. But thats why i keep thinking i'am overlooking (is this correct English?) something completely. Erik __ 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] submenu's not workng in IE6
Ingo Chao wrote: sorry. did not read the post. it does not work on the blog. is the path to the htc correct? And the conditional comment? addition to the paths i tested. i did this by trial and error changed it from /htc/csshover.htc (which works for the rest of the site) to: ../htc/csshover.htc to: /../htc/csshover.htc to: ../../htc/csshover.htc etc. but that is not the best way of testing/debugging i guess ;-) so how do you establish the current path, so you can alter the path right away to the correct one? thanks, Erik __ 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] submenu's not workng in IE6
Ingo Chao wrote:
But the conditional comment: I cannot see it on the blog part.
I only see 1 (the first) conditional comment when i do view source.
This is what i added to the header.php
!--[if lt IE 8]
style type=text/css media=screen
img#img2410 { top: 2.45em; }
/style
![endif]--
!--[if lt IE 8]
style type=text/css media=screen
/* menu alignment */
#hnav ul li { width: 9em; }
ul.rMenu-hor ul { margin-top: 0px; margin-left: 4px;}
/* menu alignment END */
#content { margin-left: 3em; }
/style
![endif]--
!--[if lt IE 8]
link rel=stylesheet type=text/css href=/css/ie.css /
![endif]--
The link to the .htc is in the ie.css.
So only one conditional comment is executed?
Erik
__
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] submenu's not workng in IE6
Erik Visser wrote: Ingo Chao wrote: But the conditional comment: I cannot see it on the blog part. I only see 1 (the first) conditional comment when i do view source. forget about this. did not look good sorry they are there all three now ie.css is found (thats why backgorund is purple) Erik __ 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] site gets very long pages in IE7
the site below looks good in IE6 in IE7 it gets very long pages: http://bartbleijerveld.nl someone an idea why? thanks, Erik __ 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] expanding submenu
Christian Heilmann wrote: Could it be you meant YADM? http://www.onlinetools.org/tools/yadm/expanding.html Christain (and others), Some questions on expanding menu's: - is a css + javascript combination still the best way to go (instead of css only)? - is YADM the best solution for these menus, or is there a better one? I have to build a menu bar with a submenu level into this site i'am building: http://beta.erikvisser.net/24-10/ Thanks, Erik visser __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text and image zoom / halfway
francky wrote:
So I made an update to repair FF1.07 (adding things to maintain IE6) [1]:
*
http://home.tiscali.nl/developerscorner/css-discuss/test-erikvisserbeta-vs2-a.html
with right column longest.
*
http://home.tiscali.nl/developerscorner/css-discuss/test-erikvisserbeta-vs2-b.html
with middle column longest.
Both working on Win98SE (FF and IE6).
If it's alright for XP and IE7 too, then only a workaround for ...
(Opera anyway; Mac? Others ..?.) has to be found, for Opera is still
descending to the Hades. ;-)
Francky,
In your version the footer doesn't stick to the botoom of the viewport.
So thats why the problem is solved ;-)
from your css
you can't delete: html, body { height: 100%; }
as it is part of footerAltStick:
http://themaninblue.com/writing/perspective/2005/08/29/
thanks for the help anyway
The major problem i'am facing now is Mozilla (on Linux, Mac and Win):
makes a loong page, but..
when you resize the browser window the page gets it intended length..?
anybody knows this effect and how to solve this?
Erik
__
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] site check and help on some issues please
Erik Visser wrote: I am developing a site: http://beta.erikvisser.net/24-10/index.shtml http://beta.erikvisser.net/24-10/css/makeup.css and 4 pairs of .css files because of style switching during development: http://beta.erikvisser.net/css/style.css; title='nav_bright' http://beta.erikvisser.net/css/nav_bright.css; title='nav_bright' http://beta.erikvisser.net/css/style2.css; title='nav_bright2' http://beta.erikvisser.net/css/nav_bright2.css; title='nav_bright2' http://beta.erikvisser.net/css/style.css; title='nav_mid' http://beta.erikvisser.net/css/nav_mid.css; title='nav_mid' http://beta.erikvisser.net/css/style.css; title='nav_dim' http://beta.erikvisser.net/css/nav_dim.css; title='nav_dim' The results ondifferent platforms: Almost everything is ok now. Only: 1. i need to implement a min-width solution for Windows: IExplorer 6 on the css-d site i found 3 ways to go: - css - javascript - dynamic expressions what are the pros/cons? which is the way to go? any thoughts? 2. strange mozilla behaviour Mozilla on Linux, Mac and Win makes a loong page, but.. when you resize the browser window the page gets it intended length..? a reload makes it a long page again then resizing the browser window, the page gets it intended length again. anybody knows this effect and how to solve this? 3. Winsdows IE7 Can someone report how the page looks in IE7? thanks again, Erik Visser __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text and image zoom
Gunlaug Sørtun wrote:
Erik Visser wrote:
Then a question on my menu. It looks quite good. Hoovering is ok. But
when clicked the border of #header disappears...
I think this was brought up earlier on the list. Something to do with
dotted line when selected. But is this correct and is there a solution?
In Firefox?
The dotted outline is that browser's way to show selected link, and
you should rather not try to override such browser-specific styles.
The '#nav {overflow: hidden;' I posted earlier keeps the border on
#header intact - only the side-borders on the selected link becomes
dotted. That's how your updated page behaves also, and I think you
should leave it like that.
Of course, the addition of...
#nav li {overflow: hidden;}
...will hide that outline.
wow... thanks again
gunlaug, do you have all this info in your head?
or are you very good at finding your info in resources (etc.)?
i put quite some time in resolving this.
but could not figure this out.
Another menu question:
- the fonts in my menu look quite cracky (not crisp and sharp).
is there a way to make them look better?
Thanks again, Erik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text and image zoom
Thanks, especially Gunlaug and Franky, for the thorough testing. Now i put up further developed version of the site. (Franky, your latest addition/change is not yet included) I have 2 specififc questions. -- 1. -- Padding or margin? To lower the text in the middle column (#col_middle) i used: margin-top: 6em; The same for the right column. I also could have used padding. Wich one is better margin or padding? And why? Or is the answer: depends.. If so, in which cirumstances do you use padding and in which margin? -- 2. -- About the horizontal menu. Propabilly quite simple, but i struggled for quite a while and did not find a solution. The the colored horizontal menu's left and right zone are white. But the left white part should be blue. So i gave .hnav a blue background and tried all sorts of things. But it still keeps comin up as white. The css for the navigation is in a seperate stylesheet nav.css. The css for the containing block (#header) is in style.css. http://beta.erikvisser.net/24-10/index.shtml http://beta.erikvisser.net/24-10/css/style.css http://beta.erikvisser.net/24-10/css/makeup.css http://beta.erikvisser.net/24-10/css/nav.css Is any of you able to help me out? Thans a lot! Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text and image zoom
Gunlaug Sørtun wrote:
The addition of...
#header {background: blue; height: auto;}
.hnav {background: #fff;}
#nav {overflow: hidden; background: #fff;}
...will make it look as you describe - blue on left side and white on
right side.
Well, keeping left and right apart is always hard for me. (i meant right
side should be blue ;-) But switching the sides was easy.
Thanks gunlaug for the good explanation and solution. perfect!
Then a question on my menu.
It looks quite good.
Hoovering is ok.
But when clicked the border of #header disappears...
I think this was brought up earlier on the list. Something to do with
dotted line when selected. But is this correct and is there a solution?
Any ideas?
Thanks Erik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text and image zoom
francky wrote: Erik Visser wrote: The the colored horizontal menu's left and right zone are white. But the left and right? No, right should be blue, left should be white. Gunlaug brought up the solution. Thanks Franky, Erik __ 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] text and image zoom
I made a mock up (i thik this means: rough setup. correct?) for a site i am developing: http://beta.erikvisser.net/24-10/index.shtml http://beta.erikvisser.net/24-10/css/style.css http://beta.erikvisser.net/24-10/css/makeup.css I want the vertical text (actually an image): 24-10 READING to stay in place when the visitor does a text zoom (in or out). In other words the N in READING sits just on top of the border-bottom of #header (grey background). And it should stay there when the text zoom is used. I used em for image size and for the heigth of #header. What am i doing wrong? Or is this just not possible? Any tips? Thanks, Erik __ 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] @import or link href=css/buttons.css /
Christian Heilmann wrote: I like @import, as it allows for modularization of CSS much more than LINKs do. Can you explain a little more on modularization? __ 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] shopping carts
Phil Turner wrote: I need to find a shopping cart that can work out postage/shipping costs, paypal only allows one currency does anyone know a good one we only have one product to sell but need to include all the various postage costs. Take a look here: http://www.zencart.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] Wiki Updated - IE on Linux
Felix Miata wrote: It's now easy to test for yourself using IE on Linux. Screenshot: http://mrmazda.no-ip.com/SS/kde-IE6.gif gives a 404 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check please
David Laakso wrote: Erik Visser wrote: http://beta.bartbleijerveld.nl/8/site/ xp :: ie/opera/ff/moz Crazy about all that white space. too much you mean? Might be nice to relieve some of the starkness, though, with a touch of color here and there. what is starkness? the simple / clean / empty design is a wish of bart, the owner of the site I do not know exactly what is causing the problem in ie-- page repeats vertically once, minus the text( v-rules show but no headings, or text). should be fixed now is it? Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check please
http://beta.bartbleijerveld.nl/8/site/ thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] article on 100PercentHeight not properly listed on css-discuss.incutio.com/?page=FrontPage
article on 100PercentHeight not properly listed on css-discuss.incutio.com/?page=FrontPage propably because of the page strating with a number? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] columns streching
Zoe M. Gillenwater wrote: Erik Visser wrote: so i'am looking for a place with good explaination of the technique(s) of: columns streching to the bottom of the viewport, regardless of the content length of any of the columns I don't know of a comprehensive article, but we have a wiki page with the basic info: http://css-discuss.incutio.com/?page=100PercentHeight thanks, found that one now the link to this article on the frontpage does not work: http://css-discuss.incutio.com/?page=FrontPage additional questions on min-height: 1. what is the best min-height hack for browsers that do not suport min-height? where best is: - works in all (most) today's browsers (including IE 6+ and Safari) - with no (hardly) disadvantages 2. can this be combined with every type of lay-out / positioning model? Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] columns streching
so i'am looking for a place with good explaination of the technique(s) of: columns streching to the bottom of the viewport, regardless of the content length of any of the columns through google i found in some forums tips for specific user questions, but not a good article that (thorrow) explains (if there are several solutions, pros cons, etc.) how you should tackle this goal something ALA (or comparable) like please some links / tips thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 columns with borders plus a footer that sticks to the bottom of the viewport
Erik Visser wrote: The only thing it does not yet do is: both columns stretching down to the bottom of the viewport even if they each only have a few lines of text you can see this the best when you zoom-out quite a bit before fixing this short coming i like your opinions ok, the page stretches now only in IE i get a very very long page now anybody any idea why IE stretches this page so long? thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 columns with borders plus a footer that sticks to the bottom of the viewport
What i'am trying to achieve is: - a 2 columns layout with vertical borders where the 2 columns stretch to the bottom of the viewport (even when both columns only have one or 2 lines of text) - combined with a footer that sticks to the bottom of the viewport i started almost a half year ago and i thought this wouldn't be too difficult, but it turned out to be not that easy at all, t.i. if you want it to work accross browsers due to circumstances, i had to stop my attempts a couple of months ago this is how far i came then: http://beta.erikvisser.net/bart/old/ (css doesn't validate because of an ie hack: word-wrap) i understood that this mockup is unstable so i try to resolve this problem i found this: http://limpid.nl/lab/css/fixed/footer and combined it with this: http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1width=50-49.5equal_height=1 Resulting in getting almost what i want: http://beta.erikvisser.net/bart/new/1/ The only thing it does not yet do is: both columns stretching down to the bottom of the viewport even if they each only have a few lines of text you can see this the best when you zoom-out quite a bit before fixing this short coming i like your opinions My questions are: - is new this a better approach compared with the original approach as shown on http://beta.erikvisser.net/bart/old/ - or is there a better aproach? - any remarks are welcome - and how can i let both columns stretch to the bottom of the viewport, even when both contain hardly any text? thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not clickable in Safari
David Hucklesby wrote: Erik Visser wrote: it is fixed Would you like to share with us how you fixed it? this: http://archivist.incutio.com/viewlist/css-discuss/59082 brought me to this: http://www.456bereastreet.com/lab/float_negative_margins/ that did it in my case Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not clickable in Safari
Michael Hulse wrote: On Dec 12, 2005, at 4:48 AM, Erik Visser wrote: in this the links in the left column are not clickable in safari: http://www.bartbleijerveld.nl/ http://www.bartbleijerveld.nl/css/skidoo_too.css anybody any idea how to solve this? They are clickable in the version of Safari I am using... v.1.3.1 sorry i did not report it is fixed __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] columns wont stretch down to the bottom of page
I'am makinjg a lay-out: http://beta.bartbleijerveld.nl/2t5050/ http://beta.bartbleijerveld.nl/2t5050/css/skidoo_too.css What i'am trying to accomplisg Is that the columns stretch down to the bottom of the page. Regardles if there's content or not. I tried all sorts of combinations with height 100% and min-height 100%. But this doesn't seem to meke any difference. The pageWrapper stretches down. But I need the columns to stretch down. And they do not. Maybe i'am overlooking something? Any help is appreciated. Thanks, Erik (Also another 2 column template with both columns streching down to the bottom of the page/viewport (even if there's no cotent) and a footer below these columns is welcome.) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] columns wont stretch down to the bottom of page
Schalk wrote: Have a look here: http://www.themaninblue.com/writing/perspective/2005/08/29/ I aready did. And it seems thast the columns stretch down but they don't, Look here: http://beta.bartbleijerveld.nl/t5050/ The red and the blue are the columns. I need them to stretch down because I want to use the borders. Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] columns wont stretch down to the bottom of page
Schalk wrote: Erik Visser wrote: Schalk wrote: Have a look here: http://www.themaninblue.com/writing/perspective/2005/08/29/ I aready did. And it seems thast the columns stretch down but they don't, Look here: http://beta.bartbleijerveld.nl/t5050/ Basically this is what i want: http://www.bartbleijerveld.nl/ The idea of the vertical borders is a analogy with an open book. who do ok? - Windows XP Firefox 1.07 - Windows XP Mozilla 1.7.12 - Windows XP Opera 8.5 - Linux Mozilla 1.7.8 - Linux Opera 8.5 - Mac IE 5.2 but. the left column is completely white on: - Mac Safari 1.3 - IE 6 So if someone knows a fix for these browsers. It is very welcome indeed. thanks Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] columns wont stretch down to the bottom of page
Erik Visser wrote: Schalk wrote: Erik Visser wrote: Schalk wrote: Have a look here: http://www.themaninblue.com/writing/perspective/2005/08/29/ I aready did. And it seems thast the columns stretch down but they don't, Look here: http://beta.bartbleijerveld.nl/t5050/ Basically this is what i want: http://www.bartbleijerveld.nl/ The idea of the vertical borders is a analogy with an open book. who do ok? - Windows XP Firefox 1.07 - Windows XP Mozilla 1.7.12 - Windows XP Opera 8.5 - Linux Mozilla 1.7.8 - Linux Opera 8.5 - Mac IE 5.2 but. the left column is completely white on: - Mac Safari 1.3 - IE 6 So if someone knows a fix for these browsers. It is very welcome indeed. It is a little different: - Mac Safari 1.3 = links are not clickable - IE 6 = the left column is completely white on __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] links not clickable in Safari
in this the links in the left column are not clickable in safari: http://www.bartbleijerveld.nl/ http://www.bartbleijerveld.nl/css/skidoo_too.css anybody any idea how to solve this? thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6.0 WinXP left column not showing
on this site the left column is not showing in IE6 WinXP http://www.bartbleijerveld.nl/ http://www.bartbleijerveld.nl/css/skidoo_too.css anybody any idea how to solve this? thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6.0 WinXP left column not showing / crashes IE on window resize
Gunlaug Sørtun wrote: Ingo Chao wrote: Erik Visser wrote: http://www.bartbleijerveld.nl/ http://www.bartbleijerveld.nl/css/skidoo_too.css Your footer script or whatever crashes IE when the window is diagonally resized to 25%. That tendency to crash will be solved if the correct wrapper get a 'hasLayout' trigger. That will also make the lost column visible. I figured that out the last time that design was around, but I didn't spend time on finding the correct element for that trigger, because the layout looked a mess, with even messier css, back then. Well it is far better now. The index.html on http://www.bartbleijerveld.nl/ there's almost nothing in it. The link to article on 'Layout' was posted then, along with what's explained above. yes, i read that, but i don't know how to know which element needs layout. An it has lots and lots of info. It gets me dazzling. How do I know / examine which element to give layout? As /you/ know, adding 'hasLayout' triggers may have pretty nasty side-effects if not done properly and selectively. Not something we should do to a weak layout. Hopefully the layout/css is better now - don't have time to check. i tried all kinds of additions tio the stylesheet based on the article, but no luck yet. Columns get shorter but no visible content. Thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
