• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Float problem

 
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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,


 
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is a bit cleaner:



Eric
 
Zein Nunna
Ranch Hand
Posts: 245
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 245
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Is there anyway I can state, if its IE7, do a different margin to other browsers etc.?
 
Bauke Scholtz
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 245
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!!! :
 
reply
    Bookmark Topic Watch Topic
  • New Topic