Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Playing with CSS

Reply
Thread Tools

Playing with CSS

 
 
UKuser
Guest
Posts: n/a
 
      09-28-2006
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/styles...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>

 
Reply With Quote
 
 
 
 
mbstevens
Guest
Posts: n/a
 
      09-28-2006
On Thu, 28 Sep 2006 03:37:59 -0700, UKuser wrote:

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


> body {
> text-align:center;
> }
> }
> #top{
> width:100%;
> height:50px;
> background-color:cyan;
> }
> }



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;
> }

....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.
--
mbstevens
http://www.mbstevens.com/



 
Reply With Quote
 
 
 
 
mbstevens
Guest
Posts: n/a
 
      09-28-2006
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;
}

 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      09-28-2006
On Thu, 28 Sep 2006 10:58:49 +0000, mbstevens wrote:

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


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

body {text-align:center}

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




 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      09-28-2006
mbstevens wrote:

> On Thu, 28 Sep 2006 03:37:59 -0700, UKuser wrote:
>
>> Hi Folks,
>>
>> Below is some test text which I've been working on, to try and get my head
>> around CSS more..................

>
>> body {
>> text-align:center;
>> }
>> }
>> #top{
>> width:100%;
>> height:50px;
>> background-color:cyan;
>> }
>> }

>
> Your parens are so imbalanced that I'm surprised anything works at all.
> Remove extras:


I don't see those extra parenteses in the OP's post.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      09-28-2006
mbstevens wrote:

> On Thu, 28 Sep 2006 10:58:49 +0000, mbstevens wrote:
>
>> 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...

>
> Did it again!
> Let's try rewriting it by hand...
>
> body {text-align:center}
>
> #top {
> width:100%;
> height:50px;
> background-color:cyan}
>


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)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
 
Reply With Quote
 
Dylan Parry
Guest
Posts: n/a
 
      09-28-2006
Els wrote:

> I don't see those extra parenteses in the OP's post.


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.
 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      09-28-2006
On Thu, 28 Sep 2006 12:11:20 +0100, Dylan Parry wrote:

> Els wrote:
>
>> I don't see those extra parenteses in the OP's post.

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


It must be. Thanks for letting me know.


 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      09-28-2006
On Thu, 28 Sep 2006 13:09:46 +0200, Els wrote:

> mbstevens wrote:
>
>> On Thu, 28 Sep 2006 10:58:49 +0000, mbstevens wrote:
>>
>>> 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...

>>
>> Did it again!
>> Let's try rewriting it by hand...
>>
>> body {text-align:center}
>>
>> #top {
>> width:100%;
>> height:50px;
>> background-color:cyan}
>>
>>

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


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)


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.





 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      09-28-2006
mbstevens wrote:

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


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

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
 
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
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments