newbie very frustrated with simple CSS

S

Slick50

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.
 
J

Jonathan N. Little

Slick50 said:
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.
Click to expand...

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>
 
S

Slick50

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...
 
V

Vince Morgan

Slick50 said:
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.
Click to expand...

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
 
J

John Hosking

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.

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...
Click to expand...
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
 
T

The Eclectic Electric

Slick50 said:
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...
Click to expand...

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
 
T

Toby Inkster

John said:
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).
Click to expand...

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.
 
B

Beauregard T. Shagnasty

Vince said:
font-size:1em; /*best to size fonts in either em or px*/
Click to expand...

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
 
S

Slick50

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.
 
D

dorayme

Toby Inkster said:
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.
Click to expand...

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...
 
D

dorayme

"Slick50 said:
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?
Click to expand...

In the early days of many technologies, things are hard. In about
50 years (maybe sooner) there will be a dramatic improvement.
 
V

Vince Morgan

Beauregard T. Shagnasty said:
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
Click to expand...

My bad. I don't know where my head was when I wrote that..
And thank you for the info on IE bug, I wasn't aware of that one at all.
Vince Morgan
 
V

Vince Morgan

Slick50 said:
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
Click to expand...

I took the liberty of downloading your css file and modifying it slightly.
I've added a <div> and made a few small changes to the css. I removed
'display:block' from #square as it is an inline element in an inline
context, that is inline by default.
The change in case is simply my editor setup.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv="Content-Type" content="text/HTML; charset=utf-8">
<!--<LINK rel="stylesheet" href="css/style.css" type="text/css">-->
<style type="text/css">
body
{
padding-right: 0px;
padding-left: 0px;
background: #fff;
padding-bottom: 0px;
margin: 0px;
width: 100%;
color: #000;
padding-top: 0px;
font-family: "georgia", "arial", sans-serif;
height: 100%;
}
#wrapper
{
background-color: #f6ec2a;
}

#header
{
font-weight:bold;
font-size:1.5em;
color: red;
}
#square
{
margin-top: 1em;
float: left;
margin-left: 1em;
width: 75px;
height: 75px;
}
#logo
{
float: right;
margin-right: 2em;
list-style-type: none;
}
#navbar
{
clear: both;
text-align: center
}
#navlist
{
padding-right: 0px;
display: inline;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
list-style-type: none
}
#navlist li
{
display: inline;
margin: 1em
}
</style>
</HEAD>
<BODY>
<DIV id="wrapper">
<DIV id="header">
<IMG id="square" src="imges/square.gif">
<UL id="logo">
<LI>Messiah
<LI>Lutheran
<LI>Preschool
</UL>
</DIV>

<DIV id="navbar">
<UL id="navlist">
<LI>Newsletter
<LI>For Parents
<LI>Daily Schedule
<LI>Monthly Planner
<LI>School Calendar
<LI>Policies
<LI>About Us
</UL>
</DIV>
</DIV><!--wrapper
</BODY>
</HTML>

The background should now be the desired color. I haven't had the time to
check it very thoroughly so......
All the best,
Vince Morgan
 
S

Slick50

Thanks again Vince, very helpful. I studied your example, and I found that
instead of adding an additional DIV, moving the closing DIV tag below the
navigation UL got me pretty much where I wanted. There are differences in
the way IE and FF display the right-hand UL. FF seems to vertically align
the list, but IE aligns at the top. And the spacing between the bottom list
and the elements above have nice spacing in FF, but IE seems to collapse the
margin. Not sure which one is *right*, but I'm closer. Thanks for your
effort.

http://messiah.scojul.homedns.org/vince.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Help needed with code 5
Only one table shows up with the information 2
How to keep an a:hover effect with css like "onMouseOut()"? 2
CSS menu problems with IE 7 2
Help with my responsive home page 2
Help with CSS margin collapse 6
Survey details won't go through using php, ajax, Mysql 0

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 441

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top