There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
CSS 'float' tag


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
aconite's Avatar
Senior Member with 171 posts.
 
Join Date: Feb 2006
Experience: Intermediate
12-Sep-2006, 06:44 AM #1
CSS 'float' tag
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's Avatar
Account Disabled with 2,651 posts.
 
Join Date: Apr 2006
Experience: Web Designer
12-Sep-2006, 07:11 AM #2
firefox interprets css differently...
thecoalman's Avatar
Computer Specs
Distinguished Member with 2,503 posts.
 
Join Date: Mar 2006
Location: Pennsylvania
Experience: What's the shiny red button for? <click>
12-Sep-2006, 08:32 AM #3
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.

Last edited by thecoalman : 12-Sep-2006 09:15 AM.
Reply


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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 02:21 AM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.