Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: FF Loves Me! IE Hates my guts! :(

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthorsabian1982
    • CommentTimeApr 30th 2009
     permalink
    Righty,

    I've been out of the CSS game for a while and got rather rusty; i seriously need to get back into coding hence this project.

    http://tiny.cc/X195c

    The design looks great (thus far) in FF however in IE the design is all over the shop.

    Looking for feedback on my code as well as how to resolve the current issues.

    Cheers
  2.  permalink
    You probably just need to add display:inline; to the elements that are floated left. Try that and let me know what, if anything, happens.
  3.  permalink
    I tried your suggestion but didn't get very far. I've now altered the margin settings and the page works in IE however this change now means that in FF the main box overlaps the left column.

    Whats the best way around this? Is there a way i get set different margin values for different browser types or is there a little tweak that works in both?

    I've uploaded my progress thus far.

    Cheers
  4.  permalink
    Can't get through to your tiny.cc link, but there shouldn't be any need to alter margins for different browsers. The reason I suggested display:inline; was because IE doubles the margins on floated elements that do not have that property. This is still sounding like a common box model bug to me. I'll try the link again later on and get back to you.
  5.  permalink
    Thanks for point out the url issue - looks like tiny.cc is actually down. Heres a revised link:

    http://xr.com/cqy
  6.  permalink
    Your div#main is overlapping your #sidebar in FF as you have set div#main to position: absolute taking it out of the document flow but haven't positioned it with any co-ordinates. Therefore it's in it's default position in relation to it's containing div (#wrapper) which is top left or 0 0.

    Your declaration for #main should read:

    #main {
    position: absolute;
    left: 206px; /*This is just an example figure which would give you a 20px margin on the left */
    margin-left: 10px;
    margin-top: 10px;
    float: right;
    }

    Hope this helps.
  7.  permalink
    Fantastic - thanks very much :D

1 to 7 of 7

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page