Forum Moderators: not2easy
I have a basic box that contains several divs centered in my page. My middle box has a left/right border that gives the box bounds, and the box after that gives the bottom border. The problem is that in Firefox the bog has a margin drawn top/bottom around the div, but only when I include an element such as <H2>, <P> etc. Wondering if anyone has advice on how to remove this extra space?
Example:
¦ This is some text ¦ (div with borders left/right)
--------------------------- (bottom border div)
Becomes:
¦ This is some text ¦ (style=CBBody)
___________________________ (style=CBBottom)
When I place <h2> around "This is some text".
My page is (validated to be correct):
<!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><title>
Create A Site
</title><link href="/content/css/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CBContainer">
<div id="CBBody">
<h2>some test text</h2></div>
<div id="CBBottom">
</div>
<div id="CBFooter">
<a class="bottomlink" href="/Home/About">about</a>
<a class="bottomlink" href="/Home/Features">features</a>
<a class="bottomlink" href="/Home/Designs">designs</a>
<a class="bottomlink" href="/Home/SearchSite">search a site</a>
<a class="bottomlink" href="/Home/CreateSite?freeTrial=False">create site</a>
<a class="bottomlink" href="/Home/FAQs">FAQs</a>
<a class="bottomlink" href="/Home/Pricing">pricing</a>
<a class="bottomlink" href="/Home/CreateSite?freeTrial=True">free trial</a>
<a class="bottomlink" href="/Home/ContactUs">contact us</a><br/>
<a class="bottomlink" href="/Home/TermsOfUse?freeTrial=True">terms of use</a>
<a class="bottomlink" href="/Home/PrivacyPolicy">privacy policy</a>
</div>
</div>
</body>
</html>
And my css is:
body
{
margin: 0px;
}
div#CBContainer {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
width:850px;
}
div#CBBody {
background-image: url('/Content/Images/background_slice_1px.png');
background-repeat: repeat-y;
width: 830px;
margin-top:0px;
margin-bottom:0px;
}
/** Div for the bottom of the shaded border. */
div#CBBottom {
margin-top:0px;
background-image: url('/Content/Images/bottom_dropshadow.png');
background-repeat: no-repeat;
width: 830px;
height:8px;
padding-left: 10px;
padding-right: 10px;
}
/** home ¦ about ¦ contact etc. area at bottom of page */
div#CBFooter {
text-align:center;
line-height:10px;
}
.bottomlink
{
font-family: Arial;
font-size:11px;
font-style:normal;
color:#808485;
text-decoration:none;
}
Sorry I don't have a live link to show you with, the demo server should be configured shortly in the new year!
Anyone have ideas as to why the space is there?
Thx,
Rob
Have you defined the <h2> or <p> in your CSS. If not do that to see if it clears up the space issue.
Thanks for the response! I have not done that. If I was to do that, I would probably have to do trial and error to find which elements trigger this spacing issue correct? Instead I found the above solution, which seems to resolve the issue for now (fingers crossed).
A question I have on this is, not withstanding my above approach, why would it apply the space outside of the div that contains the H2 (e.g.) as opposed to inside of the div? It seems to me like if the H2 is applying extra margins it would do so it it's element and thus push my left/right borders around it some, instead of applying the space apparently to the container div.
Thx,
Rob
[edited by: RobSil at 9:24 pm (utc) on Dec. 31, 2008]
Define everything and validate both the html and CSS.
Then tweak the problems.
Thanks for the input!
Much neater, more compact, and easier to read, HTML code.
jbin... after reading your post I re-evaluated a few pages css and noticed that a lot of them do just what you said and define the basic settings like margin's/padding font etc. for every element first then customize as needed. I'm new enough to CSS I didn't notice that trick before now. :(
Thanks a bunch for the input... constructive responses really help the learning. :)
[edited by: RobSil at 9:49 pm (utc) on Dec. 31, 2008]
Set the margins instead.
Something like
div#CBFooter a {margin: 2px, 20px, 2px, 20px;}Likewise you don't need to repeat
class="bottomlink"div#CBFooter a { ... }
There is an introduction to css in the Css Crash Course [webmasterworld.com] you might find helpful, and also check oput the forum library. Unfortunately "best pratise" is a matter of opinion, but many here advocate valid, usable, accessible, semantic code. There are loads good sites, but I'd recommend that if a site advocates the use of "hacks", or has copmplaints about lots of browser "issues", then question its relevance - hacks aren't necesary, and in recent times it's been discovered there are just a few "issues" (although they have a range of symptoms).
If I was to do that, I would probably have to do trial and error to find which elements trigger this spacing issue correct? Instead I found the above solutionThe solution is a called a "global reset". There are less variation between modern browsers now, but I still think a good idea to use. Appendix 4 [w3.org] of the recomendations lists common defaults so you don't have to figure it out yourself.
Your links are really list - so I recommend you use one. Here is a basic example with comments to get you going (move the css from the inline sheet into your external file)
<!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><title>Create A Site</title>
<style type="text/css">
/*global reset*/
* {
margin:0;
padding:0;
border:0;
}#CBFooter {
width: 830px;
margin: 0 auto; /* center the menu horizontally*/
text-align: center; /*distribute the li */
}#CBFooter li {
display:inline;
margin:0 4px; /* shorthand to create horizontal space between each link. */
line-height: 25px; /*center the link text vertically - must be at least font size*/
}#CBFooter a {
font-family: Arial, "sans serif";
font-size:11px;
color:#808485;
padding: 4px; /* create space around the link text to make it easier to hit the clickable area */
text-decoration:none; /*remove underline*/
}#CBFooter a:hover {
background-color: silver; /* for testing*/
}
</style>
</head>
<body>
<ul id="CBFooter">
<li><a href="/Home/About">about</a></li>
<li><a href="/Home/Features">features</a></li>
<li><a href="/Home/Designs">designs</a></li>
<li><a href="/Home/SearchSite">search a site</a></li>
<li><a href="/Home/CreateSite?freeTrial=False">create site</a></li>
<li><a href="/Home/FAQs">FAQs</a></li>
<li><a href="/Home/Pricing">pricing</a></li>
<li><a href="/Home/CreateSite?freeTrial=True">free trial</a></li>
<li><a href="/Home/ContactUs">contact us</a></li>
<li><a href="/Home/TermsOfUse?freeTrial=True">terms of use</a></li>
<li><a href="/Home/PrivacyPolicy">privacy policy</a></li>
</ul>
</body>
</html>
Rob
