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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Float messing up in certain browsers.

    This is my first post, and I'm excited to have just joined this community!

    I'm jumping ship from IT/SysAdmin to work for myself and do do web design/development. I need to unleash my creative juices!

    I'm looking forward to learning a lot and helping as much as I can as my knowledge grows!

    -- Alright, here's my issue. I'm very new at doing this and my first project is an in-kind website for a charity ball in one month's time. I've begun laying it out using what I know of CSS and HTML (having only copied some parts of the nav menu's CSS). In Chrome, the website looks like I want it to! In IE, Safari, and Firefox, my floated elements are not in the right spots! Also - I made a 3 column layout and that also moves from where I want it to be, except in Chrome.

    Should I use the position attributes instead of floating these elements?

    Hopefully, I'm not asking too much for anyone to give me some sound advice of how to remedy this problem and I can apply it to all future websites as well! I've tried to layout the website cleanly and organized. I've completed Lynda.com's HTML and CSS tutorials. Nothing like real-world experience, though!

    I don't have anything to offer, but I can +1 your replies, or however this forum works! haha - All help is greatly appreciated!

    I've spent 10 hours so far on building the site, but that includes the graphics. I apologize if my answer is found in another article. I'm going to bed now - and as I'm still new - I imagine a response would be quicker than me browsing article after article and trying multiple things to fix my problem.

    The website is at: Niagara Masquerade Charity Ball

    Thank you so much everyone! - Aaron Zitello

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    144
    Thanks
    11
    Thanked 7 Times in 7 Posts
    Hey az, welcome to a new world.

    What I'm going to tell you here is about personal coding-style preferences, as each coder prefers to code their documents in their own personal way. They all work well, and some have advantages over others, and in time you will likely develop your own personal approach as well.

    From my perspective, your HTML code in not balanced and is thus causing cross-browser presentation differences (though your work has the makings of a nice page!).

    Problems:
    Your title height is 76px, yet contains nav at 80px high and nic_logo which is 115px high. I also only see some of your block elements (DIVs) floated. Also, be sure to clear floats when you start new horizontal sections. Also, your title images for each of your columns has a different height, and you may want the content to look better-balanced. I would advise that you segment your three columns first and float them within their container, then apply each one's title as a block element which will automatically vertically-align at the top and its content will appear below it.

    Keep it simple: Commence by breaking your content into horizontal layers that span the entire width of your document, and ensure that their height fully contains the height of their contents. Then float the contents with their styles. For example (in my demo I simplified things, and you will want to resize your item images):
    Code:
    <head>
        <style type="text/css">
        body>div { clear: both; }
        #title { width: 100%; height: auto; }
        #title>div { float: left; }
        #logo { width: 232px; height: 76px; }
        #counter { width: 300px; height: 58px; }
        #nic_logo { width: 257px; height: 115px; }
        #subTitle { width: 100%; height: auto; }
        #facebook_go { float: left; }
        #nav { float: left; width: 494px; height: 80px; }
        #content { width: 100%; height: auto; }
        #content>div { float: left; width: 33%; height: auto; }
        .itemTitle { background-size: 100% 100%; background-repeat: no-repeat; }
             #item1>.itemTitle  { background-image: url('images/new_i_want_to_come.png'); }
             #item2>.itemTitle  { background-image: url('images/new_at_the_party.png'); }
             #item3>.itemTitle  { background-image: url('images/new_what_to_wear.png'); }
        .itemContent{ background-image: url('images/tri_grid_bg.png'); background-repeat: repeat; }
        .clear { clear: both; height: 0; }
       </style>
    </head>
    <body>
    <div id="title">
        <div id="logo"></div>
        <div id="counter"></div>
        <div id="nic_logo"></div>
        <div class="clear"></div>
    </div>
    <div id="subTitle">
        <div id="facebook_go"></div>
        <div id="nav"></div>
        <div class="clear"></div>
    </div>
    <div id="content">
        <div id="item1">
            <div class="itemTitle"></div>
            <div class="itemContent"></div>
        </div>
        <div id="item2">
            <div class="itemTitle"></div>
            <div class="itemContent"></div>
        </div>
        <div id="item3">
            <div class="itemTitle"></div>
            <div class="itemContent"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="footer">...more stuff...</div>
    </body>
    Note that in the code above your items are better-organized within their containers. All browsers should display then the same way.

    You will need to refine it, especially for your subTitle section. Use JavaScript to size its elements and apply appropriate padding and margins so that they line up horizontally with your title elements above.

    (Added later: floating block elements sometimes messes with IE's [F12] programmer tools. Though I have seen it alluded to in jQuery books, I have not investigated is sufficiently, and have discovered that the issue can be resolved by following floated block elements with a new block element whose CSS properties width=0 and height=0 and clear=both. I have added colored code above so that you may easily identify it. )

    Beginnings are always challenging, so be patient. The rewards are well worth the challenges!
    Last edited by sbhmf; 04-06-2014 at 04:47 PM. Reason: Added note on clear=both, and added it to HTML as well.


  •  

    Posting Permissions

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