Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Layout help, works in IE6, problems in others

    the following links to the html and css http://www.ecisive.com/clients/FCCDHH/dev/index2.htm
    http://www.ecisive.com/clients/FCCDH.../sitestyle.css
    css driven layout. It looks perfect in IE6, in other browser it has various problems. Netscape, Opera, Firefox don't like the right hand content, in these browsers i lose background colors, padding, and white space shows between divs. Also in opera i lose the bottom nav bar. In netscape and FF and Opera the text in the nav bars seem to shift down. Any help greatly appreciated
    Last edited by rsraloha; 06-02-2005 at 03:26 PM.

  • #2
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, as a general rule of web design, you want to design in the *most* standards-compliant browser first, then tweak the design for less-compliant browsers.

    This pretty much means you should design for browsers in this order:
    1) Firefox (or Mozilla, or Camino, or K-Meleon)
    2) Safari
    3) Opera
    4) Internet Explorer (Windows)
    5) Internet Explorer (Mac)

    This way, you have a much better chance of having it look right in all browsers. If you start with one of the worst (in terms of compliance) browsers, then it gets harder to tweak it for better (in terms of compliance) browsers.

    That being said, I think your problem is one of a bad CSS box model on IE. My best advice for making this work is to tweak your CSS so that it looks right in Firefox, then I would suggest checking out the Box Model Hack to get IE to play nice with everyone else.

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    make sure you set the margin: 0px; and padding: 0px; on everything that you don't set a margin and padding for, most browsers have different defaults


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •