Problem with titlebar image

[knopper67]

Hi,

Just started getting into HTML and CSS and already built a couple web pages but I'm having a problem with one. In the title bar on my page there is supposed to be an image on the left that I use as a logo. But it doesn't seem to appear. Could someone try to help me out with this?

Here's the CSS for the titlebar:



#title {
width: 100%;
font-size: 10pt;
height: 43px;
text-align: right;
background: #f57900;
}

#title img {
float: left;
}

#title h1{
display: block;
padding: 15px;
font-size: 12px;
text-transform: none;
color: #ffffff;
}

Oh, and I just used an img tag to put the image into the page. What could be possibly be wrong?

[tech_support]

Change this:

#title img {
float: left;
}
to this:

#title img {
text-align: left;
}

[knopper67]

I changed it, but it's still not showing. Here's my whole CSS file if you think something else is causing the problem.



body {
background: #0e2426;
color: white;
font-family: Sans, Sans-Serif;
margin: 0px;
padding: 0px;
font-size: 10pt;
}

* a:link, a:visited {
background: transparent;
color: #f57900;
font-weight: bold;
text-decoration:none;
}

* a:hover {
font-weight: bold;
color: #ffdf6e;
}

#maincontainer {
width: 100%;
height: auto;
margin: auto;
background-color: #2e3436;
padding: 0;
}

#menu {
width: 8.6em;
float: right;
padding: 20px;
font-weight: bold;
white-space: nowrap;
left: 0px;
margin: 0 0 1em 20px;
border-left: 1px solid #444;
border-bottom: 1px solid #444;
}

#menu a {
display: block;
text-decoration: none;
width: auto;
margin: 2px;
padding: 2px 4px 2px 8px;
border: 1px solid gray;
}

#menu a:hover {
border: 1px solid #f57111;
}

#menu p {
display: none;
}

#maincontent {
width: auto;
margin: 0;
padding: 20px;
}

span.p-title {
float: left;
border-bottom: 1px solid gray;
}


span.p-date {
float: right;
border-bottom: 1px solid gray;
}

#title {
width: 100%;
font-size: 10pt;
height: 43px;
text-align: right;
background: #f57900;
}

#title img {
text-align: left;
}

#title h1{
display: block;
padding: 15px;
font-size: 12px;
text-transform: none;
color: #ffffff;
}

h1 {
color: #999;
padding: 5px;
margin-bottom: 1em;
font-weight: bold;
font-size: 130%;
clear: left;
text-transform: uppercase;
font-family: Segoe, Myriad, Tahoma, "Trebuchet MS", Sans-Serif;
font-weight: bold;
}

h2 {
color: #999;
font-weight: bold;
font-size: 120%;
margin-top: 1.5em;
margin-bottom: 1em;
clear: left;
}

h3 {
color: #999;
font-weight: normal;
font-size: 110%;
letter-spacing: .1em;
margin-top: 1.5em;
margin-bottom: 1em;
clear: left;
}

p.images {
text-align: center;
}

#footer {
padding: 15px;
height: 3.2em;
float: bottom;
}

#footerleft {
float: left;
font-size: 9px;
}

#footerright {
float: right;
font-size: 9px;
border-bottom: 1px solid gray;
}


:confused:

[emminar]

try changing:


#title {
width: 100%;
font-size: 10pt;
height: 43px;
text-align: right;
background: #f57900;
}

#title img {
text-align: left;
}

To:


#title {
width: 100%;
font-size: 10pt;
height: 43px;
background: #f57900;
}

#title img {
text-align: left;
}

[knopper67]

Thanks for the help, but I just found out it was just a simple mistake I made in the title bar image source path. I accidentally preceded an extra /. I removed it and It's working fine now.

Thanks again :)