Playing with CSS

U

UKuser

Hi Folks,

Below is some test text which I've been working on, to try and get my
head around CSS more.

However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.

1) Although "centered" is centered, in Firefox the background colour
doesnt display
2) The borders in firefox appear to be much wider than IE
3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

Not quite sure why its not working, but can I recommend
http://www.yourhtmlsource.com/stylesheets/csslayout.html
for newbies explaining about layout - its not my own site, but its
good.

Thanks

Sp

<HTML>
<style>
body {
text-align:center;
}

#top{
width:100%;
height:50px;
background-color:cyan;
}

#overall{
width:100%;
height:100%;
background-color:lightgray;
}

#main {
margin:auto;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightblue;
}

#second{
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightgreen;
}

#third{
position:relative;
left:5px;
top:10px;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:yellow;
}

#right{
float:left;
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
}

#bottom{
float:left;
width:100%;
height:50px;
background-color:cyan;
}

#containedbottom{
right:0%;
left:0%;
position:absolute;
width:100%;
bottom:8px;
height:50px;
background-color:cyan;
}

#centered{
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
margin: 0 auto; text-align: left;
}

</style>
<body><div id="overall">

<div id="top">
this is top text
</div>
<div id="main">
this is test text
<div id="second">
second text
<div id="third">
third text
</div>
</div>
</div>

<div id="right">
this text should appear to the right of first box
</div>
<div id="bottom">
this is bottom text
</div>
<div id="centered">
this text should be centered
</div>
<div id="containedbottom">
this is bottom text v2
</div>

</div></body>
 
M

mbstevens

Hi Folks,

Below is some test text which I've been working on, to try and get my head
around CSS more..................
Click to expand...
body {
text-align:center;
}
}
#top{
width:100%;
height:50px;
background-color:cyan;
}
}
Click to expand...


Your parens are so imbalanced that I'm surprised anything works at all.
Remove extras:
body {
text-align:center;
}

#top{
width:100%;
height:50px;
background-color:cyan;
}
Click to expand...
....and so on through the rest of your CSS markup.

....then recheck your CSS at:
http://jigsaw.w3.org/css-validator/
before even trying to run it.
 
M

mbstevens

On Thu, 28 Sep 2006 10:52:34 +0000, mbstevens wrote:

Oops, my corrections were returned to the original by my mailer
because I left the quotation-carets in. Lets try...

body {
text-align:center;
}


#top{
width:100%;
height:50px;
background-color:cyan;
}
 
M

mbstevens

On Thu, 28 Sep 2006 10:52:34 +0000, mbstevens wrote:

Oops, my corrections were returned to the original by my mailer because I
left the quotation-carets in. Lets try...
Click to expand...

Did it again!
Let's try rewriting it by hand...

body {text-align:center}

#top {
width:100%;
height:50px;
background-color:cyan}
 
E

Els

mbstevens said:
Did it again!
Let's try rewriting it by hand...

body {text-align:center}

#top {
width:100%;
height:50px;
background-color:cyan}
Click to expand...

You really are seeing things we (or at least I) don't...
Your second post did not show the quotation marks, and showed the same
code as you wrote above here, except for the omission of the last
semi-colon, which is dangerous to leave out when working on
stylesheets. (easily forgotten when adding more rules)
 
D

Dylan Parry

Els said:
I don't see those extra parenteses in the OP's post.
Click to expand...

Neither did I; mbs's reply to his own post correcting his "mistake" also
looked fine - so there was no need for the second correction message! I
think your (mbs) newsreader might be a bit b0rked ;)

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.
 
M

mbstevens

Neither did I; mbs's reply to his own post correcting his "mistake" also
looked fine - so there was no need for the second correction message! I
think your (mbs) newsreader might be a bit b0rked ;)
Click to expand...

It must be. Thanks for letting me know.
 
M

mbstevens

You really are seeing things we (or at least I) don't...
Click to expand...

Yes, you and Dylan are right -- my newsreader must be borked.
Your second post
did not show the quotation marks, and showed the same code as you wrote
above here, except for the omission of the last semi-colon, which is
dangerous to leave out when working on stylesheets. (easily forgotten when
adding more rules)
Click to expand...

You must be an old C programmer? C actually requires an simi-colon
after each statement. When I was writing a lot of C I certainly had the
habit.
 
E

Els

mbstevens said:
You must be an old C programmer? C actually requires an simi-colon
after each statement. When I was writing a lot of C I certainly had the
habit.
Click to expand...

I don't call myself old, nor am I a C programmer ;-)
I'm just using a lot of CSS, and find it's easier to always include
the semi-colon, as well as having the closing parenthesis on a new
line. Makes it easier to spot omissions, and it just looks better :)
 
J

Jonathan N. Little

UKuser wrote:
<SNIP>

You have such an incoherent hodge-podge of code here, who knows! Maybe
you should look at the spec and look at the syntax and go though the
properties.

http://www.w3.org/TR/CSS21/cover.html

So let's just take one example of your code, 'border' here:
#centered{
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
Click to expand...

"The 'border' property is a shorthand property for setting the same
width, color, and style for all four borders of a box. Unlike the
shorthand 'margin' and 'padding' properties, the 'border' property
cannot set different values on the four borders. To do so, one or more
of the other border properties must be used."

use:

border-width: 1px;
border-style: solid;
border-color: black;

or:

border: 1px solid black;

if your want to set the individual sides of the border differently you
cannot use the shorthand 'border' but separate side or properties

border-top: 1px solid black;
border-left: 2px solid blue;
border-top: 10px dotted red;
border-left: 5px solid cyan; /* insanely ugly */

or:

border-width: 1px 2px 10px 5px;
border-style: solid solid dotted solid;
border-color: black blue red cyan;

but not:
border: 1px 1px 1px 1px;
Click to expand...
 
U

UKuser

Hi,

As the original posted, I'm still not sure of what the best solution
is. Any thoughts?

Thanks

Sp
 
E

Els

UKuser said:
Hi,

As the original posted, I'm still not sure of what the best solution
is. Any thoughts?
Click to expand...

Thought: the position:fixed is working in IE7, but for some reason it
isn't in the right horizontal position.
Thought nr. 2: perhaps you could make a smaller example to show this
behaviour, but without all the other stuff. It's called a minimal
testcase, and it works two ways. First there is the benefit for the
people you want help from - less code to examine, quicker finding of
problems. Second there is the possibility that you will find that your
minimal testcase indeed does work, so you can start adding back all
the other stuff, to see which of those causes the problem :)
 
D

dorayme

You must be an old C programmer? C actually requires an simi-colon
after each statement. When I was writing a lot of C I certainly had the
habit.
Click to expand...

I don't call myself old, nor am I a C programmer ;-)[/QUOTE]

"old C programmer" does not imply being an old person any more
than "black chimney house" entails the house is black. If you
started programming C when you were 5 and had been programming
till now, and you are over 18, that's pleanty long enough to be
an old C programmer. :)
 
E

Els

dorayme said:
I don't call myself old, nor am I a C programmer ;-)
Click to expand...

"old C programmer" does not imply being an old person any more
than "black chimney house" entails the house is black. If you
started programming C when you were 5 and had been programming
till now, and you are over 18, that's pleanty long enough to be
an old C programmer. :)[/QUOTE]

I know that :)
 
D

dorayme

Els said:
I know that :)
Click to expand...

I know you know that. I was just exercising my fingers and
showing off my pedantry as usual... I thought to say something
true that had no possibility of being actually wrong. It's my
birthday, I am 783 today. That's old.
 
B

Beauregard T. Shagnasty

dorayme said:
I was just exercising my fingers and showing off my pedantry as usual
Click to expand...

You would show your pedanties in public? <wow!> Oh wait. Pedantries.
 
L

Luigi Donatello Asero

Beauregard T. Shagnasty said:
You would show your pedanties in public? <wow!> Oh wait. Pedantries.
Click to expand...

Sometimes I am under the impression that many of you who often take part on
these NGs work for Google.....
 
D

dorayme

"Beauregard T. Shagnasty said:
You would show your pedanties in public? <wow!> Oh wait. Pedantries.
Click to expand...

I would NEVER show my pedanties in public.

pedantry
noun
the pedantry in her argument has upset the flow of our discussion
dogmatism, purism, literalism, formalism; overscrupulousness,
scrupulousness, perfectionism, fastidiousness, punctiliousness,
meticulousness; captiousness, quibbling, hair-splitting,
casuistry, sophistry; informal nitpicking. See note at knowledge .


(Don't see anything about knowledge)
 
D

dorayme

"Luigi Donatello Asero said:
Sometimes I am under the impression that many of you who often take part on
these NGs work for Google.....
Click to expand...

Finally! The penny has dropped! You have realised what is going
on. We are all Google employees. And we are watching you Luigi.
 

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
Please Help? 0
Help with code 0
How can I get my menu inside of a menu to function properly? 1
Need help , Having problem with Drag n Drop... 1
Trouble with css 4
Positioning CSS components 1
Help with my responsive home page 2

Members online

Total: 19 (members: 1, guests: 18)
Robots: 370

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,019
Latest member
RoxannaSta

Latest Threads

Top