Re: [css-d] css-d Digest, Vol 81, Issue 19
I will be away from the office for the two weeks between August, 15 2009 and August, 30 2009. If you require immediate assistance, please contact Visual Lizard at (204) 957-5520 and follow the voicemail instructions. Thank you, and I will talk to you when I return. Ross __ 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] css-d Digest, Vol 81, Issue 17
I will be away from the office for the two weeks between August, 15 2009 and August, 30 2009. If you require immediate assistance, please contact Visual Lizard at (204) 957-5520 and follow the voicemail instructions. Thank you, and I will talk to you when I return. Ross __ 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] css-d Digest, Vol 81, Issue 16
I will be away from the office for the two weeks between August, 15 2009 and August, 30 2009. If you require immediate assistance, please contact Visual Lizard at (204) 957-5520 and follow the voicemail instructions. Thank you, and I will talk to you when I return. Ross __ 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] css-d Digest, Vol 81, Issue 15
I will be away from the office for the two weeks between August, 15 2009 and August, 30 2009. If you require immediate assistance, please contact Visual Lizard at 957-5520 and follow the voicemail instructions. Thank you, and I will talk to you when I return. Ross __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] list elements in ie6
Hi,
I am creating a vertical DD menu, and IE 6 does not like this. It outputs
the list like a set of steps/stairs
Menu item1
Menu item2
Menu item3
Can anyone tell me what the selector should be? I have sorted this in other
projects by defining the list element and the anchor separately (in 2
definitions) but this just seems WRONG. Is there a way to fix this for IE?
ul#mainMenu li a{
float:left;
clear:none;
padding-right:20px;
height:25px;
display:block;
text-align:center;
text-decoration:none;
color:#7f7a26;
font-weight:bold;
padding-left:20px;
font-size:12px;
padding-top:5px;
}
R.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 absolute positioning bug
I have a problem with my #home #middleColum totally disapearing in IE6. Any
ideas why? Thanks.
The CSS
@charset utf-8;
/* CSS Document */
body {
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#FF;
/*background-image:url(../images/bodyBg.gif);*/
}
#container {
width:100%;
height:200px;
float:left;
position:relative;
}
#leftSide{
position:absolute;
left:0px;
top:0px;
width:135px;
height:800px;
padding-left:35px;
padding-top:100px;
background-image:url(../images/leftSide.gif);
}
#rightSide{
position:absolute;
width:300px;
height:800px;
background:url(../images/rightSide.gif) no-repeat;
left:690px;
padding-left:20px;
padding-top:240px;
}
#rightSide ul{
padding:0;
margin:0;
list-style:none;
font-size:11px;
color:#FF;
}
#rightSide ul a{
text-decoration:none;
color:#FFF;
}
#home #middleColumn, #history #middleColumn, #philosophy #middleColumn,
#contact #middleColumn{
position:absolute;
top:0px;
left:170px;
width:520px;
height:600px;
background-color:#00;
background-image:url(../images/mainMiddle.jpg);
display:block;
}
#courses #middleColumn, #ptCourses #middleColumn, #ftCourses #middleColumn,
#shortCourses #middleColumn, #postgradCourses #middleColumn{
position:absolute;
left:170px;
float:left;
width:520px;
height:600px;
background-image:url(../images/courseMiddle.jpg);
}
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleMary Reid School of Beauty/title
link rel=stylesheet type=text/css href=css/maryReid.css
/head
body
div id=container
div id=leftSide
ul id=mainMenu
li class=schoolButtona href=#/a/li
li class=coursesButtona href=#/a/li
li class=opportunitiesButtona href=#/a/li
li class=newsButtona href=#/a/li
/ul
/div
/div
div id=middleColumn
div id=content
h1Intro Text. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus vehicula justo sed enim. Maecenas tempus laoreet leo.
Vestibulum sit amet est vitae pede consequat convallis./h1
h2Lorum Ipsom/h2
p
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
porttitor sapien sollicitudin lorem. Cras lacinia blandit felis. Aliquam erat
volutpat. Nullam viverra aliquam neque. Nunc neque ante, tincidunt sit amet,
feugiat ac, aliquet sit amet, arcu. Vestibulum iaculis, lorem at nonummy
lobortis, nisl massa pulvinar odio, ut fermentum enim lacus id elit. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Vivamus eu lacus. Maecenas nisl. Suspendisse massa. Nam turpis quam,
pulvinar vel, adipiscing eget, vulputate in, urna. Donec vehicula quam quis
pede./p
/div
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer disapears in ie 6
Hi, My footer disapears in IE6. It seems to happen when my #container is reduced to 800px. Any ideas why? Thanks, R. http://vps.aztechost.co.uk/~suruch1/test/ http://vps.aztechost.co.uk/~suruch1/test/css/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] should I worry about the warnings?
Hi, My CSS validates, however I get loads of warning http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwallacewhittle.comwarning=1profile=css21usermedium=all Generally they are Same colors for color and background-color in two contexts Should I be looking to eliminate the warnings if so how because I want the text and the container div to be white? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] iepngfix disables my links
when I apply the iepngfix.htc in my css with the line
div{
behavior: url('css/iepngfix.htc');
}
all the links become inactive. Does anyone have any idea why this happens? I am
using and old version of the .htc?
http://suruchirestaurant.com/test/css/iepngfix.htc
http://suruchirestaurant.com/test/index.php
Thanks,
R.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] iepngfix disables my links
No it is correct as the fix is applied (the shadow border is a transparent
png IS transparent). It just seems to knock out the links.
R.
- Original Message -
From: Ian Young [EMAIL PROTECTED]
To: Ross Hulford [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Friday, October 12, 2007 10:00 AM
Subject: Re: [css-d] iepngfix disables my links
iepngfix.htc');
}
all the links become inactive. Does anyone have any idea why this
happens? I am using and old version of the .htc?
http://suruchirestaurant.com/test/css/iepngfix.htc
http://suruchirestaurant.com/test/index.php
Thanks,
Hi Ross
You have called the htc file from css/iepngfix.htc.
Shouldn't this be ('./iepngfix.htc') as the fix is in the same folder as
the CSS?
Or have I missed something?
Ian
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.488 / Virus Database: 269.14.8/1064 - Release Date:
11/10/2007
15:09
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
cuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] newbie questions
Hey everyone. I'm new to the css-discuss community. Thanks for helping me with these two super-simple newbie questions. I use DW8. 1. On this page http://adswebsite.net/yahoo-search-versus-google-adwords, on the right column where it says More AdsWebsite Guides and below that, the colored cells/rows are taller than I want. How can I keep them about the same height as the text for each cell? On this page: html http://adswebsite.net/affiliate-networks-for-webmasters.html I added a css attribute for line-height = 1 ems, but that didn't help for the http://adswebsite.net/yahoo-search-versus-google-adwords page. ??? 2. The digg link is javascript, and when you click on it, it opens to the same page. I would like it to open to a new page. How do I do that with this particular link where the script is provided by digg? (oops, that's not a css question) Thanks for your time to answer these questions! Looking at the archives...I have a LOT to learn. Ross __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index - flash object on firefox under linux
try adding param name=wmode value=transparent if you haven't already beside the other ones param name=movie value=mymovie.swf param name=quality value=high param name=wmode value=transparent R. - Original Message - From: Phillip Cavaco [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, October 03, 2007 4:08 PM Subject: [css-d] z-index - flash object on firefox under linux happening only on firefox under linux. Is there any css hack or something? Thanks, Phillip __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ olicies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolute position problem in IE
I have an absolutely positioned div #button iside a relative container.
div id=container
div id=inside-container
div id=top_curve/div
div id=buttona href=http://www.mysite.com;Our Website/a/div
This is fine in FF and ie7 but in ie6 it disapears. Anyone hazzard a guess
why this happens. It reappears if I make it relative
#container {
width:751px;
margin-left:auto;
margin-right:auto;
float:none;
position:relative;
}
#inside-container {
width:751px;
min-height:400px;
position:relative;
margin-left:auto;
margin-right:auto;
float:left;
background-image:url(../images/main_image.jpg);
background-position:-2px 0px;
background-repeat:no-repeat;
background-color:#80;
}
#button {
position:absolute;
display:block;
width:100px;
height:100px;
color:#99;
top:200px;
right:0px;
background-color:#00;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css style swapper
I am looking for a simple script that uses javascript to determine the the screen resolution and swap in etiher a high res or a low res stylesheet. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] wordbreak
Is it possible to break up words inside a table? My words when too long jump to the next line instead of breaking up. Is there any css porperty that works? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] switching text size
http://www.dyn-web.com/dhtml/sizefont/index.php#examples http://www.white-hat-web-design.co.uk/articles/js-fontsize.php __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] named anchors in IE
I have a css menu lia href=#cadCAD Operators/a a id=cad/a when I try to link to a named anchor in ie it does not work what am I doing wrong? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] named anchors in IE
This code works
h2 id=cad name=cadsome text/h2
The problem is not that it uses 'id 'or 'name' but that it is empty. How do
I use the haslayout property, like this? Does it validate?
h2 {
hasProperty = True;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] images and the suckerfish
I have a problem in ie6 http://vps.aztechost.co.uk/~wallace/specialist_abilities/communications.php The suckerfish menu goes behind the images. I had this working before but cannot figure out how I did it. Any ideas? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] images and the suckerfish
Foget this. It was working just my ie6_is_an_absolutey_tragic_excuse_for_a_browser.css file was not linking properly. Ta, R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Stepped menu in ie6
I a crearting a basic horizintal menu with CSS. The problem is in IE6 is
looks like a set of steps
First item
Second item
Third item
Fourth Item
I have done loads of these and cannot understand what is happening this
time.
#cat_menu ul{
list-style:none;
padding:0;
margin:0;
}
#cat_menu li a{
color:#ccc;
float:left;
padding:5px;
border-right:1px solid #fff;
background-color:#333;
font-size:10pt;
height:20px;
display:inline;
}
#cat_menu li a:hover{
background-color:#99;
text-decoration:none;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 to IE7 to IE6 design
Take Nicks' advice: - ALWAYS start with Firefox as your testing browser! - if you have alignment probmlems (probably a few double float and width bugs) make a css file for ie6 and use the conditionals (put this below all your other css links) !--[if IE 6] link href=css/ie6.css rel=stylesheet type=text/css / ![endif]-- No more headaches just perfct cross-browser pages. R. - Original Message - From: Nick Fitzsimons [EMAIL PROTECTED] To: 'Rey Mendoza,Jr' [EMAIL PROTECTED]; css-d@lists.css-discuss.org Sent: Friday, September 07, 2007 10:58 AM Subject: Re: [css-d] IE6 to IE7 to IE6 design patabilities. Now, I have to make the design cross browser (IE6, IE7 and Firefox). I'm sure I can do these with a lot of time (and right frame of mind) but is there any approach that you can suggest so that there will be less hair-pulling for me? :) The most important thing is to forget about IE 6 to start with; its support for CSS is so badly broken that, pretty much by definition, if it works in IE 6, you've done it wrong. If you first get it looking right in Firefox, you'll find that things will work the same way in just about every other browser, including IE 7. You'll also find that it's probably totally broken in IE 6. However, there are a few simple techniques to coerce IE 6 into interpreting things correctly, which is where this list can help you. Feed those fixes to IE 6 using an extra stylesheet included using conditional comments, and you're done. To give you an idea of the sort of thing I'm talking about: I built a page which took about an hour to style correctly for Firefox; it also then worked correctly in Opera, Safari and IE 7. In IE 6 it exploded in a mass of broken pieces scattered all over the screen. It took precisely two lines of non-standard IE-only CSS (setting zoom: 1; on a couple of elements to be precise) to get IE 6 looking the same as everything else. The best thing you can do, if you have it working in IE 6, is to throw it away and start again. Trying to go in the direction of getting IE 6-compatible CSS to work in proper browsers is the road to insanity. Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.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/ tio.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/
[css-d] links in ie 6
I have 3 links...
page
a href=faq.php?q=faq1 class=unselected1/a
a href=faq2.php?q=faq82/a
a href=faq3.php?q=faq143/a
in FF they line up horizontally but in ie6 they clear so they look like a
vertical list
page 1 2 3 4
and in IE6
page
1
2
3
4
the css
#faq_nav {
color:#00;
position:absolute;
bottom:10px;
margin-top:10px;
}
#faq_nav a {
display:inline;
color:#000;
}
#faq_nav a:link {
display:inline;
color:#000;
}
#faq_nav .unselected{
text-decoration:none;
}
__
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] img and the suckerfish IE6
Hi, As you can see from this I am having problems with the stacking order with IMG tags over the sucker fish. http://vps.aztechost.co.uk/~wallace/sd/reducing_energy.php I have tried a z-index but this does not work. This is the first time I have encountered this as I always use background images, however for this project the client needs to be able to update the images easily and without any CSS. Anyone offer a suggestion? R. __ 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] indenting text not in a tag.
I have a news page like this
div id=container
span class=headingArchive News 1/span
span class=sub_headingitem 1/span
This is ny news item
span class=headingArchive News 2/span
span class=sub_headingItem 2/span
This is another news item
span class=headingArchive News 3/span
span class=sub_headingItem 3/span
This is another news item
/div
This goes on forever. I need to indent all the text but when I use
#container {
text-indent :30px;
}
the two spans indent but the ordinary text does not indent. Is there a way
other than wrapping in P tags to get them to indent. This page is very long
so adding p tags would take ages.
R.
__
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] validating the css htc
Morning,
Any ideas how I can get the PNG fix to validate?
this is the offending line.
img, div, span { behavior: url(css/iepngfix.htc) }
Ta,
R.
__
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] Suckerfish Challenge
You have done well so far. I have always found it is a bit of trial and
error to get these working the way you want it.
If you use the list id's then you can set the width of each dropdown. e.g
ul#programs_submenu li a {
width:20em;
background-color: orange;
}
You will also have to tweek the horizontal sub menus so they move along a
bit.
R.
- Original Message -
From: Jennifer Knowles [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Monday, July 09, 2007 9:06 AM
Subject: [css-d] Suckerfish Challenge
I am preparing a site for a redesign. For now I am just trying to make
the site more accessible while keeping the old design (it isn't mine) in
place so I am reworking one element at a time. I am starting with the
top navigation menu, which is a horrible (in terms of being accessible)
javascript drop-down which you can see here:
http://www.thecentersd.org/programs.php
Is it possible to replicate this using some form of Suckerfish?
I have a basic Son of Suckerfish experiment here
http://www.thecentersd.org/navtest.html
and the problems I am facing should be obvious. I need the sub-item
ul's to be wide enough not to wrap (I have specified 10em per the
original Son of Suckerfish on html dog which is too short) but as it is
they are already too wide for my top level (I only have 786 pixels to
work with)
I have never tried anything like this with Suckerfish before and I am
wondering if it is even possible. (I admit I am over my head.) I have
assigned ids for all of my top level li's as well as all sub-menu ul's.
What I am thinking is I can specify the width of each of the different
nav items and but then is there a way that I can make the top level li's
evenly spaced as they are on the current menu?
Any help is really appeciated!!!
__
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] transparent pngs don't show transparent in IE6
Well know bug. There is a javascript fix but it only applies to img not background images for divs as far as I know. Anyone else? Ross - Original Message - From: Christopher Blake [EMAIL PROTECTED] To: css-d css-d@lists.css-discuss.org Sent: Friday, July 06, 2007 12:01 PM Subject: [css-d] transparent pngs don't show transparent in IE6 HI, Hopefully if you check this page in any browser it should work ok. http://www.3pointdesign.com/websites2.html However in IE6 the transparency of the pngs does not work. I can go back and add the right background colour to all the images but would rather know if there was a fix, or whether that is the only option. Thanks Christopher Blake [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-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] transparent pngs don't show transparent in IE6
Thats is one ugly fix. Does it validate? http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ __ 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] transparent pngs don't show transparent in IE6
Before I go delving into these. Do any of them validate. If no then I can't use them. thanks, R. - Original Message - From: Rick Faircloth [EMAIL PROTECTED] To: 'Christopher Blake' [EMAIL PROTECTED]; 'css-d' css-d@lists.css-discuss.org Sent: Friday, July 06, 2007 2:30 PM Subject: Re: [css-d] transparent pngs don't show transparent in IE6 Hi, Chris... I'm using a script from TwinHelix.com, called IE PNG Fix v1.0 RC4... that's the current version. It uses a CSS behavior modification to allow png's to work in IE 5.5 IE 6. It's working perfectly... Go to www.TwinHelix.com and mouse-over CSS in the menu and you'll see the link. Check it out and let me know if you need some help implementing it. Once it's working you'll never know it's there and you'll never want to leave home without it! :o) Rick (PS - Works on img's and background img's, too. However, a limitation of IE 6 won't allow the IE PNG Fix solution to react to positional attributes when an image is used as a background image of a div... but you can work around that...) -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christopher Blake Sent: Friday, July 06, 2007 7:01 AM To: css-d Subject: [css-d] transparent pngs don't show transparent in IE6 HI, Hopefully if you check this page in any browser it should work ok. http://www.3pointdesign.com/websites2.html However in IE6 the transparency of the pngs does not work. I can go back and add the right background colour to all the images but would rather know if there was a fix, or whether that is the only option. Thanks Christopher Blake [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-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] alignment using CSS
That to me looks like tabular data. Why not...use tables.
- Original Message -
From: Sarah Atkinson [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Friday, July 06, 2007 3:05 PM
Subject: [css-d] alignment using CSS
Dear Oh Most Helpful List,
I have a list of hours
Monday - Friday 9:00 AM - 9:00 PM
Saturday 9:00 AM - 7:00 PM
Sunday Closed
I want the times to be aligned on one side and the days aligned. Any
idea on how to do this? All I can find is hack using tables. There's
got to be a better way.
I'm thinking code similar to this
style
.hours{
list-style:none;
text-align:left;
}
.time{
text-align:right;
position:absolute;
left: 400px;
}
/style
div
ul class=hours
liMonday - Fridayspan class=time9:00 AM - 9:00 PM/span/li
liSaturdayspan class=time9:00 AM - 7:00 PM/span/li
liSundayspan class=timeClosed/span/li
/ul
/div
Now this will work however if I Stick this in a div then start moving
the div around the absolute positioning will kind of mess things up
right? This will position it absolutely to the page not the div. I'd
also like to have something a little flexible for future updates.
Any suggestions?
Sarah
__
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/
[css-d] iframes - who still uses them
Hi, Looking at the last post it got me thinking. Does anyone still use frames or iframes? Is it a valid development technique? R. __ 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] div 1px wide
I just want to create a 1px verical line. Is there a way to make divs 1px wide? Seem to be a minimum of 5-10px depending on browser. Any other methods apart from bg images welcome. Ross __ 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] son of suckerfish -IE6 problem
http://vps.aztechost.co.uk/~wallace/long.php http://vps.aztechost.co.uk/~wallace/css/ This works fine in FF but when I look at it in the IE 6 the sub lists have no background colour and are mis-aligned. Any ideas? Ta, R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] relative or absolute urls?
When linking to images do you use relative or absolute urls? background-image:url(../images/myimage.jpg); or background-image:url(http://.mysite.php/images/myimage.jpg); I have a common header on all pages with different folders and sub folders and the relative urls only work for the pages in main directory but the full url means I have to change them all when moving from local to remote hosts. I can create a common page head with php but was looking for non php solution. R. __ 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] min height with ie and ff
I did this a while back and cannot remember how. I am sure I set 3 height properties to get it working and used !important somewhere. min-height:400px; height:400px; I want the div to have a min height of 400px; min-height works but if I put in the second height attribute the box does not get bigger as the content expands in FF; any ideas? __ 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] min height with ie and ff
In answer to my own question: min-height:400px; height:400px; height:auto !important; does height:auto !important; validate? - Original Message - From: Ross [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, June 13, 2007 9:26 AM Subject: [css-d] min height with ie and ff I did this a while back and cannot remember how. I am sure I set 3 height properties to get it working and used !important somewhere. min-height:400px; height:400px; I want the div to have a min height of 400px; min-height works but if I put in the second height attribute the box does not get bigger as the content expands in FF; any ideas? __ 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/
[css-d] css gradients
Are there any plans for gradient bg colours in CSS3? R. __ 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 div without padding
You need to make a container DIV for this whole bock of stuff and set text-align:center. div id=right style=width:200px; height:400px; border:1px red solid; text-align:center img src=images/white_circ.gif border=0 alt=Image Swap Sample name=swap id=im style=padding: 12px; margin-bottom: 4px; padding-bottom: 0px; padding-top: 0px; div id=thumbnailtext style=border:1px solid greenpImage Description/p div id=productphotospbProduct Photos/b span class=style6(click to view)/div - Original Message - From: jana coyle [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, May 30, 2007 4:43 AM Subject: [css-d] Positioning div without padding I would like to center the text under image1 and have a blue border background around Product Photos click to view I cannot seem to get the positioning right without using right padding. If I use right padding then when I put the background color in it shows the padding also. Here is a link to my site http://www.precisemessenger.com/private/help4.html and here is an image of what I am looking to do http://www.precisemessenger.com/private/images/samplesite.gif Thanks in advance, Kevin __ 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] Divitis?
Yep. That;s the way I approach it. Much neater. R. - Original Message - From: Brian Crescimanno [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Tuesday, May 29, 2007 2:13 PM Subject: Re: [css-d] Divitis? Out of curiosity, why not use an unordered list--it would seem more semantically correct in this situation. You could change your div to a ul and wrap your items in li tags; then you can set the background of the the li tag to the image you want and position it appropriately. Brian __ 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] Two background-images
Post full code with embeded css. - Original Message - From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Monday, April 30, 2007 10:43 AM Subject: [css-d] Two background-images Hi, I'm trying to place two background-images in the same document. one in the content element, and one in the nav element. I only get the first one displaying no matter what I do. Have googled and what I've found seems to say can't be done, but like to make sure, hence this request. There was one site which implied they may have done something, but couldn't get it to open in my browser. TIA for any help DG) -- __ 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/
[css-d] pure css tooltips
Hello,
I am trying to get this working and fails in.IE 6. #map is just an anchor
and the .popup is a span located inside the anchor. works fine in FF any ideas?
#lmap .popup {
display: none;
}
#map:hover .popup { /*the span will display just on :hover state*/
display: block !important;
position: absolute;
top: 5px;
left: 250px;
width: 150px;
border: 1px solid #f00;
background-color: #cff;
color: #000;
padding: 10px;
font-size: .8em;
background-image:url(images/bg_butterfly.jpg);
}
a href=# id=map style=width:300px; height:100px; display:block;
border:1px solid green
span class=popup
This popup is set to 150px wide and is made absolute as well as
display:nbsp;block. which is the highest
value of the first three tests.
/span
/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/
Re: [css-d] pure css tooltips
That was jsut a typing errorin my email.
- Original Message -
From: Simon Tiplady | Forums [EMAIL PROTECTED]
To: 'Ross Hulford' [EMAIL PROTECTED]
Sent: Monday, April 30, 2007 2:41 PM
Subject: RE: [css-d] pure css tooltips
Could it be
#lmap .popup {
display: none;
}
Should be
#map .popup {
display: none;
}
But that doesn't explain how it worked in ff...
__
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] gettting a radiogroup to display horizontally?
Any ideas how this is done? Ross __ 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] Trouble with positioning - not understanding this
Make it absolutely postitioned within the footer div. To do this you must
define the footer div as position:relative.
#outer_box{
margin: 0 auto;
padding: 0;
width: 760px;
}
#footer{ background-image: url(../bkgrnd_imgs/foot_bg.jpg);
background-repeat: repeat-x;
background-color: #0A2F76;
color: #FF; padding: 0;
margin:0 auto; height: 143px; width: 758px;
border: 1px solid #0A2F76;
position:relative; // add this line
}
p.addr {text-align: center;
padding: 5px 0; margin: 0;
font-size: 0.8em;
}
#footer_tag { position: relative; bottom: 2px; }
p.copy { position:absolute; left:0; bottom:0; }
div id=outerbox
Some content divs for the top, and middle of the page
div id=footer
p class=addr1815 S.W. Marlow, Ashland, Oregon 97520br /
(541) 292-8912 #8226; (800) 681-3200/p
p class=copycopy; 2007 #8226; Progressive Associates
amp;a href=# Lane Design/a. All Rights Reserved./p
/div
div
/body
/html
- Original Message -
From: Robert Lane [EMAIL PROTECTED]
To: Css-Discussion Group css-d@lists.css-discuss.org
Sent: Monday, April 30, 2007 12:29 AM
Subject: [css-d] Trouble with positioning - not understanding this
I am struggling with some positioning. Basically, I have a div at the
bottom of a page that is defined to have a height of 143px.
It has a background image of that size.
I then have some text that I want centered and positioned near the top
of the div. I put that in a p tag with a class=addr
I then put another paragraph tag with a class of copy I want this
text at the very bottom of the footer div and aligned left. I was
having no luck with getting it on the bottom so I wrapped the p.copy in
a new div with an id of footer_tag, then I tried to position that
relative with a bottom of 0. But that doesn't seem to do it either.
What would be the right way to get this bugger down to the bottom left
of the footer?
Here is the detail from the page:
Styles
#outer_box{
margin: 0 auto;
padding: 0;
width: 760px;
}
#footer{ background-image: url(../bkgrnd_imgs/foot_bg.jpg);
background-repeat: repeat-x;
background-color: #0A2F76;
color: #FF; padding: 0;
margin:0 auto; height: 143px; width: 758px;
border: 1px solid #0A2F76;
}
p.addr {text-align: center;
padding: 5px 0; margin: 0;
font-size: 0.8em;
}
#footer_tag { position: relative; bottom: 2px; }
p.copy { padding: 6px ; font-size: 0.7em;
text-align: left; }
Structure:
div id=outerbox
Some content divs for the top, and middle of the page
div id=footer
p class=addr1815 S.W. Marlow, Ashland, Oregon 97520br /
(541) 292-8912 #8226; (800) 681-3200/p
div id=footer_tag
p class=copycopy; 2007 #8226; Progressive Associates
amp;a href=# Lane Design/a. All Rights Reserved./p
/div // closes footer_tag div
/div //closes footer div
div //Closes the outerbox 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-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] floating container
Hi, I am looking for a way to make this expand with the content. The offending property is float:none. I can add another floating div inside called 'floated-container' or something but is there a way to make float:none's recognised by it's children or a better way to center divs? width:510px; min-height:400px; margin-left:auto; margin-right:auto; float:none; background-image:url(images/main_image.jpg); background-position:0px 0px; border:1px solid green; background-repeat:no-repeat; background-color:#CC; __ 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] transparent divs
Hello, This works in FF- filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; Is it valid? Although it doesn't work in IE. Is there an ie transparency property that validates? R. __ 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] sorting a list into blocks
I have a list of 10 items ul li li li li li li li li li __ 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] lists in blocks
I have an unordered list of 10 items 1 2 3 4 5 6 7 8 9 10 but I want to diaply it in block of 3 14710 258 369 Is this possible with css or any other method? R. __ 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] css in HTML email
Quick question... Do you: (i) Embed CSS? (ii) Link CSS? (iii) Use inline CSS? Do they all work equally well? R. __ 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] does list-style-position actiually work
I tried ot on the li and ul
#content ul {
list-style:url(../images/li_flag.jpg);
list-style-position:60px 60px;
padding:20px;
}
can someone show me how?
R.
__
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] does list-style-position actiually work
ok so it doesn't do what I thought it did.
I now revert back to background-image on the li
R.
- Original Message -
From: Philippe Wittenbergh [EMAIL PROTECTED]
To: CSS-D css-d@lists.css-discuss.org
Sent: Tuesday, March 27, 2007 12:35 PM
Subject: Re: [css-d] does list-style-position actiually work
On Mar 27, 2007, at 8:07 PM, Ross Hulford wrote:
I tried ot on the li and ul
#content ul {
list-style:url(../images/li_flag.jpg);
list-style-position:60px 60px;
padding:20px;
}
Never a bad idea to ask here:
http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position
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/
__
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] anchors and LI tags
li name=B id=BB a class=pdflinks target=_blank href=download.php?id=100my title/a /li I get a warning line 382 column 7 - Warning: li proprietary attribute name. I take it I cannot create a name on an li but what would be the best way to anchor the li to my link at the top of the page. a href=#bB/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] font style in disabled text boxes ie
The font in disabled textboxes takes on a horrible grey indented look (ie) does anyone know the property and how to overwrite it? R. __ 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] turning off the text in a menu
I have a top leve' menu Item that are buttons. I need to turn the text off but
display:none hide the button too.
li class=topmenulia href=../home/index.php class=homeHome /a /li
Is it good practice to turn of the text like this
#dmenu .home {
font-size:0px;
}
It seems wrong. Is there an alternative way to turn just he text off?
R.
__
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] trying to override css form elements
I have all the input tags in a site but want to set a different value for all
the checkboxes.
I have tried
checkbox {
}
can checkboxes be isolated for css changes in this way or do I need to apply a
class or id?
Ross
__
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] 22. One CSS file for each browser (IE/Firefox)
When starting CSS this seems to be the major problem. I tend to create a common CSS file and then make the page so they work in Firefox. Then, as suggested before, I have an IE fix css file that applies all the fixes needed for IE and this is inserted with the IE conditional. This is the most tidy way to do it. No nasty hacks and your CSS will validate. R. __ 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] footer inside a centred container
Hello,
I have a centred container
#container {
width:800px;
background-color:#3300FF;
margin-left:auto;
margin-right:auto;
position:relative;
float:none;
}
I have all my content in here but I also want a footer locked on to the bottom.
#footer {
position:absolute;
bottom:0;
height:10px;
background-color:#00CCFF;
border:1px red solid;
width:100%;
text-align:center;
}
This is fine when the parent (#container) div is floated but to centre it it
needs to be float:none.
Is there a way around this problem other than to add a floated div inside the
#container? Just seems a bit messy to add an extra div for this explicit
purpose.
R.
__
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 inside a centred container
the oposite happened it worked in ie and did nothing in firefox. There is no reason this should work as CLEAR should only apply work on floated items not absolutely positioned one. R. __ 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 inside a centred container
Have just bitten the bullet and added an extra wrapper id. Life is too short! R. __ 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] hiding menu text
I have the following menu and it works like this... topmenu list items are a class and display a background image. all the other submenu items are text. I want to be able to hide the text on the topmenuli items but I need it to display when the css is switched off. Display:none hides everything and font-size:0px casscades down the menu. Is there a way to target and hide the text on the topmnenu. ul class=topmenu id=dmenu li class=topmenulia href=xxx class=homeHome /a /li li class=topmenulia href=x class=aboutus About Us/a ul class=submenuul sub_about li class=submenulia href=xxxsome/li li class=submenulia href!more/li li class=submenulia href=sub/li li class=submenulia href=menu/li li class=submenulia href=items/a/li /ul R. __ 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] targeting a link inside a h2 tag
Is there any way to target a link within a h2 tag. Link are already set and I want to set a style specificlly for links inside h2 h2Request our FREE recruitment DVD by clicking a class=link href=#here/a /h2 R. __ 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] link style problem
Hello, I have about 20 links in a side menu a href=1.phplink one/abr / a href=2.phplink two /abr / a href=3.phplink three /abr / a href=4.phplink four/abr / a href=5.phplink five/abr / a href=6.phplink six /abr / They are links to 20 locations. The layout of the pages are identical the only thing that changes is the address and map. The body id of all 20 pages is the same body id=contacts but I need a clever way to highlight the link when I am on that particular pages. I do not want multiple body id's if possible and the links list is a common file inserted via php (the locations often change and I only want to make one central ammendment) I could do it with id's on the a tags and inline css but this seems a bit messy and bad practice. Any ideas? R. __ 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 mac bugs
On 2/8/07 6:55 AM, jeffrey morin [EMAIL PROTECTED] wrote: it's weird. when i view it online it looks ok but when i just view it locally on my imac the content column gets hung up. so if anyone looks at this and it's not working please let me know what you think is going on. thanks!! http://www.melissagerstein.com/ie_mac_bugs.html It looks fine to me in Mac IE 5.2. -- Diane __ 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] Links with separator lines
I use #page_links and .footerbar for links. The problem shows on this page
http://www.entourage.mvps.org/
but
show OK on this page (and other pages on the site that use the same divs)
http://www.entourage.mvps.org/exchange/index.html
The Problem:
In Opera and FireFox on the Mac, I'm seeing two separator lines after the
first link.
IE 5.2 on the Mac shows the separator lines inside the link or way to one
side in both #page_links and #footer. There are other problems with IE Mac
that I'll address in a separate subject.
Safari Mac and OmniWeb Mac are OK for both page links and footer links.
On the PC side there is no problem with the separator lines for IE 6. I'm
seeing space after the first link Search A-Z Index. I'm guessing this is a
padding issue. I haven't been able to test in other PC browsers yet. Have
been downloading Opera and Firefox and the rate they are going it's going to
be hours just to download. Running VPC isn't what you would call swift.
My first thought was to check for some extraneous code but there is none
that I see. I don't understand why it works on other pages and not the home
page. I can see that IE Mac would be problematic but for other browser to
have a problem with just this one page is confusing.
CSS
---
#page_links {text-align: center;
margin-top: 1.5em;
}
.linksbar {
list-style-type: none;
padding:4px 0;
}
.linksbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.linksbar li.first {
border:none;
}
.footerbar {
list-style-type: none;
padding:4px 0;
}
.footerbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.footerbar li.first {
border:none;
---
HTML
---
div id=page_links
ul class=linksbar
li class=first
a href=faq/index.htmlSearch A-Z Index/a
li
li
a href=faq/top_faqs.htmlMost Asked Questions/a
/li
li
a href=faq/2004.htmlFAQs for Entourage 2004/a
/li
li
a href=faq_topic/sync_services_ical.htmlSync Services/a
/li
li
a href=new2mac.htmlnew2mac amp; Entourage/a
/li
li
a href=menumachine/topnav/navigation.htmlSite Map/a
/li
/ul
/div
---
div id=footer
ul class=footerbar
li class=first
a href=http://www.entourage.mvps.org/;Home/a
/li
li
a href=http://www.entourage.mvps.org/about.html;About/a
/li
li
a href=disclaimer.htmlDisclaimer/a
/li
/ul
--
Diane
__
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 broke my template
On 2/8/07 5:53 AM, francky [EMAIL PROTECTED] wrote:
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
I omitted the width in the #sidebar and the drop down problem is fixed. I
appreciate knowing what I did and why.
I'm not sure if I created another problem because I also omitted the width
in the right sidebar boxes. They were identical to the left even though they
had not caused a problem. Now in IE 7, part way down in the MVP Links box
the links just stop and the following boxes are not showing up. It's not a
problem in any Mac browser or in IE 6.
Did removing the width do this, or is this a display problem using VPC to
view the pages?
http://www.entourage.mvps.org/
--
Diane
__
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] Links with separator lines
On 2/8/07 6:57 PM, francky [EMAIL PROTECTED] wrote: I think it´s not stupid at all if you don´t see one missing slash after numerous cut-copy-paste actions in a large and complicated code. But you don´t have to see everything yourself by eye and by hand: the validators are eager to help (if clicked ;-) ). As a lazy boy, I first validate if something seems not ok (2 seconds rest to take some coffee), and only if the validators are green, and the error is still there, I´m going to look in the code for bug hunting. :-) Thanks for the reminder. I have become used to the GoLive bugs that are added (obviously they don't cover very much) and have not gotten into the habit of validating my code. Again, thanks for the help. -- Diane __ 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 broke my template
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote:
* testpage 2
http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html
So I guess it must be some margin or padding in the inner parts of the
#sidebar, for when we make the width of the #sidebar some 10px smaller,
it's ok.
How did you come up with 10px?
* testpage 3
http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html
I have some questions on the change you suggested to the sidebar.
div class=quicklinks style=width: 140px;
You mention margins...do I adjust margins for divs inside the sidebar or
simply change the size as you suggested?
Rather than just do-it, I want to understand what I'm doing. I really
appreciate your patience with me on this.
#quicklinks is inside the #sidebar. I have both set for width 150. Is this
wrong thinking to make them the same?
#sidebar {
text-align: left;
width: 150px;
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 0; }
/*Quicklinks
*/
.quicklinks {
width: 150px;
border: solid 1px #ccc;
margin: 0;
}
You can view the site with just the cleanup for the divs here:
http://www.entourage.mvps.org/
--
Diane
__
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 broke my template
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote: So I guess it must be some margin or padding in the inner parts of the #sidebar, for when we make the width of the #sidebar some 10px smaller, it's ok. I'm reluctant to even respond at this late hour when my head is mush, but I don't see how you made the #sidebar 10 px smaller. Where in the 'CSS' did you do this? I'm off to bed and will get back to this tomorrow when I am hopefully more clear headed. Thanks for the quick responses. -- Diane __ 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 broke my template
On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. I thought I was being careful to comment out the divs when I set up, but somehow there were some critical changes made. It took a bit to go back and correct my markup, but it's working now. One of my biggest problems is knowing how to troubleshoot problems. I feel like I have made a small step today learning from your suggestions. Thanks to francky for his comments in sending me in the right direction. I wish I had read his Golden Rules of CSS prior to starting my journey into CSS. I especially want to point out to other newbies #5 The personal archive: SAVE EVERY STEP with an OWN VERSION NUMBER! http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm I can recommend to Mac users FolderOrgX. FolderOrg is an AppleScript Folder Action that organizes files and folders by moving them into dated subfolders. This is helpful in keeping files and folders organized by the day they were added, not created or modified. http://homepage.mac.com/dougeverly/folderorg.html -- Diane __ 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] Help broke my template
I was working on my template and broke something. Now the text in the main content area flows into the right sidebar. I added a div in the right sidebar trying to fix a problem on my own for IE and made some minor changes to text in the right sidebar, but not sure what I did to affect the content area. I didn't purposefully make any changes there. I am stuck until I get this fixed. http://www.test.entourage.mvps.org/base.html Link to CSS: http://www.entourage.mvps.org/css/ The template is based on the the 3 column layout on this page http://alistapart.com/articles/negativemargins. -- Diane (with desperate cries of help along with moaning and gnashing of teeth) __ 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 broke my template
On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. But validate first (and I think you need a title other than untitled There is no title since it's my template and I want pages I create ask me for a title. I'll check the div closings. Can you give me a clue as to which one? -- Diane __ 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] right websites content development
The first thing I would do is not to use templates. You are never going to learn anything useful that way. You need to get a decent book http://www.amazon.co.uk/CSS-Anthology-Essential-Tricks-Hacks/dp/0957921888/sr=8-1/qid=1169634670/ref=sr_1_1/203-8491694-5556701?ie=UTF8s=books I like this book it actually answers questions you need to know. It will be hard at the beginning as browsers (IE) can be a bit quirky and you will have to learn and anticipate the quirky behaviour. There's lots to learn and even the CSS gurus don't know everything but after about 6 months you should be well on your way to being well versed in the art of CSS! 'Quick fixes' like modifying a custom templates are a good way of making a 2 day job last a week. Ross - Original Message - From: stopyerdo erdo [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, January 24, 2007 8:51 AM Subject: [css-d] right websites content development sorry i made a mistake, wrong typing, this is right:( http://www.findtolinks.com http://www.getyydirectory.com http://www.search2info.net http://www.takeinfo.net I have found a free template form the net and applied on my sites. i want to develop contexts of sites but i do not know how. videos, news, discussion borads and so on. i have open for every suggestions. Thanks. - Food fight? Enjoy some healthy debate in the Yahoo! Answers Food Drink QA. __ 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] one-off CSS values
James, With one-of css values I too can never decide what is the best approach. For this example I would use id's to the rows and apply the width elemets in the css. It's not perfect but it is (probably) the best way.I do not really like class combinations and use id with a class instead. It will stop things getting too messy. Ross - Original Message - From: james shannon [EMAIL PROTECTED] To: CSS-d css-d@lists.css-discuss.org Sent: Tuesday, January 23, 2007 9:04 AM Subject: [css-d] one-off CSS values Hi... I hope I'm not going to start/rehash an argument, but I'm looking for the best practice for one-off css values. For example, I have a table of data and I want a specific column to be 77px wide. I don't really like the style=width: 77px inside a td, because I'm not separating the presentation from the display. So that leaves several options: 1. The most re-usable would be give it a class - w77px -- and give that class the width:77px. That way when I have a div, on another page, that I also want to be 75px wide, I can assign that class. I can also have a class, maybe -- rtl -- that sets the text direction. This way I can do class=w77px rtl or class=w120px rtl. This seems the most straightforward, but not correct. So that leaves: 2. A specific class, or a specific selector -- table td.stock_price_col -- that I assign the values to. 3. Assigning to an id that I give that column -- #stock_price_col. It seems to me that #1 is the easiest, because I can just start assigning a bunch of classes to an element based on what I want it to do, but that #2 makes the most sense from the perspective of what CSS should be. However, it seems that a lot of people use IDs rather than class names (div id=footer rather than div class=footer), so I'm not really sure (except that id= implies there will never be more than one per page) Thanks for your thoughts, James __ 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/
[css-d] adding a class to a link
I am trying to overide the link class with
a class=plain_link href=Request More Information/a
.plain_link a{
border:none;
padding:0;
display:inline;
color:#3300CC;
}
why does this not work?
R.
__
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] Centering images
On 1/13/07 1:19 PM, Mark Lundquist [EMAIL PROTECTED] wrote: On Jan 13, 2007, at 1:17 PM, david wrote: Then the W3C's choice of TEXT-align is a bad choice. It specifies text when it's really talking about something broader than what people think of as text. I agree :-) ml From a newbie standpoint, I agree about the wording. I questioned this and was unsure, but in GoLive the option to select txt-center style gave an img as one of the options when an image was selected. When it didn't work, I entered a fugue state of more newbie confusion. :-) -- Diane __ 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] Centering images
On 1/12/07 7:04 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Should be...
.img_center {display: block; margin: 0 auto;}
It's working now. Thank YOU!!
I didn't find a class .img_center in your on-line stylesheet, so I can't
say why it didn't work. I added one with the styles from my example
above, and it worked perfectly.
I really appreciate your examples. It helps me tremendously.
I'm having a big problem using hr / in the #main content area.
After an hr / the text gets thrown way down the screen.
http://www.test.entourage.mvps.org/atest/
It's pushed down because you have declared 'clear: both' on the hr.
That's how 'clear' works in that kind of layout. It will clear
*everything* in sight - including the side-columns.
You should have a class for 'clear' so you can add it to the hr, or any
other element, when you need it - not add 'clear' permanently to the hr.
Now, for that particular page/layout you can keep that hr-styling, and
solve it by adding...
#main {overflow: hidden; margin: 0; }
* html #main {overflow: visible; height: 1%; }
* html #sidebar {overflow-x: hidden;}
...which will isolate all 'clear' inside #main (and correct the most
troublesome bugs in IE6). Works in all browsers I can lay my eyes on,
from IE6 and up.
I'm not quite sure if I should remove clear from the hr and add a clear
class if needed or add the corrected css you suggested above. Or do I really
need hr in my style sheet?
Where I get myself into trouble is I use examples from another site (I try
to 'borrow from the best) and I don't know enough to understand all the
attributes they have added to the style.
Is this OK?
.clear-both {
clear: both;
}
--
Diane
__
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] Centering images
On 1/13/07 3:27 PM, david [EMAIL PROTECTED] wrote: I'm not quite sure if I should remove clear from the hr and add a clear class if needed or add the corrected css you suggested above. Or do I really need hr in my style sheet? I don't think you need HR in your HTML unless you want to have a horizontal rule there when visitors have CSS turned off. You can use CSS to add a bottom border to the element above the rule instead. I've eliminated the hr for now. You guys are great!! -- Diane __ 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] Centering images
On 1/13/07 4:52 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Since your page... http://www.test.entourage.mvps.org/atest/ ...is already broken in IE6, I suggest you add the extra css to the bottom of your stylesheet - and both the clearing hr problem and IE6' bugs will be gone. You can always remove those few lines later - especially if you comment them clearly so you know why you put them there and what they are supposed to achieve. I'll add these. My audience is for Mac users. I'm a one pony show. I have a FAQ page for a Mac application, Microsoft Entourage. I do realize that many users search the site at work on their pcs so I do want the site to work in all browsers. As an example - I keep these classes in my stylesheets... Thanks! I'll add these. -- Diane __ 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] Centering images
I don't know what I'm doing wrong. When I want to center an image I can only
get it to work if I select div align=center. If I use a class
.txtcenter, .center { text-align: center; }
Or #test img { text-align: center; } the image does not center.
Here is my example:
http://www.test.entourage.mvps.org/faq/center_images.html
Why are these simple things so hard for a newbie? sigh
--
Diane
__
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] Centering images
On 1/12/07 3:23 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Note that text-align: center should not be targeting the image.
Instead: target the container - the div, p or other block-element - and
text and images /inside/ the container will be centered.
You can also center images directly with auto-margins.
I've added a couple of examples to your test page here...
http://www.gunlaug.no/tos/alien/test_07_1560.html
...so you can see how it works.
OK, now I have another question...
If I don't want all my images to be centered, should I use a class for
centering or a style like your example
#test2 img {
display: block; margin: 0 auto;
}
The majority of the images on the site will be centered while a few will be
wrapped in a paragraph.
I tried a class, but this did not work.
http://www.test.entourage.mvps.org/atest/image_center.html
.img_center {margin: 0 auto;
}
I hate to put a different topic in a thread, but in your example you used:
div {border-bottom: solid 1px #777;}
I'm having a big problem using hr / in the #main content area. After an
hr / the text gets thrown way down the screen. At first I thought it was
erasing the text which made no sense until I scrolled down to see it. I
really don't want to have to make divs every where I want to use a
separation line.
On this page, the hr / under the A, pushes text down where it does not
under B and C.
http://www.test.entourage.mvps.org/atest/
div id=abc
h2a id=A name=A/aA/h2
hr /
pa title=AOL Mail with Entourage
href=../accounts/aol.htmlAOL/a/p
My css:
hr {
clear: both;
color: #ccc;
height: 1px;
}
Why are these simple things so hard for a newbie? sigh
Probably so we who are slightly more experienced, can brag about it ;-)
It's humbling, I must say.
--
Diane
__
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] Internal style not honored
In my external style sheet I have h2 as text-align: center. On one page I
want h2 text-align: left. It is not aligning left. What did I do wrong? I
tried making a div specific h2, but that didn't work either.
I used the same code on both pages but it doesn't work on this page. The
only thing that is different is the problem page was created with a template
in GoLive which shouldn't affect anything.
http://www.test.entourage.mvps.org/faq/index5.html
This page using same code is not linked to a template and it works.
http://www.test.entourage.mvps.org/faq/test2.html
head
!-- InstanceBeginEditable name=headContent --
meta name=keywords content= /
meta http-equiv=content-type content=text/html;charset=utf-8 /
titleWebsite A-Z Index/title
style type=text/css
!--
@import url(../../web-content/css/layout.css);
@import url(../../web-content/css/sidebar.css);
@import url(../../web-content/css/style.css);
h2 { text-align: left; }
--
/style
!-- InstanceEndEditable --
/head
--
Diane
__
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] Internal style not honored
On 1/10/07 2:06 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Both the validator and my browsers respond with No style sheet found
since you're importing local CSS files - not online CSS, so there isn't
much we can do to check what's going on.
Apparently I don't understand @import. I used GoLive to set the @import and
assumed it would work when uploaded. Until I get that fixed, the css can be
found here. Centering is in style.
http://www.test.entourage.mvps.org/css/
Apart from that: I'd expect the missing style is related to specificity,
which is something you can check by simply writing...
h2 { text-align: left!important; }
...to make that style more important.
I did have important and removed that to see if that was the problem. I just
uploaded the style.css with change added.
--
Diane
__
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] grouping pages
I have a website and each page has a div body id. This give me control over the individual pages but is there a way to group divs? For example I have a section called about us and it has 4 pages associated with it that follow the same layout. I also have a section called contact us that has 3 pages (map, contact details etc.) associated with it. Is there a way to apply grouping to pages so I can style accoring to body id and what group it is in? R. __ 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] div to display on one page only
I have a div that is only to display on one page. I have made it invisible on
all pages with display:none and added the declaration under it but it doesn't
appear.
Is there a way to do it without adding style tags to the individual page?
I thought because the declaration
#home #mybox {
}
is under display none it should work. any ideas?
R.
__
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] shorthand css
Hi,
I have a selector
#page1 #container-inside, #page2 #container-inside, #page3 #container-inside {
}
is there a way to shorten this to combine the target divs or something?
#page1, #page2, #page3 #container-inside
__
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 breaks sidebar
Follow up: I found the problem. It was an extra main div showing up in the
sidebar. After removing it, everything works as expected. I swear I did not
put the div there. The change happened after I used GoLive to create a
template area. It had added another main div in the content area and I
caught that one, but the one in the sidebar was missed by me.
I did change the image size, but that did not fix the problem nor did
David's suggestion to the CSS. They did help over all so I appreciate the
changes.
BTW, my messages are taking days to show up on the list. Is anyone else
experiencing this problem?
--
Diane
On 12/31/06 9:22 AM, ~davidLaakso [EMAIL PROTECTED] wrote:
Diane Ross wrote:
I made a size change to my right sidebar and now Firefox shows only a part
of the content. Other Mac browsers are OK with the changes. I have no clue
as to what to even check. Help is gratefully appreciated.
In IE7, there is no spacing between some of the side boxes.
http://www.test.entourage.mvps.org/pages/page3.html
I thought my message to the list was lost since it didn't post for two days
and I received a not able to deliver message so I changed the files I had
uploaded. I had combined three css files into one named Entourage. Now I'm
back to three. :-) Is there any benefit from one file over multiple css
files?
On 12/31/06 9:22 AM, ~davidLaakso [EMAIL PROTECTED] wrote:
ul {padding: 0/* 0 1em 5em*/ } zero out padding on ul
#footer { clear: both;} added this ruleset
#left { /*margin-left: 8px; */ }deleted
#main { /*padding-right: 20px; padding-left: 20px; */}deleted
Shorten the long-word so it will hold at text-size largest in ie
from:liDuplicates..remove or create/li
to:liDuplicates: remove or create/li
--
Diane
__
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 problem with 3 col layout
On 12/22/06 5:14 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I don't know what the footer solution is with that particular layout. If you are not far along, and can, or are willing to switch layouts, the 3 column layout on this page http://alistapart.com/articles/negativemargins includes a footer across the entire bottom, and the tutorial explains the use of images to create faux columns for it. It took a bit, but I started over with the layout you recommended. I have it working correctly. I seems to be a simple thing to take a layout and modify it, but I sure do find ways to mess things up in the process. :-) I have only tested in Mac browsers so no telling what will break in IE. I appreciate your suggestion. -- Diane __ 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] Footer problem with 3 col layout
Happy Holidays to everyone.
I'm trying to convert my volunteer site from tables to CSS. I used the
example on http://www.positioniseverything.net/guests/3colcomplexside.html
for my base. The footer for the layout was in the container div, but I want
mine to go across the bottom. I added a clear div that I thought was going
to push it down, but it's not working. I'm a newbie and appreciate any help
you can offer so I can get to the real work of updating the content. GoLive
has mangled the code with extraneous divs. They have multiplied like
bunnies. :-)
Not sure if this is part of the same positioning question, but I need all
the columns to be of equal height. I just don't know enough to understand
where the problem is located.
I tried putting the cleardiv2 before and after contents, but the results
were the same.
You can view page (obviously rough) here:
http://www.test.entourage.mvps.org/
--
div id=cleardiv2/div
/div!--this is the end of container--
div id=footer
footer info goes here
/div
div id=bottom/div
/body
CSS
#cleardiv2
{
clear: both;
height: 1em;
}
/**Begin Footer**/
div#footer {
border-top: 2px solid #5C73BA;
text-align: center;
}
Great listI'm learning a lot.
--
Diane
__
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] ff only style problem
This is the head of my doc. It is supposed to change the page height based
on the selection from the menu. It works in IE and validates ok but it is no
go in firefox. Any ideas?? You can see it in action here...
http://suruchitoo.com/menu.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
titleSuruchiToo - Menu/title
link href=suruchi.css rel=stylesheet type=text/css /
?php
$select = isset($_REQUEST['select']) ? $_REQUEST['select'] : '';
switch ($select) {
case starters:
$selection = starters.php;
break;
case mains:
$selection = mains.php;
?style type=text/css#side, #main, #holder, {height: 1400px;}
#menu_insert {height:950px;}/style?
break;
case veg:
$selection = veg.php;
??
break;
case rice:
$selection = rice.php;
?style type=text/css#side, #main, #holder, {height: 1000px;}
#menu_insert {height:950px;}/style?
break;
case drinks:
$selection = drinks.php;
?style type=text/css#side, #main, #holder, {height: 1600px;}
#menu_insert {height:950px;}/style?
break;
default:
$selection = starters.php;
?style type=text/css#side, #main, #holder, {height: 1400px;}
#menu_insert {height:950px;}/style?
break;
}
?
__
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] frames and anchors a css alternative
http://legalss.co.uk/newsite/services.phps http://legalss.co.uk/newsite/services.php When I click the menu item on the left I want it to jump to the correct part of the text, however the full page jumps up. Can I use anchors with div ids so only the text skips to the anchor point? R. __ 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] expanding divs - FF
On the link below the inside containers (pink bordered divs) should push the main #container (green border) down when the inside contents expands http://www.blue-fly.co.uk/nss/about_us/whoweare.php I have tried ems, which works however it makes the #container too big every time cntrl+ is pressed . The divs use min-height so should in theory this should work in FF, if you look at in IE7 it behaves the way it should. You can look at the css here (css_common.css) Ta, R. __ 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] selecting all divs
What is the selector for all divs? R. __ 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 in the box
Hi, This page is a work-in-progess however I am trying to make the text stay inside the div butttons when the text size is increased (firefox). I tried word-wrap:break-word; but this does not work. http://www.blue-fly.co.uk/test.php http://www.blue-fly.co.uk/test/bf.css I do not really want the boxes to expand with min-width or make the text graphics. Any ideas? R. __ 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 vs IE7
Hi Ian, Have been deleloping using ie7 for a few weeks now and will have to say it is much better. Really frustrating things like png alpha transparency are now working whcih although not stricly a css issue does cause problems. A nice feature is the full sceen zoom (which opera has had for a while now), this will effect the text size/page break issues and will probably allow accessible sites to be more design rich as you will not have to stick to the old two column layout for it to be bulletproof. There are however a few things that do not appear to be resolved and maybe someone could confirm this - double margin float - min-width/max-width Ross __ 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] (no subject)
Hi,
I have some buttons, but when the text is increased it escapes from the div.
Is there any way to force text wrapping?
.rollover a {
display:block;
width: 80px;
height:80px;
word-wrap:break-word;
color:#333;
background: url(../images/home.png) 0 0 no-repeat;
text-decoration: none;
float:left;
}
.rollover a:hover {
background-position: -97px 0px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
the html
div class=rollover
a href=#home/a
a href=#news/a
a href=#solutions/a
a href=#/a
/div
/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] png background not showing in firefox
works fine in IE7.
#right {
background-image:url(../images/middle.png);
width: 510px;
position:absolute;
height:350px;
top:160px;
left:436px;
border:#006699 1px solid;
}
__
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 and firefox problem
I have a header div #header is relatively positioned. Inside this is an
absolutely positioned #menu_holder div that holds a suckerfish menu. The
problem i when I use top:80px; on the menu holder it is perfect in both IE
version and too low in FF. when I change it to 60px FF is the one that is
perfect
As you can see from the example #menu_holder (the pink div) ie has the menu
sitting in the middle where FF pushes it down a bit.
http://www.blue-fly.co.uk/trisco/example.png
This is the css
#menu_holder {
width: 850px;
position:relative;
height: 20px;
float:left;
background-color:#99;
z-index:1000;
top: 80px;
left:0em;
padding:0;
margin:0;
}
Ross
__
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] declarations and embedded items
I have this.
div id=header
div id=holder
ul id=mylist
li item 1/li
li item2/li
ul
/div
/div
what is the correct way to change the ul properties without effecting other
properties.
#header #holder #nav {
}
#header #holder #nav.ul {
}
#nav.ul {
}
#nav ul {
}
and what (if any). Is the difference between #nav.li and #nav li ?
thanks,
R.
__
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 and 7 vs Firefox and absolute poisitoning error
Hi, I have a header div #header is relatively positioned. Inside this is an absolutely positioned #menu_holder div that holds a suckerfish menu. The problem i when I use top:80px; on the menu holder it is perfect in both IE version and too low in FF. when I change it to 60px FF is the one that is perfect The thing that seems may difference is the way they react to a searchbox in the header... table width=198 border=0 style=position:absolute; top:0px; right:0px; tr td height=27div align=leftsearch this site for /div/td tdnbsp;/td /tr tr td width=149div align=right input name= type=text / /div/td td width=33input name=GO type=button value=GO //td /tr /table I have taken this out altogther and nothing moves so maybe not! Is there an absolute issue with FF or IE? Ross __ 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/
