css issues (help)

[frogmanandy]

I am trying to build a compliant site. It is very simple in design and small but when I view it in firefox I am getting a seperation between my logo and the rest of the site.

www.mauihawaiiluau.com

/*this is the style sheet*/
body {
background-color: #666666;
color: #666666;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
margin: 0;
}
h1 {
font-size: 24pt;
color: #0000ff;
text-align: right;
letter-spacing: 2px;
font-family: Impact, Tahoma, Arial, Helvetica, sans-serif;
text-decoration:underline;
}
h2 {
text-align:center;
font-size: 24pt;
color: #0000FF;
text-decoration:underline;
}
h3 {
text-align:center;
font-size: 12pt;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
h4 {
text-align:center;
font-size: 7pt;
}
h5 {
text-align:center;
font-size: 24pt;
color:#FF0000;
font-family:Arial, Helvetica, sans-serif;
}
h6 {
text-align:center;
font-size: 14pt;
color:#FF0000;
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 11pt;
font-weight: 500;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
line-height: 1.3em;
}
a:link {
}
a:visited {
}
a:hover {
color:#0000FF;
}
#mauivacationpage {
margin-left: auto;
margin-right: auto;
}
#mauihawaiiluaulogo {
margin: 0;
padding: 0;
background-image: url(images/mauiluaulogo2.jpg);
border: 0px;
height: 200px;
width: 800px;
}
#content {
margin: 0;
padding: 0;
position:relative;
border: 0px;
top: 0px;
width: 800px;
height: 100%;
}
#main-text {
color:#000000;
background-color:#cccc66;
margin-left: 150px;
padding-right: 10px;
padding-left: 10px;
top: 0px;
width: 630px;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
}
#main-text a:link, #main-text a:visited, #main text a:hover {
text-align:center;
}
#navbar {
position:absolute;
text-align:center;
background-color: #999999;
top: 0px;
left: 0px;
width: 150px;
}
#navbar ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul {
margin: 0;
padding: 0;
}
#navbar ul li a:link, #navbar ul li a:visited {
display: block;
text-decoration: none;
background-color: #999933;
font-weight:bold;
color: #333333;
border-bottom: solid #000000 1px;
padding-top: 3px;
padding-bottom: 3px;
}
#navbar ul li a:hover {
background-color: #666600;
}
#main-text h2 a:link, #main-text h2 a:visited {
color:#cccc66;
text-decoration:underline;
}

thanks in advance

[KeithO]

try dropping the

</img>

thats not valid and might be causing your problem.

[frogmanandy]

Originally Posted by KeithO

try dropping the

</img>

thats not valid and might be causing your problem.

You know I had never closed an img tag but when I used the w3c validator for xhtml it told me they had to be closed so I tried it and it no longer returned an error.

[KeithO]

do it like this

[img]blah.jpg[/img]

[frogmanandy]

thanks for the heads up ... unfortunately doesn't fix problem

[ADAM Web Design]

First of all, your left side menu is messed in IE.

Try this in your CSS to fix it:

img {
border: none;
}

As far as your issue with the header goes, change a few things around and it should work:

#mauivacationpage {
margin-left: auto;
margin-right: auto;
position: relative; /* This will position all sub elements in relative terms to this div. It comes in handy later. */
width: 800px;
}
#content {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 200px;
padding: 0;
border: 0px;
width: 800px;
}
The margin-top will position the content div 200 pixels from the top of the page in both browsers.

Next property:
#mauihawaiiluaulogo {
position: absolute; /* because this div is a child of the #mauivacationpage div, the positioning will be defined based on the coordinates of it vs. the body coordinates */
top: 0;
left: 0;
margin: 0;
padding: 0;
background-image: url(images/mauiluaulogo2.jpg);
border: 0px;
height: 200px;
width: 800px;
overflow: hidden; /* Not necessary, but somtimes it helps. It never hurts to be a little paranoid. */
}

Note: you can put your logo div after your content div if you like. It won't make a difference since it's absolutely positioned. I tend to do this with my absolutely positioned elements when possible so that I know they're not part of the normal flow of the document.

Try that and let me know. Just make a backup copy first in case you get lost or something gets messed up.

[frogmanandy]

That makes a lot of sense, I hadn't thought of forcing things up there by specifying a distance ... duh, sometimes you think too much about a problem and miss the obvious

as far as the border around the weather ... I messed that up right before I left work ... I was using border="0" in my html but wanted it to be compliant

I tried
img [src|="wunderground"] {
border: 0;
}
I think that was it, the problem is that I want the pics at the bottom of the page to have borders but not the weather link

thank you again, I was going nuts ... new to css and compliant design and thought this small project was a good place to start

btw I added the overflow hidden already but no luck

[frogmanandy]

I tried Adam's fixes with no luck.

Still can't figure this one out.

The site displays fine on IE but on firefox, it gets a space between the logo and the body, has anyone run into this before?

[MarcieZoob]

Remove the style="float:left" from the tag below and the space in Firefox s/b fixed.

[img]/images/fireknife23.jpg[/img]

[frogmanandy]

Thanks Marci,

That does get rid of the space, but unfortunately it doesn't allow the text to wrap and puts the image in the middle

Probably a good place to start though

[MuNKyonline]

Add align="right" or align="left" in the img tag and that should allow the text to wrap.

HTH

[frogmanandy]

Hey Munky,
Thanks for your tip, but if you use <align> then the page is not w3c valid.

I know there is a way around this, but I haven't had time to figure it out.

[MrLeN]

This will fix your problem mate:

h1 {
margin-top: 0px;
}

MrLeN

[frogmanandy]

Let's hear it for the Aussies!

Thank you so much I was tearing my hair out .. lol

Knew it would be something simple

[MrLeN]

No worries mate :)

MrLeN