[css-d] on pc (FF IE) appears a border....
hi i'm testing a page ( www.fullcaffeine.com/alessandroruggeri/ ) but on pc, both browsers – FF and IE – shows a bad dotted border when I click on navigation button. anybody can help me to solve this problem? css link www.fullcaffeine.com/alessandroruggeri/style.css tia jean-claude __ 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] Further to earlier message on fieldset
On 21 May 2006, at 8:41 pm, Stuart Homfray wrote: You're right - it's a float issue! You can fix it (I've only checked in FF, IE6 and Safari) by removing the float declaration from the '.sel-box' rule. Hi Stuart, That did the trick. Thanks very much for your help. Regards, Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? __ 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] on pc (FF IE) appears a border....
hi Ian, i think that the usual nightmare is started... on my girlfriend's PC, IE 6 rendered the page properly... :( i'm starting testing it on more IEs... thank for the snapshot j. Il giorno 22/mag/06, alle ore 12:11, Ian Young ha scritto: hi i'm testing a page ( www.fullcaffeine.com/alessandroruggeri/ ) but on pc, both browsers – FF and IE – shows a bad dotted border when I click on navigation button. anybody can help me to solve this problem? css link www.fullcaffeine.com/alessandroruggeri/style.css Jean Claude Not a lot you can do about dotted border, but your site doesn't render in IE See attached. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.1/344 - Release Date: 19/05/2006 alessandro.jpg __ 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] Fonts
Nicholas Morgan wrote: Thanks Bob for your replay. I just don't get why this is not a priority. Does this mean that no one is going to do anything about this? I think this is a big deal and something that should be worked on as core for every browser. Not solving this problem just costs everyone more money, more time, more bandwidth, less accessibility, etc, etc.. Why doesn't any one care about this? Am I totally off by asking for something like this? Is anyone working on figuring this out? Two points. 1) PLEASE don't quote entire messages. Several thousand subscribers don't need to see the whole thread over and over again. BTW, most of us prefer bottom posting. Both are mentioned in the list policies. 2) Some provision for loadable fonts will be in one of the CSS3 modules. The W3C CSS Working Group (I'm a member) has been discussing this recently. The feature is not yet in any draft, but it is almost certain to occur in some form. As to why it's not a priority, demand drives almost all W3C activity. There are many other things that people have asked for more frequently than downloadable fonts. CSS3 work under construction: http://www.w3.org/Style/CSS/current-work.html -- Bob Easton Accessibility Matters: http://access-matters.com __ 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] Fonts
That's great and all but you didn't answer my question. To me this is the same problem that we had without CSS. We used tables and other means to get the designs that we wanted. This is how I interpret what you just told me. We have carefully thought and put together 12 standard t-shirts. They are great t-shirts and everyone on the planet has to pick out of that 12 because we studied what it takes to be a t-shirt and feel that the 12 we have chosen are awesome. The point is to empower designers not to put them in a box. And as much as you try you can't take css and make a font look like another, you just don't have that much control. True it is the same problem: You seem to still want to control what the visitor sees, and this is not what web design is about IMHO. The power of the web is its diversity, you can pick from dozens of different user agents and hundreds of user agent/operating system/ability constellations. The whole font debate IMHO is none: Use your font and use others as fallbacks, ending with a generic font name and the visitors who have the fancy font will see it, others won't but can still read your site. If you want to force a certain font or you want to use a licensed font, use Flash. Web design is about styling and providing content not about providing style and adding some content. Your T-shirt example does not apply. Even if there were only 12 Tshirts people would spray them, tiedye them or sew own stuff on them. But it is the people's choice what to do with them. A Tshirt - like any physical product - has a fixed state at the time you hand it over to the buyer, a web site doesn't as it depends on the user agent and the other technical bits and bobs on the visitor's end, and you cannot guess or determine what that is. If you create a movie that only works on 16x9 or needs colour you cannot stop people from watching it on a TV in 4x3 or black and white. As a music artist you cannot expect people to listen to your songs on high-end playback equipment with headphones instead of a dingy car stereo with one broken speaker. If you feel not empowered enough as a designer have a look into usability or information architecure - a lot to research, test and learn there, but I don't see many people crying for more real data on these matters - instead we work on assumptions most of the time. And that results in web products that annoy rather than offer an enjoyable experience. Or see the diversity of the web as a challenge instead of demanding the CSS specs to change (which is pretty pointless as browser vendors tend to support them with a slight delay of 2-8 years and then it needs users to upgrade). Can you create a design that can work with different screen sizes, font sizes and content in several languages and text encodings? my $,02, chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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 / images in header question
Basically I want to have an image across the top of the content area as shown on the test page. However, the live site is of a fluid design and I am wondering if there is any way to accomplish a fluid design while having a top image. I imagine way to do this is to have the image much wider than is expected to be needed and somehow hide the excess width if the browser window is narrow. Unfortunately I don' t know how to accomplish such a feat. Hi Dale, I've changed your code a little bit based on fluid technique. For the main image on the header if you blend its right side with your selection of background colour, you will achieve that sense of stretch in harmony. I would also love to have random images show up each time, but I realize that is outside of the scope of css. Once I know how to properly get the images displayed with a floating design, I will initially have a different image for each page. Random images might come later :) You are correct. In fact I've used ASP for this example. See my code for random name changes for the header image; http://kalkadoon.net/sandbox/fitness-boot-camps/condition-critical.asp Hope that helps; -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions __ 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] Paragraph links
I am trying to make all the links in my content section to be a
particular color. Since I noticed that all the content is in p
tags, I tried to set the links for p tags to that color. I did:
p a{
color: #1863B5;
text-decoration:none;
}
That seems to work with anything in the second paragraph but not the
first paragraph in this page:
http://hhp.umd.edu/events/systems_thinking/content/
systems_thinking_5.cfm?
q_1=cq_2=bq_3=bq_4=bq_5=bq_6=bq_7=bq_8=bq_9=bq_10=b
The links aren't in the most inner p, but they are in a p
So, I can figure a fix probably, but I'd like to know why it is this
way and then yeah a nice solution would be a bonus.
thanks!
_
Daniel Kessler
College of Health and Human Performance
University of Maryland
Suite 2387 Valley Drive
College Park, MD 20742-2611
Phone: 301-405-2545
http://hhp.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Empty space in image gallery.
Look: http://www.pripisa.sk/ubytovanie/penzion-zeleny-dom--rajecke-teplice-18/ Why is there this empty space in the gallery? 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] IE list padding/border bug
Forwarding this to the list: Thank you, it worked. ¨ Although it caused some other problems, so I'll have to leave it for now. I worked around the problem by setting a border-bottom, which fixes it in IE6, but not IE5. I'm to pressed for time to start altering to much :( Now I'm aware of it though, I'll use it next time. Regards, Eystein On 5/19/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: Eystein Alnaes wrote: http://www.eystein.no/test/xrs/template_main.php The li items in the navigation gets to much padding in IE6. There are a number of ways to fix the gap that appears in IE when you make a elements block, but the one that works most often for me is to set the containing lis to display: inline;. Let us know if that fixes it for you. Zoe __ 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] Layout Done... Now what about content?
I seem to have successfully built my first CSS-only layout, and it's working very well... The page loads are faster and the markup is clean and quite maintainable! I have the list to thank for this. I now have some questions about actual content that will be going into my layouts: 1. I'm still a little unsure about when tables SHOULD be used. For example, we very commonly build forms for data insert/edit in our web apps. Normally, we'd use a two column table, the left cells being for the form field label, and the right cells being used for the form fields themselves. With the CSS-only methodology, am I to abandon the use of tables for form layouts? If so, how do I approach this? 2. What are common content types that YOU have used tables for? In what situations has a table been your only course of action? 3. Has anyone here ever implemented an HTML 4.01 Strict or XHTML compliant template for use with a content management system (where non-technical users are inserting content), and still been able to keep all the pages compliant? If so, what widgets/tools are the non-technical users asked to use, to insert their text/images without destroying compliancy? Thanks again everyone! marc __ 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] 5 column CSS box
On 5/22/06, Jono [EMAIL PROTECTED] wrote: Hi, When using this css for each div, how can I make it so that the divs expand with the size of the text Brian, As neat as it sounds to expand your layout on text resize, you really have to consider your total page size first. My site currently expands when text is resized and depending on how big a visitors needs the text to be, the layout begins to spread beyond a typical 1024x768 viewable area. I was pretty tedious to built (being that it was my first try at a completely tableless design) but definitely a good learning experience. Just keep in mind how much of your layout is going to expand beyond the typical viewable area on resize. Zoom x2 is as big as my site will go at 1024 x 768...OK, but maybe it could be better. creating designs that resize well goes a long way towards improving the accessibility of the web. i suggest setting a pixel font size for the body and using ems for your units of measurement thereafter. that way, everything will be in proportion to that font size, and will get bigger and smaller with the text. for some things, of course, pixels are still fine. it depends on the situation and which part of the design it will affect. i always, always make sure my sites can be resized to at least 2 sizes above their default. accessibility. it's the future. ·skye· __ 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] Drop-down menu Safari wackiness
Hi all... I've created a dropdown menu that works fine on FF/Mac, FF/Win, and IE/Win, but has some weirdness on Safari. Basically, when the menu first drops down, it doesn't display the full width of the menu, but when I roll over the items, they each extend out to the proper length. Then, when I roll off the menu, the extra bit (full length minus length displayed originally) remains on screen until I resize the browser window. Here, look: http://www.gmvoices.com/new The css is here: http://www.gmvoices.com/screen.css Scroll down to the #nav parts. There's gotta be a quick oh-yeah-I'm-a-dumbass explanation here. Thanks, benjy __ 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] floats making rows, not columns.
This page should be something like this:
Featured MagazinesMust Read
Headline
but everything keeps going under Featured Magazines Section.
You can see by yourself @ http://www.alpalp.com/css3/tablecss.html
what is wrong; i've already gave magazines-home float:left and mustread
float:left, so they should be columns, not rows.
any help greatly appreciated.
thanks,
alp
css
.content-main{
width:100%;
border-color:#00;
}
.magazines-home{
float:left;
width:250px;
}
.featuredmags{
background-color:#bed0eb;
width:250px;
}
.mustread{
float:left;
width:100%;
text-align:left;
}
css
cut
div class=content-main
!-- overall magazine block start--
div class=magazines-home
h1Featured Magazines/h1
!-- magazine block start --
div class=featuredmags
!-- repeat 3 times start--
div class=magframe-margin style=float:left;
div class=magimageimg
src=images/mags/national_enquirer.gif width=68 height=90 class=minimag
//div
div class=magframecontentDetails Magazinebr /
span class=magprice$9.97/span
span class=buyrounda href=buy.html
class=buynowBUY NOW/a/span
/div
/div
div class=magframe style=float:right;
div class=magimageimg
src=images/mags/national_enquirer.gif width=68 height=90 class=minimag
//div
div class=magframecontentDetails Magazinebr /
span class=magprice$9.97/span
span class=buyrounda href=buy.html
class=buynowBUY NOW/a/span
/div
/div
!-- repeat 3 times end --
/div
!-- magazine block end --
/div
!-- overall magazine block end --
div class=mustread
h1Must Read/h1
p class=headcontentVogue Magazine bla bla/p
h1Headline/h1
p class=headcontentLorem ipsum bla bla/p
/div
/div
cut
__
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] Empty space in image gallery.
Erik Gyepes wrote: Look: http://www.pripisa.sk/ubytovanie/penzion-zeleny-dom--rajecke-teplice-18/ Why is there this empty space in the gallery? I don't see an empty space - I see 10 thumbnails with space between them - should I see something different? -- Els http://locusmeus.com/ http://locusoptimus.com/ __ 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] Can't get rid of IE margin!
This is driving me nuts! Can someone please tell me why I can't get rid of the margin between the main content and the right column? I thought it was the 3px gap or a has-layout issue, but those didn't help. Pretty please with sugar on top http://www.eystein.no/test/xrs/template_om.php http://www.eystein.no/test/xrs/Public/Styles/default.css http://www.eystein.no/test/xrs/Public/Styles/ie.css __ 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] Layout Done... Now what about content?
I seem to have successfully built my first CSS-only layout, and it's working very well... The page loads are faster and the markup is clean and quite maintainable! I have the list to thank for this. Hello Marc, nice to read, welcome to the 21th century of web standards! 1. I'm still a little unsure about when tables SHOULD be used. For example, we very commonly build forms for data insert/edit in our web apps. Normally, we'd use a two column table, the left cells being for the form field label, and the right cells being used for the form fields themselves. With the CSS-only methodology, am I to abandon the use of tables for form layouts? If so, how do I approach this? I'd use tables whenever I have to display data (information) in a tabular way e. g. timetables, ordered output of a product database, ... means: whenever the information has a certain repetitive structure and can be distributed to more than two columns. Concerning proper building of forms by using CSS have a look at: http://www.webaim.org/techniques/forms/ http://www.websiteoptimization.com/speed/tweak/forms/ HTH Niklas __ 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] Drop-down menu Safari wackiness
benjy rose :: B:COMPLEX Creative wrote: I've created a dropdown menu that works fine on FF/Mac, FF/Win, and IE/Win, but has some weirdness on Safari. Basically, when the menu first drops down, it doesn't display the full width of the menu, but when I roll over the items, they each extend out to the proper length. Then, when I roll off the menu, the extra bit (full length minus length displayed originally) remains on screen until I resize the browser window. http://www.gmvoices.com/new In Fx1.5.0.3/Mac, there is another minor glitch with the dropdown: when I direct the mouse pointer to the last entry, and then back to top, the green headline What Do Brands Sound becomes visible above the drop down. This does not happen in Fx1.5.0.3/PC. Unrelated to this, your page does not validate. Ingo -- http://www.satzansatz.de/css.html __ 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] floats making rows, not columns.
the problem is your width: 100%; here:
.mustread{
float:left;
width:100%;
text-align:left;
}
if you tell it to be 100% width, it is going to bump down until it can
take up the whole 100%. whatever width you specify needs to take into
account the other columns you want.
__
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] Drop-down menu Safari wackiness
benjy rose :: B:COMPLEX Creative wrote:
http://www.gmvoices.com/new
http://www.gmvoices.com/screen.css
http://www.gmvoices.com/new/screen.css
There is this #nav li float with a fixed width of 10em, it is overflown
by its descendant link of 171px width + padding.
This exceeding part keeps visible when the absolute positioned ul collapses.
I think floating the li on the second level is not needed.
#nav li li {float: none;}
seems to fix it here for Safari. Did not test it in the other browsers.
Don't know if this is the kind of answer you was looking for.
Ingo
--
http://www.satzansatz.de/css.html
__
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] Paragraph links
From: Daniel Kessler
I am trying to make all the links in my content section to be
a particular color. Since I noticed that all the content is
in p tags, I tried to set the links for p tags to that color. I did:
p a{
color: #1863B5;
text-decoration:none;
}
That seems to work with anything in the second paragraph but
not the first paragraph in this page:
http://hhp.umd.edu/events/systems_thinking/content/systems_thinking_5.cfm?q_
1=cq_2=bq_3=bq_4=bq_5=bq_6=bq_7=bq_8=bq_9=bq_10=b
The links aren't in the most inner p, but they are in a p
Daniel, the problem is that you're nesting p tags, which is not allowed:
http://www.w3.org/TR/html4/struct/text.html#h-9.3.1
Load your page in Firefox and use either the DOM Inspector, View Source
Chart, or FireBug extensions, and you will see how the browser has
interpreted your HTML. The a elements in question are not inside a p
element at all.
Also try validating your page here:
http://validator.w3.org/
-Mike
__
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] font-stretch / CSS2
I found this as an example on one of the font specification pages
referenced via the font thread email. This would be useful, but appears
to be only implemented in CSS2. As a designer or user how do you
access/force CSS2? Is it even viable at this time?
h2 { font-stretch: expanded; }
__
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] Paragraph links
On May 22, 2006, at 11:19 AM, Michael Geary wrote: That seems to work with anything in the second paragraph but not the first paragraph in this page: http://hhp.umd.edu/events/systems_thinking/content/ systems_thinking_5.cfm?q_ 1=cq_2=bq_3=bq_4=bq_5=bq_6=bq_7=bq_8=bq_9=bq_10=b The links aren't in the most inner p, but they are in a p Daniel, the problem is that you're nesting p tags, which is not allowed: I reformatted question 1 and to me it looks like it's in p tags, but it doesn't work and the way you're saying that it's not in p tags makes me wonder what I'm misunderstanding. The validator also says that I have hanging /p tags, on question 1 (as well as others that I've not tried to correct) and it appears to me that I have an open p so I'm confused. I guess this is also no longer a css question. _ Daniel Kessler College of Health and Human Performance University of Maryland Suite 2387 Valley Drive College Park, MD 20742-2611 Phone: 301-405-2545 http://hhp.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats making rows, not columns.
nooluyo? wrote:
This page should be something like this:
Featured MagazinesMust Read
Headline
but everything keeps going under Featured Magazines Section.
You can see by yourself @
http://www.alpalp.com/css3/tablecss.html
what is wrong; i've already gave magazines-home float:left and
mustread
float:left, so they should be columns, not rows.
I see 3 rows of 2 magazines, and then the div.mustread below
them.
.mustread{
float:left;
width:100%;
If you want div.mustread to be next to div.magazines-home, you
need to take off the 100% width on div.mustread.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
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] 5 column CSS box
skye estes wrote:
creating designs that resize well goes a long way towards improving the
accessibility of the web.
i suggest setting a pixel font size for the body and using ems for your
units of measurement thereafter.
Setting a pixel font-size for the body will prevent Internet Explorer
for Windows (version 6 and below) from resizing the text at all. Better
to use a percentage on the body, although your advice about then using
ems is sound.
Also worthy of note is that IE/Win only supports integer percentages, or
2 decimal places on ems, so for example, consider the following:
body {
font-size: 100%;
}
#wrapper {
font-size: 0.625em;
}
Assuming that the browsers have their factory default settings of 16px
(12pt on IE, which comes out equal to 16px), the above will give a 1em
size of 10px on Firefox, IE, Safari, etc (16 * 0.625).
However, on IE/Win, it will give a size of 9.92px (16 * 0.62).
This means that if you then specify something like
#someblock {
width: 30em;
}
then #someblock will be 300px wide on most browsers, but only 297px wide
on IE. (If I remember correctly; even if my figures are slightly off,
which depends on whether IE remains aware of the 0.92px, it's still
smaller than you would expect.)
Regards,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
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] Paragraph links
From: Daniel Kessler [mailto:[EMAIL PROTECTED] I reformatted question 1 and to me it looks like it's in p tags, but it doesn't work and the way you're saying that it's not in p tags makes me wonder what I'm misunderstanding. The validator also says that I have hanging /p tags, on question 1 (as well as others that I've not tried to correct) and it appears to me that I have an open p so I'm confused. Go get those Firefox extensions I mentioned - they will clear up any misunderstandings! :-) DOM Inspector, View Source Chart, and FireBug will all show you how the browser actually interprets your HTML. There are also a couple of DOM inspectors for IE mentioned here: http://mg.to/2006/04/29/your-body-is-in-your-head This is a section of your latest code as displayed by FireBug: body class=tan div class=margin_15 br/ p /p strong1. When something goes wrong, what is your fir.../strong br/ p /p div class=title I really want to understand what made this happen. /div a target=_parent href=../st_101.cfm?anchor=curiousCuriosity/a a target=_parent href=../st_101.cfm?anchor=curiouscurious/a a target=_parent href=../st_101.cfm?anchor=curiouscuriosity/a As you can see, the a elements are not inside a p element at all. -Mike __ 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] Empty space in image gallery.
It is fixed now, but also thanks for reply. Erik Els wrote: Erik Gyepes wrote: Look: http://www.pripisa.sk/ubytovanie/penzion-zeleny-dom--rajecke-teplice-18/ Why is there this empty space in the gallery? I don't see an empty space - I see 10 thumbnails with space between them - should I see something different? __ 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] floats making rows, not columns.
understood, it's working right now.
but the problem is:
how can i tell the width should be 100%-250px. :)
because left column should be 250 px. and right column should be
whatever there's left screen space.
thanks,
alp
cj wrote:
the problem is your width: 100%; here:
.mustread{
float:left;
width:100%;
text-align:left;
}
if you tell it to be 100% width, it is going to bump down until it can
take up the whole 100%. whatever width you specify needs to take into
account the other columns you want.
__
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] Holy grail and left column jumping
Been developing the Holy Grail code from ALA. Added drop down menu to it which I never had any problem with. In IE, the left column jumps into centre on hovering over the menu Stripped out version is at http://www.iyesolutions.co.uk/templates/new-dol/dol-test.html I would be interested in your thoughts on this one. Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.1/344 - Release Date: 19/05/2006 __ 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] RuthsarianLayouts: Skidoo broken on ie7... oo, that's nice...
http://webhost.bridgew.edu/etribou/layouts/skidoo/demos/two_left_left.html left column background color does not work. wov, i've downloaded this template as a complete css template with all the hacks for different browsers etc, and i see that it is broken on ie7. gonna get a shotgun and kill all the people on internet explorer team... __ 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] Drop-down menu Safari wackiness
On Mon, 22 May 2006 21:55:10 +0800, benjy rose :: B:COMPLEX Creative
[EMAIL PROTECTED] wrote:
I've created a dropdown menu that works fine on FF/Mac, FF/Win, and
IE/Win, but has some weirdness on Safari. Basically, when the menu
first dropsdown, it doesn't display the full width of the menu, but when
I roll overthe items, they each extend out to the proper length. Then,
when I roll off the menu, the extra bit (full length minus length
displayed originally)remains on screen until I resize the browser window.
I had a similar-sounding problem with my menus. I got the solution from
this list, but I've forgotten what it was!
I think it was to style the sub-menu lis as display:inline-block, i.e. for
you:
#nav li {
display: inline-block;
}
However, that caused problems with IE, and I remember spending quite a bit
of time juggling things until I was happy.
HTH,
--
Andrew Gregory, URL: mailto:[EMAIL PROTECTED]
URL: http://www.scss.com.au/family/andrew/
__
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] floats making rows, not columns.
It looks like the width on mustread is set to 100% - too wide to fit
in the available space after the 1st column. Set it to something less than
the page width minus the 1st column. Btw, I find that setting borders on
things really helps to debug problems like this - you can see just what's
going on.
-Ann
- Original Message
From: nooluyo? [EMAIL PROTECTED]
This page should be something like this:
Featured MagazinesMust Read
Headline
but everything keeps going under Featured Magazines Section.
what is wrong; i've already gave magazines-home float:left and mustread
float:left, so they should be columns, not rows.
.mustread{
float:left;
width:100%;
text-align:left;
}
__
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] 5 column CSS box
On 06/05/22 09:54 (GMT-0400) skye estes apparently typed: On 5/22/06, Jono [EMAIL PROTECTED] wrote: Brian Jones wrote Tue May 16: When using this css for each div, how can I make it so that the divs expand with the size of the text One option is to size absolutely everything that needs to be sized using em. None of the following size anything in % or px: http://mrmazda.no-ip.com/indexx.html http://mrmazda.no-ip.com/auth/Sites/dlviolin.html http://mrmazda.no-ip.com/SS/bbcSS.html Note how everything sizes proportionally as long as viewport size and text size are maintained at a reasonable relationship (line lengths in words neither unreasonably long nor unreasonably short). Just keep in mind how much of your layout is going to expand beyond the typical viewable area on resize. Zoom x2 is as big as my site will go at 1024 x 768...OK, but maybe it could be better. creating designs that resize well goes a long way towards improving the accessibility of the web. Exactly. i suggest setting a pixel font size for the body and using ems for your units of measurement thereafter. Setting font-size using px is incompatible with resizing by IE users' resizer widget. Here's what one easily might find on a page following your recommendation: http://mrmazda.no-ip.com/SS/fonts-mezzoblue12.png. Note in the mezzoblue page on IE that the P content is a tiny fraction of the size of the browser UI text, in spite of the text resizer setting largest. So, you can either size in px, or you can, barring other obstacles in your markup and/or CSS, have a page accessibile accessible to all sighted visitors. You can't have both. that way, everything will be in proportion to that font size, and will get bigger and smaller with the text. Except in the most common web browser. for some things, of course, pixels are still fine. it depends on the situation and which part of the design it will affect. Px is easy for you, the designer, but can easily make your result difficult or impossible for your visitor. Sizing in px is not necessary. i always, always make sure my sites can be resized to at least 2 sizes above their default. accessibility. it's the future. The only one of your sites I've seen is http://www.pacifictao.com/, on which IE users' text resizer widget cannot function at all, http://mrmazda.no-ip.com/SS/skyees1.jpg, thus giving it poor accessibility. Accessibility need not and should wait for the future. Most new pages should have it built-in. -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ 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] Problem with Firefox
Hi list, I've made a website and I'm having an issue with firefox that I can't solve. The page in questions is this one: http://work.grillo.tk/vilarigno/produtos.html I have a gap at the foot of the table on the left that I don't know how to solve. Can anyone help me here ? TIA Grillo __ 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] Paragraph links
On May 22, 2006, at 12:02 PM, Michael Geary wrote: Go get those Firefox extensions I mentioned - they will clear up any misunderstandings! :-) alright, I will. This is a section of your latest code as displayed by FireBug: body class=tan div class=margin_15 br/ p /p strong1. When something goes wrong, what is your fir.../strong br/ p /p div class=title I really want to understand what made this happen. /div a target=_parent href=../st_101.cfm? anchor=curiousCuriosity/a a target=_parent href=../st_101.cfm? anchor=curiouscurious/a a target=_parent href=../st_101.cfm? anchor=curiouscuriosity/a As you can see, the a elements are not inside a p element at all. Yeah it seems pretty clear that the p tags aren't in the div through that. It sure looked liked it in the code that I wrote so I'm sure the difference is in it's structure. Can someone point me to a document that describes why the p tags aren't in the divs so that I can understand it better? In the meantime, I'm clearly going to have to have a different implementation. Thanks Michael. -- Daniel Kessler College of Health and Human Performance University of Maryland Suite 2387 Valley Drive College Park, MD 20742-2611 Phone: 301-405-2545 http://hhp.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning Left, middle, right
I am trying to position year, place, and city span containers left, middle, and right respectively. Any idea's? http://936webdesign.com/index.php?option=com_contenttask=viewid=7Itemid=7 Thank you. __ 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] Empty space in image gallery.
Look: http://www.pripisa.sk/ubytovanie/penzion-zeleny-dom--rajecke-teplice-18/ Why is there this empty space in the gallery? Can you be a bit more specific please since the page you're referring to is not in English neither a picture gallery? -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions __ 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] Layout Done... Now what about content?
1. I'm still a little unsure about when tables SHOULD be used. For example, we very commonly build forms for data insert/edit in our web apps. Normally, we'd use a two column table, the left cells being for the form field label, and the right cells being used for the form fields themselves. With the CSS-only methodology, am I to abandon the use of tables for form layouts? If so, how do I approach this? Here is an example approach http://jeffhowden.com/code/css/forms/ 2. What are common content types that YOU have used tables for? In what situations has a table been your only course of action? Purpose of using tables is displaying purely tabular data e.g. statistics And before you have your data lined up for display you should check out Chris's compliant table gallery http://icant.co.uk/csstablegallery/ 3. Has anyone here ever implemented an HTML 4.01 Strict or XHTML compliant template for use with a content management system (where non-technical users are inserting content), and still been able to keep all the pages compliant? If so, what widgets/tools are the non-technical users asked to use, to insert their text/images without destroying compliancy? Yes! I prefer http://tinymce.moxiecode.com/ Hope that helps -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions __ 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] Problem with Firefox
On Tue, 23 May 2006 04:30:35 +0800, Marcelo Wolfgang [EMAIL PROTECTED]
wrote:
I've made a website and I'm having an issue with firefox that I can't
solve.
Also in Opera...
The page in questions is this one:
http://work.grillo.tk/vilarigno/produtos.html
I have a gap at the foot of the table on the left that I don't know
how to solve. Can anyone help me here ?
FYI, height for table cells is effectively a min-height - browsers are
expected to expand the cell height to fit the content. That means Firefox
and Opera are expanding your 4px height to fit the text.
The solution for both (didn't check in IE), is to align the image to the
top:
#c_table_foot img {
vertical-align: top;
}
HTH,
--
Andrew Gregory, URL: mailto:[EMAIL PROTECTED]
URL: http://www.scss.com.au/family/andrew/
__
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] Help with layout.
Im new to css and im looking for help in coding a simple layout. Can someone direct me to some resources of generate a simple example page for me? Im wanting to make my site have this layout: http:/2advent.com:81/CSSLayout1.gif im wanting it to be a centered layout on the browser window. Thanks. -- Chris Jackson 4-Star Trailers Inc. [EMAIL PROTECTED] [EMAIL PROTECTED] __ 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] spacing problem in IE windows
Hello, Having a spacing problem with IE 6.x on Windows. the URL is: http://www.conditioncritical.net/test.php the CSS is: http://www.conditioncritical.net/css/test.css The spacing 'problems' are with the top random image along the top, there is more white space in IE that doesn't appear in FireFox or Opera (both win). also, I had set 15px of space to the right so that the green background should show up, works in FireFox and Opera but not in IE. it works well in Safari 3.0.3 and IE 5.2 both on Mac. I'm stumped! Any suggestions? Thanks Dale __ 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] Problem with Firefox
On May 23, 2006, at 5:30 AM, Marcelo Wolfgang wrote: The page in questions is this one: http://work.grillo.tk/vilarigno/ produtos.html I have a gap at the foot of the table on the left that I don't know how to solve. Can anyone help me here ? Have you considered using a real html table for building this? That would make *much* more sense... The problem of that 'gap' is coming from the font-size on that div, which has a computed value of 16px; add the line-height to that, and that box has a real height much larger that the 4px you assigned. Gap is visible in Gecko, Safari, Opera, iCab. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ 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] Positioning Left, middle, right
Travis,
On May 22, 2006, at 7:08 PM, Travis Killen wrote:
I am trying to position year, place, and city span containers left,
middle, and right respectively. Any idea's?
http://936webdesign.com/index.php?
option=com_contenttask=viewid=7Itemid=7
First think about your data. Divs and spans are the elements of last
resort as they are generic and communicate nothing about the
relationships of these bits of data. Also, id attributes must be
unique, i.e. 1 per page. Given that, you should change id=year to
class=year. I would thinks about something like this...
--- html ---
ol id=workhistory
li id=mostrecent
ul class=employer
li class=serviceyears2005 - /li
li class=locationNacogdoches, TX/li
li class=name936 Web Design/li
/ul
h3 class=jobtitleCompany Owner/h3
ul class=duties
liSetup and maintain database driven web sites./li
liManage DNS services./li
/ul
/li
!-- repeat as needed --
/ol
- css
#workhistory li { display: block; border: 1px solid black; }
#workhistory li li { border: none; }
.employer { display: block; border-bottom: 1px solid black; text-align:
center}
.serviceyears { float: left; }
.location { float: right; }
There's some interesting examples over at microformats.org. This code
is not tested, but should get you started. Getting the html right is
fundamental because the css will be 'unstable' until the html is well
in hand. I don't even want to think about the number of times I've had
to rewrite my css because I changed my mind about what the html should
be :-)
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] Can't get rid of IE margin!
Eystein Alnaes wrote:
Can someone please tell me why I can't get rid of the margin between
the main content and the right column?
http://www.eystein.no/test/xrs/template_om.php
I have no idea, and no time to look for the correct bug.
However, a little re-styling in the IE-stylesheet seems to make it work
as you want. Just add...
#secondary_info {width: 272px; float: right; margin-left: -3px;}
...and see if that does it for IE at your end.
BTW: you have forgotten to test/provide for any degree of 'minimum font
size', 'ignore font sizes' and other user options. Makes it look a bit
weak in all my browsers, and creates float-drop in IE/win.
regards
Georg
--
http://www.gunlaug.no
__
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/
