Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > newbie very frustrated with simple CSS

Reply
Thread Tools

newbie very frustrated with simple CSS

 
 
Slick50
Guest
Posts: n/a
 
      12-13-2006
http://messiah.scojul.homedns.org

Two problems:
1) UL does not display below header DIV in FF, looks OK in IE6
2) UL list items will not center in FF or IE.

I had a hard enough time getting the stupid gif and text to display on the
same line, and now this...I'm going to go nuts... It shouldn't be this hard,
should it?

Grrrrrr...

Thanks.


 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-13-2006
Slick50 wrote:
> http://messiah.scojul.homedns.org
>
> Two problems:
> 1) UL does not display below header DIV in FF, looks OK in IE6
> 2) UL list items will not center in FF or IE.
>
> I had a hard enough time getting the stupid gif and text to display on the
> same line, and now this...I'm going to go nuts... It shouldn't be this hard,
> should it?
>
> Grrrrrr...
>
> Thanks.
>
>


Don't see a list at URL, but if you want a list "UL" centered you must
1) give it a width and 2) set margins left and right to auto.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<titleCentered List</title>

<style type="text/css">
UL { width: 5em; margin-left: auto; margin-right: auto; }
</style>
</head>

<body>

<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</body>
</html>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Slick50
Guest
Posts: n/a
 
      12-13-2006
I actually think I resolved both my problems by using the CSS Validator and
another post. From the post, I tried clear: both, which put the UL (the
horizontal text) below the header - just as I wanted. The CSS Validator
indicated an invalid value for text-align (I was using "middle" instead of
"center". So both of those problems have been fixed.

However...

I seem to have introduced another problem. The header background color won't
display in FF. ????


I don't know how anyone can get good at this. I've spent three weeks trying
to get this stupid simple header to display properly and am getting
absolutely nowhere...


"Jonathan N. Little" <(E-Mail Removed)> wrote in message
news:8722e$457f9732$40cba7b0$(E-Mail Removed)...
> Slick50 wrote:
>> http://messiah.scojul.homedns.org
>>
>> Two problems:
>> 1) UL does not display below header DIV in FF, looks OK in IE6
>> 2) UL list items will not center in FF or IE.
>>
>> I had a hard enough time getting the stupid gif and text to display on
>> the same line, and now this...I'm going to go nuts... It shouldn't be
>> this hard, should it?
>>
>> Grrrrrr...
>>
>> Thanks.

>
> Don't see a list at URL, but if you want a list "UL" centered you must 1)
> give it a width and 2) set margins left and right to auto.
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <titleCentered List</title>
>
> <style type="text/css">
> UL { width: 5em; margin-left: auto; margin-right: auto; }
> </style>
> </head>
>
> <body>
>
> <ul>
> <li>List 1</li>
> <li>List 2</li>
> <li>List 3</li>
> </ul>
> </body>
> </html>
>
>
>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIO
> http://www.LittleWorksStudio.com



 
Reply With Quote
 
Vince Morgan
Guest
Posts: n/a
 
      12-13-2006

"Slick50" <(E-Mail Removed)> wrote in message
news:JfMfh.7402$(E-Mail Removed)...
> http://messiah.scojul.homedns.org
>
> Two problems:
> 1) UL does not display below header DIV in FF, looks OK in IE6
> 2) UL list items will not center in FF or IE.
>
> I had a hard enough time getting the stupid gif and text to display on the
> same line, and now this...I'm going to go nuts... It shouldn't be this

hard,
> should it?
>
> Grrrrrr...
>
> Thanks.
>
>


Inheritence can cause some trouble if you don't account for it at the very
beginning ..
You should set base properties for the parent object, which would be <body>
here, and overide those as necessary.
Ie;
<style type="text/css">
body {
width:100%;
height:100%;
font-family:Georgia, Arial, sans-serif;
font-size:1em; /*best to size fonts in either em or px*/
background:#FFF;
color:#000;
}
#header {
background:#333;
}
</style

It's also worth asking for help for a particular problem as it arrises. If
you don't, you may end up fixing (apparently) it by trial and error, and
that is almost always a bad thing IMHO. Reason being that you then don't
know why it works, nor why it didn't. Not to mention the fact that it may
well break in another browser, or environment. You need also to account for
some irregular behaviour in non standards complient browsers. Need, is the
keyword here, as there are more of them than there are not.
Unfortunately, some would say, web pages are no longer the extremely simple
things they used to be back in the early days. You now "need" some
technical understanding of the hows, and certainly the whys. How much
understanding depends on the level of expertise you wish to attain.
HTH
Vince Morgan




 
Reply With Quote
 
John Hosking
Guest
Posts: n/a
 
      12-13-2006
Hello, Slick (great name for a self-described newbie )

Please don't top-post. It's confusing. I've fixed it for you this time.

Slick50 wrote:
> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:8722e$457f9732$40cba7b0$(E-Mail Removed)...
>
>>Slick50 wrote:
>>
>>>http://messiah.scojul.homedns.org
>>>
>>>Two problems:
>>>1) UL does not display below header DIV in FF, looks OK in IE6
>>>2) UL list items will not center in FF or IE.


>>
>>Don't see a list at URL, but if you want a list "UL" centered you must 1)
>>give it a width and 2) set margins left and right to auto.
>>
>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>><html>
>><head>
>> <titleCentered List</title>


Should be <title>Centered List</title>

[other helpfulness snipped]

> I actually think I resolved both my problems by using the CSS Validator and
> another post. From the post, I tried clear: both, which put the UL (the
> horizontal text) below the header - just as I wanted. The CSS Validator
> indicated an invalid value for text-align (I was using "middle" instead of
> "center". So both of those problems have been fixed.
>
> However...
>
> I seem to have introduced another problem. The header background color won't
> display in FF. ????
>
>
> I don't know how anyone can get good at this. I've spent three weeks trying
> to get this stupid simple header to display properly and am getting
> absolutely nowhere...
>

Newbie questions should be easy to help solve. But you don't seem to
have any lists at the URL you provided, and you don't have any
clear:both at the URL you provided, and I don't see any attempt to
specify a background at the URL you provided. (And what other post might
you be talking about?) So, do you have another URL? (Or should we stop
trying to help? You don't sound happy yet.)

BTW, what *is* at the URL you provided contains this rule:
font-family: "Comic Sans MS" "Veranda" sans-serif;

1) font alternatives are supposed to be comma-separated; and
2) By "Veranda", do you mean "Verdana"?
3) The use of Verdana isn't always your best choice, but for now, it's
not your biggest problem. (But pay attention over time to discussions
about font choices, so you can decide for yourself).

HTH
--
John
 
Reply With Quote
 
The Eclectic Electric
Guest
Posts: n/a
 
      12-13-2006
"Slick50" <(E-Mail Removed)> wrote in message
news:XLMfh.7469$(E-Mail Removed)...
>I actually think I resolved both my problems by using the CSS Validator and
>another post. From the post, I tried clear: both, which put the UL (the
>horizontal text) below the header - just as I wanted. The CSS Validator
>indicated an invalid value for text-align (I was using "middle" instead of
>"center". So both of those problems have been fixed.
>
> However...
>
> I seem to have introduced another problem. The header background color
> won't display in FF. ????
>
>
> I don't know how anyone can get good at this. I've spent three weeks
> trying to get this stupid simple header to display properly and am getting
> absolutely nowhere...
>


It's worth perservering with. It's great fun once you get the hang of it,
though it will be frustrating for a while longer yet. It's probably worth
finding a site that you think looks nice and then interpret their CSS.

As for your site, I can't see any background properties for any of your
divs. Also, there is no font called Veranda. and I think you need
commas between your fonts.

Good luck

+e


 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      12-13-2006
John Hosking wrote:

> font-family: "Comic Sans MS" "Veranda" sans-serif;
>
> 1) font alternatives are supposed to be comma-separated; and
> 2) By "Veranda", do you mean "Verdana"?
> 3) The use of Verdana isn't always your best choice, but for now, it's
> not your biggest problem. (But pay attention over time to discussions
> about font choices, so you can decide for yourself).


4) "Comic Sans MS" is one of the most horrible fonts on the planet.
5) The two specified fonts look absolutely nothing like each other, so
using one as a fall back for the other doesn't really make sense.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-13-2006
Vince Morgan wrote:

> font-size:1em; /*best to size fonts in either em or px*/


Best to size fonts in either em or percent. 100%, actually.

Using em causes problems with Internet Explorer which has a terrible
'resizing' bug, whereas if the visitor changes from, say, Smaller to
Medium, the size will double!

http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck
 
Reply With Quote
 
Slick50
Guest
Posts: n/a
 
      12-13-2006
First, let me start by thanking you for your responses and constructive
criticism.

Second, I am an idiot. The code I was working on was not uploaded to my
webserver. I've fixed that dumb problem.

Though as John stated it is not my biggest problem at this point, I will
carefully consider the comments regarding Comic Sans MS. The look and feel
fits into the way I want my site to appear, I will search for alternatives.
To be honest, I simply looked at the font styles in my Control Panel as I
haven't found a resource for font styles yet (admittedly, I haven't searched
much yet either).

Regarding Electric's post, I have heard that comment several times and it
does make sense in general. However I've tried that several times and get
lost in the details. I have a hard time finding a site (and believe me after
three weeks, I've done plenty of looking) that addresses content layout
AFTER the basic layout is in place. That is the key for me. I think
understand how to layout the pages, but I'm struggling with element
alignment within a basic layout. I certainly would welcome your suggestions
for other resources.

Regarding Vince - I would be very intested in your comments now that I have
the right code available. Is inheritance preventing the background color
from displaying? And I understand exactly what you are getting at by your
final comments. I initially considered taking this one step at a time as you
suggest, however I thought I could at least get close before asking a
question. Turns out I was horribly wrong, and that I find myself in the
trial-and-error situation you describe. I do feel though now that I am
starting to make a little progress. This was my first post after getting to
that point. Great comments, thanks.

Finally BTS (what a great handle), your comments are also well received.
Thanks for your input too.


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-13-2006
In article <(E-Mail Removed)5n.co.uk>,
Toby Inkster <(E-Mail Removed)> wrote:

> John Hosking wrote:
>
> > font-family: "Comic Sans MS" "Veranda" sans-serif;
> >
> > 1) font alternatives are supposed to be comma-separated; and
> > 2) By "Veranda", do you mean "Verdana"?
> > 3) The use of Verdana isn't always your best choice, but for now, it's
> > not your biggest problem. (But pay attention over time to discussions
> > about font choices, so you can decide for yourself).

>
> 4) "Comic Sans MS" is one of the most horrible fonts on the planet.
> 5) The two specified fonts look absolutely nothing like each other, so
> using one as a fall back for the other doesn't really make sense.


Not my favourite font either but it was a dear wish of a client
for her organization's site (to match their publications) so I
went into battle and won great swathes of territory with stuff
like that it is harder to read in general on a screen, it takes
up too much line height, I forget if i mentioned it looks too
cute, no, I think I piked out on that one. But the arguments
hardly counted for headings. So it was agreed that main headings
only should be CS. And this looked a tiny odd so I threw in all
<h2>s as well.

I used a fallback of Arial to make this sense: if a user had no
CS, the headings would head in a direction I wanted. But that I
should be so lucky, everyone seems to have CS. Does not seem to
me too horrible in small doses anyway...

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help running a very very very simple code olivier.melcher Java 8 05-12-2008 07:51 PM
Very Frustrated NooB Questions Blewyn Wireless Networking 1 07-12-2005 04:36 PM
very frustrated Java programmer Randy O'Bright Java 21 01-07-2004 10:49 PM
very frustrated java programmer Manuel Perdig„o Java 3 01-06-2004 06:32 PM
I'm getting VERY frustrated with Earthlink's newsgroups! netz123 Computer Support 2 10-06-2003 01:28 AM



Advertisments