Sunshine81 Posted January 2, 2007 Share Posted January 2, 2007 Here's the site i'm workin gon:http://www.flatballphoto.co.uk/bjportfolio/index.phpAs you can see, in IE the containing div wraps all the way around the content and displays neatly, with the image for the bottom in place and the background tiled down to it. However this does not happen in FF, the bottom image remains stuck under the menu.I don't want to give the div a fixed height, rather letting it depend on the amount of content. The question is, how do i get FF to play nicely without doing that? It runs through the W3 validator as valid css, bar a couple of irrelevant warnings.css:http://www.flatballphoto.co.uk/bjportfolio/style.css Link to comment Share on other sites More sharing options...
ste Posted January 2, 2007 Share Posted January 2, 2007 i think your problem is that you are floating elements, when you float an element, it takes it out of the flow of the document in standards complacient browsers such as FF but not IE. so basically FF considers the container element (that has the background) emptytry clearing the float after the content e.g. <div style="clear:both"></div>hope this helps, ste Link to comment Share on other sites More sharing options...
Sunshine81 Posted January 2, 2007 Author Share Posted January 2, 2007 Awesome, worked a treat. Thanks ste! Solved a whole batch of problems with that little gem of knowledge.The only problem i have left is that in IE the background is now shifted slightly to the left, out of alignment with the header and footer images. I can't work out why this is when it all works in FF..? Link to comment Share on other sites More sharing options...
S@m Posted January 2, 2007 Share Posted January 2, 2007 That is because IE sucks eggs. Check out "Conditional Comment"You will want to have 2 style sheets.then this:http://w3schools.invisionzone.com/index.ph...itional+Comment Link to comment Share on other sites More sharing options...
Sunshine81 Posted January 2, 2007 Author Share Posted January 2, 2007 That is because IE sucks eggs. Check out "Conditional Comment"You will want to have 2 style sheets.then this:http://w3schools.invisionzone.com/index.ph...itional+Comment Gah, that sucks. I was hoping to get away without this. Any way around the problem? Link to comment Share on other sites More sharing options...
ste Posted January 3, 2007 Share Posted January 3, 2007 conditional comments are handy but i try to avoid having 2+ style sheets if i can. sometimes a few tweaks to the css can get you a layout that displays almost the same across browsers with just 1 css file and thats always what i aim for anyway, i will try and have a look at your problem when i have a free momentthanks, ste Link to comment Share on other sites More sharing options...
S@m Posted January 3, 2007 Share Posted January 3, 2007 It's a pain, and so is IE.But, without hacking up your style sheet that's the only way to go. This is also a good idea because you can maintain a valid style sheet/page. IE 7 may/may not read those hacks, so once you hack it up to work in IE6, it may look funky in IE7.Isn't it grand!? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now