[css-d] Browsers, doctypes, quirks mode and stuff
Hello all, I really thought I was going well, persevering to try and learn web building doing it the CSS way, instead of succumbing to tables, but, today I feel like giving up. Ive been going back and forward testing my pages between IE7 and FF and trying to sort out spacing differences etc and after much trial and error, had it pretty much sorted, with a few minor differences that I could live with (forgetting about the background image placement thing). But I just had a look at the site in IE6 and there are quite a few spacing differences. I thought that as long as you had a proper doctype in there, it should display ok in IE6. I have a strict html 4 doctype in there. Then I tried a transitional doctype in there and it changed again - not only in IE6, but the recent browsers as well. And I havent even looked at IE5 yet. Where do I start to fix the differences in IE6 - and is it common for it to display differently even with a valid doctype? I think its been a long day... The site address is www.idccolourfield.com Regards Fiona __ 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] image placement bottom
I'm really having trouble trying to get the background image positioned at the bottom of the div. Please excuse me if the answer is obvious, but I haven't tried this before and Ive searched on Google to try and figure it out, but Im just getting confused. I think the bg image is lining up with the bottom of the content of the div but not the actual bottom. Ive posted a test page with the styles in the head to make it easier to see. www.idccolourfield.com/positiontrial.html Thankyou in advance for any help Fiona __ 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] Browsers, doctypes, quirks mode and stuff
I've figured out what some of the problem is - Ive had my first experience with the IE double-margin bug. IE6 was doubling the margins on both sides of the page, as I have a float right and a float left both with margins. I put display: inline into the div and it cleared it. Regards Fiona __ 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] Explorer bug or poor css technique?
Clearly I accidentally sent that message to the list as well as to David (I forgot that I have an automatic filter to add the list's address to any email with [css-d] in the subject). Apologies if the discussion was drifting too off-topic for the list. -- Rick Lecoat -- **ORIGINAL MESSAGE** Received from Rick Lecoat on 18/7/07 at 19:07(London time): Thought I'd send this off-list as it's starting to get off-topic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Inline Form align problem
Hi list.
I'm having a problem with IE6/IE7.
I have a login form, in inline mode.
In Firefox is working OK.
But in IE 7, and IE 6, it's not.
The fields need to be side by side, in one line.
But in IE, they get one field each line.
Firefox: http://papillon.cenadigital.com/site/firefox.jpg
IE: http://papillon.cenadigital.com/site/ie.jpg
In IE 7 I have an other problem in the same form, the background image
is not fixed.
If it put fixed in background CSS, the background do not work.
I have tried everything... position: relative, absolute, fixed,
display: inline, block, in a lot of css, but nothing. In IE I only got
the wrapped form.
Someone know how can I fix it? Or an other sollution? Maybe only tables.
HTML code:
div id=userbox
div class=login
form
fieldset
legendLogin VipDigital:/legend
label for=usernameUsuário:/label
input type=text name=username class=user /
label for=passwordSenha:/label
input type=password name=password class=pass /
input name=submit type=submit value=entrar
class=submit /
/fieldset
/form
/div
/div
CSS Code:
#userbox {
position: relative;
float: right;
width: 487px;
height: 28px;
background: url(userbox_bg.gif) repeat-x top left;
}
#userbox .login {
position: relative;
padding-left: 90px;
float: left;
width: 83px;
height: 28px;
background: url(vipdigital.jpg) no-repeat top left;
}
#userbox fieldset {
position: relative;
display: inline;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#userbox legend {
display: none;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#userbox label {
display: none;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#userbox .user {
margin-top: 6px;
font-size: 70%;
width: 71px;
height: 12px;
border-style: none;
padding-left: 50px;
padding-top: 1px;
padding-down: 1px;
padding-right: 3px;
border: none;
background: transparent url(login_userbox.gif) no-repeat;
_background: transparent url(login_userbox.gif) no-repeat fixed;
}
#userbox .pass {
margin-top: 6px;
margin-left: 6px;
font-size: 70%;
width: 71px;
height: 12px;
border-style: none;
padding-left: 50px;
padding-top: 1px;
padding-down: 1px;
padding-right: 3px;
border: none;
background: transparent url(login_userbox.gif) no-repeat;
_background: transparent url(login_userbox.gif) no-repeat fixed;
}
--
Rafael Henrique da Silva Faria
# Grupo Cena Digital
# (16) 9229-8928
# www.cenadigital.com.br
__
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] image placement bottom
Fiona; A few points: 1) your markup does not currently validate, although I don't think that the errors flagged have any bearing upon your image placement issues. Still, it's always good to get the markup squared away before trying to fix other stuff, if possible. 2) your #maincontent div and your #rightportfolio div are not of equal height. #maincontent has a specified height of 530px, whilst #rightportfolio does not have a specifically declared height. This means that you are /never/ going to get the background image for #maincontent to reliably line up with the lower image (bamboodle) in #rightportfolio because the heights of the two divs are unrelated to each other. 3) The background image in #maincontent *is* in fact positioned at the bottom of the div as far as I can tell; I guess the div ends slightly before the point that you /think/ it does. Best thing I can suggest at this point is to use the Developers Toolbar in firefox and, from the tools that it provides, choose Outline Outline block elements. This will give you a much clearer view of how your divs are laid out and how they affect (or don't affect) each other. You might want to consider wrapping both #maincontent and #rightportfolio in a containing div and applying the background image to /that/. You would need to experiment with different ways to ensure that the text of #maincontent did not encroach upon the image, if that is important to you, but presumably that will be an issue in your current design anyway. Hope this helps; -- Rick Lecoat -- **ORIGINAL MESSAGE** Received from Fiona on 19/7/07 at 00:00(London time): Could anyone tell me how I would get the watermark image on this page - www.fionahayward.com/interiordesign to sit at the bottom of that div - in line with the rightportfolio div? __ 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] problems with the footer position
Hello I got a problem with my footer,
I would like it to be at the bottom of the page in any page, the problem is
that I can't fix. It always stays a the end of all div's, and
couldn't find anything to get it in a the position I want.
I try with the position relative, absolute,... and nothing.
Now, with this configuration I fix it at the bottom of the page for IE 7 and
firefox 2.0 but not for IE6, I really don't know how I can repair it!
I saw in Zengarden that the footer do the same when the content is smaller
than the page...
but it's an informal web and I need to get all the height of the window (
client rules ;-) )
do any of you have a solution??
thanks
HTML Footer
div id=footer
div id=foot(c) text2007. Derechos reservados Powered by text.
2007/div
div id=validators
ul
li
span id=estilos
a href=http://jigsaw.w3.org/css-validator/;
img src=
http://jigsaw.w3.org/css-validator/images/vcss; alt=ValidCSS!
/a
/span
/li
li
span id=access
a href=http://www.w3.org/WAI/WCAG1AA-Conformance;
title=Explicación del Nivel Doble-A de Conformidad
img src=http://www.w3.org/WAI/wcag1AA;
alt=Icono de conformidad con el Nivel Doble-A, de las Directrices de
Accesibilidad para el
Contenido Web 1.0 del W3C-WAI/a
/span
/li
/ul
/div
/div
CSS
#footer
{
padding-top:00px;
clear:both;
width: 769px;
bottom: 0px;
height:40px;
margin-bottom:0px;
line-height:30px;
border-bottom:1px #D3D3D3 dashed;
}
#foot
{
text-align:left;
float:left;
font-size:70%
}
#validators {
text-align:right;
float:right;
}
__
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] HTML and CSS Validators
Doing most of my daily work behind a firewall and usually not having an option to put my file in a public place, I find myself looking for a CSS and XHTML validator that I can install behind the firewall. Currently, validation is an intensive eyeballs on the source code effort. Any suggestions for tools that I can install that do not reach out through the firewall would be a great time-savings (and eyeball saver). __ 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] problems with the footer position
I think we are going to need a bit more information than just the CSS and markup of the footer. Test page online would be better. BR Arno __ 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] Un-wanted space around images
I want six thumbnails of the same size lined up horizontally to be touching each other. They do until I create a link out of each of them. A white space appears around them: 2-4px wide. How do I prevent that? I have 3 rows of 6 images and I want to create a solid block. Each individual thumb can be clickable to show the larger image. No space between the images wanted. TIA __ 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] Flash banner floating issue [Firefox]
The problem occurred with the CMS we are using (Tridion), which outputs ID tags which are incompatible with CSS spec such as starting class names with numbers,etc. Putting the style inline fixes the problem! Thanks, Martin Update on this The bug was with SWFObject, and the 'salign=left' parameter not working correctly. It wasn't actually CSS related issue. Changing to the 'UFO' method of embedding corrected the issue. Thanks for the help Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.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] HTML and CSS Validators
What browser are you using? There are plugins for firefox and safari Chris Blake: Visit my Website at 3 Point contact | [EMAIL PROTECTED] - 07816163420 | aim - blakeybounce | msn - [EMAIL PROTECTED] On 19 Jul 2007, at 15:26, Gillespie, Michael A wrote: Doing most of my daily work behind a firewall and usually not having an option to put my file in a public place, I find myself looking for a CSS and XHTML validator that I can install behind the firewall. Currently, validation is an intensive eyeballs on the source code effort. Any suggestions for tools that I can install that do not reach out through the firewall would be a great time-savings (and eyeball saver). __ 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] HTML and CSS Validators
hi On 7/19/07, Gillespie, Michael A [EMAIL PROTECTED] wrote: Doing most of my daily work behind a firewall and usually not having an option to put my file in a public place, I find myself looking for a CSS and XHTML validator that I can install behind the firewall. firefox has an extension for HTML validation: https://addons.mozilla.org/en-US/firefox/addon/249 with CSS i think you need to go to w3c [unless you want to program your own extension to do this]. but there is a file upload interface that may work for you: http://jigsaw.w3.org/css-validator/#validate-by-upload -- \js [ http://or8.net/~johns/ ] __ 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] Un-wanted space around images
I want six thumbnails of the same size lined up horizontally to be touching each other. They do until I create a link out of each of them. you may only be styling the img; if they're links, you'll need to style the a as well (which would explain why it happens when you make them links) joel __ 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] Positioning Issues with CSSPlay Simple Photo Gallery
Good morning. I'm attempting to implement Stu Nicholl's (CSSPlay) Simple Photo Gallery in my current project. Unfortunately, it does not seem to be working correctly and I have not been able to determine the exact reason, nor the fix. This is the working live example from CSSPlay: http://www.cssplay.co.uk/menu/photo_album.html This is my live test: http://www.lostinxlation.net/sandbox1/gallery.html This is my live test css: http://www.lostinxlation.net/sandbox1/testcss.css If you try using it in my test version, you'll see that the large image lines up in the box where it should be when you click on 1. When you click on 10 it aligns properly horizontally, but pushes downwards. When you click on any other number, the image pushes towards the right, and down when selecting any number in the bottom row. If anybody can shed some light on the situation, I would really appreciate it. Thank you in advance for your time and attention. ~~J. [EMAIL PROTECTED] __ 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 bug - combo popup listbox cropped horizontally
Hi, I have a select element with a specified width of 200px. Some of the options in the listbox are wider than 200px. In Firefox the list expands and it is wider than the select element, but in IE6 the list remains 200px wide, so the list items appear cropped on the right. I have found this is a bug [1]: Internet Explorer 6 - For limiting the width of select (combo boxes), it ignores the setting of the max-width CSS property. Nevertheless the width property works, but unlike Firefox, the popup listbox of the combo will be cropped horizontally. But I don't know if there's is a way to fix it... Any help will be appreciated. Thanks a lot. [1] http://css-discuss.incutio.com/?page=FormElements __ 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] HTML and CSS Validators
I use IE and FF. I use the FF plugins both at work, and at home. The problem with them is that they use the W3C vaildator, which cannot pull the sites from behind the company firewall. I am an applications developer, so all the XHTML code is rendered at runtime. Due to the sensitivity of the data in the apps, uploading to the W3c or any other internet service is not an option. So, I need something inside the firewall that I can use. Dreamweaver has it's own validator, and it is pretty good, but in order to use it, I have to view source, save as html, open that in DW and then validate..so no easy solution... M I may not have gone where I intended to go, but I think I have ended up where I intended to be. -Douglas Adams From: Christopher Blake [mailto:[EMAIL PROTECTED] Sent: Thursday, July 19, 2007 10:11 AM To: Gillespie, Michael A Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] HTML and CSS Validators What browser are you using? There are plugins for firefox and safari On 19 Jul 2007, at 15:26, Gillespie, Michael A wrote: Doing most of my daily work behind a firewall and usually not having an option to put my file in a public place, I find myself looking for a CSS and XHTML validator that I can install behind the firewall. Currently, validation is an intensive eyeballs on the source code effort. Any suggestions for tools that I can install that do not reach out through the firewall would be a great time-savings (and eyeball saver). __ 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] HTML and CSS Validators
Now this I can use for an html validator. Wonder how I missed it. THANKS! M I may not have gone where I intended to go, but I think I have ended up where I intended to be. -Douglas Adams -Original Message- From: john saylor [mailto:[EMAIL PROTECTED] Sent: Thursday, July 19, 2007 10:13 AM To: Gillespie, Michael A Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] HTML and CSS Validators hi On 7/19/07, Gillespie, Michael A [EMAIL PROTECTED] wrote: Doing most of my daily work behind a firewall and usually not having an option to put my file in a public place, I find myself looking for a CSS and XHTML validator that I can install behind the firewall. firefox has an extension for HTML validation: https://addons.mozilla.org/en-US/firefox/addon/249 with CSS i think you need to go to w3c [unless you want to program your own extension to do this]. but there is a file upload interface that may work for you: http://jigsaw.w3.org/css-validator/#validate-by-upload -- \js [ http://or8.net/~johns/ ] __ 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] Positioning Issues with CSSPlay Simple Photo Gallery
Hello,
Somewhere those relative positioning and top/right coordinates go wrong i
think.
Hmmm maybe change the pics to be based on absolute positioning instead of
relative.
The li elements and a elements are relative, and u probably dont want to
base your pic elements off of that position, but of the ul parent that all
the images/li's have in common. So you can base your position based off that
by stetting that .gallery to relative and the child elements li/a under it
to static, but the img as absolute positioning
(Btw i set those li and a elements to regular static positioning cause
another general rule overrides it to relative.)
.gallery li {
.
position:static;
}
.gallery li a, .gallery li a:visited {
..
position:static;
}
.gallery li a img {
position:absolute;
top: 70px;
left: 0px;
...
}
Tried it in Firefox and worked, not sure of IE. good luck.
Arian
__
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] footer that 'sticks' at the bottom
Thanks all, I think these IE expression hacks are always nasty but just what I'm looking for. Thanks :) __ 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] Un-wanted space around images
Can u post a simple test example with just a row of (I assume floated?) a and img html, and styles for those 2. BUTTT be4 that, i have a feeling the whitespace is causing issue if u r not floating them. like the returns between these will cause whitespace img/ img/ img/ Try this... img/img/img/ __ 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] HTML and CSS Validators
On 19/07/07, Gillespie, Michael A [EMAIL PROTECTED] wrote: Doing most of my daily work behind a firewall and usually not having an option to put my file in a public place, I find myself looking for a CSS and XHTML validator that I can install behind the firewall. http://validator.w3.org/docs/install.html http://jigsaw.w3.org/css-validator/DOWNLOAD.html -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] css organization - (divide and conquer) or not?
I was wondering what is best You already know this could be a Ford vs. Chevy post, but here is what time has taught me. Unorganized is not the way to go. It will cost you even during the initial development if it isn't organized. This is what shook out from my experience: A, I have one main style for the entire site. Internally it is organized by: 1. Classes that apply to the entire page. 2. Next the body and containing page. 3. Next the individual areas that apply to each page such as header, content, columns, footer. They are arranged in the order of the page. That way I know if I want to change something in the footer main content. In the columns I have main1, main2, main3 based on if the page uses a 1 column, 2 column, or 3 column layout as the content will vary in width. By handling all of the elements in a certain area, you don't need to be concerned with inheriting something from another area. 4. At the bottom of the main css are the use everywhere styles such as content wrappers etc. B. CSS horizontal and vertical navs and anything reusable are in separate css files so you can just copy them to new sites. C. I have a whatever.css file and another one name whatever_ie.css and a conditional comment in the top of each page. I've learned it's too difficult to maintain by function and creative names. If you have a color with a cute name that applies to multiple elements in different areas on the site, you can never be sure what the impact will be. Moreover, if you change say the color of a certain area, there are normally other things that need to change as well such as text color etc. Using my method, you simply locate the area you want to change, and the elements will all be there to remind you what all else might need to be changed or why what you were contemplating doing isn't such a good idea after all. __ 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 Please
Hey everyone, I just released my site for my design studio, if anyone is willing, can you test it out? I'm pretty much looking for visual errors. (I tested it in pretty much everything standard on a PC, but no mac or linux). I would also love any other feedback (if OT, please keep off-list) you may offer. I have plenty of experience with standards and CSS/XHTML and usability, but we can all learn more! http://www.phazm.com/ Thank You, - Jon Hughes __ 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] Un-wanted space around images
hmm seems like u didnt try the suggestion?, get rid of the whitespace between the a /a __ 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] Cross-Post Accidental
I did not intend to cross-post Site Check Please - If you are replying to all please ensure you are only replying to the group you are on. Thank You, - Jon Hughes __ 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 Please
Jon Hughes wrote: I just released my site for my design studio, if anyone is willing, can you test it out? I'm pretty much looking for visual errors. (I tested it in pretty much everything standard on a PC, but no mac or linux). http://www.phazm.com/ - Jon Hughes re: safari/camino Nice visual. In the nit-picking category: -- Short page shift at upper screen resolution -- A little breaking of your name and the top paragraph and the footer at +2 --No page title or navigqation if images are disabled Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Basic CSS question
Julian Tulip's Licorice wrote:
I am trying to learn some of the little things i missed, so sorry if this
seems like a silly question.
The list is here to answer questions for those of all walks of life so
no apology necessary :)
But I see this sometimes:
form#search {color: #fff;}
The hash is right up against the form, and my understanding is the result is
different than the former example? why is the space removed and what does
this do?
form #search {color: #fff;} /* This will make any element with an id of
'search' render with white font if it is in a form element */
form#search {color: #fff;} /* This will make any element with an id of
'search' that is, itself, a form element render with white font */
I find this most useful with classes since there are, conceivably, some
class names that you'd like to re-use if appropriate such as:
class='last'
class='first'
class='clear'
etc.
Qualifiers add a way of targeting these elements without having to add
an id / class to a higher level container (thus resulting in cleaner code).
--
Thanks,
Jim
__
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] Basic CSS question
On Thu, 19 Jul 2007, Julian Tulip's Licorice wrote:
I understand descendant selectors:
#main p {color: #fff;} - inside the 'main' div the p will be white.
Yes. (Or, more exactly, inside the element with id=main, _any_ p
element will have white text color.)
But I see this sometimes:
form#search {color: #fff;}
The hash is right up against the form, and my understanding is the result is
different than the former example? why is the space removed and what does
this do?
The selector form#search means the form element that has the attribute
id=search. If it were form #search, it would mean the element that
occurs inside some form element and has id=search. Thus, the meaning
is quite different.
Since id attribute values shall be unique in a document, the selector
#search would suffice. The reason for writing form#search is partly a
matter of style (and it may look more descriptive when reading the CSS
source). Technically, it has higher specificity that #search, and this may
matter when several declarations apply to the same element.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
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] Un-wanted space around images
hmm seems like u didnt try the suggestion?, get rid of the whitespace between the a /a A closing tag like br /? I have never seen img/ before. imgimg/? __ 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] Un-wanted space around images
your code between 2 images looks like this:
a id=thumb1 href=tiles/32dd.jpg class=highslide onclick=return
hs.expand(this, {captionId: 'caption1'})img src=tiles/slices/32dd.jpg
alt= border=0 height=300 width=70/a!GET RID
OF THIS 'in between' SPACE!!
a id=thumb1 href=tiles/33q_454378.jpg class=highslide
onclick=return hs.expand(this, {captionId: 'caption1'})img
src=tiles/slices/33q_454378.jpg alt= border=0 height=300
width=70/a
change to:
a id=thumb1 href=tiles/32dd.jpg class=highslide onclick=return
hs.expand(this, {captionId: 'caption1'})img src=tiles/slices/32dd.jpg
alt= border=0 height=300 width=70/aa id=thumb1
href=tiles/33q_454378.jpg class=highslide onclick=return hs.expand(this,
{captionId: 'caption1'})img src=tiles/slices/33q_454378.jpg alt=
border=0 height=300 width=70/a
This is only easy way i know how to do it, unless u want to 'float' the
images.
Btw... yes image tags should be closed exactly like br /, what is 1 thing
which makes XHTML what it is, closing 'single' elements properly.
img src=tiles/slices/33q_454378.jpg alt=myImage /
br/
Arian
__
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] Drop Shadow Technique... Issues in IE7 only...
Hello! I'm hoping someone has a clue for me. I'm using a drop shadow technique that is found here: http://aranea.zuavra.net/index.php/52/ I wanted an all 4 sides drop shadow that would expand/contract on a fluid site. In IE7, the SE and SW corners stick out some from the bottom, and I can't figure out why! Any ideas? Here's the site where the drop shadows are being utilized: http://www.cherryzen.jadetrue.com/ Thanks! Jade True www.sagefish.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Form background problem
Hi.
I'm new in CSS... always used table.
Now I'm having a big problem with a form field, and IE 6/7.
My form field (input) have a rounded background image with a text:
Something like: username: [__]
In firefox, I put the image in background, and a padding-left of 50
pixels... so the text of input it write in the correct space... and
when the text is bigger then the space, the text stey in the correct
space. But in IE the text get in front of username in image.
In IE 7, the fixed option don't work for the background... so the
image scroll with the text... So I needed to put a top right.. and
the background istay fixed.
But the text is in front of the image... it do not respect the padding pixels.
Is any correction for this? or is a problem with IE, and cannot be corrected?
#userbox .user {
margin-top: 6px;
font-size: 70%;
width: 71px;
height: 12px;
border-style: none;
padding-left: 50px;
padding-top: 1px;
padding-down: 1px;
padding-right: 3px;
border: none;
background: transparent url(img/login_userbox.gif) no-repeat;
*background: transparent url(img/login_userbox.gif) no-repeat top right;
_background: transparent url(img/login_userbox.gif) no-repeat fixed;
}
--
Rafael Henrique da Silva Faria
# Grupo Cena Digital
# (16) 9229-8928
# www.cenadigital.com.br
__
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] IE 6.02 Windows not showing style sheet
On Mon, 16 Jul 2007 21:33:08 -0400, Tracy Lee wrote: Could someone test out the following site with IE on Windows and let me know if they are getting the style sheet to display. http://www.fitwithmichael.com If it isn't, does anyone know why it wouldn't? On Jul 17, 2007, at 10:53 PM, David Hucklesby wrote: Internet Explorer on Windows does not handle @import rules that specify media correctly. This seems to apply to all versions, including IE 7. How can I fix this? Strange part is, it was working fine before and all I did was move it to it's own domain, same server. Weird. TIA, Tracy Lee __ 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] Firefox magin bug? workaround for margin collapse doesn't work
Hi, this is the first time I stumble on margin problem in Firefox
(all gecko browsers actually), although I can re-work my markup to
make it work the way I wanted, but I really like to know what the
problem is with this issue and if there is a fix for it.
First I thought it was margin collapse bug but after some testing and
and reading on articles I found from google search, I still can't
make it works.
The codes that are in question are in the comment area
http://zhujili.com/index-new.html
ol
li class=msg_left1/li
li class=posterJohn Doe on Jul 7, 11:34 AM/li
li class=msgpcomment here/p
/li
/ol
the '1' and 'John Doe on Jul 7, 11:34 AM' should stay in one line
where the '1' is floated left. Safari, Opera and IE obey the rule
however in Firefox, the John Doe... is being pushed away exactly
51px to the right.
#comments li {margin-left:96px; /* because the gray background image
is 96px wide}
#comments li.msg_left {
background:#cc8c0b;
padding:5px;
float:left;
width:30px;
margin-left:51px; /* this one is causing the problem in Firefox but
I need this declared because I wanted the the box stay 51px away from
the left */
}
I thought it was margin collapse bug and had tried adding 'border'/
padding to elements (one at a time) that are associated to the
comment area, none of them work.
Your help is greatly appreciated!
tee
__
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] Firefox magin bug? workaround for margin collapse doesn't work
On Jul 20, 2007, at 7:00 AM, Tee G. Peng wrote:
Hi, this is the first time I stumble on margin problem in Firefox
(all gecko browsers actually), although I can re-work my markup to
make it work the way I wanted, but I really like to know what the
problem is with this issue and if there is a fix for it.
First I thought it was margin collapse bug
Horizontal margins never collapse.
[...]
http://zhujili.com/index-new.html
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
(one could argue about the semantics of your list construction, but
css-d is not the place for that).
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=163110
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox magin bug? workaround for margin collapse doesn't work
On Jul 19, 2007, at 6:15 PM, Philippe Wittenbergh wrote:
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
Philippe, thanks for the timely response. Was about to give up this
and use another way to make it work by moving the margin left to 'ol'
and than hack the paddings/margins in the li classes.
See this, almost close (still need a few tweaking to make it pixel
perfect) but not very desireable for me as I needed to add an empty
div for the bottom background image. Not a pretty sight for the last
comment box also.
http://zhujili.com/index-new2.html
somthing like this:
#comments ol {margin-left:50px;}
#comments li.msg {background:#272A2B url(images/curve.jpg) no-
repeat right bottom;
margin-left:47px;}
Another way I could make it work is structure as such
li class=posterspan class=number1spanJohn Doe on Jul 7,
11:34 AM/li
li class=msgcomment here/li
Ok, for learning's sake, which one could be more desirable as far as
CSS coding concerned?
The mozilla proprietary is a quick fixed and a good trick for me to
learn but it's a hack after all isn't that? I read posts from the
bugzilla link you provided, it's an old bug still not being fixed, so
is there good to use the hack and hoping that one day it will get
fixed?
Thanks also for the comment on the list construction not being
semantic, how embarrassing for me you will say that as I just told
someone again semantic markup goes hand in hand with css coding
again, I will ask the question but can you kindly move your chair
180% degree facing the wsg list so that you can give me your thought
and opinion?
Many thanks!
tee
__
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/
