Simple Top Bar Too Tall in IE

@msmith29063Aug 11.2006

I’m just trying to run an 8-pixel high blue bar across the top of my pages. Looks fine in Safari and Firefox. But appears to be 20+ pixels high in IE. Any ideas? Here’s my CSS file. See #header. Thank you for your help!

[CODE]* { font-style: normal; font-weight: normal; text-decoration: none; text-align: left; text-indent: 0; margin: 0; padding: 0 }

body { color: #333; font-size: 1em; font-family: “Myriad Pro”, “Myriad Web”, “Lucida Grande”, “Trebuchet MS”, Tahoma, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff url(“../images/back_scrabble_tiles.jpg”) no-repeat left 9px; padding-right: 0; padding-bottom: 30px; padding-left: 0 }

a { text-decoration: underline }

a:link { color: #369 }

h1 { font-size: 2.4em; letter-spacing: -0.05em; margin-top: 10px; margin-bottom: 20px }

h2 { font-size: 1.8em; margin-top: 20px; margin-bottom: 20px }

h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 20px }

#header { background-color: #276da3; height: 8px; border-bottom: 1px solid #fff }

#content { margin-top: 44px; position: relative; overflow: hidden }

#maincontent { margin-right: 48px; margin-left: 450px }

#maincontent h1 { font-size: 2.4em }

#maincontent h3 { color: #276da3 }

#maincontent b { font-weight: bold }

#maincontent i { font-style: italic }

#maincontent ul { padding: 20px }

#maincontent #photo { float: right }

#contactform { line-height: 1.2 }

#sidebar { width: 404px; float: left }

#sidebar #logo { padding-top: 240px; padding-bottom: 32px; padding-left: 32px }

#sidebar #navigation { margin: 10px 0; padding: 0; width: 400px }

#sidebar #navigation ul { list-style: none }

#sidebar #navigation li a { color: #949576; font-size: 1.2em; font-weight: bold; text-decoration: none; background: #fff; text-align: right; display: block; padding: 8px 10px; height: 20px; border-bottom: 1px solid #e5e7cd }

#sidebar #navigation li a:hover { color: #797a58; background-color: #ebecdd }

#footer { margin: 24px 8% 12px 36%; padding: 12px 0; clear: both }

#footer * { font-size: 0.9em; text-align: center }[/CODE]

to post a comment

CSS

3 Comments(s) _↴

@WebJoelAug 11.2006 — #I suppose that could be made to work, but if it's just a 'blue bar', -why not just make the upper border of a DIV (or lower border of a DIV) do the same thing?

<div style="width:90%; margin:25px auto; height:0; border-bottom:8px solid blue;"></div>

-You have the same thing. 90% the width of any visitor browser, 25-pixels down from the top of the screen, centered, 8-pixels tall, blue.

@msmith29063authorAug 11.2006 — #I'd like to be able to make this work, if possible. It's a 8-pixel blue bar at the top of the screen, with a 1-pixel white border on the bottom of it. Any ideas? Also, here's the markup:

[CODE]<body>
 <div id="header"></div>
 <div id="content">
 <div id="sidebar">
 <div id="logo">
 <a title="Home" href="index.php"><img src="images/logo.gif" alt="Logo" height="85" width="372" border="0"/></a></div>
 <div id="navigation">
 <ul>
 <li><a href="item1.php">Item 1</a></li>
 <li><a href="item2.php">Item 2</a></li>
 <li><a href="item3.php">Item 3</a></li>
 <li><a href="item4.php">Item 4</a></li>
 <li><a href="item5.php">Item 5</a></li>
 <li><a href="item6.php">Item 6</a></li>
 <li><a href="item7.php">Item 7</a></li>
 </ul>
 </div>
 </div>
 <div id="maincontent">
 <h1>Helping Your Business Succeed</h1>
 <h3>Skillful communication is key to any successful business agreement or transaction and, consequently, to profitability. At our firm, we help companies like yours make the connection.</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
 <br/>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 <h2>News &amp; Events</h2>
 <p><b>Date</b><br/>
 Event Information</p>
 </div>
 </div>
 <div id="footer">
 <address>©2006 Copyright Information. All rights reserved.</address>
 </div>
 </body>[/CODE]

@msmith29063authorAug 11.2006 — #Got it. Had to use font-size: 0 for IE. Thanks for your help!

Also in #CSS _↴

[RESOLVED] white-space: pre; and Internet Explorer exit on menu Rounded corners on elements using css?

Success!

Help @msmith29063 spread the word by sharing this article on Twitter...

Tweet This

Simple Top Bar Too Tall in IE

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Simple Top Bar Too Tall in IE

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴