By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,745 Members | 1,897 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,745 IT Pros & Developers. It's quick & easy.

CSS float tag

P: 35
hi,

I am fairly new to css and am having problems with the 'float' tag in css,
go to http://www.christinebec.com/About CB/selected_editorials.htm and view it in firefox browser, how do I fix the images in css so that they don't overlap each other, they view fine in internet explorer.

Below is the css code I used:
div#float {float: left; width: 120px; padding: 10px;}
body {font: small century gothic; padding-left:65px; width; auto}

This is the html:
<div class="float">
<a href="../images/elle0oct%202006%20big.png"><img src="../images/elle oct 2006 small.png" alt="Elle Oct 2006" border="0"></a></div>

I changed the footer margin to auto but it still had no effect so I left it as 20.5em 0 0.5em.

Also I put the homepage through the w3c validator and have no idea why it displays the way it does in firefox, it is fine in internet explorer

thanks
Sep 15 '06 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Believe it or not, the problem is IE. You apparently designed your site using IE which is why it looks right there. But you used the xml declaration on the first line of your code. IE does not work with xhtml so putting the xml declaration there throws it into 'quirks mode', essentially making it act like IE4.

Only modern browsers, such as Firefox, know what to do with that first line so they act properly. Remove that line and then see where we stand.

In addition, you have declared you are using xhtml but are using deprecated font tags and are missing xhtml type closing tags on the image elements. That is, <img> tags must end with />
Sep 15 '06 #2

P: 35
I have checked the xhtml for the 'selected editorials' page but still don't understand why each picture are overlapping, I want a gap in between each picture
Sep 18 '06 #3

drhowarddrfine
Expert 5K+
P: 7,435
in div.float put margin:20px; or more.
Sep 18 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.