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
Layer Background image
#footer { clear:both; }
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
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; }
Layer Background image
again, brilliant - thanks!
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??
Layer Background image
Your page seems to have gone...
Layer Background image
Your page seems to have gone...
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.
Thanks - guess it's the spaces that are messing them up?
Layer Background image
Try this...
#footer { overflow:hidden; }
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
Layer Background image
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
Layer Background image
#container:after { display:block; content:""; clear:both; }
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.
Layer Background image
anyone??
Layer Background image
Your stylesheet seems to be missing.
Layer Background image
http://www.occasionaljazz.co.uk/Test%202/stylesheet.css
should be here
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; }
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.
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
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.
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!)
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; }
Layer Background image
still there I'm afraid.
Layer Background image
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.
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.
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!
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!!!!!!!!
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...
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!!!!!