Re: [css-d] a site that looks okay in firefox, but (*suprise*..) not in IE. beginner.
Jason,
On Jun 6, 2005, at 10:27 PM, Jason Baker wrote:
Re: http://blunx.no-ip.com/jason/muchbetter/front.html
if you view the page in firefox you will see something very pretty,
but IE totally disregaurds my attempts to make the content contained
within a bounded div box.
Additionally IE doesnt wan't to render the bounding box for the same
general content area in full size, instead it just renders the box as
needed for a simple nbsp; rendered within the box.
can someone help me figure out the problems listed and perhaps guide
me to a great starting resource for css? all i have at this point is
w3schools and the numerous examples shown on this mailing list's wiki,
hacking together the jumbled css i have thus far from examples is
obviously not helping me much :)
I'm now where I can check in ie/win, so I'm going to come at it from a
more general perspective. I too come from a programming background.
In some ways, the web is like more traditional programing. You write
code and it comes out in some fashion as a finished product. but the
resemblance ends there. In the web world, the user is king. He or she
may well be running a different browser on a different operating system
with different fonts installed and very different default settings.
Some users will have their own code that alters the look and layout of
your pages to suit their needs. Desktop app users don't have anywhere
near the control that web users do. In short, while you can
communicate a certain design, you cant expect everyone to see the same
thing, so build for flexibility. I'm looking at your page in four
browsers at the moment (there are more browsers, but my screen is only
so big :) ) and it looks fine, but not identical in three of them.
IE/mac is refusing to add the scroll bar to your content area, making
the page look odd.
Just like traditional programming, there are some best practices.
First, validate your code. Both the html [1] and css [2] have errors
that the validators will be happy to bring to your attention. If you
haven't yet installed the web developer tool bar for firefox, I
recommend it. It makes validation and debugging _much_ easier. I very
much like the 'edit styles' option that will let me edit the css 'on
the fly' and re-render the page to match in real-time.
Second, It is helpful to organize your stylesheet in a way that makes
sense to you (or your group if on a large project). I start with base
styles e.g. style the body, and basic link styles. This sets the
'tone' of the page. I then add each major section of the page with all
the style for that section grouped together. There's nothing great
about my organization except that I know where to find things.
Third, work hard at separating content from presentation. If you need
white space between two parts of the page, avoid sticking some br in
just to get the look you want. Stop a minute and think about why you
want the visual space because it often has something to do the the
information you are conveying. It would be better for that to be part
of the document structure.
Fourth, when you are going through the design process, code the the
spec as much as possible. Use a more standards-complant browser such
as firefox, safari/knoqueror or Opera. Don't worry too much about less
capable browsers 'til the design is done. It is usually more efficient
to tweak the css to help the less capable browsers once at the end
rather than as you go. It is kind of like trying to debug your c code
after you turned on code optimization in the compiler.
Fifth, when testing, do outlandish things. Resize your fonts, make
your window very wide and very narrow. Try your page in a text only
browser like lynx. Listen as your computer reads the page to you. Our
users do stranger things than we typically imagine.
Books: I found CSS: The Definitive Guide and Designing with Web
Standards most helpful. I learned a lot from Eric Meyer on CSS even
though I tend not to prefer 'recipe' books. (I needed it because I'm
graphically challenged :) ).
As in any new coding endeavor, read code and try using it/changing it.
The wiki is a great source of code and links. The list members here
are great about answering questions.
Your layout looks really cool, but it is somewhat ambitious for a first
project. It triggers a fair number of browser variances which may
impede the learning process. To be more specific, you are running into
some difficulties because your html and body elements are largely
unstyled, and child elements are sized in percents off the unstyled
root elements. You could start by doing something like this
html, body {
height: 100%;
}
I also notice that you are doing some nice things with translucency.
Unfortunately, ie/win has trouble with this.
[1]
Re: [css-d] Box model problem??
If you click on one of the links at the bottom of this page:
http://www.kellycountry.net.au/inprogress/corporate/contactUs.htm
... you can see what I mean.
Thanks
Please provide a link to the page so we can look at it.
Thanks,
Steven Costello
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Officelink
Sent: Monday, June 06, 2005 8:32 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Box model problem??
Hi,
I have some basic code on a page: it's just a single table with one row and
cell - table id=travelinfotrtdIn here is just about three or four
paragraphs of text wrapped in p tags and an h1 heading above each
paragraph/table/td/tr
The table has 20 pixels of padding all around and 8 pixels of border all
round. I used the following css to style the table itself as well as the
body and h1 tags:
table#travelinfo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
color: #00;
text-align: left;
margin: 0px;
padding: 20px;
width: 612px;
height: 598px;
voice-family: \}\;
voice-family: inherit;
width: 556px;
height: 542px;
htmlbody table#travelinfo
width: 556px;
height: 542px;
vertical-align: middle;
border: 8px solid #CCAE6B;
}
#travelinfo h1 {
font-size: 14px;
color: #CCAE6B;
margin: 0px;
padding: 0px;
}
body {
background-color: #FF;
margin: 0px;
padding: 0px;
}
On another page of my site, there's a text link to this page and the link
uses javascript to open a predefined sized window so that you can just see
the table with the border and all it's content. In the CSS, I've specified a
different width and height for IE(win) because of the box model problem.
The problem is that I would have thought that if I just specified 612 x 598
in the javascript for the new window, that everything would have fitted
perfectly, but when I do this, in mozilla(mac) there's a lot of white space
to the right (width) and it's cutting off the bottom (height). On IE(win)
there's white space to the right and bottom and there's no padding at all
around the table cell. I've had to kind of guess at the numbers and after
entering 556 for the width and 613 for the height, it has seemed to work in
Mozilla but there's still the problem of the white space at the bottom and
no padding for IE(win).
I'm not sure what's going on - maybe I'm missing something in the code. Can
somebody see what might be going on here?
Thanks for any help.
__
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/
__
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] 2 n00b questions
Hi Steve,
1. How do I show my pictures when you mouse over the link ?
page : http://homepage.mac.com/n00dles/pics.html
You _could_ show the pictures via CSS by adding them in the link:
a ...fooimg.../a
and then hiding and showing them on hover:
a img{
display:none
}
a:hover img{
display:block;
}
However, this has several drawbacks:
- The visitor will have to load every image although she might only
want to see one
- You cannot access the images via keyboard
- The display is jumpy, unless you also position the image absolutely
Maybe using a script to display the image in the page makes sense:
http://onlinetools.org/tools/thumbomatic/
2. I`m also having a problem floating 2 image. 1 float left and the
other float is on the right ?
page : http://homepage.mac.com/n00dles/index.html
If you float elements and you want content to appear next to them
you'll need to add the element first - then the content that should be
displayed next to them.
To avoid the element overlapping the parent container, you'll also
need to clear the float:
http://www.positioniseverything.net/easyclearing.html
Furthermore your pages are in quirksmode now, if you want reliable
results, force standards mode with a proper doctype:
http://hsivonen.iki.fi/doctype/
Last and least, and a matter of personal taste: I _hate_ the
expression n00b. We are mostly professionals here, and not an A/S/L
OMG ROTFL!eleventwelve chatroom. :-)
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with text color
[EMAIL PROTECTED] schrieb:
... http://www.rjhanson.com/test.asp. Everything works except as you
go down the menu tree the text color reverts to the original white.
We want the text color to be dark blue against the light blue as we
go deeper into the menu.
Example: If you go top level 'Casual' then 'Denim' then 'Shirts', we
want 'Casual' and 'Denim' to be dark blue on light blue. Currently it
becomes white on light blue.
I'm not competent in specifity issues/dropdowns. The solution I
found works only for level 1-2
/* level 1 */
div#nav li:hover a,
div#nav li.sfhover a {color: navy} /*2*/
/* level 2 */
div#nav li li a {color: white !important}
div#nav li li a:hover {color: navy !important}
or for level 2-3
/* level 2 */
div#nav li li:hover a,
div#nav li li.sfhover a {color: navy} /*2*/
/* level 3 */
div#nav li li li a {color: white !important}
div#nav li li li a:hover {color: navy !important}
but not in combination. Maybe one of both blocks is a start, maybe not.
So the answer is: yes in principle, there might be a solution, but
sorry, no, I don't have one.
Ingo
__
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] Problem with text color
Ingo Chao schrieb:
[EMAIL PROTECTED] schrieb:
... http://www.rjhanson.com/test.asp.
I'm not competent in specifity issues/dropdowns. The solution I
found works only for level 1-2
...
or for level 2-3
...
but not in combination. Maybe one of both blocks is a start, maybe not.
So the answer is: yes in principle, there might be a solution, but
sorry, no, I don't have one.
By sheer force of will, I was able to transform a unused part of my
brain into a specificity calculator for a second and found that one:
/* level 1 */
div#nav li:hover a,
div#nav li.sfhover a {color: navy}
/* level 2 */
div#nav li li a {color: white !important}
div#nav li li a:hover {color: navy !important}
/* level 2 */
div#nav li li:hover a,
div#nav li li.sfhover a {color: navy !important}
/* level 3 */
div#nav li li:hover li a {color: white !important}
div#nav li li:hover li a:hover {color: navy !important}
unfortunately, IE6 is not with us anymore, and the moment of enlightment
is gone.
Ingo
__
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] 2 n00b questions
Thanks alot FOR ALL your help.Now just to find the time to fix this.
working 7 day a week
13 - 14 hrs doesn`t give me much time anymore.
Tahnks again
On 6/7/05, Christian Heilmann [EMAIL PROTECTED] wrote:
Hi Steve,
1. How do I show my pictures when you mouse over the link ?
page : http://homepage.mac.com/n00dles/pics.html
You _could_ show the pictures via CSS by adding them in the link:
a ...fooimg.../a
and then hiding and showing them on hover:
a img{
display:none
}
a:hover img{
display:block;
}
However, this has several drawbacks:
- The visitor will have to load every image although she might only
want to see one
- You cannot access the images via keyboard
- The display is jumpy, unless you also position the image absolutely
Maybe using a script to display the image in the page makes sense:
http://onlinetools.org/tools/thumbomatic/
2. I`m also having a problem floating 2 image. 1 float left and the
other float is on the right ?
page : http://homepage.mac.com/n00dles/index.html
If you float elements and you want content to appear next to them
you'll need to add the element first - then the content that should be
displayed next to them.
To avoid the element overlapping the parent container, you'll also
need to clear the float:
http://www.positioniseverything.net/easyclearing.html
Furthermore your pages are in quirksmode now, if you want reliable
results, force standards mode with a proper doctype:
http://hsivonen.iki.fi/doctype/
Last and least, and a matter of personal taste: I _hate_ the
expression n00b. We are mostly professionals here, and not an A/S/L
OMG ROTFL!eleventwelve chatroom. :-)
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box model problem??
Officelink schrieb: If you click on one of the links at the bottom of this page: http://www.kellycountry.net.au/inprogress/corporate/contactUs.htm ... you can see what I mean. I'am sorry, but FF is displaying an empty tab, and MSIE/PC opens a new window and is displaying a internal side: The page can't be displayed Try this and that There seems to be something wrong, I guess. regards, Uwe Kaiser __ 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] CSS glitch part two
Hello everyone, I have rectified the problem I was having before on the home page of the I posted about yesterday. But now annoyingly this section seems to be screwing up on IE6 when you click through the section for a bit, then jumps back into position on refresh. http://83.138.134.178/services.php Does anyone know what might be causing it. The xhtml and css has been validate. I think the portfolio section also might have the same problem but I have not been able to catch anything going awry yet. Cheers __ 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] 2 n00b questions
How do I show my pictures when you mouse over the link ? You might try this method, but the second you mouseout they disappear: http://www.meyerweb.com/eric/css/edge/popups/demo2.html __ 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] footer floating up -- FIXED
Stephanie Bridges wrote: The behavior only occurs in Firefox (I'm using 1.0.4). I could reproduce it in IE for a while, but the addition of the br at the end of the content seems to have gotten rid of it there. Once it drops down, it stays there. To see it again, clear the browser cache and visit the page again. [...] http://www.econ.iastate.edu/programs/undergrad/agbiz/LearningCommunity/socia l.asp Thanks much to Bruno -- this is now working. He pointed out that I need to specify *both* the height and width of the images so the browser can figure out where to put the text. I think I fell victim to my quest to keep presentation separate from content (that and a case of non-functional brain cells) -- I specified height and width both in the html and now the footer is staying where it belongs. ~~~ Stephanie Bridges Economics Department -- Iowa State University 80B Heady Hall, Ames, IA 50011 ph: 515.294.8732 ~~ fax: 515.294.0221 [EMAIL PROTECTED] __ 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] floated list
Hello, I have some Trouble with the navi on: http://mca-abraham.de/index5f.html The navi is a floated list. In IE the content under the navi goes down a few pixels when hovering a button for the first time. I thougt it is the infamous Peekaboo Bug but the Typical fix didn't work. Can anybody help? Greetings from Cologne Carsten -- Carsten Peters Merlostr. 8 50668 Köln Tel.: 0221. 120 98 41 Mobil: 0178. 845 12 04 http://carsten-peters.net __ 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] Design-centric Standards resources
Hello list, I've been to the Wiki. Can anyone recommend Designer-centric Standards resources to help make designers aware of designing with standards in mind? Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com --- www.browsehappy.com __ 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] footer floating up
I took a brief look at your site. I think I know the cause of your
problem. I use Adobe GoLive so will try and explain the problem in the
terms used by those familiar with that product.
Normally your footer is the last DIV inside the container you have chosen
to enclose the contents of your page. In order to get it to appear below
everything else all you need to do is have it CLEAR any other DIVs that
may have entered the text stream above it.
In this instance you have given the footer DIV a specific position as
shown here:
/* footer */
#footer {
font-family:Arial, Helvetica, sans-serif;
color:#33;
font-size:0.8em;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #33;
padding: 5px 0px 10px 5px;
position:absolute;
bottom:0px;
left:145px;
width:690px;
}
The moment you use the left and bottom positioning designations your DIV
is no longer moving with the rest of the text stream. This is how I would
have written that style:
#footer {
color: #33;
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;
padding: 5px 0 10px 150px;
position: absolute;
width: 690px;
clear: both;
border-top: 1px dotted #33
}
I had to adjust the left padding to push the text back under the right
column.
--
+-+
| Eric Geoffrey Vann, Webmaster Glenbard Township HS District #87 |
| VOICE: 630.942.7722 596 Crescent Boulevard |
| EMAIL: [EMAIL PROTECTED]Glen Ellyn, IL 60137-4297 |
| WEB:http://www.glenbard.net/|
+-+
It is our choices that show what we truly are, far more than our
abilities
~ Dumbledore, Harry Potter and the Chamber of Secrets
__
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] floated list
Carsten Peters schrieb:
...
http://mca-abraham.de/index5f.html
The navi is a floated list. In IE the content under the navi goes down a
few pixels when hovering a button for the first time.
#navcontainer ul li a,
#footer ul li a {
...
/* margin: 0 0 10px 0; */
margin:0;
...
}
Ingo
__
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] Re: floated list
Your navlist and navcontainer DIVs are of differing heights. This is
problem how the styles should look.
#navlist {
width: 556px;
height: 20px;
background: url(index5f/nav_bg.gif) repeat-x;
}
#navcontainer {
margin: 0 0 0 10px;
height: 20px
}
My guess is that you do NOT need both of these or if you wish to keep them
then do NOT specify the height in the ENCLOSED one. The height will be in
INHERITED property.
--
+-+
| Eric Geoffrey Vann, Webmaster Glenbard Township HS District #87 |
| VOICE: 630.942.7722 596 Crescent Boulevard |
| EMAIL: [EMAIL PROTECTED]Glen Ellyn, IL 60137-4297 |
| WEB:http://www.glenbard.net/|
+-+
It is our choices that show what we truly are, far more than our
abilities
~ Dumbledore, Harry Potter and the Chamber of Secrets
__
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] Newbie-Question: Problem with Background Image
Hello Currently I am developping my first true (...) CSS Website. Unfortunately I have come across a problem I am unable to solve. See yourself: http://develop.saager.ch http://develop.saager.ch/css/screen.css The pencils in the header are supposed to cover the entire space and NOT leave white space on the left and on the right side. I made sure that the picture is more than big enough. I removed all margins. But the error remains... Anybody knows why??? Thank you. O __ 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] Unexpected font display with universal selector
Friends, I note that where there is a font-family defined for the universal selector, that font (and that font size) are used in ANY element, regardless of class, where there is also a bit of HTML. That is, where the universal selector all by itself (*) is defined with a certain font-family, and where a second class is defined as having a different font-family, then within an element having that second class applied where the text is modified with standard HTML (em-/em, or b-/b will work), that text will be in the universal selector's font, not in the second classes font. Weird. I fired up Firefox, Mozilla and IE, and they all had exactly the same behavior. So far I have not found anything about it via Google, nor in the W3C CSS refs, but since all three browsers handle it the same way, then it would seem to be a part of the spec. Not what I would expect, but so defined, apparently. I've put an example at http://www.allhear.com/Universal-selectors-font.html. David William House AllHear, Inc. P.O. Box 330 / 23022 Yeary Lane N.E. Aurora, OR 97002-0330 USA (503) 266-6730 (voice) / (503) 266-6418 (fax) [EMAIL PROTECTED] (e-mail) http://www.AllHear.com (corporate web site) Make no search for water. But find thirst, And water from the very ground will burst. (Rumi, a Persian mystic poet, quoted in Delight of Hearts, p. 77) __ 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-Question: Problem with Background Image
This is the wrong combination:
HTML
div id=contentheader
h1header/h1
/div
CSS
p,h1,pre {
margin:0px 10px 10px 10px;
}
Succes
Daniel
Oliver Saager schreef:
Hello
Currently I am developping my first true (...) CSS Website.
Unfortunately I have come across a problem I am unable to solve. See yourself:
http://develop.saager.ch
http://develop.saager.ch/css/screen.css
The pencils in the header are supposed to cover the entire space and
NOT leave white space on the left and on the right side. I made sure
that the picture is more than big enough. I removed all margins. But
the error remains...
Anybody knows why???
Thank you.
O
__
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] Newbie-Question: Problem with Background Image
Oliver Saager wrote: http://develop.saager.ch http://develop.saager.ch/css/screen.css The pencils in the header are supposed to cover the entire space and NOT leave white space on the left and on the right side. Hi, Try changing the selector #contentheader h1 to just #contentheader. You can also remove the font-size: 14px; rule since you already specified that in your h1 rule set. -- Best regards, Michael Wilson __ 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] Floated list items cause extra space on Firefox
I am working on my first CSS/XHTML website. I hope
that you can help with an unusual problem that I am
seeing in Mozilla Firefox 1.04.
I am using a floated list item li to make multiple
columns. This is similar to the gallery example in
http://css-discuss.incutio.com/?page=GalleryFloat.
The problem is that I see a large gap at the bottom of
the page in Firefox. This problem does not occur in
IE.
Here is the sample page:
http://www.piedmont-div.org/test/hobbyshops.html
CSS: http://www.piedmont-div.org/test/css/styles.css
Here is the section of CSS that I use to make the 2
columns.
#content #board li,
#content #hobbyshops li {
width: 20em;
list-style-type: none;
font-size: 1.2em;
color: #000;
font-weight: bold;
float: left;
}
#content #board li li,
#content #hobbyshops li li {
font-size: 0.8em;
font-weight: normal;
float: none;
margin: 0;
}
Thanks very much for your help.
Scott
__
Discover Yahoo!
Have fun online with music videos, cool games, IM and more. Check it out!
http://discover.yahoo.com/online.html
__
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] spacing between line items in unordered lists
sorry to ask such a lame question but: currently my list items have no space between them, it would be nice to have .5em. i think placing a br / in a ul is unkosher. would it be as simple as adding padding or margin to the bottom of the li? here is the offender http://www.ricochet.org/abec_test/why_so_important.html http://www.ricochet.org/abec_test/stylesheets/abec_global.css thanks guys (and gals) __ 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] descendant selectors, background-image position, and Firefox
Both the CSS and XHTML are valid. Here's the link to the page:
http://chnm.gmu.edu/history120/new/nav-test.html
this is the ruleset for your current state
#pre18thcentury a#nav-pre18,
#18thcentury a#nav-18,
#19thcentury a#nav-19,
#20thcentury a#nav-20 {
background-position:0 -40px;
}
this is what Firefox Java script console says:
Error: Expected identifier for ID selector but found '#18thcentury'.
Ruleset ignored due to bad selector.
Source File: http://chnm.gmu.edu/history120/new/nav-test.html
Line: 85
You cannot define your IDs using numbers as the first character.
From W3C:
In CSS 2.1, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [A-Za-z0-9] and ISO 10646
characters U+00A1 and higher, plus the hyphen (-) and the underscore (_);
they cannot start with a digit.
Change those to something like #eighteenthcentury and that should correct
the problem.
Regards,
Ron
__
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] Reload bug in gecko browsers
the following site: http://www.worldharmonyrun.org/ has a masthead graphic on every page. in internet explorer there are no problems with display. however in gecko browsers, i am getting a 6 pixel gap underneath the image which disappears if you refresh the browser. does anyone know a fix for this issue? cheers chris __ 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] spacing between line items in unordered lists
sorry to ask such a lame question but: currently my list items have no space between them, it would be nice to have .5em. would it be as simple as adding padding or margin to the bottom of the li? here is the offender http://www.ricochet.org/abec_test/why_so_important.html http://www.ricochet.org/abec_test/stylesheets/abec_global.css ron- Yes, you can add padding or margin to the li tag, top or bottom. In your situation, you might consider adding it to the top so that nested li's get some spacing between the bullet above them. Of course this will also introduce a bit of space at the top of your first list item as well. Nice looking page, btw. Regards, Ron __ 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] font-size and unordered-list menu
Matt Tibbits wrote: Another dumb question probably, but here goes. I created a vertical menu using an unordered list.everything works fine until I try to change the font size. When I put a font-size : 0.8em on the a or the ul element, it puts a space at the bottom of each each link item. try this on your links: licontent/li licontent/li or licontent/lilicontent/li hth, dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art __ 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] font-size and unordered-list menu
Dwain, I tried putting my li without any new lines separating them and it hasn't made any difference... If I put the font-size : .8em on the div.menu item the space goes away...the problem here, though, is that then the font-size of everything within that div is affected... I created a vertical menu using an unordered list.everything works fine until I try to change the font size. When I put a font-size : 0.8em on the a or the ul element, it puts a space at the bottom of each each link item. try this on your links: licontent/li licontent/li or licontent/lilicontent/li __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ 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] Problems with 2 Col Floated Layout and scrolling tables
Source file is here: http://james.globalhavens.com/css-discuss/webtop/2col-scroll.html I've been fighting with this two col layout for a while now - left col static width, right col flexible - and I've finally got it working in Firefox. As you'll see, it's not ready in IE. Even though the main parent div on the right side is lining up properly, the bulk of the content is insisting on breaking after the lower edge of the left div. Getting rid of the three width: 100% occurences seems to fix that problem, but creates a host of other ones. Does anyone have any ideas? As well, you can see the scrolling table on the right. I've ended up going with the three table and scrolling div solution, becuase I just couldn't get TBODY scrolling working in IE, even with that excellent demo.Now I've got Firefox and IE making different choices about where the scroll bar goes on that div - Firefox put it inside and bumps the content (which I had aligned with a colgroup), and IE hangs the scroll off the right, leaving the content alone, but disrupting the layout. Any tips on making it uniform? Thanks for the help anyone can offer. James __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ 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] font-size and unordered-list menu
Matt Tibbits wrote:
I created a vertical menu using an unordered
list.everything works fine
until I try to change the font size. When I put a font-size
: 0.8em on the
a or the ul element, it puts a space at the bottom of
each each link item.
There are much probably less tricky solutions, but you could try to add this
to your CSS:
/*\*/
* html .menu li { display: inline; zoom: 1; height: 1px; }
/**/
(better to be put under IE conditional comments.)
Bruno
__
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 Photo Gallery/Online Journal with CSS
Adam, A great tutorial for building an online photo gallery with CSS can be found here http://www.webreference.com/programming/css_gallery/index.html it's really easy to follow. Not sure this is exactly what you are after, however it might give you some ideas of what you can do. __ 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] IE6 DIV spacing bug
I'm working on a simple two column three div layout that can be seen here: http://test.cimediagroup.com/ There is a div id=wrapper and then inside of it there are three DIVs in the following order: div class=sidebar div class=hdr div class=body The first DIV is float: right; while the second and third DIVs are float: left; Everything looks fine in all browsers except there's a small space/gap between the hdr DIV and the body DIV in Internet Explorer 6 on Windows machines. I've tried taking out all the float rules only to find that this is a fairly persistant bug in IE. I had the problem one other time recently and I just ended up positioning the body DIV up like 4px. This was lazy and now I'm paying for it because this particular layout has some lines in it and the lazy workaround will not do this time. Any help would be greatly appriceiated. -Matthew __ 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] Unexpected font display with universal selector
On 6/7/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
That is, where the universal selector all by itself (*) is defined with a
certain font-family, and where a second class is defined as having a
different font-family, then within an element having that second class
applied where the text is modified with standard HTML (em-/em, or
b-/b will work), that text will be in the universal selector's font,
not in the second classes font.
You've already had an explanation as to why, this is the solution:
* { font-family: inherit; }
body { font-family: your-choice; }
.yourClass { font-family: your-other-choice; }
--
David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk
__
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] Suckerfish modification
HI all, I just cleaned out my email and deleted all my recent css-d emails, so if this question has been as recently I do apologize. But I recently sent up an drop down menu based on the Son of Suckerfish drop down code. Works great. Now my boss is telling me that he wants the items in the main ul list to bold when you hover over them or on the any of the selections that show up below it. Ex. Main Menu Item Item 1 Item 2 Item 3 If you rollover main menu item or any of the items the main menu item becomes bold. I have been messing with the code and can get it to bold when you hover over the main menu item, but not when you roll over the items. Is this possible? If so can somebody please point me to an example or let me know how I would structure the css to reference this. I have been messing with the code for a bit and tried a lot of stuff, so I thought it would be cleaner just to ask the question rather than posting a lot of code that doesn't work. Thanks for your help! Jessica - Jessica Mays Graphic Designer WebSurveyor Corporation www.websurveyor.com When you need to know. Now. WebSurveyor is... -- # 59 on INC. 500's Fastest Growing Companies list -- Winner of 2004 National Capital Business Ethics Award __ 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 Photo Gallery/Online Journal with CSS
On Tue, 07 Jun 2005 15:38:27 -0400, Adam Wick [EMAIL PROTECTED] wrote: I have some spare time to play with layouts. So far, the best thing that I've been able to come up with can be seen here: http://adam.lylix.net/germany/day_1.html ... IIf I understand correctly, you need a layout to contain the writing; and a means to show the images that accompany the writing. What comes to mind is a two-col layout with the right col containing the menu list(so that the content is 1st in the source order). This 2 col layout can be liquid, or fixed width(or better yet min/max width:http://www.alistapart.com/articles/negativemargins/ There are numerous 3 col layouts on the List wiki/FAQ -- http://css-discuss.incutio.com/ that convert easily to 2-col. Great source for list menus(you'll want a vertical one) and more: http://css.maxdesign.com.au/index.htm For the ideas of how you might include the images to the page see: http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm http://css.maxdesign.com.au/floatutorial/tutorial0407.htm http://www.scottmcdaniel.com/?p=33 http://joshuaink.com/templates/gallery/ HTH Regards, David Laakso -- http://www.dlaakso.com/ __ 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] Anyone can answer this...even noobs :) its about divs
Hey all, What is the difference between float and absolute divs? Abyss -- Quote for the day: There are not enough women who are my age doing web development http://www.abyss.ws/ __ 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 with 2 Col Floated Layout and scrolling tables
On Tue, 07 Jun 2005 16:27:13 -0400, James Hallam [EMAIL PROTECTED]
wrote:
[..]
http://james.globalhavens.com/css-discuss/webtop/2col-scroll.html
I've finally got it working in Firefox. As
you'll see, it's not ready in IE.James
Try putting it in quirksmode.
And add:
.container { height: 1%; }
to the conditional comments.
I forget if there was anything else...
Best,
David Laakso
--
http://www.dlaakso.com/
__
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] Anyone can answer this...even noobs :) its about divs
[EMAIL PROTECTED] wrote: What is the difference between float and absolute divs? Me got it :-) Floating divs affect the flow - AP divs don't. What me don't understand: must it be divs? Me can mess up non-divs too, and take floats completely out of the flow--unless the browser is called Opera 8(bugger) :-( G -- http://www.gunlaug.no __ 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] UL List Type Image not appearing in FF
Hello List, I am not able to see the list-type-image that has been declared in my css on the following page: http://www.trinityinfo.org/News/Prayer-Needs.php. I have validated both the style sheet and the HTML with no errors. The bullet images appear in IE6 just fine. Would appreciate any suggestions. The related css file is http://www.trinityinfo.org/css/netscape-css1.css for viewing in FF and http://www.trinityinfo.org/css/mie-css1.css if viewing in IE. Thanks, Steven Costello -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Laakso Sent: Tuesday, June 07, 2005 8:30 PM To: css-d@lists.css-discuss.org Cc: Matthew LaVelle Subject: Re: [css-d] IE6 DIV spacing bug On Tue, 07 Jun 2005 17:12:23 -0400, Matthew LaVelle [EMAIL PROTECTED] wrote: I'm working on a simple two column three div layout that can be seen here: http://test.cimediagroup.com/ ... Everything looks fine in all browsers except there's a small space/gap between the hdr DIV and the body DIV in Internet Explorer 6 on Windows machines. -Matthew I think you may need to delete height from all selectors. FWIW: Try text zoom in FF and IE. Regards, David Laakso -- http://www.dlaakso.com/ __ 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] 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] IE6 DIV spacing bug
From: Matthew LaVelle [EMAIL PROTECTED]
http://test.cimediagroup.com/
Everything looks fine in all browsers except there's a small space/gap
between the hdr DIV and the body DIV in Internet Explorer 6 on Windows
machines.
Add {display: block;} or {vertical-align: bottom;} to the image in your div
with the class of hdr. Using a descendent selector/combinator should work fine,
and either one of those properties should clear up the gap in IE.
I second David's recommendation to increase the text zoom and see what you
think.
hth,
~holly
__
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/
