I'm trying to convert a table-based site to CSS and it's driving me absolutely crazy.
The work-in-progress is at
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/test.html">http://www.cultivatedesign.org/ecor/test.html</a><!-- m -->
the problems are (at least in Safari & FF Mac and FF PC):
?The strip of photos is supposed to be in the space above the black-on-beige text - instead it's displaced (outside its <div>).
?The beige text area is supposed to be 385 pixels wide, but it's coming out at 423 pixels wide (which is 385 plus the values of the left and right padding (I thought padding was the amount content was inset from the outside edge, and didn't add to the width of the <div>)
?The sidebar at right is supposed to have a background color. You can just see a bit of it in a strip at the left of this bar.
I have tried everything I can think of and then some and I can't figure out how to fix these. Of course I tried removing all the top elements and the dhtml menus (not created by me) in case they were moving things around, but it didn't change a thing.
Then of course in IE PC it's an entirely different train wreck...
I think my hair is turning gray...er
Can anyone help?
- BobI thought padding was the amount content was inset from the outside edge, and didn't add to the width of the <div>
There is the Microsoft way and then there is the right way.
You are trying to fit your image in a div using pixel sizing. Your pixel size is probably 1px too small to fit it all in. I'm not sure if it's just the image or the div also but resizing the img, I think, makes it fit into place.It's more than just that. The div.right area and/or div.photo_strip is hidden behind the menu on the left and butted up against the left margin. So the menu is taking up some of the space of 593px. In fact, making the div 750px wide makes the image jump into place.Per the CSS spec, the width applies to the content portion of the box element. IE in "quirks mode" (i.e.: without a valid doctype assigned), calculates box widths incorrectly and includes the padding and borders as part of the width. With a valid doctype or using any other standards-compliant browser, the total width occupied by a box equals:
left-margin + left-border + left-padding + width + right-padding + right-border + right-marginYou are trying to fit your image in a div using pixel sizing. Your pixel size is probably 1px too small to fit it all in. I'm not sure if it's just the image or the div also but resizing the img, I think, makes it fit into place.
Is it generally bad practice to fit an image inside a div using pixel sizing?
It's more than just that. The div.right area and/or div.photo_strip is hidden behind the menu on the left and butted up against the left margin. So the menu is taking up some of the space of 593px. In fact, making the div 750px wide makes the image jump into place.
I'm not clear why these two divs are behind the left menu/butted against the left margin. I have float: left on the below_nav div, which should make the right_area div sit against its right side, not all the way to the left. Shouldn't it?
Removing the pixel dimensions of these two divs did indeed clear up all my problems. Thanks!
Per the CSS spec, the width applies to the content portion of the box element. IE in "quirks mode" (i.e.: without a valid doctype assigned), calculates box widths incorrectly and includes the padding and borders as part of the width. With a valid doctype or using any other standards-compliant browser, the total width occupied by a box equals:
left-margin + left-border + left-padding + width + right-padding + right-border + right-margin
Thanks for that bit of enlightenment. Clearly CSS requires as much detail-discovery as PHP or Javascript. I'm on the road...
I have another question about this particular page, but I'll ask it in another topic for the benefit of other readers.
- BobI haven't had a chance to look into this. Remember that floated divs are removed from the normal flow when positioned. So the div is positioned to the top and left but the image can't float behind the menu so the browser foats it up next to it. But if the div isn't wide enough, it moves the image down and to the left.
It isn't necessarily bad to contain an image in a div. You do seem to have a touch of 'divitis' though, ie, you wrap everything in a div, maybe for positioning purposes. Just use one div to contain elements that can be positioned together. Then position elements within that div keeping in mind that floats and absolutes get removed from the normal flow and can cause divs and elements following them to move up.
The work-in-progress is at
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/test.html">http://www.cultivatedesign.org/ecor/test.html</a><!-- m -->
the problems are (at least in Safari & FF Mac and FF PC):
?The strip of photos is supposed to be in the space above the black-on-beige text - instead it's displaced (outside its <div>).
?The beige text area is supposed to be 385 pixels wide, but it's coming out at 423 pixels wide (which is 385 plus the values of the left and right padding (I thought padding was the amount content was inset from the outside edge, and didn't add to the width of the <div>)
?The sidebar at right is supposed to have a background color. You can just see a bit of it in a strip at the left of this bar.
I have tried everything I can think of and then some and I can't figure out how to fix these. Of course I tried removing all the top elements and the dhtml menus (not created by me) in case they were moving things around, but it didn't change a thing.
Then of course in IE PC it's an entirely different train wreck...
I think my hair is turning gray...er
Can anyone help?
- BobI thought padding was the amount content was inset from the outside edge, and didn't add to the width of the <div>
There is the Microsoft way and then there is the right way.
You are trying to fit your image in a div using pixel sizing. Your pixel size is probably 1px too small to fit it all in. I'm not sure if it's just the image or the div also but resizing the img, I think, makes it fit into place.It's more than just that. The div.right area and/or div.photo_strip is hidden behind the menu on the left and butted up against the left margin. So the menu is taking up some of the space of 593px. In fact, making the div 750px wide makes the image jump into place.Per the CSS spec, the width applies to the content portion of the box element. IE in "quirks mode" (i.e.: without a valid doctype assigned), calculates box widths incorrectly and includes the padding and borders as part of the width. With a valid doctype or using any other standards-compliant browser, the total width occupied by a box equals:
left-margin + left-border + left-padding + width + right-padding + right-border + right-marginYou are trying to fit your image in a div using pixel sizing. Your pixel size is probably 1px too small to fit it all in. I'm not sure if it's just the image or the div also but resizing the img, I think, makes it fit into place.
Is it generally bad practice to fit an image inside a div using pixel sizing?
It's more than just that. The div.right area and/or div.photo_strip is hidden behind the menu on the left and butted up against the left margin. So the menu is taking up some of the space of 593px. In fact, making the div 750px wide makes the image jump into place.
I'm not clear why these two divs are behind the left menu/butted against the left margin. I have float: left on the below_nav div, which should make the right_area div sit against its right side, not all the way to the left. Shouldn't it?
Removing the pixel dimensions of these two divs did indeed clear up all my problems. Thanks!
Per the CSS spec, the width applies to the content portion of the box element. IE in "quirks mode" (i.e.: without a valid doctype assigned), calculates box widths incorrectly and includes the padding and borders as part of the width. With a valid doctype or using any other standards-compliant browser, the total width occupied by a box equals:
left-margin + left-border + left-padding + width + right-padding + right-border + right-margin
Thanks for that bit of enlightenment. Clearly CSS requires as much detail-discovery as PHP or Javascript. I'm on the road...
I have another question about this particular page, but I'll ask it in another topic for the benefit of other readers.
- BobI haven't had a chance to look into this. Remember that floated divs are removed from the normal flow when positioned. So the div is positioned to the top and left but the image can't float behind the menu so the browser foats it up next to it. But if the div isn't wide enough, it moves the image down and to the left.
It isn't necessarily bad to contain an image in a div. You do seem to have a touch of 'divitis' though, ie, you wrap everything in a div, maybe for positioning purposes. Just use one div to contain elements that can be positioned together. Then position elements within that div keeping in mind that floats and absolutes get removed from the normal flow and can cause divs and elements following them to move up.