Re: [css-d] Styling text input boxes question

[jack fredricks]

what version of IE? as it is, my IE6 displays that input as wide as
you want it to.

Before embarking on anything too crazy design-wise, i'd check out
www.456bereastreet.com. It has a handy article or 2 on styling FORMS.
Basically, dont bother. Widths and basic formatting are fine, but I
dont think padding works (for example).

just a few css tips in general; 

0px = 0em = 0 elephants = 0 any unit. If you want to save on a little
filesize, drop the units from any size (etc) that is 0px. padding:0
will do fine.

another short hand you can use here is font. font: 9pt sans-serif; is
shorter than your current 2 properties. Still, it's a matter of
personal choice. Same with padding and margin. Bereastreet also has 2
nice articles on shorthands.


On 5/27/05, Chester Bullock <[EMAIL PROTECTED]> wrote:
> I have done some testing on input type="text" box styling and am a bit
> troubled that I cannot find a good solution to my problem.
__
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] Styling text input boxes question

[Bob Easton]

Chester Bullock wrote:
I have done some testing on input type="text" box styling and am a bit 
troubled that I cannot find a good solution to my problem.


Say we have a text box:



If I use a style like this (on a windows machine):
input {
 font-family: sans-serif;
font-size : 9pt;
border:1px solid gray;
padding-top:0px;
padding-bottom:0px;
margin-top:1px;
margin-bottom:0px;
}

The result is a text box that is about 3 times as wide as it should be. 
 I have substituted different font names in place of sans-serif and it 
seems that Arial is the culprit (Verdana gets it closer to the right size).


What can I modify in the style to make this box be an actual width of 2 
characters?




A strategy a lot of developers use is to let the field widths be 
constrained by container sizes.  You'll find lots of form styling 
articles in our WIKI:

http://css-discuss.incutio.com/?page=FormElements

--
Bob Easton
Accessibility Matters: http://access-matters.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] vertical-align property

[Bob Easton]

KavinskyC wrote:

I'm having a problem getting a img to line up properly vertically. A
screen shot of the image can be found at
http://whiteboxerdesign.com/test/nav1.jpg.
 
In a nutshell: I'm using  to create a horizontal navigation scheme.

I want to bracket the list with images with rounded corners. The
background image takes care of the top corner. I'm using a png image to
take care of the bottom corner and setting it with vertical-align:
bottom. The problem is the image was stopping at the ascender of the
text, not the decender. I tried using an em space designation (see jpg
above) but still no dice. Any suggestions? If you need some more
specific info, you can e-mail me directly at [EMAIL PROTECTED] if you
prefer.



The absence of answers is directly related to the absence of code.  It's 
immpossible to debug anything from a screen shot.  Can you post a sample 
page somewhere?


By the way, have you visited that topic in our WIKI:
http://css-discuss.incutio.com/?page=RoundedCorners

--
Bob Easton
Accessibility Matters: http://access-matters.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] Text Just to Right of Centered Image

[Bob Easton]

Chris Morse wrote:

Hello,

I would like to add a copyright symbol just to the right of a logo which is
centered horizontally on the page.  I would also like the top of the
copyright symbol aligned with the top of the image.

Here is the table equivalent of what I am trying to do (but am trying to
learn how to do things the right way):





(c)



Another thing which I can do easily with tables is evenly space X items
across a page (e.g. 5 images).  Is there a way to do this with CSS?


Wrap both in one div and center the div.

(c)


See several CSS centering methods in our WIKI:
http://css-discuss.incutio.com/?page=CenteringBlockElement

--
Bob Easton
Accessibility Matters: http://access-matters.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] CSS Scope: I think I'm being specific enough...?

[Bob Easton]

Chris W. Parker wrote:

Hello,

I've got the following HTML...


 


...that is being influenced by some more general CSS rules (background
and border and width). If I declare those things within the style
attribute I can get it to look how I want. Yet when I use the following
CSS it's not affected:

form#order_submit {
width: 100%;
background: none;
border: none;
text-align: center;
}

form#order_submit input {
font-size: large;
font-family: Verdana;
}

I know that I'm referencing it correctly because my rules for the
 tag are working correctly. Even 'text-align' in the form's
declaration is working! It's just width, background, and border that are
not.

What am I missing here?


You probably need to look somewhere else.  The little scraps of code you 
offered work perfectly when used alone. Something else is affecting the 
result.  Mozilla and Firefox both have good DOM Inspector tools which 
are very handy for this kind of diagnosis.  The tool can tell you 
exactly what styles are affecting any single element.


--
Bob Easton
Accessibility Matters: http://access-matters.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] Troubles with three collumn layout in IE.

[Bob Easton]

Jim Jeffers wrote:


I'm working on the CSS for a new site we're launching.  In Firefox and
Safari the layout looks fine but in IE I'm having two problems.  Try taking
a look at the site in FireFox to see how it should look and then open it up
in IE:

http://www.notjustagame.com  
I'm having two problems in IE:


First of all the sidebar conents are causing the page to scroll horizontally
in IE.  At the same time the second column or center column with the
category and member menus is getting pushed downward.
Second, the horizontal menu bar just above the featured article has a bottom
margin that should not be there.  I feel that this is because of the search
form.  Does anyone have any suggestions as to how I can make my CSS play
friendly with IE?  



That must be IE 5.x, right?  Looks OK in IE6 on WIN-XP Pro.

#content wants a width of 50%. .module wants a width of 40%, and there 
are two of them side by side within #sidebar.  Yet, there's no explicit 
width set on #sidebar.  IE versions prior to 6 use the broken box model, 
and also have other width calculation bugs.  So, a quick guess suggests 
to me that IE 5 is trying to make each .module 40% of full window width. 
 Adding position:relative to .module might help.  Or... adding a 
specific width to #sidebar might help.


--
Bob Easton
Accessibility Matters: http://access-matters.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] horizontally aligning to elements

[Bob Easton]

Chad Sakonchick wrote:
I'm trying to horizontally align, either middle or bottom align two  
elements in CSS.  one is a picture(that will change in height and  
width) and the other is text(that will change size dynamically).  Can  
anyone direct me to any sites that I can read up on how to accomplish  
this.  Or give me any personal recommendations on how to tackle this?




I don't recall many tutorials that cover this. So, the best way to learn 
this is through experimentation.  Make a very simple page and try all 
the options.  The property you need to explore is vertical-align. Even 
in the best of CSS reference books, the description does not read easily 
enough to be obvious. That's why I recommend experimentation.


http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

--
Bob Easton
Accessibility Matters: http://access-matters.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] page check before I move on

[Kim Kruse]

Hi Bob,

That really made my day. Thank you very much.

Have a great day
Kim

(sorry for the off-list reply... too fast hitting the send button)

Bob Easton wrote:


Kim Kruse wrote:


Hi,

I would really like some feedback on this page 
http://mouseriders.dk/test/dynatest.php before I move on with rest of 
the site.



Kim,
Very nice work!  It looks identican in FF 1.04, IE 6, IE 5.5, IE 5.01, 
all on XP-Pro.  In Opera 7.4, the "Ring mig op nu!" push button is not 
the same height as in the other browsers, but is OK in Opera 8.0 beta.


The code is really clean, and you have some very good accessibility 
features.



__
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] OT - Introduction

[Rahul Gonsalves]

Dear All:

I haven't been part of a forum before, so I'm unsure of the protocol. 
Does one introduce oneself?


A bit about me - I've just started doing some webdesign over the last 
four months or so. I have enjoyed playing with computers for the last 12 
years - since I was six, and currently run Gentoo on a AMD 2800+ box. I 
also have started using Windows 2000 for somethings - like Dreamweaver 
and Fireworks and so on.


The first site which I've designed is for my former school. I haven't 
gone for classes or anything; there is a friend who does this 
professionally whom I spend an hour with a week.


I'd love some feedback. At the moment, it's a table-based design - I've 
just finished converting part of it to a CSS based layout, so hopefully, 
with some help from you guys, I'll be able to put up version 2. So I 
guess the feedback which I'm looking for at the moment is really for the 
interface - usability and the design.


A disclaimer - I am not a graphics designer, or a web-designer. I think 
I have an aesthetic sense of what works, and what doesn't, but I don't 
pretend to have any illusions about my skills in these two departments. 
I would really welcome further links to where I could study about 
usability and design - free stuff please - I'm the epitome of the 
penniless student!


The site can be found here.

http://cfl.in/

also

http://cfledu.org/

What I'm interested in doing is to code completely valid pages, which 
are accesible on any medium, and to anybody - even if they have 
disablities and so forth.


Also - I'm sure I'm going to be a pain - I know newbies always are. So 
I'm going to apologise in advance for any stupid mistakes I make, or the 
terribly obvious questions that I am sure to ask.


Thanks all,
Regards,
Rahul.

AMD 2800+ Barton
1.5 GB memory
2 * 160 GB Storage
ATI 9600 XT
ASUS-A7V8X
LG 8x52x24x52
Gentoo / Windows 2000

--
.
Rahul Gonsalves
[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] Moving from tables to CSS

[Rahul Gonsalves]

Dear All:

Sorry about the introduction - people have said that that was not proper 
form on this forum. I suspect this is only the first of my many apologies.


I've been working on my previous schools' website for some time. I built 
the site up using tables as I was my first experience building websites. 
The version which is currently on the web can be found here :


http://cfl.in/

or

http://cfledu.org/

Now, I've been reading a lot on designing websites, and decided to make 
it completely CSS based. I just finished a first draft can be available 
here:


http://rathehun.tripod.com/

Sorry about the ads on the page, but I am the epitome of a penniless 
student, and can't afford hosting...


Now, I built and tested using Dreamweaver 7.0.1, and tested on Firefox 
1.0.4.


When I look at the site in Firefox, it looks fine - the code is messy I 
think, but it's my first time - sorry!


But the problems arise when I look at it in IE - the site is 
_completely_ messed up.


I think some of the problems arise from having the font size specified 
in ems rather than pixels.


However, I am at a complete loss as to the rest of it. Can anyone help?

Thanks a lot!

Rahul Gonsalves.

.
Rahul Gonsalves
[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] Images in lists and other problems

[Kim Kruse]

Hi,

I'm about to create my portfolio page and for some reason I'm having a 
brain fart.


I just can't get the darn list to behave. I want the list to display 3 
images on one line and then brake into a new line. Also why is it the 
"kontakt os" heading below the list goes berserk? I obviously don't want 
either bullets or background color on hover. Please educate me... I need 
it :)


I guess that folio list picks up the styles from the sidebar list. But 
how do I get it to be neutral?


The page is here http://mouseriders.dk/test/portfolio.php

I appreciate your help. Thanks

Kim
__
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] Dynamicaly created news boxes.

[shawn a]

Website: http://detriment.iprx.com/

This is a site for a WoW clan so its graffic intensive and best viewed
at 1024 by 768 and up.
I know im using alot of tables but i see no other practical way to get
all those images to line up.

Any how on to my question. Im creating news posts(by quering at mysql
DB) that are formated pretty heavily with images and such to construct
a pretty box =). If u check it out in FF and Netscape 7.2  i looks
good. The only problem im having with FF and NN is that the .newsBody
and .dateANDtime seem to run onto the left and right borders, no
matter how aggressive i make the padding.

Now if u check this page out in IE 6 and Opera it gets a little scary.
Looks like someone blew   up my pretty box !!!

The pages validates xhtml trans, but the css does not. I get a weird
error. have a look:


XHTML: http://validator.w3.org/check?uri=http%3A%2F%2Fdetriment.iprx.com
CSS: 
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdetriment.iprx.com


any suggestions would be great. Thanks agian!!


~shawn a
__
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] Dynamicaly created news boxes.

[Kaspars Dambis]

shawn a wrote:

Website: http://detriment.iprx.com/

This is a site for a WoW clan so its graffic intensive and best viewed
at 1024 by 768 and up.
I know im using alot of tables but i see no other practical way to get
all those images to line up.

Any how on to my question. Im creating news posts(by quering at mysql
DB) that are formated pretty heavily with images and such to construct
a pretty box =). If u check it out in FF and Netscape 7.2  i looks
good. The only problem im having with FF and NN is that the .newsBody
and .dateANDtime seem to run onto the left and right borders, no
matter how aggressive i make the padding.

Now if u check this page out in IE 6 and Opera it gets a little scary.
Looks like someone blew   up my pretty box !!!

The pages validates xhtml trans, but the css does not. I get a weird
error. have a look:


XHTML: http://validator.w3.org/check?uri=http%3A%2F%2Fdetriment.iprx.com
CSS: 
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdetriment.iprx.com


any suggestions would be great. Thanks agian!!


~shawn a
__
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/



Hi,

This solves News Body:

.newsBody p {
text-align: left;
font-size: 12px;
margin: 0;
padding: 0 20px 5px 20px;
background-image:url(/images/whiteBorderLeft.jpg);
background-position: top left;
background-repeat: repeat-y;
}

Remove padding settings from table.layout td {} and create 
following:


.dateANDtime {
text-align: right;
padding-right: 20px;
background-image:url(/images/whiteBorderLeft.jpg);
background-position: top left;
background-repeat: repeat-y;
}

Best regards,
Kaspars
__
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] Dynamicaly created news boxes.

[Kaspars Dambis]

shawn a wrote:

Website: http://detriment.iprx.com/

This is a site for a WoW clan so its graffic intensive and best viewed
at 1024 by 768 and up.
I know im using alot of tables but i see no other practical way to get
all those images to line up.

Any how on to my question. Im creating news posts(by quering at mysql
DB) that are formated pretty heavily with images and such to construct
a pretty box =). If u check it out in FF and Netscape 7.2  i looks
good. The only problem im having with FF and NN is that the .newsBody
and .dateANDtime seem to run onto the left and right borders, no
matter how aggressive i make the padding.

Now if u check this page out in IE 6 and Opera it gets a little scary.
Looks like someone blew   up my pretty box !!!

The pages validates xhtml trans, but the css does not. I get a weird
error. have a look:


XHTML: http://validator.w3.org/check?uri=http%3A%2F%2Fdetriment.iprx.com
CSS: 
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdetriment.iprx.com


any suggestions would be great. Thanks agian!!


~shawn a
__
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/



Hi Shawn,
The idea is that the global table.layout td setting do not 
allow further to specify any other margin or padding 
inside. I suggest you to set margin:0 only at 
"table.layout td" and work with padding further inside the 
content.


By the way, your site structure is easy and could be done 
in clean xhtml and css with no tables :) Additional divs 
would be required to make the white borders, but the rest 
is relatively easy :)


Best regards and have a nice day!
Kaspars
__
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] Images in lists and other problems

[Bob Easton]

Kim Kruse wrote:

Hi,

I'm about to create my portfolio page and for some reason I'm having a 
brain fart.


I just can't get the darn list to behave. I want the list to display 3 
images on one line and then brake into a new line. Also why is it the 
"kontakt os" heading below the list goes berserk? I obviously don't want 
either bullets or background color on hover. Please educate me... I need 
it :)


I guess that folio list picks up the styles from the sidebar list. But 
how do I get it to be neutral?


The page is here http://mouseriders.dk/test/portfolio.php

I appreciate your help. Thanks


remove #folioimgs
remove #folio ul

Change these two to the following:
#sidebar #folio li {
margin:0; padding:0 0 0 5px;
list-style-type: none;
float: left;
}

#sidebar #folio li a {
background: none; /*overrides previous*/

Adjust left padding as wanted, and as space allows.
}

--
Bob Easton
Accessibility Matters: http://access-matters.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] Dynamicaly created news boxes.

[David Laakso]

On Sun, 29 May 2005 13:17:28 -0400, shawn a <[EMAIL PROTECTED]> wrote:

Website: http://detriment.iprx.com/
This is a site for a WoW clan so its graffic intensive and best viewed
at 1024 by 768 and up.
I know im using alot of tables but i see no other practical way to get
all those images to line up.
Any how on to my question. Im creating news posts(by quering at mysql
DB) that are formated pretty heavily with images and such to construct
a pretty box =). If u check it out in FF and Netscape 7.2  i looks
good. The only problem im having with FF and NN is that the .newsBody
and .dateANDtime seem to run onto the left and right borders, no
matter how aggressive i make the padding.
Now if u check this page out in IE 6 and Opera it gets a little scary.
Looks like someone blew   up my pretty box !!!
The pages validates xhtml trans, but the css does not. I get a weird
error. have a look:
XHTML: http://validator.w3.org/check?uri=http%3A%2F%2Fdetriment.iprx.com
CSS:  
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdetriment.iprx.com

any suggestions would be great. Thanks agian!!
~shawn a
If it were not for the fact that you may already have made up your mind, I  
would have suggested trying a 2-coumn layout that enables the user to  
determine what screen resolution is best for them, such as:


or the 2-col layout on this page:

or any number of the 3-col layouts on the css-d wikihttp://css-discuss.incutio.com/> that are easily converted to 2-columns.

...but then you may be simply seeking a fix for what you've got.
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/

Re: [css-d] Dynamicaly created news boxes.

[shawn a]

>This solves News Body:
>
>.newsBody p {
>  text-align: left;
>   font-size: 12px;
>   margin: 0;
>   padding: 0 20px 5px 20px;
>   background-image:url(/images/whiteBorderLeft.jpg);
>   background-position: top left;
>   background-repeat: repeat-y;
>}

perfect that worked.

>Remove padding settings from table.layout td {} and create
>following:

instead i set the span to display block and that worked.

>regarding you css html and validation - you have to put
>the css part inside the , like this:

hmm..i put in the comment tags but it seems that im still getting this error:

Target: http://detriment.iprx.com

Please, validate your XML document first!

Line 329

Column 357

Element type "null" must be followed by either attribute
specifications, ">" or "/>".



>If it were not for the fact that you may already have made up your mind, I
>would have suggested trying a 2-coumn layout that enables the user to
>determine what screen resolution is best for them

Yes you do have a good point there. But in this situation where my
target crowd is video
gamers its safe to assume 1024 by 768 or higher res.  Plus i started
this site before i was into web standerds =) hehe.  But i guess we all
know what happens when we assume ;)


So all looks good except for IE and Opera..they seem to behave in
almost the same manner. The TH and .footer dont seem to want to fill
up the entire row.


thanks agian!!

~shawn a
__
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] Dynamicaly created news boxes.

[David Laakso]

On Sun, 29 May 2005 15:13:49 -0400, shawn a <[EMAIL PROTECTED]> wrote:

Target: http://detriment.iprx.com

Please, validate your XML document first!

Line 329

Column 357

Element type "null" must be followed by either attribute
specifications, ">" or "/>".



thanks agian!!

~shawn a
Make a back-up copy of the html file. Run the file through Tidy  
Online. Tidy will  point out the errors and  
correct many of them for you. Manually correct the rest. Then validate the  
corrected mark-up .

And validate the CSS.
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/

Re: [css-d] Moving from tables to CSS

[Gunlaug Sørtun]

Rahul Gonsalves wrote:
Sorry about the introduction - people have said that that was not 
proper form on this forum. I suspect this is only the first of my 
many apologies.


No apologies needed. Few of us mind an introduction -- once.


http://rathehun.tripod.com/


Now, I built and tested using Dreamweaver 7.0.1, and tested on 
Firefox 1.0.4.


When I look at the site in Firefox, it looks fine - the code is messy
 I think, but it's my first time - sorry!


, not , in xhtml. - 2 cases.
Missing alt-attribute on  - 1 case.

Lots of errors introduced by the ads. Your pages will never validate
with those, but that's hardly your fault.
Nevertheless, try:  and get rid of all errors
you have any control over.

But the problems arise when I look at it in IE - the site is 
_completely_ messed up.


That's completely normal. IE isn't standard-compliant.

I won't give you any solutions and/or hacks for IE at this stage, as
that'll only fix symptoms--not layout-errors. Resize fonts in Firefox a
few steps, and you'll see that the page is breaking.

Once you have worked on your layout some more (see below), and it can
take normal settings in the standard-compliant browsers (Firefox, Opera,
Safari,...), then you can start worrying about IE's multiple bugs.

I think some of the problems arise from having the font size 
specified in ems rather than pixels.


Please, don't even think about using pixels for font-size.
1: it will mess up IE even more and make the page less accessible.
2: it doesn't change anything, since you can not base layout on
font-size anyway.
3: someone may think you're a complete nut. :-)
--

- Try setting a suitable font-size on body in percentage. I prefer 100%
or pretty close to it.
- Define font-size in em or percentage on all other elements that need a
font-size.
--

Avoid using 'absolute positioning' and defined height on footer and
other containers, as there's no way you can nail dimensions and
positions to the screens and browser-windows.

Try to forget "pixel-perfection" to begin with, it just has to look
perfect. Let it all just flow down the page instead, and start off a bit
simpler by testing your design-ideas with one or more of the 2/3 column
design with header and footer on:

...and study floats and flow methods.

BTW: your original table-layout is only a few errors short of being
valid. No, I'm not telling you to go back to tables, but a CSS-layout
should behave much the same way once it is done right. Just compare in
Firefox.

regards
Georg
--
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/

Re: [css-d] Moving from tables to CSS

[jack fredricks]

it's a pity that you have to use Tr_pod - they insert some nasty
things into your source code. First thing I'd do if i was you is try
to find a 'better' free hosting service, there's plenty out there, I'm
sure.

the 2nd thing I'd do is validate your pages [1]. Your home page has
104 coding errors. You? Tr_pod? I'm not sure. Either way, it cant be
helping.

I doubt very much the ems vs px will make IE render your page so
differently. Trust FF, it will be rendering more correctly. Are you
using any css properties that IE doesnt understand? min-width maybe?
If you want to see a list of common IE bugs/hacks, go to
www.positioniseverything.net [2].


[1] http://validator.w3.org/
[2] this site isnt just about IE hacks etc, it has lots of goodies.
__
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] Problem with IE5

[Daniel Doesburg]

Hello list,

I've a website with a hover menu on the page
Look at http://wouda.doesburg.biz/Wat.5.0.html right column.

In Firefox, Opera, IE6 and IE5.5 it looks fine. But when in IE5.0 I 
touch the pictures with my mouse, the whole block moves downwards.


What can be the reason?

I wonder,

Daniel


__
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] Dynamicaly created news boxes.

[shawn a]

> Make a back-up copy of the html file. Run the file through Tidy
> Online. Tidy will  point out the errors and
> correct many of them for you. Manually correct the rest. Then validate the
> corrected mark-up .
> And validate the CSS.


My xhtml was always validating. Anyhow i did what you said. Tidy
didn't dig up anything
of significance. Just some warnings about using table summaries.

 So just for kicks  I changed my doc type to 4.01 trans and ran it
threw the validator. I get ONE error:

>Line 304, column 304: character data is not allowed here
>
>...t('navout', 'navbar');return true;" />
>
>You have used character data somewhere it is not permitted to appear.
Mistakes that can >cause this error include putting text directly in
the body of the document without wrapping >it in a container element
(such as a aragraph) or forgetting to quote an attribute >value
(where characters such as "%" and "/" are common, but cannot appear
without >surrounding quotes).

But my CSS validates correctly.

So to recap. Using xhtml trans Doctype the xhtml validates but i get
the following css validation error:

>Please, validate your XML document first!

>Line 324

>Column 358

>Element type "null" must be followed by either attribute
specifications, ">" or "/>".

Using 4.01 trans, the html is subject to the one error i posted above.
The css however validates correctly.


Im wordering if it has something to do with not liking a portion of my
 tags. Ive been looking threw it for a good while now. Im kind
of stumped.


thanks agian.

~shawn a.
__
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] Problem with IE5.0

[Daniel Doesburg]

Hello list,

I've a website with a hover menu on the page
Look at http://wouda.doesburg.biz/Wat.5.0.html right column.

In Firefox, Opera, IE6 and IE5.5 it looks fine. But when in IE5.0 I 
touch the pictures with my mouse, the whole block moves downwards.


What can be the reason?

I wonder,

Daniel
__
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] List spacing and Image Centering

[Linda Dunn]

Hi all,

I've got the basic structure of a site here:

http://www.eatsmartmovemorenc.com/ncwinnerscircle

I have two issues that I'm currently trying to hash out. First, the 
navigation menu on the right is spaced radically different in Firefox 
and IE/Win (IE/Win is putting extra spaces between the  items).


Second, I cannot seem to get the images in the right sidebar to center 
within the div. I've set the margins at auto for left and right. My 
other option is encasing them in a  tag and doing a text align, but I 
don't want to do that (as that would be cheating...).


Any help with this would be greatly appreciated. Only the index.htm is 
workable at this point, btw.


linda

--
Linda Dunn
Purplegenie Design {web+graphics}
[EMAIL PROTECTED]
252.422.9393

__
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] Positioning/Hiding Legends

[jack fredricks]

Does anyone know of a decent way to 'hide' a legend from visual
browsers? For design reasons, I am duplicating the fieldset's legend
using a header (sorry, I can't avoid this at this stage). I want to
keep a real legend for accessibility, but don't want to have both my
fake legend and real legend showing.

dummy code;

Fake Legend, sadly I must keep this

Real legend, please hide me for visual browser

label for radio


dummy css;

legend {
position: absolute;
left: -999em;
border:1px blue solid;
}

display:none works, but kills the accessibility I am trying to keep.
FF is not letting me position the legend.

thanks
jack
__
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] best CSS drop down metod

[fokuss]

Hello Everyone,
I have a project which requires (CSS) drop downs. Since dipping into CSS I have 
not yet encountered a solid way of doing this. COuld someone refer me to one or 
more solutions they had good luck with?
Thanks
Adam helweh
__
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] Mac IE 5 Problem

[Frank McClung]

Could anyone tell me the hack to fix the main boxes (red, yellow, blue,
green) from all going down the left side of the screen? They should go
across.

 

http://www.computerrecycling.us

 

Suggestions appreciated,

 

- Frank

__
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]Moving from tables to CSS

[David Laakso]

Rahul,
Attempt to send outbound mail to you from XP_SP2 indicates your e-mail  
contains a virus that targets this OS.

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] List spacing and Image Centering

[Prabhath Sirisena]

> navigation menu on the right is spaced radically different in Firefox
> and IE/Win (IE/Win is putting extra spaces between the  items).

It's the dreaded white-space bug. Check out the fix[1] by Jon Hicks.

> Second, I cannot seem to get the images in the right sidebar to center
> within the div. I've set the margins at auto for left and right. My

Centering elements using setting margins to auto doesn't work in IE. I
guess there's no harm in containing the image in a P element and
centering using text-align.

Prabhath
http://nidahas.com

[1] http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
__
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] best CSS drop down metod

[David Laakso]

On Sun, 29 May 2005 21:14:21 -0400, <[EMAIL PROTECTED]> wrote:


Hello Everyone,
I have a project which requires (CSS) drop downs. Since dipping into CSS  
I have not yet encountered a solid way of doing this. COuld someone  
refer me to one or more solutions they had good luck with?

Thanks
Adam helweh

Then the problem may be your layout?
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] best CSS drop down metod

[Prabhath Sirisena]

> > Hello Everyone,
> > I have a project which requires (CSS) drop downs. Since dipping into CSS
> > I have not yet encountered a solid way of doing this. COuld someone
> > refer me to one or more solutions they had good luck with?

Big John has an elegant solution[1]

Prabhath
http://nidahas.com

[1] http://positioniseverything.net/css-dropdowns.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] best CSS drop down metod

[Al Sparber]

From: <[EMAIL PROTECTED]>


Hello Everyone,
I have a project which requires (CSS) drop downs. Since dipping into 
CSS I have not yet encountered a solid way of doing this. COuld 
someone refer me to one or more solutions they had good luck with?


If you require more than one sub-menu level, there is no solid way of 
doing it purely with CSS. There is only smoke and mirrors and lots of 
usability issues that only JavaScript can overcome. If, however, you 
only require a single sub-menu, then the original Suckerfish pure CSS 
menu might do and would be my recommendation. But there is a topic on 
this list's wiki you could run through for other ideas:


http://css-discuss.incutio.com/?page=ListMenus

Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - CSS FastPacks
-
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/



__
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] List spacing and Image Centering

[Linda Dunn]

Prabhath Sirisena wrote:
 > It's the dreaded white-space bug. Check out the fix[1] by Jon Hicks.

[1] http://www.hicksdesign.co.uk/journal/ie-whitespace-bug


Thanks -- I didn't know there was a white-space bug (and did not know to 
dread it...). I found an alternate fix to the Jon Hicks one; one space 
after the text of each link (a space before the ) fixes the problem 
as well, and without a stylesheet hack.


But now I have another problem, speaking of stylesheet hacks -- I'm good 
in Firefox and IE6, but my layout is breaking in IE5.x (what a 
shock...). I had thought I had everything wrapped and contained so that 
this wouldn't happen; I cannot figure out where to apply the box model 
hack here, or if this will even help.


Any suggestions will be appreciated. That link again is 
http://www.eatsmartmovemorenc.com/ncwinnerscircle


linda

--
Linda Dunn
Purplegenie Design {web+graphics}
[EMAIL PROTECTED]
252.422.9393
__
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] best CSS drop down metod

[David Laakso]

On Sun, 29 May 2005 23:33:52 -0400, Prabhath Sirisena <[EMAIL PROTECTED]>  
wrote:



> Hello Everyone,
> I have a project which requires (CSS) drop downs. Since dipping into  
CSS

> I have not yet encountered a solid way of doing this. COuld someone
> refer me to one or more solutions they had good luck with?


Big John has an elegant solution[1]

Prabhath
http://nidahas.com

[1] http://positioniseverything.net/css-dropdowns.html



No offense to Big John's superb solution intended, but what this beginner  
sees as more usable and accessible is John's solution with CSS disabled  
being the right column of a content first source ordered two-column layout.

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] best CSS drop down metod

[Thierry Koblentz]

[EMAIL PROTECTED] wrote:
> Hello Everyone,
> I have a project which requires (CSS) drop downs. Since dipping into
> CSS I have not yet encountered a solid way of doing this. COuld
> someone refer me to one or more solutions they had good luck with?

This one has good browsers support and it is "keyboard friendly":
http://www.tjkdesign.com/articles/dropdown/demo.asp

Thierry | http://www.TJKDesign.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] best CSS drop down metod

[fokuss]

 Thank you very much for your suggestions.
David - There is no layout yet. I was asking before the project started so I 
could plan accordingly.
Thanks
Adam
 
-Original Message-
From: Prabhath Sirisena <[EMAIL PROTECTED]>
To: David Laakso <[EMAIL PROTECTED]>
Cc: css-d@lists.css-discuss.org ; [EMAIL PROTECTED]
Sent: Mon, 30 May 2005 09:33:52 +0600
Subject: Re: [css-d] best CSS drop down metod


> > Hello Everyone,
> > I have a project which requires (CSS) drop downs. Since dipping into CSS
> > I have not yet encountered a solid way of doing this. COuld someone
> > refer me to one or more solutions they had good luck with?

Big John has an elegant solution[1]

Prabhath
http://nidahas.com

[1] http://positioniseverything.net/css-dropdowns.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] Re: Website check on Windows [worldadventurer.net]

[Mikhail Bozgounov]

Hi,

Here are a coupla screenshots for you - FF 1.04 and IE 6.0 on WinXP (SP2).

Have a good day, Michel

http://lelion.info/web/screenshots/temp-cssd/worldadventurer.net_screenshot_ff1.0.4-winxp.jpg
http://lelion.info/web/screenshots/temp-cssd/worldadventurer.net_screenshot_ff1.0.4-winxp.jpg



// On Behalf Of Luca Balboni
// Sent: Friday, 27 May 2005 12:28 PM
// To: css-d css-d
// Subject: [css-d] Website check please - problems on windows?

Hi all,
***
I am completing a website and I am not able to check it on Windows
configurations.
***
The address is: http://www.worldadventurer.net
***
Thanks, Luca


__
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/