Stylesheets - Big Gaps where there is an <h3></h3> tag

Author

Big Gaps where there is an <h3></h3> tag

Momomo

2007-07-05, 6:17 pm

Hi,

in my asp.net application where ever I have <h3> or for that matter
<h
anything> there is a big gap on the bottom and top of the section
before and after the tag. Does anybody know why? my css file is
defined as

#content {
position: relative;
float: left;
width: 800px;
text-align: left;
padding-right:5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left:5px;
border: solid 1px #445555;
border-right:solid 3 #445555;
border-bottom:solid 3 #445555;

}

#content h1,h2,h3,h4,h5,h6 {
color: #455;

andrew

2007-07-05, 6:17 pm

On 2007-07-05, Momomo <le_mo_mo@yahoo.com> wrote:
> in my asp.net application where ever I have <h3> or for that matter
><h
> anything> there is a big gap on the bottom and top of the section
> before and after the tag. Does anybody know why? my css file is
> defined as

[...]
>
> #content h1,h2,h3,h4,h5,h6 {
> color: #455;

Are you not tempted to modify padding and margin for the above?

Andrew

--
Andrew's Corner
http://people.aapt.net.au/~adjlstrong/mutt.html

Jim Moe

2007-07-05, 6:18 pm

Momomo wrote:
>
> in my asp.net application where ever I have <h3> or for that matter
> <h anything> there is a big gap on the bottom and top of the section
> before and after the tag. Does anybody know why?
>
No. You gave us no information. How about an URL to a test case?
What does "a big gap" mean? 2px? 50em? What have you defined as the
margin and padding for the header elements?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Momomo

2007-07-05, 6:18 pm

Sorry if I did not provided the information you need. the layout.css
is defined as

body {
margin: 0;
padding: 0;
border: 0;
}
#container {
margin: 0;
padding: 0;
border: 0;
}
#masthead {
margin: 0;
padding: 0;
border: 0;
}
#navigation {
margin: 0;
padding: 0;
border: 0;
}
#content {
margin: 0;
padding: 0;
border: 0;
}
#sidebar {
margin: 0;
padding: 0;
border: 0;
}
#footer {
margin: 0;
padding: 0;
border: 0;
}
..float_right{
float:right;
}

and theme1.css is defined as:
@import url("layout.css");
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-attachment: scroll;
background-color: #b9cfa1;
background-image: url("../images/background.gif");
background-position: top left;
background-repeat: repeat-x;
}
#container {
width: 100%;
margin-top: 57px;
border-bottom: 2px solid #363636;
background-color: #FFFFFF;
}
#masthead {
width: 800px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
padding-top: 15px;
padding-bottom: 15px;
}
#navigation {
width: 800px;
margin-right: auto;
margin-left: auto;
clear: both;
overflow: hidden;
}
#page_content {
position: relative;
width: 800px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border:1px #445555;
}
#content {
position: relative;
float: left;
width: 800px;
text-align: left;
padding-right:5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left:5px;
border: solid 1px #445555;
border-right:solid 3 #445555;
border-bottom:solid 3 #445555;
}
#sidebar {
float: right;
width: 330px;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
#footer {
clear: both;
width: 800px;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
text-align: left;
padding-top: 10px;
}
/* Masthead Styles */
#masthead h1 {
font-weight: normal;
color: #261;
text-transform: uppercase;
display: inline;
}
#masthead h3 {
font-weight: normal;
color: #708090;
display: inline;
margin-top: 3.5%;
margin-left: 10%;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: auto;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
}
#navigation a {
text-decoration: none;
color: #fff8dc;
display: block;
margin: 0 1px;
padding-left:10px;
padding-right:10px;
padding-top:2px;
padding-bottom:2px;
text-align:right;
border: 1px solid #708090;
background-color: #8fbc8f;
}
#navigation a:hover {
text-decoration: none;
color: #261;
background-color: #ccc;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
color: #455;

}
#content img {
padding: 5px;
border: 1px solid #708090;
}
/* Sidebar Styles */
#sidebar p {
color: #555;
}
#sidebar img {
float: right;
margin-bottom: 5px;
margin-left: 5px;
}
/* Footer Styles */
#footer p {
font-size: 0.85em;
color: #c4c4c4;
}
#footer a {
color: #708090;
text-decoration: underline;
}
#footer a:hover {
color: #2f4f4f;
text-decoration: none;
}
/* Link Styles */
a {
color: #261;
text-decoration: underline;
}
a:hover {
color: #708090;
text-decoration: underline;
}
..style_bold {
font-weight: bold;
}
..style_italic {
font-style: italic;
}
#UserName {
width: 900px;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-align:right;
color:#226611;
font-weight:600;
}
..GridViewHeader
{

color: #000000;
background-color: #CCCCCC;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
}
tr.GridViewHeader th
{
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
}

Jukka K. Korpela

2007-07-05, 6:18 pm

Scripsit Momomo:

> Sorry if I did not provided the information you need. the layout.css
> is defined as

This is hopeless. Give us a URL, or stay tuned to being ignored in future.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jim Moe

2007-07-06, 6:19 pm

Momomo wrote:
> Sorry if I did not provided the information you need. the layout.css
> is defined as
>
> [...]
> #masthead h3 {
> [...]
> margin-top: 3.5%;
> }
>
The "big gaps" are the default margins/padding the browser defines. The
only other spacing is the margin-top for "#masthead h3" which is 3.5% of
the viewport's height, a variable quantity.
If you do not like the browser's choice of spacing for the <Hn>
elements, define your own.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Momomo

2007-07-16, 6:19 pm

Hi,

Take a look at http://samples.tcsmo.com Just by adding the "Content"
div around a control I get gaps around the menu items. I have the tag
on top then control without the DIV and then the control with <DIV>
any ideas?

Thanks,

Andy Dingley

2007-07-16, 6:19 pm

On 16 Jul, 13:12, Momomo <le_mo...@yahoo.com> wrote:

> Take a look athttp://samples.tcsmo.com

ASP error from that page.

Three tries. Plonk.