Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hello,

    First of all I want to congrats all the people here for so many resources available for research. I can say that I'm learning a LOT just reading this precious pages.

    Well, I'm just finishing the "main" work of my site and I have a problem that I can't figure out how to solve:

    The site is displaying differently between FF and IE7. Probably is a "float" issue.

    In FF the content is in the right position, with 3 separate menus displaying one up another on the left side of the website, and the main content within the future "tab links" in the proper position also.

    But in IE, the "tabs" and "main" contents goes down, on the right side but, at the same time, below the other 3 menus on the left side.

    I attached the CSS and HTML, together with 2 pictures for better visualization.

    Any help?

    Thanks in advance!
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    I didn't get a chance to research your problem too much, but look at this part ...

    Your page is given a width of 720.

    Make sure the left and right parts don't exceed 720, and that includes padding.

    For experimenting, try making the body/content 800 wide and see what happens.

    For <div>'s that "fall down", that's usually where the problem is at.

    EDIT:

    Oh .... your "main content" is a plain <div> ...
    Give it an ID with a width and float:left;

    <div id="main_content">
    blah blah blah
    </div>

    #main_content{
    width:400px;
    float:left;
    }

    That's why it's doing a carriage return and going to the bottom


  4. #3
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hello

    Thanks for the reply!

    I tried the "put an id with that specifications in your div" advice with no success, but if I raise my overall page width from 720px to 723px, the problem disappear.

    How can I get rid of this without a hack or something similar?

    Thanks again!

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    Best to provide an actual link to your page so we can see it in action.
    This is important because sites always need to be viewed with several
    different browsers.


  6. #5
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hello again!
    Thanks for all the help so far!

    Well, I just started to add some content and as I said before, the overall page has a width of 720px, but so far I have to add 3 "extra pixels" in the width to avoid the carriage return issue.

    Here is the webpage: (don't bother yourself with the overall layout... is still in experiment.)

    http://www-dev-en.njl.ee

    Now another problem happened: In IE, my left nav menu has a small blank space between each button link, wich don't happen in FF. o.O

    Thanks in advance!

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    I think this is an extra <div> (see blue below) ... take it out.

    Also, remove a bunch of the white space in your HTML code ... it will make it
    easier to troubleshoot.


    <a href="/online" onclick="javascript:window.open('https://book.njl.info/book/njl_index?Language=eng&amp;Currency=EUR')"><img src="http://www-dev-images.njl.ee/booking_eng.gif" width="200px" height="21" border="0" /></a>
    </li>
    <li id="main_menu">
    <h3>Main Menu</h3>
    <div>


  8. #7
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hey! Thanks for the tip, but still is not working

    About the white spaces, I think is something with the Code view from FF or IE, because I'm using Dreamweaver CS3 and I don't have a single white space here :/

    I will paste here the code:
    HTML Code:
    <body>
    <div id="container">
        <div id="header"><img src="/images/header.gif" alt="Nordic JetLine" width="720" height="40" usemap="#Map" style="border: 1px solid black">
        </div>
        <ul id="menus">
            <li>
            [% currency = "EUR" %] 
            [% IF lang == "est" %] 
            [% currency = "EEK" %] 
            [% END %]
            <h3><a href="/online" onclick="javascript:window.open('https://book.njl.info/book/njl_index?Language=[%lang%]&amp;Currency=[%currency%]')">ONLINE BOOKING</a>
            </h3>
            </li>
            <li id="main_menu">
                <h3>Main Menu</h3>
                <div>[% menu %]</div>
            </li>
            <li id="weather">
                <h3>Weather Today</h3>
                <div>[% INCLUDE "weather_rss.tpl" %]</div>
            </li>
            <li id="webcam">
                <h3>Web Cameras</h3>
                <div>[% INCLUDE "webcams.tpl" %]</div>
            </li>
        </ul>
        <ul id="main_page">
            <li id="tabs_header" class="border_tabs">
                <div class="breadcrumb" 
    <div>[% tabs %]</div>
                </div>
            </li>
            <li id="main_content">
                <div class="overflow">
                    [% IF if_exist > 0 AND tpl != "body.tpl" AND tpl != "admin.tpl" %] 
                    [% INCLUDE $tpl%] 
                    [% ELSIF !$tpl %] 
                    [% INCLUDE "main_home.tpl" %] 
                    [% ELSE %] 
                    [% INCLUDE "error.tpl" %] 
                    [% END %]
                </div>
            </li>
        </ul>
        <div class="clear"></div>
        <div id="footer">[% INCLUDE "footer.tpl" %]</div>
        <div class="clear"></div>
    </div>
    </body>
    And the CSS
    HTML Code:
    html, body {
        font: 100.01% Verdana, Arial, Helvetica, sans-serif;
        background: white;
        margin: 0;
        padding: 0;
        color: #000000;
    }
    #container {
        width: 720px;
        margin: 0 auto;
        margin-top: 10px;
        text-align: justify;
        font-size: 0.79em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-variant: normal;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
        border: 1px dotted black;
    }
    #header {
        height: 40px;
    }
    #menus {
        margin: 0;
        list-style: none;
        padding: 0;
    }
    #menus li {
        background: #A1218E url(../images/top_corners.gif) no-repeat top left;
        float: left;
        margin: 10px 0 0 0;
        width: 200px;
    }
    #menus h3 {
        margin: 0;
        padding: 3px 0 1px;
        text-align: center;
        text-transform: uppercase;
        color: white;
        font-size: 1em;
    }
    #menus div {
        border: 3px double #A1218E;
        padding: 0;
        margin: 0;
        background: white;
    }
    #main_menu img {
        border: 0;
    }
    #weather, #webcam, #main_menu {
        clear: left;
    }
    #main_page {
        margin: 15px 0 0 210px;
        list-style: none;
        padding: 0;
    }
    #main_content {
        zoom: 1;
        padding: 5px 5px 5px 5px;
        margin: 0;
        background: white;
        width: 490px;
    }
    .overflow {
        overflow: auto;
        height: 500px;
    }
    #tabs_header {
        background: #A1218E url(../images/tab_corners.gif) no-repeat top left;
        height: 30px;
        margin: 0;
        color: white;
        width: 490px;
    }
    .breadcrumb {
        margin-left: 5px;
        color: #CCC;
        font-size: 100%;
    }
    .border_tabs {
        border-bottom: 1px solid #CCC;
    }
    #footer {
        padding: 0 10px 0 10px;
        margin: 10px 0 0 0;
        border: 1px solid black;
    }
    #footer p {
        margin: 0;
        padding: 10px 0;
    }
    .clear {
        clear: both;
    }
    I'm really sorry for the pasting, but seems to me it's easy for people to help, as I don't have too much code to display anyway. Thanks for helping!!!

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    I see the problem now ...

    In your list of menu links, you need to add a <br> after each line.
    IE is putting them inline and causing the space between them.
    IE considers that an "overflow" condition.

    If you don't want to use <br>'s , you could try making each
    line <ul> link </ul> ... because you are using a "list" <li> ?

    See my working example using your HTML and CSS:

    http://catpin.com/njl/


  10. #9
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hi!

    I implemented this solution for the menu links and it's working perfectly! Thanks!

    But I still have the problem with the "main content" carriage return in IE

    As you still have the sample page, please try to change the general width for the #main_content from 490px to 500px and you will know what I'm talking about :/

    Maybe I'm calculating wrong, but if I have a 720px wide page, with menus on the left side 200px wide, and assuming that I want a 10px space between this menus and the main content in the rigth side, so I can safely put a margin_left of 210px and the width of 500px from the main content right?

    500px width + 210px margin + 10px spacing = 720px. But it's not working for me

    Thanks for all the help so far

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    The cut-off is actually 498 ... which is 2 pixel shy of 500.

    I thought maybe the dotted border 1px on left and 1px on right was
    the 2 pixel difference, but that wasn't. I can't explain where it's hiding
    the extra 2 pixels, but that's just the way it is.

    In my example now, I commented-out both references to, width: 490px;

    Now, it just fills the right side content however it wants.
    You may just want to do that.

    Welcome to CSS ... sometimes it's just freakin magic.



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com