6 replies [Last post]
unfinishedsweet
Offline
Regular
UK
Last seen: 11 years 27 weeks ago
UK
Joined: 2009-01-29
Posts: 25
Points: 0

Hi folks,
First of all thank you for the "motivation" to go on with this bloody CSS. I've done huge progress so far and I'm starting feeling that it's not so hard. I'm trembling when thinking how much messy html table-based code I'd need to write to achieve current stage of my little website. Well, CSS rocks! Unluckily I have some problem I can't handle.

The website:
unfinishedsweet.50webs.com

The problem:
When I tried to stretch the #content div (by adding the temporary image) to check out how to site will behave with more content.. and not so bad.. looks somehow. I do not understand why the side divs (#rbar, #lbar) don't stretch as well as #content while they have set up height: 100%.

Other thing is (I'm not sure if it's an issue) the outline of #rbar, it goes out of parents #wrap when I set up padding-top, padding-right to 4px. Visual effect is as should be so please let me know weather I should worry about it. I did the padding 4px cause when I set up child's (boxblueright) margin-top and margin-right to 4px, all three colums (#lbar, #content and #rbar) move 4px lower what's not desirable, padding of parent does the thing right but boundaries changes (perhaps it's normal, I'm not experienced at all)

I know that the shadows aren't working properly but I take care of it later on. Similarly problem with 100% height apply.

Best regards
P.

KaZ
Offline
newbie
Last seen: 11 years 25 weeks ago
Timezone: GMT+11
Joined: 2009-02-02
Posts: 10
Points: 0

The side bars are, infact,

The side bars are, infact, stretching 100% of the #wrap div, they are however not stretching to the same height as the #content div because the #content div is actually higher than the #wrap div.

The reason for this is because floated elements don't expand the height of their parent element, in this case the content div doesn't expand the height of the wrap div.

In order to fix this, you need to have something that is relatively positioned and clears all the floating divs. Try this link: http://www.positioniseverything.net/easyclearing.html

--

As for your other issue, the borders cross over because adding padding to a div also adds height and/or width, so to solve this just take whatever you add to the padding, off the height or width.

--

Hope this solves your problems, and good luck.

PS, I would consider using a different font to "New York" because it is not a system default and can only be viewed by people with that font on their computers.

Try
font-family: Verdana, Arial, san-serif;

unfinishedsweet
Offline
Regular
UK
Last seen: 11 years 27 weeks ago
UK
Joined: 2009-01-29
Posts: 25
Points: 0

Thank you so much for your

Thank you so much for your priceless directives, much appreciate. I solved my problem in some other very simple way. According to http://www.alistapart.com/articles/fauxcolumns I just added right background for the container Smile All the other issues solved also, but I use the technique from the link in other thing anyway so thanks again.

Regarding to the font, is any universal serif fontset that can I use insted of NY (which I found as an example on some css-teaching website)?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

unfinishedsweet

unfinishedsweet wrote:

Regarding to the font, is any universal serif fontset that can I use insted of NY (which I found as an example on some css-teaching website)?

No, there is not. Every browser can only display fonts that are installed on the local system. Even if they are on the system the user can easily change them to their liking and you can't do anything about that. Any design that depends on a particular font is a broken design. The web is not paper.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

unfinishedsweet
Offline
Regular
UK
Last seen: 11 years 27 weeks ago
UK
Joined: 2009-01-29
Posts: 25
Points: 0

What about Verdana and Arial

What about Verdana and Arial ? aren't they quite standard? I need to use some serif font in my design. The one I used.. well I don't even know if it's displayed in my Linux box. I compared this with "Times New Roman" which was displayed differently, so now maybe just 'serif' works? ..and the "New York" does not exist in my system. I need serif fonts for my menus, for the rest of content I'm gonna use Arial, Verdana, sans-serif; therefore I'm asking about some more common tags/examples (like mentioned Arial and Verdana) of serif fonts

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

There are "web safe" fonts.

There are "web safe" fonts. Fonts that you can pretty much assume 80%+ of your audience has, even Linux users. However as Ed said there will always be some guy out there without a single font you list, ever.

The safest ways involve:
setting web-safe fonts in order of your preference, followed by the family-type (serif, sans-serif, monospace) (I don't mess with blackletter or fantasy cause I've never seen them actually work anywhere). One thing to be careful of is that some fonts at the same font-size will be larger or smaller than the others in their group. This can affect layouts depending on how large/long your words are.

Verdana is larger than other sans-serifs (arial, helvetica) while trebuchet ms is a hair smaller. It seems all of the new Vista fonts are much smaller (almost by a whole font size) than their related counterparts.

Lucida seems to be also larger, at least as large as Verdana. Verdana will always take precedence with me because of how easily it shows the difference between I and l. Arial, helvetica, et al have major issues with these two letters. EYE !=ELL

Georgia is larger than other serifs (times, times new roman) and remember that it and a few other fonts (garamond? forget who else) have dropped numbers (some numbers sit with parts below the baseline).

I don't usually use funky fonts, a shame, so I often have

font: bold 1em/1.1em gotham, helvetica, arial, sans-serif; (I used to have verdana in those but in things like my forms the difference between verdana and helvetica or arial was too great, as I have long Dutch words and whether a word would wrap was completely dependent on the font size).

the computer should first look for gotham (unlikely but if it has it, it's very nice), then helvetica (fairly standard on Macs and Windows), then arial, and if none of those are found, it will default to whatever sans-serif it has, so at least people still get sans-serif.

font: bold 1em/1.1em georgia, garamond, times, "times new roman", serif;

font: bold 1em/1.em courier, "courier new", mopnospace;

Sometimes I try to add some more Linux/Unix fonts to those, depending.

On a header I have, which was designed in Impact originally:
font: bold small-caps 36px/50px impact, "arial black", "bitstream vera sans bold", verdana, sans-serif;

People will in any case get a bold sans font.

*edit here's a link I sometimes use to check stuff: http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
and I'm using a Linux machine (debian-based) but with Ms True-type fonts installed for GIMP which seem to sometimes affect my browsing (I can see Comic Sans now but still can't see Cooper Black).

I'm no expert, but I fake one on teh Internets

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

unfinishedsweet wrote:What

unfinishedsweet wrote:

What about Verdana and Arial ? aren't they quite standard?

See Stomme poes' answer for a good summary. Neither Verdana nor Arial will be available on Linux systems and possibly not on Macs either.

Quote:

I need to use some serif font in my design.

font-family: serif;

Will make the browser use it's default serif font. Of course it can still be easily overridden in the browser and the user can force all fonts to sans-serif if they like.

I say again - if your design depends on a specific font or font size to be useable it is a broken design. The Web just isn't paper.

Your proposed sans-serif family is bad if you are wedded to a particular font size. Verdana is much larger appearing than Arial for the same pixel size.

I just tend these days to use "Font-family: sans-serif" on the html or body element. If the user has selected a font they like who am I to override their choice? But then I keep my designs simple and flexible and count on content to attract users.

I don't go to web sites for their design anyway, but for their information. Really bad design can drive me away, but good design can't keep me around if the content is missing or irrelevant.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.