[RESOLVED] [CSS] - What the ****?
Code:
@charset "utf-8";
#Header {
height: 100px;
width: 600px;
margin: auto;
text-align: center;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: #000;
}
#NavBar {
height: auto;
width: 600px;
margin: auto;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
background-color: #FFF;
clear: none;
float: none;
overflow: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
clip: rect(auto,auto,auto,auto);
}
#Body {
height: 200px;
width: 600px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
margin: auto;
text-align: center;
background-color: #CCC;
}
#Footer {
height: auto;
width: 600px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: auto;
text-align: center;
}
#Wrapper {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="ETStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
color: #000;
font-family: Tahoma, Geneva, sans-serif;
font-size: small;
}
body {
background-color: #333;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
-->
</style></head>
<body>
<div id="Wrapper">
<div id="Header"><img src="IMG/Logo.png" width="600" height="100" /></div>
<div id="NavBar">
<p><?php include("INC/Navi.php"); ?></p>
</div>
<div id="Body">
<p> </p></div>
<div id="Footer"><img src="IMG/Footer.png" width="600" height="30" /></div></div>
</body>
</html>
How i can put no space to this hole?
http://img519.imageshack.us/img519/1...01064751pm.png
Re: [CSS] - What the ****?
huh? You're not making any sense.
-tg
Re: [CSS] - What the ****?
Quote:
Originally Posted by
techgnome
huh? You're not making any sense.
-tg
Don't post any useless like this for gaining one post.
E: There is no better explanation what is this.
Or i don't know how to adjective this.
Re: [CSS] - What the ****?
Woah... hang on there sparky... that wasn't for the sake of gaining a post.... if I wanted to do that, there are plenty of other threads where I could do that. If you don't want my help, then fine, say so and I'll move on. No skin off my nose.
How ever... I READ your post THREE times, and I could not make heads or tails out of it. You post doesn't make sense to me. What "no space" in what "hole"? The information you've supplied is insufficient to properly describe the problem in order for me to help.
But, if you don't want my help, fine.
-tg
Re: [CSS] - What the ****?
Quote:
Originally Posted by
techgnome
Woah... hang on there sparky... that wasn't for the sake of gaining a post.... if I wanted to do that, there are plenty of other threads where I could do that. If you don't want my help, then fine, say so and I'll move on. No skin off my nose.
How ever... I READ your post THREE times, and I could not make heads or tails out of it. You post doesn't make sense to me. What "no space" in what "hole"? The information you've supplied is insufficient to properly describe the problem in order for me to help.
But, if you don't want my help, fine.
-tg
You can do what ever you want.
Don't help me.
My mood is currently pissing of this ... css. -.-
I solve it sooner or later myself.
Re: [CSS] - What the ****?
All of your border settings are the issues.
If you have padding around an element then always check your margins, padding and borders.
When you make a post with "What the ****" in the title, you're acting very immature and will not receive help very quickly in these forums. Everyone here is attempting to help you and you giving snide remarks when someone asks for clarification will most likely get you banned from this site.
Also, when in doubt -- If you see a guy with a ton of posts and reputation and you have next to no posts and reputation, I would recommend listening to what they say. They've been here a long time and know what they're doing.
Re: [CSS] - What the ****?
The border settings....?
The gap is due to top and bottom margins on p elements that are browser-default. Margins can extend outside of their parent containers in some conditions. Try adding this to your CSS:
Code:
p{
margin:0 0 10px 0;
}
Re: [CSS] - What the ****?
Border settings as in all of this
Code:
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
If you change all of that to something simple like
Code:
border: 1px solid black;
or
border: 0px;
It fixes the issue
Re: [CSS] - What the ****?
Quote:
Originally Posted by
kfcSmitty
All of your border settings are the issues.
If you have padding around an element then always check your margins, padding and borders.
When you make a post with "What the ****" in the title, you're acting very immature and will not receive help very quickly in these forums. Everyone here is attempting to help you and you giving snide remarks when someone asks for clarification will most likely get you banned from this site.
Also, when in doubt -- If you see a guy with a ton of posts and reputation and you have next to no posts and reputation, I would recommend listening to what they say. They've been here a long time and know what they're doing.
I don't care about reputation or posts amount.
I doesn't give anything if have millions of post in the forum.
That would be more enjoyable if someone would delete every of my posts so anyone won't see my stupidness and what i have asked for being dumbass.
It can be true that i can have ban, but i don't lose anything so let's look do i get it or no.
And the secondary i know it that i broke rules of the forums for writing "What the ..." rules says that subject must be more adjective.
E: And thank you for this CSS help.
Re: [CSS] - What the ****?
Quote:
Originally Posted by
kfcSmitty
If you change all of that to something simple like
Code:
border: 1px solid black;
or
border: 0px;
It fixes the issue
Hmm, it fixes for me with the 1px solid border, but not with the 0px border (the margin on <p> is still an issue). A solid border appears to force the margin inside the div? I suppose so.
Re: [CSS] - What the ****?
Quote:
Originally Posted by
SambaNeko
Hmm, it fixes for me with the 1px solid border, but not with the 0px border (the margin on <p> is still an issue). A solid border appears to force the margin inside the div?
What browser are you using? Both 0px and 1px works for me in Fx 2/3 and IE 7 and 8.
Something worth looking into, though. :thumb:
*edit* Seems you already did the looking into. Damn you're fast.
Re: [RESOLVED] [CSS] - What the ****?
I'm on Firefox 3.5.7, and am getting the same result in IE8. I took his code and replaced every instance of border settings (the block of them you specified) with "border: 1px solid black;" or "border: 0;" - as said, the gap disappeared with the 1px border, but not with the 0 border.
The link I referenced in my previous post seems to explain it with collapsing margins. Though I'm not sure why I'd get a different result in the same browsers you tried...
Re: [RESOLVED] [CSS] - What the ****?
I'm using "border: 0px;," not "border: 0;." Does that make a difference for you?
Re: [RESOLVED] [CSS] - What the ****?
Nope, no difference. Here's what I'm using:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #000;
font-family: Tahoma, Geneva, sans-serif;
font-size: small;
}
body {
background-color: #333;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
@charset "utf-8";
#Header {
height: 100px;
width: 600px;
margin: auto;
text-align: center;
border:0px;
background-color: #000;
}
#NavBar {
height: auto;
width: 600px;
margin: auto;
text-align: center;
border:0px;
background-color: #FFF;
clear: none;
float: none;
overflow: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
clip: rect(auto,auto,auto,auto);
}
#Body {
height: 200px;
width: 600px;
border:0px;
margin: auto;
text-align: center;
background-color: #CCC;
}
#Footer {
height: auto;
width: 600px;
border:0px;
margin: auto;
text-align: center;
}
#Wrapper {
border:0px;
}
-->
</style></head>
<body>
<div id="Wrapper">
<div id="Header"><img src="IMG/Logo.png" width="600" height="100" /></div>
<div id="NavBar">
<p>stub text</p>
</div>
<div id="Body">
<p> </p></div>
<div id="Footer"><img src="IMG/Footer.png" width="600" height="30" /></div></div>
</body>
</html>
You can easily do a find-and-replace-all to change between "border:0px;" and "border:1px solid black;".
Re: [RESOLVED] [CSS] - What the ****?
Yeah so it seems I had added your code and forgot to remove it.
Easy solution to the margins, though, is to float the divs. Floated divs will not collapse.
Re: [RESOLVED] [CSS] - What the ****?
I wouldn't add floats without explicit need of them - they have their own set of issues. And if you want an element centered, floats are counter-productive.
Re: [RESOLVED] [CSS] - What the ****?
Using "bad" words is against our AUP but if a very occasional one slips out it's okay unless you are asked to stop.
Also there is a bit of mild flaming in this thread that I'm glad to see didn't get out of hand because I don't like having to ban people.
