Putting two elements beside an image

subnet_rx · 10-31-2006, 10:33 PM

I'm trying to put two header elements beside an image, but can only get one beside it and one below in (in IE). Can someone help?

Code:

<div id="header">
			<a href="/drupal/" title="Index Page"><img src="/drupal/files/logo.jpg" alt="Logo" /></a>
				<h1 id="site-name">SITE-NAME</h1>
				<h2 id="site-slogan">INSTITUTE OF HIGHER WEB LEARNING</h2>
			<ul id="navlist">
							<li><a href="/drupal/?q=/node" title="">Home</a></li>
							<li><a href="http://www.usm.edu/pr/web/wiki/" title="Web World Wiki">Wiki</a></li>
							<li><a href="/drupal/?q=/sitemap" title="">Site Map</a></li>
							<li><a href="/drupal/?q=node/2" title="" class="active">Guidelines</a></li>
							<li><a href="/drupal/?q=/contact" title="">Contact Us</a></li>
					</ul>
</div>
<hr class="hide" />
 
     <div id="sec-navigation">
	  	   <ul id="nav-secondary">
				 <li><a href="/drupal/?q=node/3" title="">Navigation</a></li>
				 <li><a href="/drupal/?q=node/4" title="">Test</a></li>
			   </ul>
	      </div>

Code:

#header
{
	height:80px;
	margin-top:5px;
  	font-family: georgia, times, serif;
}
#site-name 
{
	font-size: large;
	color:#fff;
	font-weight:normal;
	display:inline;
	border-bottom:2px solid #FDC737;
}
#header img  
{
	padding: 5px;
	padding-bottom:15px;
	width:73px;
	float: left;
}
#site-slogan 
{ 
	display:block;
	padding-top:5px;
	font-size:large;
	font-weight:bold;
}
#navlist
{
	float:right;
}

#navlist ul, #navlist li
{
	display: inline;
	list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
	float: left;
	text-decoration: none;
	background-color: #FDC737;
	color: #000;
    padding:0px 10px 0px 10px;
	line-height: 25px;
	margin-left:5px;
	background:url(images/tab.jpg) repeat-x;
}

#navlist a:hover 
{ 
	text-decoration:underline;
}
#sec-navigation
{
	width:100%;
	background:url(images/tab2.jpg) repeat-x;
	height: 20px;
	color: #000;
	text-align:right;
	line-height:20px;
}
#nav-secondary ul, #nav-secondary li
{
	text-align:right;
	display:inline;
	list-style-type:none;
}

#nav-secondary a:link, #nav-secondary a:visited
{
	text-decoration: none;
	color: #000;
    padding:0px 10px 0px 10px;
	line-height: 20px;
	margin-left:5px;
	font-weight:bold;
}

#nav-secondary a:hover
{
	text-decoration:underline;
}

Arbitrator · 11-01-2006, 12:53 AM

Is that all of the HTML? How is anyone supposed to know if your page is displaying in standard-compliance or quirks mode? What about the version of Internet Explorer?

subnet_rx · 11-01-2006, 03:26 AM

No, that's not all of it. I posted the relevant parts of both the HTML and CSS. I can post the rest tomorrow if you'd like to see it. I'm just trying to figure out how to align two elements beside a floated image.

Arbitrator · 11-01-2006, 04:29 AM

Float the two elements in the same direction as the image. The reason I mentioned quirks mode is that Internet Explorer uses a different box model in that mode, so boxes are different sizes than in other browsers. IE6 and 7 have significant rendering differences.

subnet_rx · 11-01-2006, 02:45 PM

Floating both elements lines them up beside the image.

subnet_rx · 11-01-2006, 04:13 PM

I've changed the layout so that the logo and two elements are now one image. My new problem is that the header has two floats. One is this image, and the other is the tabbed menu. I'd like the menu to be at the bottom of the div obviously, but in FF, it puts it at the top. In IE, it puts it at the bottom. No vertical alignment, padding, or margin that I've tried will position this float in FF.