• Gender: Male
  • From: Lisbon
  • Registered: 2009-07-14
  • Posts: 7

Topic: horizontal website

Im making a website only with horizontal scroll on the "content" frame (http://inginfinitive.pt/temp/)
For some reason on firefox, the box inside the content of any link has a margin in top and on the bottom, and in safari its ok, but when the page has no scroll. On the bottom I have a margin.

Can someone help me? I already have all margin: 0px

css for the iframe:

#content {
    width: 100%;
    height: 360px;
    margin: 0px;
    padding: 0px;
    margin-bottom: -1px;
    background-color: #ffffff;
    z-index: 0px;
}

html and css of a link inside the iframe:

<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
    #wrapper {
        width: auto;
        overflow: auto;
    }
    #wrapper table {
        width: 100%;
        border: 0px;
        padding: 0px;
    }
    #wrapper .front {
        width: 400px;
        height: 350px;
        color: #464646;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0px;
        border-right: 4px solid #333333;
        background-color: #ECECEC;
    }
    #wrapper .front h1 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 20px;
        font-style: italic;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
    }
    #wrapper .front p {
        width: 390px;
        margin: 2px;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 12px;
        font-style: italic;
    }
</style>
<body>
    <div id="wrapper">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                <div class="front">
                    <h1>Work</h1>
                    <p>Identity</p>
                    <p>Print</p>
                    <p>Web</p>
                    <p>Advertising</p>
                </div>
                </td>
            </tr>
        </table>
    </div>
</body>
  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: horizontal website

Your link gives me different headers when refreshed but no content and no scrollbars, tested on Mac Firefox and Safari

  • Gender: Male
  • From: Lisbon
  • Registered: 2009-07-14
  • Posts: 7

Re: horizontal website

thank you for your reply.
please consider the links above to view the content.

regards

  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: horizontal website

I think horizontal scroll is a bad idea. MOST people find it annoying and troublesome because they have to scroll left to right to read.  Vertical scroll are expected thus they will keep there mouse pointer on the vertical scrollbar to move up and down to read content. Forcing users to use the horizontal scrollbar to read content just doesn't please about 90% of the people.

I would suggest to not have a overflow x and set it for a fixed width thus the user will then only have to scroll vertically.

You can make the site fluid if so desired.

I also noticed that you used id="wrapper".....three times.  This may cause some issues as well.  Keep in mind the id are to be use once on any given page. If you must define it two or more times within the same page then use class.

Last edited by newseed (2009-09-01 10:47:26)

  • Gender: Male
  • From: Lisbon
  • Registered: 2009-07-14
  • Posts: 7

Re: horizontal website

Thanks a lot for your help newseed, its almost resolved, but in firefox I don't know why he gives a margin on the top of the grey box inside the content, do you know why? I don't have any margin on top.

I still need to make the scroll overlap the content, I'm trying to use z-index but no success, any ideas for this? because when I have scroll on content its no problem, but when not the grey box has a margin on the bottom where the scroll was suppose to be.