dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
598

altermatt
Premium Member
join:2004-01-22
White Plains, NY

altermatt

Premium Member

Newbie .css & layout questions

Helping a friend with her personal site. At first, we laid everything out with tables (yes, I know, old school, but it's what I know), using .css for everything else. Then I redid it without tables, using .divs instead. Here are the problems:

1. In the table site, on the main page (»moonlake.net/becoming/index.html ) everything lays out ok (including the non-kosher surrounding table with 100% height to center the content table vertically) in both IE and FF, but the font sizes differ, becoming smaller in FF. Why? Can I avoid this so the fonts display the same in both browsers?

2. In the non-table site, on the main page (»moonlake.net/becoming/in ··· ex2.html ), in FF, the menu links do not align centered, but over to the left, despite specifying text-align center. In IE everything looks correct. This is why I use tables, but I'm trying to learn how to work without tables (not sure why, just stubborn, I guess ).

3. On the inside pages (for instance, »moonlake.net/becoming/bb ··· ych.html ), I would have liked two lines of text next to the logo pic at the top right, but even using an align: middle property for the picture, only the first line of the text vertically aligns to the middle of the picture; if I add a second line, it goes below. This is how it always behaves in HTML without css; is there anyway to have two lines line up to the right of the picture? Without using another table?

Sorry for the newb misundertandings; this is how I learn . Thanks.

cdru
Go Colts
MVM
join:2003-05-14
Fort Wayne, IN

cdru

MVM

1. Arial narrow doesn't appear to be valid for Firefox according to a variety of websites. They look about the same in my browser though so either it's a local computer issue, I'm just not seeing it, or it's no longer the same issue as it was before. Check CSS styles to make sure there aren't styles being applied you aren't aware off.

2. When you specify the div to be align=center, you're telling the content to be centered, not the actual div. Since you have a width of 80%, the remaining 20% appears on the right side of the page. Add a style of "margin:0 auto;" to the div which splits that 20% evenly to the left and right.

3. Do you always know what the height of the image is? And is there always going to be 2 lines of text? It can be done with CSS, but it gets complicated. If you know the height of the image and know if there is going to be 2 lines of text (or don't mind setting up 2 different styles) then I would just set margins or padding as needed to make it look correct. Sometimes the most pure solution isn't always the best, when time = money. If you can set reasonable assumptions (text will be short, always 2 lines, same image, etc) then there is nothing wrong with good enough.

altermatt
Premium Member
join:2004-01-22
White Plains, NY

2 edits

altermatt

Premium Member

Thank you, cdru! Replies follow:
1. It never occurred to me that Firefox might not find any font valid (assuming it's on the user's computer, which is why I stick to standard Windows fonts). Arial narrow is a standard (pre-installed on most Windows computers) font. On all my computers, it DOES show up as Arial narrow on the page; the problem was that the font size was very different in IE and FF. I'd specified "xx-large" and FF seems to interpret that differently from IE. I know how to use sizes like "xx-large" and sizes that are percentages (like "400%" for the biggest text on that page), but don't know how to specify an actual pixel size for text. Can that be done???

2. Duh! Never knew that. I tried the margin:0 auto idea and it seems to have worked like a charm in IE but not in FF (where it's still over to the right). Live and learn! Using tables, everything's fine, but I really would like to learn to do stuff without tables. Not sure why since I don't do this for a living .

3.Yes, the inner page headers will always be the same...the small butterfly image and then (hopefully) two lines to the right: First line "being and becoming" and second line the page name. I wanted the two lines to line up to the right of the image and not wrap around; align middle only does what I want for the first line. How would I get the two lines to line up right? Would using float help?

Sorry for being dense; I'm still learning. I appreciate your help!

cdru
Go Colts
MVM
join:2003-05-14
Fort Wayne, IN

cdru

MVM

said by altermatt:

Thank you, cdru! Replies follow:
1. It never occurred to me that Firefox might not find any font valid (assuming it's on the user's computer, which is why I stick to standard Windows fonts). Arial narrow is a standard (pre-installed on most Windows computers) font. On all my computers, it DOES show up as Arial narrow on the page; the problem was that the font size was very different in IE and FF. I'd specified "xx-large" and FF seems to interpret that differently from IE. I know how to use sizes like "xx-large" and sizes that are percentages (like "400%" for the biggest text on that page), but don't know how to specify an actual pixel size for text. Can that be done???

"font-size: 12px;" (or whatever size you want. You can also include it in your font: declaration as "font: 12px Arial". It's usually recommended to use ems as a unit though. More information about font-sizes then you probably ever wanted.

3.Yes, the inner page headers will always be the same...the small butterfly image and then (hopefully) two lines to the right: First line "being and becoming" and second line the page name. I wanted the two lines to line up to the right of the image and not wrap around; align middle only does what I want for the first line. How would I get the two lines to line up right? Would using float help?

There are multiple approaches. You could create your header as a div floated right. Set the width to 50%, height the height of the image, padding-left the width of the image (plus a little extra if desired, then the image as the background image positioned to the left. Then manually position the title and subtitle with heights/margins/paddings.

altermatt
Premium Member
join:2004-01-22
White Plains, NY

1 edit

altermatt

Premium Member

Thanks! Checking out the font size reference soon; rarely is there too much information . And looking forward to trying the div solution.

On a related note, i played with putting the content on the inside pages inside a div with an overflow:auto so the height would remain stable and just scroll if it ever went over. To see it in action, check out the difference between »moonlake.net/becoming/bb ··· ult.html (no scroll probably) and »moonlake.net/becoming/bb ··· log.html (to which I added some more greek text to make it scroll.

Still sticking with the tables reluctantly until I master doing without, but your suggestions have been fantastic and have led me to further stuff. Thanks again.

Now if I could figure out why favicon works in FF and not IE---I'm used to things (like the scrollbar colors) working in IE and not FF! Small thing, really, just playing around.

EDIT: Just checked out the font reference. More confused . Seems that even "12px" may mean different things on different screens. It did, however, make clear to me why my %-based font sizes were wonky in FF and not in IE---nesting. Frankly, as you pointed out earlier, some things aren't enough to worry about...the index page menu links are a lot smaller in FF than in IE, but they are still fine.