Header size gone wild plus [Archive]

unlime

04-19-2007, 10:49 AM

This looks fairly good in IE 6 except I can't get ridded of the space above the space above and below the background image in the main content part and can't get the text in the header centered.
My real problem is when I veiw it in FF the header is out of control. any suggestions? Also how would I keep the text in the <p> from extending past the indent after it wraps?
Thanks for any help.

<title></title>
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {100%;}
body {font: 12px verdana,geneva,lucida,arial,sans-serif;
line-height:1.5;
min-width:720px;
text-align:center;
color:#000;
padding:0;
margin: 0;}
#outterborder{border: double 5px #06c;
margin:0;
padding:0;
width:90%;
margin-left: auto;
margin-right: ;}
#header {font-size: 36px;
background-color: #06c;
height:100px;
vertical-align: absmiddle;
color:#fff;
padding-top: 15px;}
#navbar, #footer, ul li { font-size: 11px;
display:inline;
list-style-type: none;
padding-right: 10px;
vertical-align: middle;}
#navbar {
height:35px;
background-color:#036;
font-size:bold;
line-height:35px;
color:#fff;
border-top:solid 2px #9cf;
border-bottom: solid 2px #9cf;
width: 100%;
margin 0;
padding:0;
}

#footer {
height:50px;;
padding-top: 20px;
letter-spacing:1px;
margin:o;
}

#maincontent {
padding:0;
margin:0px;
background-image: url(sidebar.jpg);
background-position:left top;
background-repeat: repeat-y;
text-align: justify;
text-indent: 200px;}

ol { list-style-type: circle ;}

a:link { color:#fff;
font: bold;
font-size: 16px;
text-decoration:none;}
a:hover, a:active {color:#fff}
</head>
</style>
<body>
<div id="outterborder" width="720px" cellspacing="0" align="center">

<div id="header">
<h1><img src="square_circle_logo.jpg" height="100px width="10px" align="left" alt="Square Records"/>Square Circle Records</h1>
</div>
<div id="navbar">
<ul>
<li> <a href="/">Home</a>&nbsp &#124</li>
<li> <a href="/">About Us</a>&nbsp &#124</li>
<li> <a href="/">Our Products</a>&nbsp &#124</li>
<li> <a href="/">Contact Us</a></li>
</ul>
</div>

<div id="maincontent">
<h3>Welcome to Square Circle Records</h3>

<p>Serving XXXXXXXXXXX, Square Circle Records now moves into the 21st century with our new online store! We have a great selection of products, with our full line of in-store items available to choose from. </p>

<h3>See what else we have in store on our new site:</h3>
<ol>
<li> Our Products</li>
<li> About Us</li>
<li> Questions? Contact Us</li>
</ol>

</p>
</div>
<div #footer>
<ul>
<li>&copy 2007 Square Circle Records &nbsp &#124</li>
<li>XXXXXXX &nbsp &#124</li>
<li>734-555-5555 &nbsp &#124</li>
<li>Contact Us</li>
</ul>
</div>
</div>

</body>

</html>

boogyman

04-19-2007, 05:26 PM

1. anytime you post any type of script please wrap it in [c.ode][/c.ode] (w/o periods)... Those are formated a certain way for us to help you out.

2.
html {100%;}
If you wanted to make it the entire width of the viewport, then add

...
min-width: 720px;
width: 100%;
...

to your body selector. there is no need to use your html tag.

3.
#header{text-align: center}
add that to center the text horizontally.

4.
vertical-align: absmiddle;
Not sure what you mean but this so I am going to take a guess and say that abs is a typo of some sort? take out abs and that will center it vertically

5.
My real problem is when I veiw it in FF the header is out of control.
That is because Firefox shows you how its supposed to be rendered, and IE makes it's own rules.

6.
I can't get ridded of the space above the space above and below the background image
Please use spell check / self edit... that is very confusing? Is it supposed to say I can't get rid of the space above and below the bg img... ??

img{
margin: none;
padding: none;
}

7. [quote]Also how would I keep the text in the <p> from extending past the indent after it wraps?
[\quote]
yes declare a specific width and margins on the side with image.

8. As better coding practice / debugging it is easy to indent your code .
8.1 also anytime you use a character code eg
  or | you really need the semi-colon's to be valid

mburt

04-19-2007, 06:57 PM

you really need the semi-colon's to be valid
Technically speaking, yes. But it's not required. In fact I doubt that has anything to do with the problem at all. The frequent use of H3 tags may be something to consider; they have a default margin value which may be causing the extra space:

h3 {margin:0px;padding:0px;}

boogyman

04-19-2007, 08:52 PM

Sorry I worded it wrong.... should be labeled with heading "EXTA" instead of 8