I've trying to figure this simple little piece of code, but I can't seem to get it to lineup properly in mozilla. It's 2 pixels off and ends up undernearth the left box I created. If I use percentages the same thing happens. Here's the code.. pls help.
#ecdvd_body {
width: 780;
margin: 0;
padding: 0;
}
#ecdvd_leftblocks {
width: 150px;
float: left;
padding: 0;
margin: 0;
background: #124C8D;
height: 300px;
border-left: solid black 1px;
}
#ecdvd_core {
width: 630px;
float: right;
padding: 0;
margin: 0;
background: #F6F6F6;
height: 300px;
border-right: solid black 1px;
}
Thanks.Read how the box model works (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/00009.php">http://www.ryanbrill.com/archives/00009.php</a><!-- m -->), and you should be able to fix it.It's interesting how many people condem Gecko for correct behaviour.
First, it's not "width: 780;", it's "width: 780px".
Second, the width of your side-by-side divs is:
150px + 1px + 630px + 1px = 782px
Therefore, you can either make your full width 782px or you can reduce the sum of the widths of your contained divs by 2px and everything will work just as the W3C says it should.
Finally, read up on the box model and how IE gets it wrong.Oops, when I posted here I forget to put in the px. I do have it in my actual code.
I took 1px off each side and now it doesn't line up on the right. It's now looks like it's 2px or 1px off. The borders on the right don't line up, but if I had 1px to either side it shift below again.
If I take 1px off just one side, it ends up underneath again. If you look at the blue bar above it. I'm doing the exact same thing and it works fine.
I'll grab a screen cap when I get to a machine that has something other than paint.I figured it out. You guys pointed me in the right direction. I was missing the height setting in the first body tag, and I had to move the border settings there.
Is there a way to set the ecdvd_body height to change to what ever is in there? I mean is I set ecdvd_leftblocks to a height of 300px should it size with it?Yes, the parent element should resize with it's child elements.would there be a reason why it wouldn't? I had to manually set my parent element other wise it didn't show up correctly?
Here's the latest code for the same block as above (and I set hight to auto and 100% which didn't resolve it)
#ecdvd_body {
width: 780px;
height: 500px;
padding: 0px;
border-right: solid #000 1px;
border-left: solid #000 1px;
}
#ecdvd_leftblocks {
width: 150px;
float: left;
padding: 0;
margin: 0;
background: #124C8D;
height: 500px;
}
#ecdvd_core {
width: 628px;
float: right;
padding: 0;
margin: 0;
background: #F6F6F6;
height: 300px;
border-top: solid black 1px;
}
Thanks.Yes, it is because you are floating your other contents left and right. Read <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=24648.I'm">http://forums.webdeveloper.com/showthre ... =24648.I'm</a><!-- m --> assuming I want to add clear: both; somewhere, but I'm not sure where. I doesn't seem to matter where it still messes up something.A link would be helpful.Sorry, I just uploaded it. I've been working off my machine.
<!-- m --><a class="postlink" href="http://test.eyecravedvd.com/files/test.html">http://test.eyecravedvd.com/files/test.html</a><!-- m --> is where you can find it.
Thanks. (look OK in IE) with current settings. All the source is in the html file for now.Remove the clear: both; from #ecdvd_leftblocks and #ecdvd_core and add it to an element below both divs. clear: both; simply tells the element to clear both floats (ie. go below both).Don't float the core.If I removed the float the core ends up underneath the leftblocks.
I've uploaded the new file. Same link.
Missed your post Pyro I'll try it now.Now give the core div a left margin large enought to push it beyond the right edge of the left nav div.I've got it working in Mozilla fine, but it doesn't in IE, which unfortunately is the core of my audience.
Plus, for whatever reason I can't get the block text to align to the top in the next section underneath featured and latest news. Although, it seems to work fine in IE.
Damn browser incompatibilities.
#ecdvd_body {
width: 780;
margin: 0;
padding: 0;
}
#ecdvd_leftblocks {
width: 150px;
float: left;
padding: 0;
margin: 0;
background: #124C8D;
height: 300px;
border-left: solid black 1px;
}
#ecdvd_core {
width: 630px;
float: right;
padding: 0;
margin: 0;
background: #F6F6F6;
height: 300px;
border-right: solid black 1px;
}
Thanks.Read how the box model works (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/archives/00009.php">http://www.ryanbrill.com/archives/00009.php</a><!-- m -->), and you should be able to fix it.It's interesting how many people condem Gecko for correct behaviour.
First, it's not "width: 780;", it's "width: 780px".
Second, the width of your side-by-side divs is:
150px + 1px + 630px + 1px = 782px
Therefore, you can either make your full width 782px or you can reduce the sum of the widths of your contained divs by 2px and everything will work just as the W3C says it should.
Finally, read up on the box model and how IE gets it wrong.Oops, when I posted here I forget to put in the px. I do have it in my actual code.
I took 1px off each side and now it doesn't line up on the right. It's now looks like it's 2px or 1px off. The borders on the right don't line up, but if I had 1px to either side it shift below again.
If I take 1px off just one side, it ends up underneath again. If you look at the blue bar above it. I'm doing the exact same thing and it works fine.
I'll grab a screen cap when I get to a machine that has something other than paint.I figured it out. You guys pointed me in the right direction. I was missing the height setting in the first body tag, and I had to move the border settings there.
Is there a way to set the ecdvd_body height to change to what ever is in there? I mean is I set ecdvd_leftblocks to a height of 300px should it size with it?Yes, the parent element should resize with it's child elements.would there be a reason why it wouldn't? I had to manually set my parent element other wise it didn't show up correctly?
Here's the latest code for the same block as above (and I set hight to auto and 100% which didn't resolve it)
#ecdvd_body {
width: 780px;
height: 500px;
padding: 0px;
border-right: solid #000 1px;
border-left: solid #000 1px;
}
#ecdvd_leftblocks {
width: 150px;
float: left;
padding: 0;
margin: 0;
background: #124C8D;
height: 500px;
}
#ecdvd_core {
width: 628px;
float: right;
padding: 0;
margin: 0;
background: #F6F6F6;
height: 300px;
border-top: solid black 1px;
}
Thanks.Yes, it is because you are floating your other contents left and right. Read <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=24648.I'm">http://forums.webdeveloper.com/showthre ... =24648.I'm</a><!-- m --> assuming I want to add clear: both; somewhere, but I'm not sure where. I doesn't seem to matter where it still messes up something.A link would be helpful.Sorry, I just uploaded it. I've been working off my machine.
<!-- m --><a class="postlink" href="http://test.eyecravedvd.com/files/test.html">http://test.eyecravedvd.com/files/test.html</a><!-- m --> is where you can find it.
Thanks. (look OK in IE) with current settings. All the source is in the html file for now.Remove the clear: both; from #ecdvd_leftblocks and #ecdvd_core and add it to an element below both divs. clear: both; simply tells the element to clear both floats (ie. go below both).Don't float the core.If I removed the float the core ends up underneath the leftblocks.
I've uploaded the new file. Same link.
Missed your post Pyro I'll try it now.Now give the core div a left margin large enought to push it beyond the right edge of the left nav div.I've got it working in Mozilla fine, but it doesn't in IE, which unfortunately is the core of my audience.
Plus, for whatever reason I can't get the block text to align to the top in the next section underneath featured and latest news. Although, it seems to work fine in IE.
Damn browser incompatibilities.