[RESOLVED] [CSS] - What the ****?

**Zeuz** · Jan 26th, 2010, 11:49 AM

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>&nbsp;</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?

**techgnome** · Jan 26th, 2010, 11:51 AM

huh? You're not making any sense.

-tg

**Zeuz** · Jan 26th, 2010, 11:53 AM

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.

**techgnome** · Jan 26th, 2010, 11:59 AM

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

**Zeuz** · Jan 26th, 2010, 12:06 PM

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.

**kfcSmitty** · Jan 26th, 2010, 12:11 PM

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.

**SambaNeko** · Jan 26th, 2010, 12:16 PM

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;
}

**kfcSmitty** · Jan 26th, 2010, 12:20 PM

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

**Zeuz** · Jan 26th, 2010, 12:24 PM

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.

**SambaNeko** · Jan 26th, 2010, 12:40 PM

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.

**kfcSmitty** · Jan 26th, 2010, 12:43 PM

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.

*edit* Seems you already did the looking into. Damn you're fast.

**SambaNeko** · Jan 26th, 2010, 12:46 PM

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...

**kfcSmitty** · Jan 26th, 2010, 12:56 PM

I'm using "border: 0px;," not "border: 0;." Does that make a difference for you?

**SambaNeko** · Jan 26th, 2010, 01:16 PM

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>&nbsp;</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;".

**kfcSmitty** · Jan 26th, 2010, 01:59 PM

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.

**SambaNeko** · Jan 26th, 2010, 02:16 PM

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.

**MartinLiss** · Jan 27th, 2010, 07:48 PM

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.

Thread: [RESOLVED] [CSS] - What the ****?

Thread Tools

Display

[RESOLVED] [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [CSS] - What the ****?

Re: [RESOLVED] [CSS] - What the ****?

Re: [RESOLVED] [CSS] - What the ****?

Re: [RESOLVED] [CSS] - What the ****?

Re: [RESOLVED] [CSS] - What the ****?

Re: [RESOLVED] [CSS] - What the ****?

Re: [RESOLVED] [CSS] - What the ****?

Posting Permissions