5 replies [Last post]
theville
Offline
newbie
UK
Last seen: 18 years 11 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

I'm trying to create a banner for the top of each web page. It has our logo on the left hand side and a strap line on the right.

I'd like the strap line to hug the right -hand edge of the browser (as you resize the browser window the strap line will always be on the right edge) but go no further when it hits the right hand edge of the logo.

The following works in Mozilla, Netscape etc but not in IE. I've removed the background colour for clarity.

#logo {
position: absolute;
top: 10px;
left: 5px;
}

#strapline {
position: absolute;
top: 11px;
right: 0px;
margin-left: 280px;
background-color: #eee;
}

Please see

http://freespace.virgin.net/well.test/index.htm

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 18 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fluid Banner Problem (in IE)

Try this code (only tested in Safari, but should be straightforward enough to work in IE).:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>Banner Test</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script src="http://www.virgin.net/js/random_ad.js" language="javascript">
	</script>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	}

img#logo
	{
	margin: 10px 0 0 5px;
	}

div#strapline
	{
	float: right;
	margin: 10px 5px 0 280px;
	background-color: #eee;
	}
</style>
</head>

<body>
<div id="strapline">
<img src ="http://www.virgin.net/well.test/transforming_reservoirs.gif" alt="" />
</div>
<img src ="http://www.virgin.net/well.test/wd_logo.gif" id="logo" alt="" />
</body>
</html>

It use's the float attribute rather than absolute positioning.

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 18 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fluid Banner Problem (in IE)

Forgot to mention...

You had a few typos in your code as well... mainly; your div was of the form:

<div id =" strapline">

It should be <div id="strapline"> (Basically, two spaces which would mess up your intentions).

Also, you page needs a DOCTYPE, which tells the browser what version of HTML to use. I've inserted the HTML 4.01 DOCTYPE in my example, but you should start looking at XHTML 1.0 Transitional (at least).

The next sentence is true. The previous sentence is false. Discuss...

theville
Offline
newbie
UK
Last seen: 18 years 11 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

Thanks

Hmm. Tried that, but it just puts the logo below the strapline!

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 18 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fluid Banner Problem (in IE)

Change the CSS for the image to:

img#logo
   {
   float: left;
   margin: 10px 0 0 5px;
   }

The next sentence is true. The previous sentence is false. Discuss...

theville
Offline
newbie
UK
Last seen: 18 years 11 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

Fluid Banner Problem (in IE)

I've just tried that.

I get a similar issue. When the strapline margin hits the logo, then the logo drops down. ( That's why I tried to position the logo absolutely but get different problem)