30 replies [Last post]
miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Hi,

Am converting a site I am doing into CSS. The last layer is the footer which consists of a layer called footer and two nested layers called footercopy and footernav.

The footer layer has a background image which is displaying correctly in IE but appears in a different place in FF. I think therefore there is some standard I am not adhereing to as FF is, I'm told, better then IE with CSS.

Wondered if someone could have a look and let me know.

Page: http://www.occasionaljazz.co.uk/Test%202/test.html
CSS: http://www.occasionaljazz.co.uk/Test%202/stylesheet.css

Thanks,

Alex

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

#footer {
clear:both;
}

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

fantastic thanks! Can you tell me what that attribute means?

Also - is there a good way to vertically centralise the text in those two layers? (footercopy and footernav)?

Thanks again,

Alex

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

'clear' clears the floats. Floated elements are taken out of the flow of the document, and any elements below them will start from the same y position as them... unless you clear them somehow. The easiest way to do this is by using 'clear'. I hope that makes sense. The guys here have a lot of pointers on things like this. Here's my little attempt to explain... http://bonrouge.com/br.php?page=floats

To get the things in your footer to be vertically centred, you can do this...

#footer {
line-height:80px;
}
#footernav ul, #footernav li {
margin:0;
padding:0;
}
#footerlist li {
list-style:none;
float:left;
margin:0 3px;
}

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

again, brilliant - thanks!

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

slight problem - setting the line height to 80px for the footer layer works but also adds a big white space below it, only in IE - not a major problem until I put a border round the layer.

Any ideas?

Also - the repeated background image in the footer works fine but does not show in FF??

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

Your page seems to have gone...

Anonymous
Anonymous's picture
Guru

Layer Background image

BonRouge wrote:
Your page seems to have gone...
Yeah, I even tried to fix the links but now they don't go anywhere.

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

sorry - should be:

http://www.occasionaljazz.co.uk/Test%202/home.html
and http://www.occasionaljazz.co.uk/Test%202/stylesheet.css

Thanks

*edit - links fixed by Triumph. Smile

Thanks - guess it's the spaces that are messing them up?

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

Try this...

#footer {
overflow:hidden;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Layer Background image

in re: Spaces within file names.

It would be a Good Thing not to have spaces in file names. The network is about *nix, and *nix doesn't allow them.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

BonRouge wrote:
Try this...
#footer {
overflow:hidden;
}

Once again - brilliant - thanks.

Any ideas on the repeating image in FF?

Also - as for the links, that is only temporary hosting space I'm using to have a look at - no real links will have spaces.

EDIT - why do my tags never work in here?

//edit// because you have checked "disable BBCode in this post" --gary/kk5st

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

#container:after {
display:block;
content:"";
clear:both;
}

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

thanks again - something to do with the layer not actually having any height?

Have now added an image to the start of the title line in those two layers - looks fine in IE but has a big gap above it in FF - any ideas?

Sorry to have so many questions - but when something looks ok in one browser but not another its tough to figure out why.

Any tips?

Site: http://www.occasionaljazz.co.uk/Test%202/home.html

Thanks again.

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

anyone??

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

Your stylesheet seems to be missing.

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

Add this to the top of your stylesheet and let me know if it helps r just screws everything up...

* {
margin:0;
padding:0;
}

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

it just crams all the text together and removes all the other padding I have put it - the picture is still lower than expected.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layer Background image

You seem to be having continual problems with your links! it makes it kind of difficult to help! sort it out, please

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

If you put that at the top of your stylesheet, it won't remove any padding that you've added - only the default padding (and margins).

// edit ... + what Hugo just said. Can you fix the links and just leave them fixed? You must be doing something to mess them up. Removing the spaces would be a good place to start.

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

The links change because I am slowly making things live. The final links are:

http://www.nightingalebeds.co.uk/Test2/home.html all other pages are linked from here except the links page.

nightingalebeds.co.uk/Test2/stylesheet.css is the style sheet.

New random symptom in IE - when you visit the home page everything is fine - visit a different page and go back to home and the news layer randomly expands and displays incorrectly - with a pixel or percentage width - press F5 and the layer resets to the correct size!

Argh! Starting to think tables would be so much more simple! (as blasphemous as that may be!)

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

I haven't checked the new problem yet, but for the space thing, try this:

#content>p, #news>p {
margin-top:0;
}

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

still there I'm afraid.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

yeah, in FF there is still a white space above the image making the title bigger and the picture not level with the text - even on yours.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

OK. One more line:

#content>p>img, #news>p>img {
float:left;
}

(Check my link again).

I don't know what's going on with the right column though. It's pretty messed up, isn't it? God damn you IE! May you burn in hell!

// edit... ^^That's pretty messed up too. I can't talk about sending things to the place below us, or even mention the name of the big fiery domain ruled over by the red guy with the forked tail.

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

fantastic! fixed at last!!! Thanks so much for your help!!!

Not sure about the right hand bar - just makes no sense at all. Seems not to be reading all the CSS file or something daft.

It's such a shame that most people still use IE! It's so difficult laying things out so that they look acceptable in both IE and FF as I've found it means you have to make compromises on both sides so the site doesn't look as good as it could in either!

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

am completely stumped by the right hand layer now - have tried all sorts, refreshing the page automatically etc., but nothing seems to work - have no idea why all of a sudden this is happening.

//EDIT now driving me completely insane!!!! This is the most illogical thing ever!!! I have tried changing all sorts and it makes NO difference!!! It doesn't make any sense!!!!!!!!

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Layer Background image

I had a funny feeling that using semantic mark-up, rather than your tables, would fix the problem, and I think I was right. I replaced your tables with headings and paragraphs and it seems to have fixed the problem...

http://bonrouge.com/test/nightingale.html

miniquinny
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2006-05-29
Posts: 16
Points: 0

Layer Background image

you sir, are a GENIUS! thank you so much! Did you have to make any changes to the CSS file? As in renaming the text classes so that they relate to the h3 tag?

//edit - had a look at your CSS file and sorted it - thanks again!!!!!