SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    basic width question

    Hi

    THe width of my container is set to 420px. However in dreamweaver when I highlight it it shows as width as: "420px (430px)". And it takes up 430PX and not 420px.

    Can anyone explain where does this extra 10px comes from and my width is showing as 430 and not 420?

    Regards

    Explorer

  2. #2
    SitePoint Addict hitmanuk2k's Avatar
    Join Date
    Apr 2003
    Location
    Leeds, England
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have any padding set, this will increase the width.
    Follow me on Twitter, or find me on LinkedIn. Latest project: loanpayday.org.uk.

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    padding possibly?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you applied padding, margin or border to the container?

    The total width of the box is made up from the width, margin, padding and border so if you've applied padding of 5px for example then it'll add 5px to the left of the box, 5px to the right plus the width.

    I don't use Dreamweaver but I presume it's doing something clever and telling you the width you've applied plus the total width for the box model.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I have no padding, margin on the body or on the container, however I think i see where the extra 10PX comes from - I have had to set the body to the following which gives a defailt margin on the left to 10PX (but also increases the margin on the right so it should cancel out):

    margin: 0;
    padding: 0;
    margin-left:auto;
    margin-right:auto;

    If put margin-left:0 I lose the extra ten PX on the body but my page is no longer displayed in the center in FIREFOX, which seems to override the <center> tag but this does not happen in IE. .

    But the first container still gives the same reading of 420px which is expected along with the 430px inside brackets, this should nto be there.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off you shouldn't be using deprecated (obsolete) markup in your Web pages. There's a reason why it's being removed from the specification, and that's because those elements are presentational in nature, while HTML is a structural markup language.

    Is this the same page/site you're having difficulty with as the other thread where the footer was having problems by any chance?

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Yes it is the same page the problem with the footer also.

    But you have not said which elements are deprecated but I assume you are referring to the <center> tag? Should I remove that, but then I think my IE does not display the page in the center.


    Regards

  8. #8
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have margin set to 0 which will override the margin left and right

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, <center> is deprecated. A general rule of thumb is that if it's a presentational element or attribute, there's a very good chance that it's been rendered obsolete (some noted exceptions are align="" when used inside table elements, <small></small> and if I recall correctly, <sup></sup> and <sub></sub>).

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    csswiz, I wouldn't say margin adds to the total width of an element - I find it a little confusing, margins can overlap it's best to think of an elements width as the total visible width.
    width + padding + border = total visible width

    You need to post a link to the page in question or show your entire code please.

    james_littler, explorer07 set the 'margin' first so the 0 will be overridden correctly with the auto values.
    But, you don't want to set margin: 0 auto; on the body

    I recommend you start your css with
    Code:
    * { margin: 0; padding: 0; }
    which will get rid of all default margin and padding.

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    csswiz, I wouldn't say margin adds to the total width of an element - I find it a little confusing, margins can overlap it's best to think of an elements width as the total visible width.
    width + padding + border = total visible width
    I don't really agree or maybe it's because I'm displaying an element differently so we're thinking of different things but take the following code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Side by Side boxes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;	
    }
    body {
    	padding: 10px;
    	font-family: arial, verdana, helvetica, sans-serif;
    	font-size: 77&#37;;
    	width: 540px;
    	margin: 0 auto;
    }
    #container {
    	float: left;
    	width: 540px;
    	background-color: #000;	
    }
    #column1 {
    	float: left;
    	background-color: #CCC;
    	width: 250px;
    	margin: 10px;
    }
    #column2 {
    	float: left;
    	background-color: #C00;
    	width: 250px;
    	margin: 10px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="column1">
    		<p>text</p>
    	</div>
    	<div id="column2">
    		<p>text</p>
    	</div>
    </div>
    </body>
    </html>
    The columns themselves are 250px each but with 10px of margin either side.

    From what you're saying, we could bring the width of the container down and these two columns would still fit side by side?

    However, dropping the 540px down by just one pixel to 539px forces the second column to drop because there's no longer enough space for it.

    Have you got an example to show what you mean as I've always considered the margin, padding, border and width to be what makes up the structure of the box model (along with content, background-image and background-colour).

    Maybe you're using negative margin's though? In which case they're still part of the box model but would be subtracted from the width wouldn't they?

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI

    Yes Dan I sort of gathered that, Firefox was ok but not IE. The problem was fixed with the following hack : text-align:center; in the body tag.

    Mark as for the margins I have removed the margin:0, padding:0, replaced it with the following as per the reccomendation:

    html,body {margin:0;padding:0}

    Whilst on this subject do you know why this one start with html as I thought in CSS it would always start with a tag like body{} or p{} etc.

    Regards

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If that was in IE 6, I suspect you don't have a complete and proper DOCTYPE. Not having one will throw IE 6 into quirks mode, meaning it'll act the exact same way as IE 5.

    As for your other question...
    http://www.sitepoint.com/forums/show...25#post3528425

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI dan

    This is my Doc Type (default on Dreamweaver)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <html xmlns="http://www.w3.org/1999/xhtml">

    Should I add anything?

    Regards

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by explorer07 View Post
    HI dan

    This is my Doc Type (default on Dreamweaver)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <html xmlns="http://www.w3.org/1999/xhtml">

    Should I add anything?

    Regards
    Nobody's mentioned it yet so try using http://validator.w3.org to ensure that you're writing valid code. It'll tell you if you're using any deprecated code along with any other mistakes

  16. #16
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    	<title>Web Page Title</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<meta http-equiv="imagetoolbar" content="no">
    	<meta name="description" content="The Current Web Page's Description Goes Here.">
    	<meta name="keywords" content="current, page's, keywords, go, here, only, once, page, content, has, been, finished">
    </head>
    <body>
    
    </body>
    </html>

  17. #17
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CSSWIZ

    Please clarify the following: body {
    padding: 10px;
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 77&#37;;
    width: 500px; margin: 0 auto;
    }
    #container {
    float: left;
    width: 540px;
    background-color: #000;

    I dont understand how the container width of 540 can exceed the width of the body which is 500, because I thought the container is inside the body. So a larger container width inside a smaller body width seems strange.

    Of courrse I understand how you arrived at 540 as two coloumns (250+250+ 20+ 20) and the paddings.

    Regards

  18. #18
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well spotted, mistake on my part as that should also be 540px and has now been corrected

    i start off with the widths, apply the paddings, margin's and borders and then adjust the width's accordingly, I'd obviously missed the width on the body when readjusting these.

    sorry for the confusion

  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just on ur point about visible width = width + margin + padding - I agree on this.

    But under IE, I seem to lose a bit more pixels for some reason. But Mozilla is fine or a lot better. THe first coloumn shown in my dreamweaver is about 10 pixels longer for some reason. I cant understand this.

    I know as Dan said I will have to put my code here, I will a bit later after I clean it up a bit.

    Regards

  20. #20
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't have a complete doctype then it will put IE6 and 7 in quirks mode which means they'll render the same as IE5.x which uses a broken box model.

    Dan gave me some advice yesterday about the box model hack which I used to put together the following article to explain the box model and the easiest approaches in getting around this issue

    http://www.dave-woods.co.uk/?p=85

    Always make sure that you have the full doctype though (as Dan mentioned early) otherwise you'll cause even more problems

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  21. #21
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Dave, you might want to get to your blog and approve the little gift I just left for you there.

    And please, in the future please try to limit the use of links to your site - I'm not sure the Advisors would take too kindly to it, even though some of them do it themselves.

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dave:

    When I insert the line that you specified above my headers vanish.

    So I inserted it in the following way:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/loose.dtd">

    That seems to retain everything.

    IS this correct?

    Regards

  23. #23
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by explorer07 View Post
    Hi Dave:

    When I insert the line that you specified above my headers vanish.

    So I inserted it in the following way:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/loose.dtd">

    That seems to retain everything.

    IS this correct?

    Regards
    Nope, that's an invalid doctype and will put your site into quirks mode for IE6 and 7. Use the one above and then run your code through http://validator.w3.org as I suspect there's something else wrong with your code.

    Alternatively paste your code or provide a link on here and I'll take a look as unfortunately it's your code that's causing the problems and not the doctype

  24. #24
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Sorry, there's obviously a fine line between what's classed as useful and what's classed as self promotion so I'll try and limit it in future.

  25. #25
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Just on ur point about visible width = width + margin + padding - I agree on this.
    Margin isn't visible

    And he's saying width = width + margin + padding + border

    I've always heard the total width of an element as the visible part - the margin is just space around the outside of the element. I find it easier to understand thinking of the box model in that way.

    A moot point?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •