wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Float problem Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Float problem " Watch "Float problem " New topic
Author

Float problem

Zein Nunna
Ranch Hand

Joined: Mar 31, 2005
Posts: 245
Hey guys

I have an issue with the CSS float, inside my PHP file i have a HTML structure, like below, [full HTML code]



I've inserted the CSS inside the HTML, so you can see it - This code works as I want it in FireFox, it doesnt in IE7.. [in IE7 the boxes dont lineup properly]

What am I doing wrong?

i know there's been a lot of issues, with CSS and IE7, is there like a list of things to do to avoid/tack particular issues such as floats, margins etc..?

Thanks in advance for your thoughts,


Bauke Scholtz
Ranch Hand

Joined: Oct 08, 2006
Posts: 2458
Not sure what the layout requirements are, but don't you just want to have a three-column design? Why are the first two div's grouped together? At first glance I would just remove the group and float all the three div's to left.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
This is a bit cleaner:



Eric
Zein Nunna
Ranch Hand

Joined: Mar 31, 2005
Posts: 245
Thanks for the replies guys.

The advice you've given me has solved most of my problems.

A little issue still stands, the code posted above fits into a bigger snippet of code, where I have to reset the margin by -36%, see HTML below, CSS is as per Eric's post



This works perfectly with FireFox. In IE7 the margin is incorrect, in the sense that it seems more like -40% - how could I rectfy this problem?

If I use the exact code above In FF and IE7 the page I get is slightly different. (in FireFox I see HA2, In in IE7 I see AHA2 - in the top left box )? Is this just me or something more to do with the browsers?

Thanks

Sorrry for the convaluted message.

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Issue you are probably having is one browser has a scrollbar visible and the other does not.

% can be really strange with browsers, especially their behavior with odd widths.

Eric

Zein Nunna
Ranch Hand

Joined: Mar 31, 2005
Posts: 245
Is there anyway I can state, if its IE7, do a different margin to other browsers etc.?
Bauke Scholtz
Ranch Hand

Joined: Oct 08, 2006
Posts: 2458
Use the HTML strict doctype. Then IE will behave according the W3 standard box model.
Also see: http://hsivonen.iki.fi/doctype/
Zein Nunna
Ranch Hand

Joined: Mar 31, 2005
Posts: 245
Tried this doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The document looked totally wrong..!! In FF3 its still perfect..

This is frustrating!!! :
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Float problem
 
Similar Threads
CSS display issue.
Verticaly Align 3 Column DIV in IE6
Stop jQuery animation in progress.
changing link background image dynamically
Converting table to divs