I've got a simple two column layout. Looks great in IE but overflows in Firefox. I just cannot figure this out. Take a look.
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
font-family: Arial;
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #cccccc;
}
#side {
float: left;
padding: 5px;
position: relative;
width: 200px;
}
#content {
margin-left: 200px;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="side">
<div>Side</div>
</div>
<div id="content">
<h1>Test</h1>
<p>Test test...</p>
</div>
</body>
</html>
You'll notice that the border from the side overflows into the content. Very simple CSS but doesn't work right in FF. Whats wrong!?Originally posted by rpanning
You'll notice that the border from the side overflows into the content. Very simple CSS but doesn't work right in FF. Whats wrong!? other way around, very simple css doesnt work in ie
. The ie box model is not the popular box model, so what you think ie is doing right is probably actually wrong. I am going to look at your code in just a second here.actually, you're just not accounting for the padding, if you change content's margin-left to 210px, it will work perfectly.
EDIT:
in real browsers at least, I didn't test it with IEOriginally posted by samij586
actually, you're just not accounting for the padding, if you change content's margin-left to 210px, it will work perfectly.
That looks better in Firefox, like one px overlap now, which is the border, but made a 10px gap in IE. Shouldn't padding be inside of the width of the box? I thought margin would create that issue, not padding. ThanksPersonally I prefer to use top left right bottom positioning with relative and absolute positioning, rather then going margin + float. <!-- m --><a class="postlink" href="http://quasi-ke.servebeer.com/css.html">http://quasi-ke.servebeer.com/css.html</a><!-- m --> how about this, that what you are going for?IE renders the area (incorrectly) inside the box, FF (correctly) "pads" the box, by adding the defined padding to the outside of the box, I think you might need to use the box model hack.or just stop using padding. I am still working on that link above, Ill tell you when I hammered it out lol.Originally posted by PeOfEo
or just stop using padding. I am still working on that link above, Ill tell you when I hammered it out lol.
good point, no real point to it...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
body {
font-family: Arial;
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #cccccc;
}
#side {
float: left;
padding: 5px;
position: relative;
width: 200px;
}
#content {
margin-left: 210px;
padding: 5px;
}
</style>
</head>
<body>
<div id="side">
<div>Side</div>
</div>
<div id="content">
<h1>Test</h1>
<p>Test test...</p>
</div>
</body>
</html>
should have seen this earlier. Your code is fine, mozilla is right of course. But ie can be right too with a proper doc type. IE uses a popular box model when you use a doc type, so if you just put that in it would render like mozilla. I did not notice you did not have one.
<!-- m --><a class="postlink" href="http://quasi-ke.servebeer.com/css2.html">http://quasi-ke.servebeer.com/css2.html</a><!-- m -->
I did the same layout another way at
<!-- m --><a class="postlink" href="http://quasi-ke.servebeer.com/css.htmlThat">http://quasi-ke.servebeer.com/css.htmlThat</a><!-- m --> looks good but I'll also have a top navigation bar that will vary in height. How will that work with specifying top?#nav {
position:absolute;
top:10px;
left:0px;
right:0px;
width:auto;
margin-bottom:10px;
}
maybe
You could also do relative positioning... which might actually work out better if the top nav is the very top. Look at <!-- w --><a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a><!-- w -->, that have some good basic layouts, one of which is very much like what you are looking for.I had time to take a closer look...
Originally posted by samij586
IE renders the area (incorrectly) inside the box, FF (correctly) "pads" the box, by adding the defined padding to the outside of the box, I think you might need to use the box model hack.
Is there some type of documentation I could read that states this? I could have swore padding was supposed to pad the inside of a box, not increasing it's size.
Originally posted by PeOfEo
should have seen this earlier. Your code is fine, mozilla is right of course. But ie can be right too with a proper doc type. IE uses a popular box model when you use a doc type, so if you just put that in it would render like mozilla.
I had ha doc type in the document I was using, just took it out for the example here. Although it was transitional not strict. Would that make that much of a difference?
Thanks again.Is there some type of documentation I could read that states this? I could have swore padding was supposed to pad the inside of a box, not increasing it's size.
Google on +CSS +"box model" and you should turn up the W3C spec and various discussions of "the IE problem." The IE implementation is logical but it's not correct because the spec is not very logical. The bottom line is the spec says the padding and borders increase the size of the element.Originally posted by ray326
Google on +CSS +"box model" and you should turn up the W3C spec and various discussions of "the IE problem."
Fiar enough (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html">http://www.w3.org/TR/REC-CSS2/box.html</a><!-- m -->), I was thinking wrong I guess. Now I know for sure. Odd way of doing it I guess.. but oh well. Thanks
Also, how would I turn this into equal hight columns? I've been looking at this, <!-- m --><a class="postlink" href="http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm">http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm</a><!-- m -->, but am a little lost on how it works.Yes, the official box model is quite unintuitive. The commitee that came up with that one was obviously populated with geeks rather than designers.
As far as the layout goes, what I'll mainly recommend is don't get hung up with thinking a column that *looks* like a div going all the way to the footer *is* a div going all the way to the footer. Take his layout and stick a 1px border on the divs to see what I mean. The column with the "short" content isn't really as tall as it looks; it's the background underneath it that does the trick.Ah, tricky tricky.. Ok, that will work. So then how to the two borders work? If one column is shorter wouldn't the border be short or longer? Humm....I've got one idea but I'll have to try it next week, the work day is over.
If your wandering, here is the Web site I'm trying to convert. Thanks
<!-- m --><a class="postlink" href="http://www.stma.k12.mn.us/">http://www.stma.k12.mn.us/</a><!-- m -->
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
font-family: Arial;
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #cccccc;
}
#side {
float: left;
padding: 5px;
position: relative;
width: 200px;
}
#content {
margin-left: 200px;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="side">
<div>Side</div>
</div>
<div id="content">
<h1>Test</h1>
<p>Test test...</p>
</div>
</body>
</html>
You'll notice that the border from the side overflows into the content. Very simple CSS but doesn't work right in FF. Whats wrong!?Originally posted by rpanning
You'll notice that the border from the side overflows into the content. Very simple CSS but doesn't work right in FF. Whats wrong!? other way around, very simple css doesnt work in ie
. The ie box model is not the popular box model, so what you think ie is doing right is probably actually wrong. I am going to look at your code in just a second here.actually, you're just not accounting for the padding, if you change content's margin-left to 210px, it will work perfectly.EDIT:
in real browsers at least, I didn't test it with IEOriginally posted by samij586
actually, you're just not accounting for the padding, if you change content's margin-left to 210px, it will work perfectly.
That looks better in Firefox, like one px overlap now, which is the border, but made a 10px gap in IE. Shouldn't padding be inside of the width of the box? I thought margin would create that issue, not padding. ThanksPersonally I prefer to use top left right bottom positioning with relative and absolute positioning, rather then going margin + float. <!-- m --><a class="postlink" href="http://quasi-ke.servebeer.com/css.html">http://quasi-ke.servebeer.com/css.html</a><!-- m --> how about this, that what you are going for?IE renders the area (incorrectly) inside the box, FF (correctly) "pads" the box, by adding the defined padding to the outside of the box, I think you might need to use the box model hack.or just stop using padding. I am still working on that link above, Ill tell you when I hammered it out lol.Originally posted by PeOfEo
or just stop using padding. I am still working on that link above, Ill tell you when I hammered it out lol.
good point, no real point to it...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
body {
font-family: Arial;
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #cccccc;
}
#side {
float: left;
padding: 5px;
position: relative;
width: 200px;
}
#content {
margin-left: 210px;
padding: 5px;
}
</style>
</head>
<body>
<div id="side">
<div>Side</div>
</div>
<div id="content">
<h1>Test</h1>
<p>Test test...</p>
</div>
</body>
</html>
should have seen this earlier. Your code is fine, mozilla is right of course. But ie can be right too with a proper doc type. IE uses a popular box model when you use a doc type, so if you just put that in it would render like mozilla. I did not notice you did not have one.
<!-- m --><a class="postlink" href="http://quasi-ke.servebeer.com/css2.html">http://quasi-ke.servebeer.com/css2.html</a><!-- m -->
I did the same layout another way at
<!-- m --><a class="postlink" href="http://quasi-ke.servebeer.com/css.htmlThat">http://quasi-ke.servebeer.com/css.htmlThat</a><!-- m --> looks good but I'll also have a top navigation bar that will vary in height. How will that work with specifying top?#nav {
position:absolute;
top:10px;
left:0px;
right:0px;
width:auto;
margin-bottom:10px;
}
maybe
You could also do relative positioning... which might actually work out better if the top nav is the very top. Look at <!-- w --><a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a><!-- w -->, that have some good basic layouts, one of which is very much like what you are looking for.I had time to take a closer look...
Originally posted by samij586
IE renders the area (incorrectly) inside the box, FF (correctly) "pads" the box, by adding the defined padding to the outside of the box, I think you might need to use the box model hack.
Is there some type of documentation I could read that states this? I could have swore padding was supposed to pad the inside of a box, not increasing it's size.
Originally posted by PeOfEo
should have seen this earlier. Your code is fine, mozilla is right of course. But ie can be right too with a proper doc type. IE uses a popular box model when you use a doc type, so if you just put that in it would render like mozilla.
I had ha doc type in the document I was using, just took it out for the example here. Although it was transitional not strict. Would that make that much of a difference?
Thanks again.Is there some type of documentation I could read that states this? I could have swore padding was supposed to pad the inside of a box, not increasing it's size.
Google on +CSS +"box model" and you should turn up the W3C spec and various discussions of "the IE problem." The IE implementation is logical but it's not correct because the spec is not very logical. The bottom line is the spec says the padding and borders increase the size of the element.Originally posted by ray326
Google on +CSS +"box model" and you should turn up the W3C spec and various discussions of "the IE problem."
Fiar enough (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html">http://www.w3.org/TR/REC-CSS2/box.html</a><!-- m -->), I was thinking wrong I guess. Now I know for sure. Odd way of doing it I guess.. but oh well. Thanks
Also, how would I turn this into equal hight columns? I've been looking at this, <!-- m --><a class="postlink" href="http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm">http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm</a><!-- m -->, but am a little lost on how it works.Yes, the official box model is quite unintuitive. The commitee that came up with that one was obviously populated with geeks rather than designers.
As far as the layout goes, what I'll mainly recommend is don't get hung up with thinking a column that *looks* like a div going all the way to the footer *is* a div going all the way to the footer. Take his layout and stick a 1px border on the divs to see what I mean. The column with the "short" content isn't really as tall as it looks; it's the background underneath it that does the trick.Ah, tricky tricky.. Ok, that will work. So then how to the two borders work? If one column is shorter wouldn't the border be short or longer? Humm....I've got one idea but I'll have to try it next week, the work day is over.
If your wandering, here is the Web site I'm trying to convert. Thanks<!-- m --><a class="postlink" href="http://www.stma.k12.mn.us/">http://www.stma.k12.mn.us/</a><!-- m -->