A few pixels off - CSS Layout

  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Hi,

I'm currently designing the layout for my website. I'm using only CSS for the layout. For some reason, one of my elements doesn't line up with the rest. It's a few pixels off.

You can see my website at:
http://pbworld.u69.us/index.php

The box that contains "Center Content" isn't justified to the right like I would like it to be. Any ideas or possible fixes?

Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Looks like it may only be off 1 or 2 pixels. It's very close and actually I can hardly see it at 1280x1024, but I do see what you're talking about.

I didn't test it, but your width for the leftcontent class is 22% and the width for your centercontent class is 77% That only adds up to 99% and is perhaps where your difference is coming from.
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

I used 77% and 22% since I used a margin width of 1%. When you add that, it all adds up to 100%.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Well, actually you don't have a margin width of 1%. You have that as a top margin only. Take a closer look at your style:

Code: [ Select ]
#topcontent
{
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}

#leftcontent
{
margin-top: 1%;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding: 0px;
width: 22%;
border-width: 1px;
border-color: #000000;
border-style: solid;
float: left;
}

#centercontent
{
margin-top: 1%;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding: 0px;
width: 77%;
border-width: 1px;
border-color: #000000;
border-style: solid;
float: right;
}
  1. #topcontent
  2. {
  3. margin: 0px;
  4. padding: 0px;
  5. width: 100%;
  6. height: 100px;
  7. border-width: 1px;
  8. border-color: #000000;
  9. border-style: solid;
  10. }
  11. #leftcontent
  12. {
  13. margin-top: 1%;
  14. margin-right: 0px;
  15. margin-left: 0px;
  16. margin-bottom: 0px;
  17. padding: 0px;
  18. width: 22%;
  19. border-width: 1px;
  20. border-color: #000000;
  21. border-style: solid;
  22. float: left;
  23. }
  24. #centercontent
  25. {
  26. margin-top: 1%;
  27. margin-right: 0px;
  28. margin-left: 0px;
  29. margin-bottom: 0px;
  30. padding: 0px;
  31. width: 77%;
  32. border-width: 1px;
  33. border-color: #000000;
  34. border-style: solid;
  35. float: right;
  36. }


See how topcontent is 0 margin and 100% width?

Then for leftcontent and centercontent you do have 1% for the top margin. But you do not have a left and right margin. both classes are 0.

I promise you that's what's throwing you off. You're still missing that 1% horizontally.
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

I tried changing it, but when I do it causes the centercontent to shift down (because there's not enough horizontal room). That's why I left 1% unaccounted for. If only there was a way to align that element to the right.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Yeah -- I did the same thing and got the same result. That ticked me off a bit! *lol I haven't figured it out yet either. And if you shorten the topcontent to 99% it shortens it by about 4 or 5 pixels.

I'm quite sure it's something close to what I'm pointing out, but I'm a bit stuck with it at the moment too. And if I recall, I think you did align it right. I don't have it open anymore, but I'm sure I remembered seeing float:right in there
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Yes, I did have float: right in my code.

This is what annoys me with CSS. It is such a well structured language with great possibilities but the browsers don't support it properly, and they all support it differently. We need one super browser that everybody uses that executes all code properly. :P
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I am totally agreed on that!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

personally I woud go for this:

Code: [ Select ]
#topcontent
{
margin: 0px;
padding: 0px;
/*width: 100%; not needed*/
height: 100px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}

#leftcontent
{
margin-top: 1%;
/*margin-right: 0px;*/
margin-left: 0px;
/*margin-bottom: 0px; unnesccesary*/
padding: 0px;
width: 22%;
border-width: 1px;
border-color: #000000;
border-style: solid;
float: left;
}

#centercontent
{
margin-top: 1%;
margin-right: 0px;
margin-left: 23%; (this will move it away from the float)
/*margin-bottom: 0px; unneccesary*/
padding: 0px;
/*width: 77%; not needed as you have a margins on either side*/
border-width: 1px;
border-color: #000000;
border-style: solid;
/*float: right; removed*/
}
  1. #topcontent
  2. {
  3. margin: 0px;
  4. padding: 0px;
  5. /*width: 100%; not needed*/
  6. height: 100px;
  7. border-width: 1px;
  8. border-color: #000000;
  9. border-style: solid;
  10. }
  11. #leftcontent
  12. {
  13. margin-top: 1%;
  14. /*margin-right: 0px;*/
  15. margin-left: 0px;
  16. /*margin-bottom: 0px; unnesccesary*/
  17. padding: 0px;
  18. width: 22%;
  19. border-width: 1px;
  20. border-color: #000000;
  21. border-style: solid;
  22. float: left;
  23. }
  24. #centercontent
  25. {
  26. margin-top: 1%;
  27. margin-right: 0px;
  28. margin-left: 23%; (this will move it away from the float)
  29. /*margin-bottom: 0px; unneccesary*/
  30. padding: 0px;
  31. /*width: 77%; not needed as you have a margins on either side*/
  32. border-width: 1px;
  33. border-color: #000000;
  34. border-style: solid;
  35. /*float: right; removed*/
  36. }


The problem is too many styles. If you have margins both sides then there is no need to set a width. There is no need to set bottom margins either.

The problem was a conflict between the width and the margins, coupled with a box model error in the title. Width 100% plus 2px for the borders exceeds the width of the page. This was then coupled with a margin:0px; which contradicts the width/border combination and so the browser has to sort itself out. This resulted in the 2px (1px border either side) being added onto the width.

I've also edited the centercontent to make it a little streamlined.

Use the minimum of styles and you can avoid conflicts. Only use the styles that are necesary. Try to use margins instedead of widths, for browser conformity as much as anything else.

Now for a blatent plug. I have written about 5000 words of css layout tutorials in the last week - it all needs formatting and the examples done, but I'm hoping it will be a handty resource for all those people try to change over. There are a few little glitches in css but once you get your head around 5 or 6 techniques it becomes so easy. The site should be up soon(ish). watch my sig :wink:
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

that code then causes the title bits to be too short in IE. Therefore I shall sort out that when I get out of the shower. It's another thing where there are too many styles again and easily fixed.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Code: [ Select ]
body
{
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 10px;
padding: 0px;
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
}

a:link
{
text-decoration: none;
color: #0033CC;
}

a:visited
{
text-decoration: none;
color: #0033CC;
}

a:hover
{
text-decoration: none;
font-weight: 700;
color: #0033CC;
}

a:active
{
text-decoration: none;
color: #0033CC;
}

#topcontent
{
margin: 0px;
padding: 0px;
/*width: 100%; not needed*/
height: 100px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}

#leftcontent
{
margin-top: 1%;
/*margin-right: 0px;*/
margin-left: 0px;
/*margin-bottom: 0px; unnesccesary*/
padding: 0px;
width: 22%;
border-width: 1px;
border-color: #000000;
border-style: solid;
float: left;
}

#centercontent
{
margin-top: 1%;
margin-right: 0px;
margin-left: 23%; (this will move it away from the float)
/*margin-bottom: 0px; unneccesary*/
padding: 0px;
/*width: 77%; not needed as you have a margins on either side*/
border-width: 1px;
border-color: #000000;
border-style: solid;
/*float: right; removed*/
}
#titlefirst
{
margin: 0px;
padding: 0px;
/*width: 100%;*/
text-align: center;
background: #0066CC;
/*border-bottom-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid; combined into singel style below*/
border-bottom:1px solid #000;
}

#title
{
margin: 0px;

padding: 0px;
/*width: 100%;*/
text-align: center;
background: #0066CC;
/*border-bottom-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-top-width: 1px;
border-top-color: #000000;
border-top-style: solid;      Combined into two styles below:*/
border-bottom:1px solid #000;
border-top:1px solid #000;
}

#maintext
{
margin: 0px;
padding: 3px;
font-size: 10pt;
}
  1. body
  2. {
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. margin: 10px;
  6. padding: 0px;
  7. background-color: #FFFFFF;
  8. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  9. font-size: 12pt;
  10. }
  11. a:link
  12. {
  13. text-decoration: none;
  14. color: #0033CC;
  15. }
  16. a:visited
  17. {
  18. text-decoration: none;
  19. color: #0033CC;
  20. }
  21. a:hover
  22. {
  23. text-decoration: none;
  24. font-weight: 700;
  25. color: #0033CC;
  26. }
  27. a:active
  28. {
  29. text-decoration: none;
  30. color: #0033CC;
  31. }
  32. #topcontent
  33. {
  34. margin: 0px;
  35. padding: 0px;
  36. /*width: 100%; not needed*/
  37. height: 100px;
  38. border-width: 1px;
  39. border-color: #000000;
  40. border-style: solid;
  41. }
  42. #leftcontent
  43. {
  44. margin-top: 1%;
  45. /*margin-right: 0px;*/
  46. margin-left: 0px;
  47. /*margin-bottom: 0px; unnesccesary*/
  48. padding: 0px;
  49. width: 22%;
  50. border-width: 1px;
  51. border-color: #000000;
  52. border-style: solid;
  53. float: left;
  54. }
  55. #centercontent
  56. {
  57. margin-top: 1%;
  58. margin-right: 0px;
  59. margin-left: 23%; (this will move it away from the float)
  60. /*margin-bottom: 0px; unneccesary*/
  61. padding: 0px;
  62. /*width: 77%; not needed as you have a margins on either side*/
  63. border-width: 1px;
  64. border-color: #000000;
  65. border-style: solid;
  66. /*float: right; removed*/
  67. }
  68. #titlefirst
  69. {
  70. margin: 0px;
  71. padding: 0px;
  72. /*width: 100%;*/
  73. text-align: center;
  74. background: #0066CC;
  75. /*border-bottom-width: 1px;
  76. border-bottom-color: #000000;
  77. border-bottom-style: solid; combined into singel style below*/
  78. border-bottom:1px solid #000;
  79. }
  80. #title
  81. {
  82. margin: 0px;
  83. padding: 0px;
  84. /*width: 100%;*/
  85. text-align: center;
  86. background: #0066CC;
  87. /*border-bottom-width: 1px;
  88. border-bottom-color: #000000;
  89. border-bottom-style: solid;
  90. border-top-width: 1px;
  91. border-top-color: #000000;
  92. border-top-style: solid;      Combined into two styles below:*/
  93. border-bottom:1px solid #000;
  94. border-top:1px solid #000;
  95. }
  96. #maintext
  97. {
  98. margin: 0px;
  99. padding: 3px;
  100. font-size: 10pt;
  101. }



now works in Netscape mozilla opera IE and firefox (latest versions for windows)

I have combined a couple of styles as well into shorthand. I have removed the offensive mozilla box sizings as it is not needed so your code will validate now as well. :D

anything commented can just be deleted - i have left it there so you have an idea what I did.
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Is there actually an advantage to using shorthand other than saving time? I like the look of the CSS without using shorthand, it seems a bit cleaner.

BTW, thanks for the help, it looks great now.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

nothing wrong with long hand - I find that shorthand saves a little (read negligable) bit of filesize and tha I think it makes the css look neater :lol:

There is a single shorthand thing that does more than the separate rules but I cannot remember which one and it's not very important.

If you prefer the longhand uncomment it and remove my edits, it will all still work. It's just a personal preference thing.
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Alright I did that. Thanks again for the help. The website is looking great now.

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 41 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.