I am having a problem! There is a particular bottom border that isn't showing up.
If you visit this site (<!-- m --><a class="postlink" href="http://pauljunior.no-ip.com/layouts/layout3/">http://pauljunior.no-ip.com/layouts/layout3/</a><!-- m -->), you'll see that the second box down on the left (marked "Update 2") has no bottom border in Gecko browsers. Looks fine in IE and Opera. I really have no idea what's wrong here; CSS and XHTML validate, and I can't see anything that I missed.
If the site doesn't load, which it may not since it's off my 'puter on a 56K, I've attached an image, showing the problem. Lemme know if I should attach the code as well.Yeah, I've noticed the same affect on some pages I've made and I haven't found an explanation.Originally posted by toicontien
Yeah, I've noticed the same affect on some pages I've made and I haven't found an explanation.
No explanation?! Aaaahhhhh!!!
Well that sure ruins my whole night, crap. Well at least I know I'm not alone, thanks.
not sure what the problem was, but i was playing around with the edit css plugin on firefox, and this seems to have fixed it (I don't know that I even made any changes, but this got the border showing)...
body {
padding: 0;
margin: 10px;
background-color: #C8C8D0;
color: #000;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
}
h1 {
padding: 0;
margin: 0;
text-align: center;
font-size: 2em;
letter-spacing: 10px;
}
h2, h3 {
padding: 3px;
margin: 0;
background-color: #B5BECE;
border-bottom: 1px solid #000;
font-weight: 900;
font-size: 100%;
text-align: left;
}
div#wrapper {
padding: 10px;
margin: 0 auto;
height: 100%;
background-color: #8F9399;
}
div.mhead_mfoot {
background-color: #EEE;
border: 1px solid #000;
text-align: center;
margin-bottom: 10px;
padding: 3px 0;
clear: both;
text-align: center;
}
div#genlinks ul {
padding: 0;
margin: 0;
list-style-type: none;
}
div#genlinks ul li {
padding: 0;
margin: 0;
display: inline;
}
/* Start Left Side */
#leftside {
float:left;
width:79%;
text-align:left;
}
div.container {
border:1px solid black;
margin-bottom:10px;
background-color: #EEE;
}
div.container p {
padding:3px;
}
div.footer {
padding: 3px;
border-top:1px solid black;
text-align: right;
}
/* Start Right Side */
#rightside {
float: right;
width: 19%;
text-align: left;
}after some further looking into it, I've found that your background color definition is breaking the border... not sure why though...There's an EditCSS plugin with Firefox?!
Why, by golly you're right, Sam! I removed the offending CSS, and the border is gone... how strange.yes its quite beautiful (EditCSS)... It doesn't get much better than css on the fly...
Paul, perhaps you should report this to bugzilla, you're markup was perfectly correct, it appears to be a glitch in gecko...Wow, does the EditCSS thing come standard? Or with the WebDev extension?
Hmmm... you really think I should?
It seems the background style and the padding style didn't mix.
Anyhoo, I solved the problem by setting a height for the <div>, instead of padding, and used the good ol' HTML entity for a space, to get that padding on the side.
Thanks to everyone for their input, and if anyone solves this problem any other way, so I don't have to get rid of my padding?editcss (<!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#editcss">http://texturizer.net/firefox/extensions/#editcss</a><!-- m -->)
only 13kb...
as to the bug, perhaps you should wait for input from fredmv/pryo/vladdy, see if they catch something we didn't, but As far as I can tell its a bug...Awesome! I shall check this EditCSS thing out. One question, though: is it available for FB?
Alright, I shall wait! Thanks a lot for your help.
Not sure, I know it doesn't work with regular moz, but I believe it should be compatible with fb. if not, check out Edit Styles (<!-- m --><a class="postlink" href="http://www.squarefree.com/bookmarklets/webdevel.html#edit_styles">http://www.squarefree.com/bookmarklets/ ... dit_styles</a><!-- m -->) the mozilla bookmarklet it was based off...Not sure exactly why this is happening, probably a bug. However, it appears to be the font-size you set for your body. Setting it to 81% made everything ok again. Even better, you can set it to small, and it's all good.
Oh, and yes, Edit CSS rocks. Totally.Pyro, man... I would give ya a hug!
Works like a charm.lol... 
Originally posted by pyro
Oh, and yes, Edit CSS rocks. Totally.
Yes, and its even better now that its built into the latest webdev extention
If you visit this site (<!-- m --><a class="postlink" href="http://pauljunior.no-ip.com/layouts/layout3/">http://pauljunior.no-ip.com/layouts/layout3/</a><!-- m -->), you'll see that the second box down on the left (marked "Update 2") has no bottom border in Gecko browsers. Looks fine in IE and Opera. I really have no idea what's wrong here; CSS and XHTML validate, and I can't see anything that I missed.
If the site doesn't load, which it may not since it's off my 'puter on a 56K, I've attached an image, showing the problem. Lemme know if I should attach the code as well.Yeah, I've noticed the same affect on some pages I've made and I haven't found an explanation.Originally posted by toicontien
Yeah, I've noticed the same affect on some pages I've made and I haven't found an explanation.
No explanation?! Aaaahhhhh!!!
Well that sure ruins my whole night, crap. Well at least I know I'm not alone, thanks.
not sure what the problem was, but i was playing around with the edit css plugin on firefox, and this seems to have fixed it (I don't know that I even made any changes, but this got the border showing)...body {
padding: 0;
margin: 10px;
background-color: #C8C8D0;
color: #000;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
}
h1 {
padding: 0;
margin: 0;
text-align: center;
font-size: 2em;
letter-spacing: 10px;
}
h2, h3 {
padding: 3px;
margin: 0;
background-color: #B5BECE;
border-bottom: 1px solid #000;
font-weight: 900;
font-size: 100%;
text-align: left;
}
div#wrapper {
padding: 10px;
margin: 0 auto;
height: 100%;
background-color: #8F9399;
}
div.mhead_mfoot {
background-color: #EEE;
border: 1px solid #000;
text-align: center;
margin-bottom: 10px;
padding: 3px 0;
clear: both;
text-align: center;
}
div#genlinks ul {
padding: 0;
margin: 0;
list-style-type: none;
}
div#genlinks ul li {
padding: 0;
margin: 0;
display: inline;
}
/* Start Left Side */
#leftside {
float:left;
width:79%;
text-align:left;
}
div.container {
border:1px solid black;
margin-bottom:10px;
background-color: #EEE;
}
div.container p {
padding:3px;
}
div.footer {
padding: 3px;
border-top:1px solid black;
text-align: right;
}
/* Start Right Side */
#rightside {
float: right;
width: 19%;
text-align: left;
}after some further looking into it, I've found that your background color definition is breaking the border... not sure why though...There's an EditCSS plugin with Firefox?!
Why, by golly you're right, Sam! I removed the offending CSS, and the border is gone... how strange.yes its quite beautiful (EditCSS)... It doesn't get much better than css on the fly...
Paul, perhaps you should report this to bugzilla, you're markup was perfectly correct, it appears to be a glitch in gecko...Wow, does the EditCSS thing come standard? Or with the WebDev extension?
Hmmm... you really think I should?
It seems the background style and the padding style didn't mix.
Anyhoo, I solved the problem by setting a height for the <div>, instead of padding, and used the good ol' HTML entity for a space, to get that padding on the side.
Thanks to everyone for their input, and if anyone solves this problem any other way, so I don't have to get rid of my padding?editcss (<!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#editcss">http://texturizer.net/firefox/extensions/#editcss</a><!-- m -->)
only 13kb...
as to the bug, perhaps you should wait for input from fredmv/pryo/vladdy, see if they catch something we didn't, but As far as I can tell its a bug...Awesome! I shall check this EditCSS thing out. One question, though: is it available for FB?
Alright, I shall wait! Thanks a lot for your help.
Not sure, I know it doesn't work with regular moz, but I believe it should be compatible with fb. if not, check out Edit Styles (<!-- m --><a class="postlink" href="http://www.squarefree.com/bookmarklets/webdevel.html#edit_styles">http://www.squarefree.com/bookmarklets/ ... dit_styles</a><!-- m -->) the mozilla bookmarklet it was based off...Not sure exactly why this is happening, probably a bug. However, it appears to be the font-size you set for your body. Setting it to 81% made everything ok again. Even better, you can set it to small, and it's all good.Oh, and yes, Edit CSS rocks. Totally.Pyro, man... I would give ya a hug!
Works like a charm.
lol... Originally posted by pyro Oh, and yes, Edit CSS rocks. Totally.
Yes, and its even better now that its built into the latest webdev extention