CSS 'float' tag

aconite · 12-Sep-2006, 06:44 AM #1

hi,

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;}

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

thanks

covert215 · 12-Sep-2006, 07:11 AM #2

firefox interprets css differently...

thecoalman · 09:15 AM

Change:

Code:

body {font: small century gothic; padding: 0; margin-left: 65px; width: 100%;}

To:

Code:

body {font: small century gothic; padding-left: 65px;  width: auto;}

100% means 100% of the container, since body is your first container it expands to 100% of the viewport(monitor) but you have given it a margin which is added to the 100% in firefox as it should be. You can make a empty body with nothing in it and that will exapnd to the right in FF. This will break right:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { margin-left: 65px; width: 100%;}
</style>
</head>
<body>
t
</body>
</html>

Also you are only supposed to use one ID per page. Change the float id to a class.

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)