/    Sign up×
Community /Pin to ProfileBookmark

new to tableless desgin

Hey kids, im new to this tableless designed pages
having some trouble with images lining up

in mozilla the part where the content goes wont line up with the content head and foot

in IE it lines up with the bottom…

anyone care to shed some light please?

Cheers

Neill

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@CentauriJan 26.2007 — Browsers apply default margins (and paddings) to various elements, and different browsers apply different values. In this case, the header tag margins are causing the problem. Insert the following at the start of your css file - it will zero out the default values (you may then have to assign some margins values later on, depending on the layout). [CODE]* {border:0; margin:0; padding:0;}[/CODE]

Cheers

Graeme
Copy linkTweet thisAlerts:
@FREESTYLER510authorJan 26.2007 — BINGO!!!!

thank you very much

other than that does my code look alright? anything i should note?

thanks again
Copy linkTweet thisAlerts:
@CentauriJan 26.2007 — The only things I would note are:

  • 1. For a new page you should use a strict doctype, as you are not transitioning from anything. Also, due to lack of browser support for XML, there is not much point using anything other than html 4.o1 strict Doctype.


  • 2. <center> tag is deprecated and proper way to center things is with margin:auto. You are still thinking a little along the lines of tables, where each item has to be placed in line with another. An overall containing div set to the desired site width, and with "margin:0 auto;" set in its css, with align and center things naturally.


  • 3. Things don't HAVE to be put in divs - they can be styled directly. eg, the header h1 can be styled just as #contenthead can, thereby eleiminating an extra div. The navigation can be an unordered list, and the ul can have the ID of navbar - another div less.


  • 4. Sin-of-sins..... you still have a table in there (footer). tsk tsk ?


  • Cheers

    Graeme
    Copy linkTweet thisAlerts:
    @FREESTYLER510authorJan 26.2007 — yeah im still in the process of changing it over so center tag is still there

    and footer i havent changed yet

    but thank you for ur input i will take note and learn from this

    cheers
    Copy linkTweet thisAlerts:
    @The_Old_SargeJan 26.2007 — Browsers apply default margins (and paddings) to various elements, and different browsers apply different values.[/QUOTE]

    Why do they continue to do this sort of thing? You would think they would all get aboard the same wagon. You would think setting standards, AND STICKING TO THEM, would benefit all in the long run.

    <Maybe it's only the short term they really care about.>
    Copy linkTweet thisAlerts:
    @FREESTYLER510authorJan 26.2007 — ok kids, new issue.

    in mozilla the content isnt going into the contentbox

    and the quicklinks box should be on the right hand side

    i understand having the content_left and right with the float tag in it is making it sit out of the contentbox. but how else can i make to columns in the contentbox with css

    and in IE its in the contentbox, but the quicklinks is still down the bottem and wont align, i dont understand, i wish IE would piss off, or no one use it GRRR
    Copy linkTweet thisAlerts:
    @CentauriJan 26.2007 — As both contents of #contentbox are floated, the floats need to be "cleared" if the box is to surround them - overflow:hidden on the box can do this.

    Some maths also needed here. The width of your #linkshead background graphic is 234px, so that is the width #content_right has to be. As the divs contained within this stretch full width of the box, there is no need to specify widths.

    Now width of #contentbox (944px) - (width of #content_right (234px) + padding (25px)) -#content_left padding (25px) = 660px width of #content_left. Therefore amend css to :
    [CODE]#contentbox {
    background:url(http://www.hbsm.com.au/images/content_bg.gif) repeat-y;
    vertical-align:top;
    width:944px;
    overflow:hidden;
    }
    #content_left {
    vertical-align:top;
    text-align:left;
    padding:10px 5px 10px 20px;
    float:left;
    width:660px;
    }
    #content_right {
    vertical-align:top;
    text-align:right;
    padding:10px 20px 10px 5px;
    float:right;
    width:234px;
    }
    #contentfoot {
    background:url(http://www.hbsm.com.au/images/content_end.gif) no-repeat;
    width:944px;
    height:40px;
    }
    #linkshead {
    background:url(http://www.hbsm.com.au/images/quciklinks_head.gif) no-repeat;
    height:30px;
    }

    #linksbox {
    background:url(http://www.hbsm.com.au/images/quicklinks_content.gif) repeat-y;
    padding:10px 0 2px 15px;
    }

    #linksfoot {
    background:url(http://www.hbsm.com.au/images/quicklinks_end.gif) no-repeat;
    height:41px;
    }[/CODE]


    Cheers

    Graeme
    ×

    Success!

    Help @FREESTYLER510 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 5.20,
    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: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

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

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...