getting css to display properly in IE

Discussion in 'Web Design and Development' started by livewire71, Dec 13, 2009.

  1. livewire71 macrumors newbie

    Joined:
    Dec 13, 2009
    #1
    I've completed my first site using Dreamweaver, www.caninescontent.net, and validated it. Everything looks fine in Safari and Firefox, but IE does not appear to be adhering to the the Box settings I used (fixed width, float left). I've read that IE does not adhere to standards as well as other browsers, but haven't found a fix for this specific problem. Specifically, I need the footer on all pages to float left (so it truly appears as a footer) and I need the main copy on the homepage to float left. Any help would be appreciated (and my understanding of CSS is limited)!
     
  2. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #2
    I think you should take another look. On my 24" screen in both Firefox and Safari (Mac & Wndows) it doesn't look too good.

    You haven't set a width for body. Try

    Code:
    body {
        .........
        width: 900px;
    }
    You also have a lot of empty <p> tags causing lots of blank space. I suggest you get rid of these.

    In fact only IE6 & 7 seem to be displaying it correctly, or maybe I misunderstand what you intend it to look like.
     
  3. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #3
    Yeaa....whats with:
    <p> </p>

    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    That happens sometimes in some WYSIWYG editors where a user presses the enter key repeatedly to insert a series of blank lines. Some IDE's allow P to be substituted for <br> and know to put a space as an HTML entity so it passes validation (no empty P tags).

    Good catch - this kind of thing causes the types of problems this topic is about when used for positioning purposes - i.e. font size affects the size of the space, the P tag might be overridden by other CSS, the client's browser might resize the font, etc. Such sequences can be found sometimes within actual content itself but CSS is all about separating content from style. Setting line-height is useful for content spacing, as one quick example.

    For layout it's common to wrap div's around things and then use the convenient CSS properties such width, height, margin and padding for alignment and spacing of content blocks or content. Line-height can be used in this manner as well. That's why all these properties exist and are well supported cross platform.

    -jim
     
  5. star-fish macrumors regular

    Joined:
    Aug 24, 2009
  6. JohnDoe8450 macrumors member

    Joined:
    Feb 3, 2009
    #6
    And this is why I prefer hand-coding everything :)

    PS: I have no clue about your problem, sorry :p
     

Share This Page