Re: [css-d] Infuriating spacing problem in MSIE6
From: Christie L. Ward http://www.quickshift.com/test3.shtml In Firefox, the whole thing looks good. In MSIE6, unfortunately, no matter what I've tried the browser is putting about one pixel between the two rows (you can see this where the bottom of the Q logo on the left is broken). Christie, You've got 4px top padding on the .searchbox, remove it and your gap goes away, I also removed some whitespace in your markup between table rows that make up your top section, but in this case that wasn't the problem. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] newbie - problem with CSS bullets not going away and others
From: Laura Greenwood
and for some reason, even if I copy the exact code in my file, it puts
bullets next to the list item entries even though the CSS
(list-style-type: none) says NOT to put the bullets..
I have posted my code at
http://ciswebs.smc.edu/cis51/greenwood_laura_lee/temp_nov/index4.htm
Laura,
Set the list-style-type on the ul, not the li and the
container div.
Your css
#navcontainer
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer li
{
margin: 0 0 .2em 0;
padding: 0;
list-style-type: none;
}
Should be something like in between those two:
#navcontainer ul
{
list-style-type: none;
}
Remove the list-style-type from the container div and li selectors.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text padding
From: Mário Gamito
You can see what i want here:
http://www.tuxdoit.com/imgs/prototype.jpg
Ahh, now I see. The easiest thing might be to give the
div class=block a green left border of appropriate width
and ditch the image. Alternaltely you could use the image as
a background image for the div, allowing it to repeat only
vertically, another option would be to float the image left.
Some rough and simplified examples below.
Left border option markup:
div class=block
pMy lovely text in my lovely paragraph, in my lovely div./p
/div
Left border option css:
.block {border-left: solid 4px #519a24;}
Background image option markup:
div class=block
pMy lovely text in my lovely paragraph, in my lovely div./p
/div
Background image option css:
.block {background-image:url('/images/mygreenline.gif');
background-repeat: repeat-y;
background-position:left;}
Floated image option markup:
div class=block
pMy lovely text in my lovely paragraph, in my lovely div./p
img src=/images/mygreenline.gif /
/div
Floated image option css:
.block img {float-left;}
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a GIF with CSS
From: Angus at InfoForce Services
It is probably simple, however I would like to get my Gif to
float to the
right and have Canada National Anthem music apear in the
top left corner.
HTML: http://infoforce-services.com/personal/englishocanada.php
CSS: http://infoforce-services.com/css/ifsmain.css
For your logo gif to the right, part of the answer is a css change:
.anhrline img {
float: right;
}
Another part is a markup change:
div class=anhrline
img src=ifslogo.jpg width=200 height=180
alt=This is the InfoForce Services Logo /
h1InfoForce Services/h1
Your Canada National Anthem Music thing is confusing.
But, based on the fix for the logo gif I think you can
probably work it out.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning text
From: Angus
Can anyone tell me why my name and contact information at the
following will not center?
HTML: http://infoforce-services.com/personal/generalresume.php
CSS: http://infoforce-services.com/css/ifsmain.css
Angus,
You have markup like:
div id=generalresume_nameAngus D.F. MacKinnon/div
p id=generalresume_address23756 110B Avenuebr /
But your css is:
.generalresume_name {
.generalresume_address {
Either the css needs to be
#generalresume_name {
#generalresume_address {
Or you need to change the markup to class=generalresume_name
The .whatever is a class, #whatever is an id.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Link color not appearing in IE
From: Travis F. Smith http://www.bargaintarps.com/index_soon.html In IE 6.0 for Windows, the navigation colors are green on green, and unreadable. Travis, You seem to have a markup error in the menu structure. liul class=secondnavh2Applications/h2 lia href=tarps_mesh.htmlBin Covers/a/li The ul element can only contain li elements, you can't put the h2 element where you have it. Better to use markup like: lih2Applications/h2 ul class=secondnav lia href=tarps_mesh.htmlBin Covers/a/li The li element can contain other block level elements such as the h2 as shown above. There are some other markup problems, run it past the W3C validator and tidy it up before you spend more time on troubleshooting broken markup. http://tinyurl.com/9andq -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] background color/color declarations - why?
From: Pringle, Ron I'm trying to understand exactly why the W3C CSS validator now spits out errors for instances where you do not declare a color on a property with a background-color declaration, or vice versa. It's just a sanity check sort of a tip. Just intended to alert you to the possibility of snafus like white text on a white background, which might be inherited and so on. It is intended to be a warning, rather than an error. I think the W3C have acknowledged that they have changed the css validator and that it isn't quite right at present. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] border in image link
From: Donna Jones
really going nuts here trying to figure out how to get this one pixel
border to be gone. its the image/button on the left. she
wants it to
be a link seems like i've tried *everything* but i must not be
understanding or else forgetting something.
http://www.westendwebs.net/susan/
Donna,
Something along the lines of:
a img {border: none;}
You may also need a text-decoration: none;
depending on the circumstances
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] help centering my menu
From: Patrick Roane I just need a quick tip on how I can center my menu: see www.cpcconstruction.net/1/index.html Patrick, You've got a few markup errors that won't be helping your troubleshooting. Run the page past the w3c validator and clean up the errors it shows you. http://validator.w3.org/check?verbose=1uri=http%3A//www.cpcconstruction .net/1/index.html Your menu should center for you in FF using the margin: 0 auto; declaration if you apply it to the right element. Your UL could be goiven a class or ID to facilitate that. ul class=sitenav for example. You'll need to take care of older IE and quirks mode IE as well though, which is probably where you are seeing the non-centered menu at present. You could use text-align: center; on the container div, info, then set a compensating text-align: left on child elements that aren't intended to have centred text, (IE 5 centers all block level elements in response to text-align: center; . Using that in combination with the margin: 0 auto; should have your menu list centered in all the recent browsers. I didn't test this using your markup, but it should get you on the right track. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Beginner Q: Aligning left and right on same line?
From: Charles Wiltgen
On several lines of text within a div, I'd like some of the
text to be
aligned left and the rest of the text to be aligned right without the
gratuitous use of tables.
Charles,
CSS
.whatever {
float: left;
width: 15em;
}
.whatnot{
float: right;
width: 15em;
}
Markup
p class=whatnotThis is your right aligned chunk/p
p class=whateverThis is your left aligned chunk/p
You need a width on the element you are floating, unless like
an image it has an implicit width. Where I used a p element
you could use other elements that better fit your situation.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] IE6 no change in text with a:hover
From: Charles Dort
...it does what I've asked it to quite nicely so far
in Firefox, but in IE6 there's no change on hover.
It seems to me that I've read something about IE not
recognizing hover on this list...
HTML: http://tinyurl.com/8a4au
CSS: http://tinyurl.com/deo29
Charles,
It seems to be a specificity thing.
#header #nav li a:hover {
color: red;
font-weight: bold;
}
works fine, as does
#header #nav a:hover {
color: red;
font-weight: bold;
}
Your bolding makes all the nav elements jump around on rollover though,
it might be better to make all the links bold to begin with, or leave
the hover state without bold.
The IE not supporting hover doesn't apply to the anchor pseudo-classes,
(a:hover, a:visited, etc), it does those just fine.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] CSS Syntax for ID's
From: Akins, Chris
Sometimes people just write their id's as:
#idName {}
Other times I see the div in front such as:
div#idName
Since id's are unique anyway what's the difference here? Does the one
without the div explicitly stated NOT work in some cases?
I've also seen similar with classes...
Chris,
I've always been one to use .classname amd #idname
What was revealed to me recently on this or another list was
that using selector.classname or selector#idname is useful
in indicating to others who might work on the site what the
intent of the original style was.
It is sort of self documenting by showing where and perhaps
in what circumstances that rule was intended to be used.
I'm not sure if I would adopt that convention, but I'll be
keeping it in mind for future occasions when it might be
a useful trick to have in the bag.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Condensed font
From: Scott Haneda Is there any safe condensed font I can use on the web? Scott, Arial Narrow would be a fairly safe choice for Windows visitors, a lot of commonly installed MS home and business applications provide it. Nimbus Sans or Helvetica Narrow seems like a likely UNIX choice. The MS typography pages suggest that Arial Narrow is likely to be available on Mac OS too, but I have no recent experience of Mac type choices. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] First full CSS site
From: Benjamin Rossen
body{font-family:Arial, Helvetica, Sans serif ;}
Also, some browsers will not understand the generic term 'sans
serif' with a capital letter. This will give you the best
result on the widest range of platforms.
body { font-family: Arial, Sans, Helvetica, sans serif; }
I think that should be sans-serif, the sans serif version
would require require quote marks if it was correct and
going to be used. IE. sans serif
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] help! margin: auto not working as expected
From: cody h http://www.evergreen.edu/ the outermost container's (#pagecontainer) side margins are set to auto, but the container refuses to center in ie6. Cody, That is a FAQ, IE doesn't do margin: auto See the wiki for a workaround/fixup. http://css-discuss.incutio.com/?page=CenteringBlockElement In your case I think a text-align: center on the body element and text-align: left on your pagecontainer div will be the fix. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] download font
From: david Peter Williams wrote: One method is Microsoft's WEFT http://www.microsoft.com/typography/web/embedding/weft3/default.htm There are other ways, too. Unfortunately, NONE of them have become even a de facto standard ... best to avoid dependency on specific fonts. Agreed, the Bitstream flavour of font embedding was hard to find any simple info on when I had a quick look in response to the original question. I've never been even tempted to try these techniques myself. I should have mentioned that in my original answer. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Need help with a layout
From: Mark Kamian [mailto:[EMAIL PROTECTED]
It's bumping the collage on the right down a line now, which
I suspect has
something to do with the p before, but I'm not having
success moving it
up. Any ideas?
http://d557386.u42.hostserv-dns.net/index.asp
No time to test or investigate thoroughly but I think
#sidebar IMG#mosaic
{
clear: right;
might be your problem. Take out the clear:right and see what happens.
You don't want that div to clear, you want it to float to the right of
your content area.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] invisible hr?
From: Kitty Garrett
http://wwwsqueakywheels.org
My most recent puzzle is that the rules hr aren't showing up on the
site. I defined them in the style sheet as:
hr {
color: #006633;
background-color: #FF;
width: 2px;
}
IE (possibly incorrectly) applies the color to the hr,
Moz and other browsers don't. They will show a color
if it is set as a background-color though.
So change the rules to:
hr {
color: #006633;
background-color: #006633;
width: 2px;
}
and see how you go.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] nav bar border spike
From: Trish Meyer
I just started a template today for a garden society:
http://www.cybmotion.com/schs/test.htm
I can't figure out how to get rid of the spike when I hover over
the nav list?
http://www.cybmotion.com/schs/stylesheets/schs1.css
Trish,
It is because you've used the border-bottom and right-border combo.
I've exagerated it here so you can see what is happening.
#nav ul li a {
display: block;
color: #660066;
list-style-type: none;
text-decoration: none;
width: 133px;
padding: 0px 0px 1px 12px;
border-bottom-style: solid;
border-bottom-width: 30px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #DB5E8D;
border-right-width: 40px;
border-right-style: solid;
border-right-color: #FFE2A6;
background-color: #FFE2A6;
border-bottom-color: #FFFBE5;
}
#nav ul li a:hover {
background-color: #F6B733;
border-right-width: 40px;
border-right-style: solid;
border-right-color: #CA617D;
}
Use margin-bottom: 10px on those items instead.
The browser is making a mitred corner between the two borders,
and sonce they are two different colours and two different widths
you are getting that odd looking spike, in my example it is
more clearly a mitred corner join since the borders are of more
equal width. You'll want to apply the bottom border colour to
list background colour to simulate the look it had with the
coloured bottom border.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] download font
From: Arthur Maloney I've got a TT font (barcode128) How do you down load fonts with CSS ? One method is Microsoft's WEFT http://www.microsoft.com/typography/web/embedding/weft3/default.htm -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] download font
From: [EMAIL PROTECTED] This may sound like a stupid q but why? I mean, fonts take up virtually no space and AFAIK cant be used in a malicious way? Can they? Is this some old ruling from the old school or is there a valid reason fonts declared in CSS cant be retrieved upon request? Licencing? You purchase a font for your use, that doesn't allow you to copy it to and install it to all the visitors computers too. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] download font
From: Christian Heilmann A previous poster asked How do you down load fonts with CSS ? And I stated One method is Microsoft's WEFT http://www.microsoft.com/typography/web/embedding/weft3/default.htm Yeah, that is a great plan. Only works for MSIE and was last updated in February 2003. * I didn't say it was a good method or a good idea. I'd certainly never use it or recommend it, I just pointed it out. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Need help with a layout
From: Mark Kamian
http://d557386.u42.hostserv-dns.net/index.asp
The problem I'm faced with is getting the div id=content
stuff (which is
currently commented out, you'll see if viewing the source
code) into the middle, white-space area.
You've got it clearing your left and right side divs, so it
is appearing below them at the left.
Change the styles to:
#content
{
margin-left: 150px;
margin-top: 150px;
width: 525px;
border: solid 1px red;
}
And you can tweak from there. The red border is a good testing
technique, turn on a coloured border for the major page elements
and you can see where they are and how they fit with one another.
If I were you I'd be including the trailing ; on all your rules,
it is easy to add an extra rule and forget to add the ; to what
was previously the last one and then problems you can't figure
out start to occur.
I'd also try to keep it all lower case too, just for consistecy
and ease of maintenance.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] nav bar border spike
From: Trish Meyer
http://www.cybmotion.com/schs/test.htm
I don't suppose there's a way to make the colored right bar appear
*inside* the colored nav boxes, rather than outside as it does now (I
guess that's what borders do...)? Or do I need to use a graphic
element that appears in the bar flush-right?
Trish,
You could give the effect of the right margin appearing inside
the nav box by adding the same width border in the background
colour for the un-hovered states. Then the hover state would
just change from the peach colour to the maroon colour.
#nav ul li a {
Existing rules +
border-right-width: 4px;
border-right-style: solid;
border-right-color: #FFE2A6;
}
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] div tags showing line break in firefox
From: praveen vejandla I have a web page that uses CSS and number of div tags. it shows is IE as 4 div segments per row (horizontally) then next 4 in second row. But when I am using firefox , everything is shown vertically in one column itself. A div is a block level element, Firefox is behaving as I would expect and as the W3C intend. Without seeing the markup and styles it is difficult to say anything more about the problem. Turning on some coloured borders on your divs is a big help in seeing and understanding what is going on. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] help with disappearing borders in IE6/Win
From: Christian Montoya I think text-indent:-0.9em; is the problem. I've never even heard of text-indent before. Christian, http://www.w3schools.com/css/pr_text_text-indent.asp -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Why don't my images appear on site?
From: Nancy Smith Second, none of my jpegs show up on the site. http://www.wminc.biz Nancy, img src=images/faucet.jpg When I looked in http://www.wminc.biz/images/ I saw no such image. Looks to me like you forgot to upload them. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Box Problem
From: Richard Brown
Could folks have a look again please?
The site url is http://www.abistudios.co.uk with the css embeded. The
problem is a white band towards the botttom of the content div.
Richard,
Add height: 100%; to the rules for boxcontent, as in:
.square .boxcontent {display:block; background:#9ce;
border-left:1px solid #00c; border-right:1px solid #00c;
height: 100%; }
When you are tring to troubleshoot it is helpful to turn on
1px coloured borders on the main divs and the area where the
problem is so you can see what element the problem is happening
in and what else is going on with the surrounding elements.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Is it possible to style a cell TD so that images inside of itwith links have no border?
From: Bruce Searl
The goal is to apply formatting to a table or table cell,
that will prevent the border
from showing if the image contained in it has a link around
it
td border=0a href=link.aspimg src=image.jpg/a/td
Bruce,
td a img {border: none;} should do the trick for you.
You could add text-decoration: none too just to be on the safe side.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Centering my menu - IE fine - Firefox not
From: Sue Forrester
Here's what I have in the stylesheet:
#menu {
border-top: medium solid black;
border-bottom: medium solid black;
margin: 0;
padding: 10px;
text-align: center;
}
You are very close to having it also centered in FF.
#menu {
border-top: medium solid black;
border-bottom: medium solid black;
margin: 0 auto;
padding: 10px;
text-align: center;
}
IE doesn't do margin: auto, instead it centers all block level
elements in response to text-aligh: center. That is why you got
it centered in IE, add the margin: auto and FF should follow
your plan too.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] How to get rid of gaps
From: Peter Speltz ...Firefox on a PC... I have gaps that i do not understand between images that make up my banner. div class=logobar img class=logo src=images/logo_piece_1.jpg img class=logo src=images/logo_piece_2.jpg img class=logo src=images/logo_piece_3.jpg /div Peter, Whitespace in your markup is the culprit. Try something like: div class=logobar img class=logo src=images/logo_piece_1.jpgimg class=logo src=images/logo_piece_2.jpgimg class=logo src=images/logo_piece_3.jpg /div -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] trouble centering a span
From: joshua hough This is a span set within the div that contains the blue tabs. The div is text-align: left and fills the width of its parent. I'd like to center the date in the remaining 19px by 160px blue space to the right of the last tab. It refuses to be 160px wide or 19px tall. Making it a div pushes it below the tabs. Joshua, text-align isn't applicable to a span or other inline elements. As you note using a block level element like div places the content below your other block level element. Even if you set the span to display: block and text-align: center you'll find that the centered span appears on a line by itself. The problem is what is the container that you want the span centered in? How is something centered when it is part of some text that is flowed in a block level element? You probably need to rethink your design/layout and see if there is another way to achieve what you want to do with the layout of this content. Maybe float the nav div left and put the date in its own div that could then sit to the right of nav if you set a large left margin on it. Or set the date in a paragraph or div and float it right. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Padding around aligned images
From: Joanne
I have a website where I am aligning some images to the left
and some to the right (within a paragraph).
Ie: I'd like padding on the right hand side of those aligned
to the left and
padding on the left hand side of those aligned to the right.
Something like
.leftimg img { margin-right: 10px; }
.rightimg img { margin-left: 10px; }
With markup like
div class=leftimgimg src=blah.img
My left aligned image of blah./div
div class=rightimgimg src=blah.img
My right aligned image of blah./div
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] img border madness
From: Lorraine Nepomuceno I'm going nuts trying to get rid of the border on my linked images. See the sample here: http://www.splashscreen.com/test.html Lorraine, A couple of things are awry with your markup: div id=navcontainer ul id=navlist Used twice on the page, an id instance can only occur once per page. img src=images/ssoffice.png alt=Test Not properly closed. Since the img element is malformed it might cause your a img rule to not apply. form method=get action=$MTCGIPath$$MTSearchScript$ Your form element is upsetting Tidy too. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Horizontal navigation menu
From: Vicki Stebbins (Skinner) The drop down navigation menu at http://www.rosellaorchids.com.au/about.php is quirky! CSS is at http://www.rosellaorchids.com.au/styles/rosella.css I want the home link to be in line with the other links when showing in a 800px browser... to do this I shortened the width of the #nav a to 6em and it works in IE but then FF shows the word 'catalogues' with the 's' cut off... I put it back to 8em and still the 's' is cut off and in IE the 'home' link shows underneath. Tried using About us Contact Gallery etc instead of all caps? You are so close that it will only need a nudge to get it to fit. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] CSS tabs, sublinks and 2 column layout
From: Kris Black Site: http://www.flawmark.com/isell/index.php CSS: http://www.flawmark.com/main.css The sublinks should have a bottom border dashed line below them with the sidebar butted up to it, not overlapping it. If you watch the page load you'll see the dashed line render above the sublinks and its suppose to be a bottom border. I ran the page through the w3c validator, and near the bottom of the error list are some structural type errors that may be causing some of your grief. Improperly closed table element, addition closing tag for a div, and a couple of form elements munged up. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Header problems on resizing - Repost
From: dwain alford this may sound a bit bazaar, but float the h4 left and replace your 10px left margin to 0 on the #sitenav and i think that should do it for you. Dwain, That changes the behavious slightly, but doesn't completely correct it either. I've uploaded a revised version following your suggestions and correcting the syntax error I had on font-size for the h4 too. It is better, but not perfect now. Thanks. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Header problems on resizing - Repost
From: Larry Miller Have you tried adding a width property to your #header declaration? From: Rich Points I put together a tweak of your page. I did so under the assumption that you wanted a static width; 820px. http://richpoints.com/tc.html Rich and Larry, I had tried a fixed width header myself, but I like and want the reflow that I get without specifying a width. Even if I specify a width for the header div, resizing the text can trigger the jumping around issue. I don't understand what you mean by the h1 and h4 being best in the body content of the page either. I don't think there is a reason semantic or technical that would make it unwise to use them in the header (note that this is in the body element, not the head element of the page if you misunderstood my previous message. Have a look at the current iteration that I made after trying Dwain's suggestions and see how it behaves. http://www.nci.net.au/temp-test/ I'd be pleased to hear how it works across few browsers and OSs. I know that IE/Win doesn't resize the text and that FF 1.06/Win seems pretty much acceptable at this point. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Problems W/Subclasses
From: Martha Bowes
I've run the CSS and HTML 4.0 validators on my home page.
Error Line 23 column 44: there is no attribute CLASS.
...s=address align=centerMf class=smallcapsARTHA/f H. Bf
class=smal
The temporary site of the home page is:
http://www.genealogyvault.net/
bowes-bigelow/index2.html
The style sheet is: http://www.genealogyvault.net/bowes-bigelow/
style.css
Martha,
There is no f element in html or xhtml.
You need a real element to apply your classes to.
If you want to make your own arbitary element you could use
span for an inline element, of div for a block level
element.
p class=address align=centerMf class=smallcapsARTHA/f H. Bf
class=smallcapsOWES, CLTCbr
General Insurance Brokerbr/f
f class=smallcaps2Long-Term Care Planning Specialist/f/p
You could rewrite this (html 4) to:
p class=address
Mspan class=scartha/span H. Bspan class=scowes, CLTCbr
General Insurance Brokerbr/span
span class=sc2Long-Term Care Planning Specialist/span
/p
CSS
---
.address {
color: #005500;
font-weight: bold;
font-size: 150%;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
.smallcaps {
color: #005500;
font-weight: bold;
font-size: 90%;
font-family: Helvetica, Arial, sans-serif;
}
.smallcaps2 {
color: #CC6600;
font-weight: bold;
font-style: italic;
font-size: 90%;
font-family: Helvetica, Arial, sans-serif;
}
Note that there is an address element that you could use and
style, elminating the p class=address notation. This isn't
really an address at all though.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Problems W/Subclasses
Martha,
forgot to add small-caps is done by font-variant: small-caps;
Ad that rule to declaration to the two sc classes to get
actual small-caps for your page.
IE.
.sc {
color: #005500;
font-variant: small-caps;
font-weight: bold;
font-size: 90%;
font-family: Helvetica, Arial, sans-serif;
}
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Header problems on resizing
Dear list, I am working on a site where I have a header that contains: - Company logo (image wrapped in h1 on left) - Site wide navigation bar (styled ul, middle right) - Catchy slogan (h4, bottom right) I have an example page that can be viewed at: http://www.nci.net.au/temp-test/ The sample page has a screen cap under the actual header showing the relationship of the elements as intended. If you resize the page the catchy slogan jumps around and gets quite out of control at some sizes. I think I have overcomplicated the markup and styles for the header (all styles in head of page for the sample page). How can I better contain the contents of the header div? Should I be using a different unit of size for the text parts? I'm not sure why I'm having so much trouble with this, but I seem to have some sort of stylers block ;-) Thanks in advance for all help rendered. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] converting to tableless- quick question
From: Adam Helweh basic pointers on how to convert a tables site into a tabless CSS site? I got a huge project ahead. Thanks Our list owners book Eric Meyer on CSS has a lot of material on the subject. He redoes a table based site using css as one of the excercises. The whole book is full of useful, real world examples and techniques. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] dt and dd next to each other
From: Christy Collins
Is there a way to get a dt and a dd next to each other?
Christy,
dt{float: left;}
in your stylesheet should do it for you.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Printing background images
From: artcoder My page at http://learn.webmarksonline.com/css/code/code32/coollines.htm looks fine on the monitor. But if an user prints my page from IE, the tiled background image of my diagonal textures does not show up. What is the best way to get background images to print? On the Internet Explorer menus of the user: Tools, Internet options, Advanced tab, scroll down to Printing, tick Print background images and colours. It's a user choice. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] newbie to css - using css with include file
From: Laura MacNeil
This template also has an inlclude statement to a header file
(clf_header .asp) - !--#include virtual=clf_header.asp--
When I preview the template in the browser - the header file
is not showing up correctly. There are links in the header
file, but I do not want them to follow the cascading style
sheet rules for links - is there a way to do this?
Is it possible to exclude the header file from the cascading
style sheet rules?
Laura,
Just give the header an id or a class and then you can apply
different styling to all the elements that are in your header.
ie.
Include file markup:
[div id=headerinc]
[h1]My header heading[/h1]
[p]My header paragraph, blah, blah, blah.[/p]
[a href=file.html]My header link[/a]
[/div]
css:
#headerinc h1 {color:green;}
#headerinc p {color:blue;}
#headerinc a {color:red;}
and so on.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Typography and CSS
From: designer Things like the relationship of sizes for text/headings, which fonts are most 'readable/legible' etc etc. I know it is not exactly what you want, but Joe Gillespie has some good typography for the web info at his web site. http://www.wpdfd.com/editorial/wpd0704news.htm#feature I haven't seen a book such as you are looking for. You can only go so far with typographic control on the web. There is so much browser and system variability that tight control that works properly one one system is likely to be problematic on another. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Mind the gap
From: Ian Sweeney In IE6 there is a gap between the bottom of the image shown at www.iansweeney.me.uk/p4 and the blue top border of the content section. There is no gap when viewed with Firefox. How do I get rid of the gap? ian, It is the whitespace in your markup causing it. Rewrite the markup as: div id=mastimg alt=MAST src=mast.jpg //div and it goes away. It was some sort of extra space in the mast div. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] div's and tables
From: dweaton
I have a formatting issue.
...I cannot control the height of the div in IE, but I can in Firefox.
As a result, the list is too spread out in IE.
Why not write out the div with a class and set the padding, etc?
div class=datarowHere is my nifty data record/div
.datarow {padding: 2px; margin: 0; border: whatever;}
At the moment you are just getting the defaults for each browser
which must be different. Set all the properties to know values
and adjust to taste.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Insert line break using css?
From: Jeff Chastain
I have a set of HTML markup that consists of 4 span tags in a row ...
span id=span1span 1/span
span id=span2span 2/span
span id=span3span 3/span
span id=span4span 4/span
In one layout, I need the four tags to be on a single line
next to each
other. In the second layout (different stylesheet), I need
the 4th tag to
drop down and be on its own line.
In the second layout just add display: block for span4.
#span4 {display:block;}
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Setting height to 0 does not work on IE6
From: Will Merrell
div class=clearnbsp;/div
.clear {
display : block;
clear: both;
height: 0em;
margin : 0em;
padding: 0em;
}
...under IE6, guess what, the clearer div occupies a full line.
Remove the non-breaking space form the markup,
and/or set the line-height to a zero value and see
what the behaviour is like then.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Setting height to 0 does not work on IE6
Sorry, I screwed up the CSS in the previous sample,
My test case works in IE6 and FF1.0.4
.clear {
line-height: 0;
clear: both;
margin : 0;
padding: 0;
border: 0;
}
.redbox {
float: right;
width: 200px;
margin: 0;
border: 1px solid red;
color: white;
background: red;
}
.greenbox {
margin: 0;
border: 1px solid green;
color: white;
background: green;
}
div class=redbox
pThis is redbox./p
/div
div class=clear/div
div class=greenbox
pThis is greenbox./p
/div
--
Peter Williams
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Will Merrell
Sent: Thursday, 30 June 2005 12:43 PM
To: css-discuss
Subject: [css-d] Setting height to 0 does not work on IE6
Hi Folks,
I'm floating some elements on a page, so I am adding a div
after to clear
them so they stay in the container. The clearer div looks like this:
div class=clearnbsp;/div
and the css for it looks like this:
.clear {
display : block;
clear: both;
height: 0em;
margin : 0em;
padding: 0em;
}
Here's the problem: on Firefox the clearer div occupies no
vertical space.
No suprise there. But, under IE6, guess what, the clearer div
occupies a
full line.
So ... ,
Does IE6 use the height property?
Does anyone know how to get this div to show up as zero height on IE?
Thanks,
-- Will
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Setting height to 0 does not work on IE6
My test case works in IE6 and FF1.0.4
.clear {
line-height: 0;
clear: both;
margin : 0;
padding: 0;
border: 0;
}
.redbox {
margin: 0;
border: 1px solid red;
color: white;
background: red;
}
.greenbox {
float: right;
width: 100px;
margin: 0;
border: 1px solid green;
color: white;
background: green;
}
div class=redbox
pThis is redbox./p
/div
div class=clear/div
div class=greenbox
pThis is greenbox./p
/div
--
Peter Williams
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Will Merrell
Sent: Thursday, 30 June 2005 12:43 PM
To: css-discuss
Subject: [css-d] Setting height to 0 does not work on IE6
Hi Folks,
I'm floating some elements on a page, so I am adding a div
after to clear
them so they stay in the container. The clearer div looks like this:
div class=clearnbsp;/div
and the css for it looks like this:
.clear {
display : block;
clear: both;
height: 0em;
margin : 0em;
padding: 0em;
}
Here's the problem: on Firefox the clearer div occupies no
vertical space.
No suprise there. But, under IE6, guess what, the clearer div
occupies a
full line.
So ... ,
Does IE6 use the height property?
Does anyone know how to get this div to show up as zero height on IE?
Thanks,
-- Will
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] link list problem in IE_ from yesterday
From: Adam Helweh Internet Explorer 6... as soon as I click they turn gray and underlined. This is not a style I use CSS- http://www.rocklinsystems.com/infinity/styles/infinitystyles.css Define the a:active pseudo class for the links. At present you are seeing the IE default display for this state. Order of defining the link states should be LVHA. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] [Printing problems with DL/DT/DD for numbered paragraphs] rides again...
From: Pringle, Ron ...I don't see the logic or reason behind the use of a definition list for numbered paragraphs. As you have it now, the dt has little meaning or relation to the dd. SNIP Better yet, designate each number as a header (h2, h3, whatever) and follow it with the paragraph. I think the header/paragraph would make the most sense in a non-visual way. David, When I was managing a large collection of policy and instructional documents (where the authors of the original MS Word versions just loved numbered paragraphs) I used a H4 P combo as suggested by Ron. I agree with him that, sematically, your DL method is less than optimal. You really should *describe* the document elements with your markup, not just use what allows pleasing appearance in some output media. This part of the discussions is off-topic though, so I don't think we can progress it here. webdesign-l is a place where you will get considered and practices opinions on the markup choices that could best suit your purpose, and which may also allow for styling the output in ways that satisfy your desire for a certain layout. http://www.webdesign-l.com/ -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: Subject: RE: [css-d] a:hover border-bottom not showing up in IE?
From: Jason Baker Peter, I have now added the text-decoration:none; ...still do not see a bottom border in IE. Additionally i see that you have the class named #nav a rather than div#nav a, is there a difference? should i be doing things one way or the other? I noted that another list member offered the information that the bottom-border problem disappeared when the text size was increased. So it is probably just a display glitch/artifact, rather than any markup of css error on your part. div#nav is more explicit and specific that #nav. If you define #nav you could use it on a div, p, h, whatever. If you define div#nav then all it can be is a div. There is no practical difference, but #nav offers more versatility, your way offers more specificity, but sinece an ID can only occur once per page it is hard to imagine why you'd need to do it that way. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] horizontal border in a liquid layout
From: Maren Child ...green border under the 'topnavbar' div I guess what I want to say is 'width = 100% minus 140 pixels' and 'margin-left = 30 pixels'. So if you remove the width and just give it left and right margins of 30 and 140 px what happens? -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] [Printing problems with DL/DT/DD for numbered paragraphs] rides again...
From: T. R. Valentine
A hanging-indent can be achieved by using the text-indent property and
assigning it a negative value. What would be tricky in the above would
be aligning the beginning of the text following the number with the
left edge of the other lines.
Back on css topic :-)
How about the css2 first-line pseudo-element?
5.12.1 The :first-line pseudo-element
The :first-line pseudo-element applies special styles to the first formatted
line of a paragraph. For instance:
p:first-line { set your hanging indent here; }
You'd need to test the bowser support amongst your intended user base.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] space between paragraphs
From: Eliana Berlfein The space between paragraphs is much bigger on a PC than a Mac. Is there some way to control the space and make it more consistent? Set the top and bottom margins and padding to values that work nicely for your intended use and preferences. Different browsers may use different default values when these settings aren't specifically declared. You may want to remove all top spacing and use only bottom spacing, or vice versa, or even some mix of both. Headings will likely need matching treatment. The use of em or % values can be good for this sort of adjustment as the spacing will scale with text size changes that a user may make. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] a:hover border-bottom not showing up in IE?
From: Jason Baker
...in IE the bottom border doesnt change to dashed style.
Have you turned off the default underlining ofr links in the div?
#nav a {text-decoration:none;}
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Seeking intense CSS Training
From: Christian Heilmann ...the Dan Cederholm's Web Standards Solutions book: http://www.simplebits.com/publications/solutions/ http://www.icant.co.uk/of/feeds.php?t=css Thanks for that heads up on that book, and the Obsoletely Famous site looks like a good thing in the making. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Using a class to create a line
From: Angus at InfoForce Services
I am trying to understand how to get a line to appear under
the InfoForce Services, IFS.
HTML: http://infoforce-services.com
CSS: http://infoforce-services.com/css/ifsmain.css
Something like:
.anhrline h1 {border-bottom: 1px solid white; padding-bottom: 0.3em;}
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Printing problems with DL/DT/DD for numbered paragraphs...
From: Kelly Miller
I don't think it's the prolog in this case...I was unaware that you
could use a float in a print page...
Kelly,
I setup a quick text page and my markup was:
dl
dt1./dt
ddThis is the first numbered paragraph, done by using a dl with numbers at
the dt
and the para text as the dd./dd
/dl
Accompanying css was:
dt {float: left;}
All good on-screen in IE6 and FF1.04 on Win XP, all good when printed too.
It might not be strictly supported, but it did work in practice.
Next test would be the same css in a media=print stylesheet.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Printing problems with DL/DT/DD for numbered paragraphs...
I've done a second test, using media=print and changing the typeface and hiding another element on my test page, the float still works and the numbers are still left of the dd text in IE6 and FF1.04, in print preview and when printed. Same markup as before and same css float directive as before, just with the typeface mod to prove the print stylesheet has been used. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] hr /not showing in FF
From: Arnie Shafer
Could someone please tell me why the hr's are not showing in
FF. Here is the css code I am using:
div #container #main-text hr {
color: #003300;
background-color: #003300;
height: 2px;}
I used your css and this markup:
div
div id=container
pContainer div./p
div id=main-text
pMain text div stuff./p
pA hr should be under this para./p
hr /
pAnother hr should follow this para./p
hr
/div
/div
/div
I saw coloured hr's in IE 6 and FF 1.0.4
Although I made them 20px red so it was easier to see what was happening.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Links not working in Firefox
From: Matthew Velic http://home.gwu.edu/~mvelic/dccub2/wall.html The Previous/Next links aren't clickable in Firefox You have things appearing on top of other things. Even in IE6 Win XP there are items overlaying one another. Chances are your links are covered by some other div. Turn on some coloured borders on your page elements and get the layout working properly as your first step. FWIW your links are fine in my FF if I put the cursor just above the text. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] question about inline-block
From: Ricky Morley In the test page, I gave the divs the style display: inline-block. ...neither IE nor Firefox seem to support inline-block. When I look in the CSS2 recommendation I see the following values that are applicable to display: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit I note that inline-block is not amongst them. In fact inline and block seem to opposing choices, either the item will be displayed as a block, or it will be displayed inline. Isn't inline-block a CSS2.1 thing? Not yet released and thus not finalised and probably not recognised and supported by most browsers in current use? -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Design-centric Standards resources
From: Tom Livingston Can anyone recommend Designer-centric Standards resources to help make designers aware of designing with standards in mind? Web Standards Org was big on that a few years ago, I think their focus has moved on to the software companies now. Still worth a look. http://www.webstandards.org/ A List Apart is another good resource. http://www.alistapart.com/ -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] OT When is the next version of CSS?
From: jordan WOLLMAN I've heard a lot of rumor of a newer version of CSS on the horizon with a lot of really neat new features, but can't find any information on it to save my life. W3C site is a good place to start looking. http://www.w3.org/Style/CSS/#specs Browser support (lack of) will most likely to be a bigger roadblock to implementing CSS3 than any delay in finalising and releasing the recommendation though. We still can't usefully use parts of CSS2. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Content not allowd in prolog validation error
-Original Message- From: Linda Dunn However, when I then try to validate its CSS document, I get the following: Target: http://www.ncwinnerscircle.com/ The stylesheet isn't being seen by the validator at the URL you gave it. The stylesheet is at http://www.ncwinnerscircle.com/styles/wcstyles.css http://tinyurl.com/92fo6 Now the validator sees the style sheet, and finds an error. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Content not allowd in prolog validation error
-Original Message- From: Linda Dunn But I don't understand *why* the stylesheet isn't being seen I wonder if it is because you have commented (html comments) out the style import statement? Take the !-- -- out and try again to test if this is the problem. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Content not allowd in prolog validation error
Linda Dunn wrote: I'm running into a validation issue I haven't seen before. My page (http://www.ncwinnerscircle.com/index.htm) From: Matthew Ohlman Try removing this line from your document: html xmlns=http://www.w3.org/1999/xhtml; And then adding this line as the very first one: ?xml version=1.0 encoding=UTF-8? :-) You can't remove the HTML element, you need to modify that line, not remove it, now it doesn't validate because your HEAD element is a child of your xml prolog. Note also that using the xml prolog puts late model IE back into early model quirks mode. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Fonts
From: Joanne There is a way to embed the font in to the website, but I have no idea how to do it. There were two competing methods (aren't there always) of embedding fonts for the web. Neither really took off as far as I can tell. Webmonkey have an article on how to use both http://tinyurl.com/d843s -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] help - CSS styled divider in between items on a page not working properly
-Original Message- From: Luca Balboni div class=divider/div It seems to work but when I try to validate the page, it gives me an error saying Error: attribute values must be quoted in XML It is actually one of the more understandable error messages. All it means is that the attribute value must have quotes around it. div class=divider/div I think you could achieve the same sort of divider between items using a plain old hr / and apply similar styles to it. It seems better than this arbitary, empty div you are using. BTW, you have the name CSS Request associated with the CSS Discuss email address which seems a bit untidy and likely to result in future confusion and anguish. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] new 3 col layout with header and footer
-Original Message- From: luciash http://www.ground.cz/luci/css/my3cols.html i've successfuly tested it in MSIE 6.0 Luci, I sent you a screencap off-list of what happens in Win XP/IE6. The content runs over the footer. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] new 3 col layout with header and footer
-Original Message- From: David Laakso Very strange. In XP_SP2 IE6.0 there's a brief flicker as the page loads and appears-- then quick as a flash my editor opens with your css file in the window. Yikes! When I close that window, your page re-appears. The CSS that is meant to display in the iframe or whatever it is at the bottom of the content area was blocked by my IE. When I said to allow the file to be downloaded, it wanted to open in the editor I have associated with CSS files. This didn't happen with FF 1.04, it just displayed the CSS in the special viewing area. This was incidental to the working of the layout. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] aligning li items
-Original Message- From: Keith Sader We've got a requirement to align some li items. The list items are basically expaining acronyms. ABC- Alpha Beta Charlie DFQG - Delta Fox Quarrel Gamma Surely this is the job of the Definition List [dl] It uses two components, the [dt] Deefinition Term and the [dd] Definition Definition. You could style the list and items to suit your formatting requirements. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] unreadable source
-Original Message- From: Linda H I saved the source and tried to open it in Notepad, but it just comes up as gobbledygook. Probably UNIX or Mac line endings in a Windows editor that doesn't know what to do with them. Either try a diferent editor (Editpad Light seems to always deal with this sort of thing properly), or use a DOS2UNIX util to fix the line endings. UNIX uses a LF as the line end, DOS/Win uses CR/LF, and I think Mac (old MAC OS, not new OS X) uses CR only. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
