Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Here's the site. Under the menu there's a content div with a padding of 5px. In that content div is "Register". In IE, there's a huge space between the menu and Register. Why does it do that and how can it be fixed?
I noticed when I took the paragraph tags out above the menu, the content was where it was supposed to be. When I placed break tags there instead it still messed up, although not as much. They won't be there once we have a logo, but I'd hate there to be a likely problem later. -
I haven't looked at your code.
But if I'am right it's because you havent declared the margin and padding to a value. IE adds padding/margin by default. So if you haven't set them to a value, IE will give them the default value. Instead of repeating all the padding: a b c d, margin: a b c d, you can put something like: *{ margin:0; padding:0; } on the top to set all your selector by default to zero.
Try setting your paragraph selector's padding and margin to 0, you wil understand what I mean above.
hope that helps, good luck :) -
This is actually remarkably similar to the problem Calvin had in this thread:
http://www.cssbeauty.com/skillshare/comments.php?DiscussionID=853
At any rate, this'll fix it:
#navContainer
{
float: none;
}
#navContainer:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#navContainer {display:inline-block;}
/* Hide from IE Mac \*/
#navContainer {display:block;}
/* End hide from IE Mac */
Again, all but the first rule can be replaced by putting something like <div style="clear:both;"></div> after the ul if you want to go the markup route. -
Jerfer-
here is your html page:
I put a <p> tag around the register
put some breaks before the #navContainer ( i assume you will put your logoContaciner here )
<body>
<div id="container">
<br>
<br>
<div id="navContainer">
<ul>
<li><a href="/?show&phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Home</a></li>
<li><a href="/register.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Register</a></li>
<li><a href="/board/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Board</a></li>
<li><a href="/blogs/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Blogs</a></li>
<li><a href="/groups/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Groups</a></li>
</ul>
</div>
<div id="content">
<p>Register</p>
</div>
</div>
</body>
i the css I added a p{} with 0px padding, 0px margin
in the #content{} just float it left and your issue is fixed
body {
/*margin:0;
padding:0;*/
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
color:#000000;
background-color:#EFEBDF;
}
p{
margin:0;
padding:0;
}
a {
color:#EFEBDF;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#container {
margin:0 auto;
width:790px;
height:500px;
text-align:left;
border:1px solid #555555;
background-color:#FFFFFF;
}
#logoContainer {
height:100px;
}
#navContainer {
float:left;
width:100%;
border-top:1px solid #555555;
border-bottom:1px solid #555555;
background-color:#899796;
}
#navContainer ul {
margin:0;
padding:0;
list-style:none;
}
#navContainer ul li {
display:inline;
margin:0;
padding:0;
}
#navContainer ul li a {
float:left;
padding:5px 8px 5px 8px;
font-weight:bold;
}
#content {
float:left;
margin:5px;
padding:0;
background-color:#990000;
}
.columnHeader {
padding:5px;
color:#FFFFFF;
background-color:#655F56;
}
Calvin is right however at the top of your css page use the universal selector
*{
padding:0px
margin:0px;
} -
Adding float:left to #content fixed it, but now it's pushing/running out of the container since I have to put width:100% on #content because the div didn't go all the way across
-
set the width to 780px unless you are planning to keep that border around there then set it to 778px
-
Oh, so the padding and border is what caused it. Thanks guys.
-
yes but your should really put the border style in the css or if you you decide to update that border one day it will be a lot of work cause you'll have to update it on every page as opposed to one page stay away from inline styles
so in the #content div
#content{
border:1px solid #FF0000;
}
1 to 8 of 8