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.

Results 1 to 9 of 9
  1. #1
    Member Unknown98's Avatar
    Join Date
    May 2008
    Location
    Houston
    Posts
    46
    Member #
    16866
    Ok, I'm creating a design, but I have a problem. The divs aren't going all the way to the edge of the screen. There's like a 5px space between the edge of the screen and the the edge of the div. This is particularally noticable with the navbar and the header area. I want the header to be grey/black color, and the rest of the page to be white, but the div does not go all the way to the edge, it stops and there appears to be a white border around teh header, which I dislike.

    Edit: Oh, I guess the URL would help :lick: : http://max-files.com/salesman/new/

    Note: I'm using IE8.

    I notice in Firefox 3.5, the footer is to the left. How do I get it to always go to the bottom of the page besides using multiple <br /> tags? I'm php including the footer.php file, which has it's own css. The footer is in a div aswell.

    And, one more thing. The header on the left box (that says login) does not go all the way to the edge of it's container div, because the container div has a 5px padding. Any way to keep the padding but make the header portion take up the whole space and ignore the container's padding?

    Mabye I should just use static widths..

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i love this question because the solution is sooooo easy. you ready? in your css body{ margin: 0px; } and your all set.

    for the padding issue, its not the padding because padding takes on bg. check the box model for html/css as far as margin vs padding. this should help you solve the footer as well.

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Jan 2010
    Location
    Houston
    Posts
    2
    Member #
    20816
    Okay, try this one on for size:

    http://www.montagsgames.com

    If you open the page and view it in Firefox 3.5.7, the page looks fine and dandy. If you open the page and view it in Internet Explorer 7, there is a big white gap between the body text and the side bar. Open the page in both browsers, you'll see the difference.

    Most prominent when you view the page in higher/widescreen resolutions, like 1280x800.

    So, apart from IE sucking, why is this happening?

  5. #4
    Member Unknown98's Avatar
    Join Date
    May 2008
    Location
    Houston
    Posts
    46
    Member #
    16866
    It looks fine in IE8, a lot of bugs were fixed in 8 that make it eaiser for developers, but unfortunatly lots of people/companies still use IE7, even 6. My resoultion is 1680 X 1050. I'm no help at solving your problem unfortunatly, but your website caught my attention, because I live probally 10 minutes away from your store. I think I may have even passed it up a couple times, the name sounds familiar.

  6. #5
    Junior Member
    Join Date
    Jan 2010
    Location
    Houston
    Posts
    2
    Member #
    20816
    Oh, really? Well what a small world it is!

    Not to blatantly advertise my own clients or anything, but if you are into gaming (not video games, stuff like MTG, tabletop or warhammer) you should check it out. Lots of great people, and the owner is really nice.

    I guess I'll just keep working on that problem, or just forget about it since it actually looks OK on lower resolutions (like the very common 1024x768) and, as you said, IE8 fixes bugs like this.

    Thanks for the answer.

  7. #6
    Member Unknown98's Avatar
    Join Date
    May 2008
    Location
    Houston
    Posts
    46
    Member #
    16866
    for the padding issue, its not the padding because padding takes on bg. check the box model for html/css as far as margin vs padding. this should help you solve the footer as well.
    Eh, what lol? Here's my box header and actual box css:

    Code:
     
    .box-header {
     background:url(http://max-files.com/salesman/new/menu/images/bg.gif) repeat-x;
     padding:5px;
     text-align:center;
     -moz-border-radius-topleft:10px;
     -moz-border-radius-topright:10px;
     -webkit-border-radius:10px;
      behavior:url(border-radius.htc);
     font-weight:bold;
     font-size:1.5em;
     color:#FFFFFF;}
     
    .box-left {
    background:url(http://max-files.com/salesman/new/im...background.gif);
    float:left;
    border:2px solid #FFFFFF;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:5px;
    width:20%;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
    text-align:center;}

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    yeah ie adds margin to elements automatically that ff does not.

    follow this link, it is the box model. it will help you sort out when padding vs margin is appropriate.

    http://www.w3.org/TR/CSS21/box.html

    the easiest way to sort out the ie vs ff margin and padding differences is to put
    * { margin: 0px; padding: 0px; }
    at the very top of your css. this zeros the margins and padding that is given automatically so instead of two css links you only need the one for everything to be cross browser. for this the transitional doc-type works best. the downside to this is that you have to set margin and padding for each instance that is required.
    if you are only interested in getting rid of the space around the page just add the following to your css and all will be well.
    body { margin: 0px; }
    for me, its more effective to explain how it works rather then reading your source and debugging it for you.

    while($get_it !== true){ continue; }

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    love the nav bar

    while($get_it !== true){ continue; }

  10. #9
    Member Unknown98's Avatar
    Join Date
    May 2008
    Location
    Houston
    Posts
    46
    Member #
    16866
    Thanks!

    I got it working, cool. The footer too.


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
  •  

Search tags for this page

css all the way to edge

,

div go altheway to edge of page

,

div not touching edge

,

div to edge of screen

,

get color to edge of page html

,
header wont touch left of page
,

how to make a div go from page edge to edge

,

hr edge to edge css

,

html div background color edge

,

make background color go to edge css

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com