/    Sign up×
Community /Pin to ProfileBookmark

css layout

Copy linkTweet thisAlerts:
Jun 01.2006

Hi
I have [URL=http://freehost14.websamba.com/netdzigns/]this website [/URL] in frames, and I am planning to move it to css. I have redone the [URL=http://freehost14.websamba.com/netdzigns/new/]index page [/URL] here, but as you can see, I have problem with the left navigation. In FF, it looks fine like original, but in IE, there is too much space between the list items.
Also, any way to remove the browser scrollbar?
Attaching both htm and css file in zip format.
Any and all help is appreciated.
Thanks

[upl-file uuid=41eb41be-b8b5-46ac-b019-6b84e4324192 size=3kB]netdzigns.zip[/upl-file]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJun 01.2006 — There's a link in my signature called "Gappy Lists in Internet Explorer" that should give you the info you need to fix the problem.
Copy linkTweet thisAlerts:
@tasneemauthorJun 01.2006 — hi

thanks, tried both the _height and whitespace rules, both worked and have gone with _height rule. Better to do in css than in html, I think. Is this OK? How do I check for validation?

thanks.
Copy linkTweet thisAlerts:
@nataliemacJun 01.2006 — I use the height rule too. I think it gets to confusing for editing to break up the <li> tags like that.

I'm not sure what you mean by validate? You just want to validate your HTML/CSS?
Copy linkTweet thisAlerts:
@tasneemauthorJun 01.2006 — yes, just validate html and css.
Copy linkTweet thisAlerts:
@nataliemacJun 01.2006 — Just use the W3C's validators:

CSS: http://jigsaw.w3.org/css-validator/

HTML: http://validator.w3.org/
Copy linkTweet thisAlerts:
@WebJoelJun 01.2006 — Site is coming along nicely. ?

I noticed that you desperately need either some margin-top or padding-top here to get the links away from the event horizon of the overflow scrolling window (see attached image).

It is like this in both Firefox and IE...

[upl-file uuid=73b00645-c3ee-43de-8d16-91172d086086 size=12kB]pad_this.gif[/upl-file]
Copy linkTweet thisAlerts:
@tasneemauthorJun 02.2006 — Hi
Site is coming along nicely. ?[/QUOTE]
Thanks

I have tried to change some css settings, and it looks OK(not exact) in FF, but in IE, not good at all.

Check the site here.

You will notice in FF, the positioning is OK, except that the heading inside the content has to be in the middle, but it appears fine in IE.

Now IE has more trouble with this:
[LIST]
  • [*]The top banner is sticking to the content.

  • [*]There is a horizontal scrollbar too, which I do not want.

  • [*]The content does not go all the way to the end like it does in FF.

    • [/LIST]

    This is the css code(only positioning, not whole file):
    [CODE]
    /* position CSS */
    .bnr { /* top banner */
    position: fixed;
    height: 10%;
    top: 0;
    left: 30%;
    padding: 0 0 10px 0;
    }
    #nav { /* left navigation list */
    position: fixed;
    left: 10px;
    top: 10%;
    width: 110px;
    height: auto;
    }
    #rgtcont { /* the main content trbl */
    position: absolute;
    top: 10%;
    bottom: 200px;
    left: 120px;
    width: auto;
    height: 450px;
    overflow: auto;
    padding: 10px 10px 10px 10px;
    text-align:justify;
    border-width: 2px 0 2px 4px;
    border-style: ridge solid ridge groove;
    border-color: mediumorchid;
    }

    #btm { /* the bottom links etc.*/
    position:absolute;
    padding: 15px 0 -5px 0;
    width: auto;
    left: 150px;
    bottom: 0;
    text-align:center;
    }
    [/CODE]
    The htm code has also changed, if you guys need that too?

    Any thoughts?

    thanks
    Copy linkTweet thisAlerts:
    @tasneemauthorJun 05.2006 — hi

    Any ideas guys? My site is stuck to the index page right now?
    Copy linkTweet thisAlerts:
    @tasneemauthorJun 08.2006 — Hi

    Finally completed and uploaded the website. Check it at http://freehost14.websamba.com/netdzigns/.

    thanks
    ×

    Success!

    Help @tasneem spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...