Please help me with these CSS problems

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Alan Silver - 28 Mar 2006 18:09 GMT

Hello,

Furthering my quest to get to grips with CSS, I have been trying a page
based on project 4 in "more Eric Meyer on CSS" where he uses three
versions of an image to give a translucent effect behind a heading. I
have also used some of the ideas in project 2 of the same book where he
styles a photo collection. This is mostly working well, but I have a
couple of problems. Being a novice at this, I would appreciate some
expert advice as to what I did wrong.

The page can be found at http://www.kidsinaction.org.uk/baby/baby.html
and is (when some real text is added) designed to give relatives and
friends around the world info about our new baby (born last Thursday, so
lack of sleep contributed to my problems!!). The CSS is currently in the
<head> of the HTML. Both HTML and CSS validate

*) If you look at the page in IE6, the <h3> elements in the main text
have a bottom border that goes 50% of the way from the left margin to
the centre. This does not appear in Firefox (I'm using 1.5). Any idea
why?

If you look at the photos at the bottom of the page, there are a couple
of problems...

*) I wanted the photos to be completely inside the inner box (the <div>
with id "content"), but in both browsers they stick out below the
element's bottom border.

*) In IE, the outer <div> (id of "main") expands to include the photos,
but in FF it doesn't. I would like to make these consistent, but am not
sure why the two show it differently.

*) I would like the photos centred in the containing element. I have
tried a few things, but not succeeded at any of them!!

Thanks as usual for any advice you can give. Please be gentle, I'm still
learning!!

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

Alan Silver - 28 Mar 2006 18:44 GMT

>*) If you look at the page in IE6, the <h3> elements in the main text
>have a bottom border that goes 50% of the way from the left margin to
>the centre. This does not appear in Firefox (I'm using 1.5). Any idea
>why?

I solved this one shortly after posting. I had the following rules for
the bottom border on the <h3>...

border: 0px solid black;
border-bottom: 1px;

I changed these to...

border: 1px solid black;
border-width: 0 0 1px 0;

and it worked in FF too. Anyone care to explain this?

Advice on the other problems would still be welcome. Thanks.

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

zzpat - 28 Mar 2006 20:36 GMT

Did you try border-bottom: 1px solid #000;

>> *) If you look at the page in IE6, the <h3> elements in the main text
>> have a bottom border that goes 50% of the way from the left margin to
[quoted text clipped - 15 lines]
>
> Advice on the other problems would still be welcome. Thanks.

Reply to this Message

Alan Silver - 29 Mar 2006 15:33 GMT

>Did you try border-bottom: 1px solid #000;

Duh, no I didn't!! Thanks for that!!

Any idea about the other problems? Although my solution wasn't as neat
as yours, I did solve the border problem, I still haven't solved the
problems with the way the photos are shown.

Thanks again.

>>> *) If you look at the page in IE6, the <h3> elements in the main
>>>text have a bottom border that goes 50% of the way from the left
[quoted text clipped - 9 lines]
>> and it worked in FF too. Anyone care to explain this?
>> Advice on the other problems would still be welcome. Thanks.

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

zzpat - 29 Mar 2006 18:45 GMT

Try adding height: 800px to #main.

>> Did you try border-bottom: 1px solid #000;
>
[quoted text clipped - 19 lines]
>>> and it worked in FF too. Anyone care to explain this?
>>> Advice on the other problems would still be welcome. Thanks.

Reply to this Message

Alan Silver - 29 Mar 2006 22:33 GMT

>Try adding height: 800px to #main.

Didn't make any difference. What was your idea? The #main div will be
much longer than 800px, unless someone is viewing it with a very small
font size and a very wide browser window.

Thanks anyway, any other ideas?

>>> Did you try border-bottom: 1px solid #000;
>> Duh, no I didn't!! Thanks for that!!
[quoted text clipped - 16 lines]
>>>> and it worked in FF too. Anyone care to explain this?
>>>> Advice on the other problems would still be welcome. Thanks.

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

Wÿrm - 29 Mar 2006 23:04 GMT

"Alan Silver" <alan-silver@nospam.thanx.invalid> kirjoitti
viestissä:B6QvAIBA3WKEFw5N@nospamthankyou.spam...

<snip>

> http://www.kidsinaction.org.uk/baby/baby.html

<snip>

> *) I wanted the photos to be completely inside the inner box (the <div>
> with id "content")

Add

<div class="clear"></div>

straight after last PIC div and add

.clear
{
clear: left;
}

to your styles.

Pictures are not inside box because you have removed them from normal flow
with float:left;

<snip>

Reply to this Message

Alan Silver - 30 Mar 2006 16:36 GMT

<snip>

>Pictures are not inside box because you have removed them from normal flow
>with float:left;

Thanks for the clue. That explains why when I added some more stuff
below the pictures, they came back inside the box. I added a "clear" to
the first item after the pictures, so that probably did the same thing
as you suggested.

Thanks again. I've discovered the Floatutorial, so I'm going to try
going through it to see if I can get my head round this float business!!

Thanks again

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2006

Please help me with these CSS problems