line positions question ... 1

[fauntleroy]

Hi ... I'm trying to sandwich a horizontal menu with two horizontal lines.

http://millnergroup.com/MillnerSite09/main.html

On a MAC in Firefox, the lines look fine. But on a PC in Vista, the top line travels up much higher. There's too much space between the top line and the menu.

Here's two screenshots ...

http://millnergroup.com/MillnerSite09/Mac.jpg

http://millnergroup.com/MillnerSite09/PC.jpg

Any help would be appreciated. Thanks.


@charset "UTF-8";
.menutext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
}
.tinytext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: #999999;
}
.blueheader {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #007AC1;
font-weight: 300;
line-height: 33px;
}
.bodytext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 88%;
line-height: 133%;
color: #666666;
}
html {
overflow: scroll;
min-height: 500px;
height: 100%;
margin-bottom: 1px;
}

 

[fauntleroy]

I think this is what I needed to post for the css ...

style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url();
background-color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto;
text-align: center;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.oneColFixCtrHdr #header {
background-color: #FFFFFF;
padding-top: 0;
padding-right: 55px;
padding-bottom: 0;
padding-left: 55px;
border-top-style: solid;
border-color: #FFCC99;
outline-width: thick;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
background-color: #FFFFFF;
padding-top: 1px;
padding-right: 0;
padding-bottom: 1px;
padding-left: 0;
border-top-width: thin;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: thin;
}
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
padding-top: 0;
padding-right: 55px;
padding-bottom: 0;
padding-left: 55px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
<link href="millner.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
color: #999999;
text-decoration: none;
}
a:active {
color: #666666;
text-decoration: none;
}
-->
</style>

 

[Vragabond]

I gather that when you say PC and Vista, you mean IE, most likely IE7. Because on my FF in XP, it looks exactly like on your MAC.

You're a victim of IE's making space for the font. Your navigation is inside an h1 tag, which means that the text inside it would be very large. However, you only have a span inside, which defines a much smaller text. Most browsers realize this and render the h1 tag small, where IE likes to keep the space for the default big h1 font. Reducing the font size of the h1 will help rid of the gap. You can reduce it all the way to 0, if nothing else helps.

That said, making navigation an h1 (even more so when there's another h1 present on the page) is a bad idea. It would be much better to wrap the navigation in an unordered list and style that. It would also work better cross-browser.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[fauntleroy]

Wow, you nailed it Vragabond ... Thanks!! I understand what you mean about the h1 font cause when I create a new page in Dreamweaver (from their templates), it puts in some of that large text as a placeholder.

I'll have to go back to Lynda.com and study your solution about using a styled unordered list ... but for the moment, I can forge ahead with the site.

Thanks again!