Gaps forming above and below banner

[Bradz]

My problem is that I have gaps above and below my banner.

I’ve simplified this problem to two cases – a JPG banner and a Flash banner. Each has it’s problems in IE7 and in FF3. With the JPG banner, IE leaves a large gap over the banner, and a small gap under the banner; FF leaves a small gap under the banner.

Here is a link to the Jpg Banner example: http://www.3dcognition.com/BannerJpgBug.htm

With the Flash banner, IE leaves a large gap over the banner, and FF leaves a small gap over the banner, and generates a small gap under the banner if the browser is expanded to about 1100 pixels wide.

Here is a link to the Flash Banner example: http://www.3dcognition.com/BannerFlashBug.htm

I know I can fix this problem by going to absolute positioning, but I don’t want that, and my design for the moment is liquid / centered. I’ve tried adding a wrapper which did not seem to help.

Thanks for any help/advice. Below is the CSS and HTML code:

CSS Code:

Code:

/* CSS Document */

body {
background-color: #000000;
}

#header
{
padding: 0px;
background-color: #000000;
display: block;
overflow: hidden;
margin-top: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#topmenu{
float: left;
margin: 0px 4px 4px 4px;
padding: 8px 4px 4px 4px;
overflow: hidden;
}

div.topmenu {
font-size: 14px;
margin: 0px 0px 4px 0px;
padding: 8px 4px 8px 5%;
width: 100%;
background-color:#999999;
overflow: hidden;
}

div.topmenu a {
display: inline;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
margin: 0px 0px 0px 8%;
padding: 0px 0.5% 2px 0.5%;
color: black;
border-style: outset;
border-color: #94E3FF #94E3FF #94E3FF #94E3FF;
border-width: 4px 4px 4px 4px;

}

div.topmenu a:link{
background: #6FBCF3;
}

div.topmenu a:visited{
background: #6FBCF3;
}
div.topmenu a:hover{
background: #4A78FC;
letter-spacing: 2px;
}

div.topmenu h4{
padding: 0px;
margin: 0px;
}

HTML Code for Jpg version:

Code:

Theory
Tutorials
Services
Products
Links

HTML Code for Flash version:

Code:

Theory
Tutorials
Services
Products
Links

[TheDoc]

Add this to the beginning of your CSS file:

* { margin:0; padding:0; }

Learn more about CSS resets:

http://www.google.com/search?client=saf … 8&oe=UTF-8

[Bradz]

Thanks, Doc. I have tried reset before, and tried the MeyerWeb preset again on your recommendation. I have posted it below in case anyone else is interested.

Your excerpted margin and padding reset did not help, but the overall MW preset did actually solve part of the problem. Here’s what the gap under the banner looks like:
[attachment=0]BannerJpgBugIE7.gif[/attachment]:

Here’s what is going on specifically, with links:

The JPG version of the Banner: Perfect in Firefox 3, and still has a gap underneath the Banner in IE7.

http://www.3dcognition.com/BannerJpgBug.htm

The Flash version of the Banner: Is basically fine in IE7, and still forms a gap under the Banner when the browser is expanded to around 1100 pixels in width in Firefox 3.

http://www.3dcognition.com/BannerFlashBug.htm

Once again, appreciate your help, and very interested if there are any other tips out there to tighten these banners up.

/ Brad

Code:

/* Beginning of MeyerWeb Reset – http://meyerweb.com/eric/tools/css/reset/*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of MeyerWeb Reset */

[Bradz]

Well, thanks to the article by RobskiWarrior on Validation (in this forum), I now have a working Flash version of the Banner. View Robs article here: https://css-tricks.com/forums/viewto … f=2&t=3716

Here’s the link to the W3 Validator: http://validator.w3.org/

I did a validation of my Jpg version of the banner, and found an error – had to delete the final / in the css link. Yet the gap problem persists below the banner.

Then I did a validation on the Flash version of the banner and had several errors – it turns out that embedding a Flash file does not authenticate in HTML 4.1. So I used this method:

http://www.alistapart.com/articles/flashsatay

So that was an eye-opener, and now the Flash version of my banner actually works. Read about it at the link above, I used it bare-bones on my lightweight flash file, but if you have a bigger flash movie you will want to call it with a smaller flash movie. I find it fascinating that so many of us are doing Flash wrong according to HTML 4.1 standards.

Here’s the fixed Flash version using the Satay method: http://www.3dcognition.com/BannerFlashBugSatay.htm

But I am still interested if anyone has a clue as to why the Jpg banner is not working.

/ Brad

[Bradz]

The Flash gap problem has been solved (read previous post for a way to incorporate Flash into HTML that holds to HTML 4.1 standards). Interesting, because I suspect 95% of us automatically use the Flash embed method and that dog don’t hunt.

Still interested if anyone has a clue as to why the JPG banner has a gap when viewed in IE7. See code and link on first post.

Link to problem page: http://www.3dcognition.com/BannerJpgBug.htm

Thanks,
/Brad

(CSS Code below):

Code:

/* Beginning of MeyerWeb Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of MeyerWeb Reset */

body {
background-color: #000000;
}

#header
{
padding: 0px;
background-color: #000000;
display: block;
overflow: hidden;
margin-top: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#topmenu{
float: left;
margin: 0px 4px 4px 4px; /*was 0 4 4 4px before*/
padding: 8px 4px 4px 4px; /*top pad of 8 critical for ie7 to show entire button, 4 deletes top border of button*/
overflow: hidden;
}

div.topmenu {
font-size: 14px;
margin: 0px 0px 4px 0px;
padding: 8px 4px 8px 5%;/*top pad of 8 (8 4 8 4)critical for ie7 to show entire button, 4 deletes top border of button*/
width: 100%;
background-color:#999999;
overflow: hidden;
}

div.topmenu a {
display: inline; /*overlap menu possibly okay in ie7 if display inline not triggered in div.topmenu above*/
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
text-align: center;
letter-spacing: 1px; /*letter spacing was 1px*/
margin: 0px 0px 0px 8%; /*ie7 overlaps top menu when browser window too narrow, beware*/
padding: 0px 0.5% 2px 0.5%;
color: black;
border-style: outset;
border-color: #94E3FF #94E3FF #94E3FF #94E3FF;
border-width: 4px 4px 4px 4px;

}

div.topmenu a:link{
background: #6FBCF3;
}

div.topmenu a:visited{
background: #6FBCF3;
}
div.topmenu a:hover{
background: #4A78FC;
letter-spacing: 2px;
}

div.topmenu h4{
padding: 0px;
margin: 0px;
}

(HTML Code below):

Code:

Theory
Tutorials
Services
Products
Links

[Author]

Posts