CSS Forum

**twiggy** · 04-21-2007, 07:35 PM

This is a first for me!!!!!! It fully works in IE5/6 just the way I want it but not in firefox and opera (usually always the other way around).

Here is the mock up: http://mstd.eu/tippingpoint/index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #6995c0}
-->
</style>
</head>

<body>

<div id="top">
<p align="right">01962 842836</p>
</div>

<div id="title">
<p>The<span class="style1">Tipping</span>Point</p>
</div>

<div id="tagline">
<p><span class="style1">Realising</span>Potential</p>
</div>

<div id="splash">
<img src="images/splash.jpg" alt="splash image" />
</div>

<div id="nav">
<p align="center">Home | About Us | Our Customers | Solutions | Examples | Pharmacy | Links | Contact</p>
</div>

</body>
</html>

Code:

body {
    background-color: #FFFFFF;
    background-image: url(../images/bk.jpg);
    background-repeat: repeat-x;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 770px;
    font-family: "Courier New", Courier, monospace;
}

#top {
    height: 36px;
    color: #989898;
    font-weight: bold;
}

#title {
    float: left;
    height: 66px;
    width: 510px;
    font-size: 36px;
    font-weight: bold;
    padding-top: 22px;
    color: #6b6b6b;
}

#tagline {
    float: right;
    height: 58px;
    width: 215px;
    font-size: 24px;
    font-weight: bold;
    padding-top: 30px;
    color: #6b6b6b;
}

#splash {
    height: 223px;
}

#nav {
    height: 39px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding-top: 7px;
}

Any Ideas?

**twiggy** · 04-22-2007, 12:24 PM

Still no ideas?

**LadynRed** · 04-22-2007, 05:11 PM

Give your image the proper width and height attributes.
Clear your floats. The #nav is sitting underneath #splash.

**twiggy** · 04-22-2007, 06:25 PM

Cleared floats and set width/height on the picture, but still the same.

Perfect in IE 6 but firefox and opera can't display it write I really can't understand it?

**travelagent** · 04-22-2007, 06:50 PM

It appears this one tag isn't closed properly:

<img src="images/splash.jpg" alt="splash image" width="770"px height="223"px/>

**ADAM Web Design** · 04-22-2007, 07:08 PM

Code:

#tagline {    
float: right;    
height: 58px;    
width: 215px;    
font-size: 24px;    
font-weight: bold;    
padding-top: 30px;    
color: #6b6b6b;    
clear: both;
}

Remove the bolded line (the last one). The only time you want to clear floats is when you want to move down to a new horizontal plane (like you did with your splash div) and start fresh.

**LadynRed** · 04-23-2007, 03:54 PM

You also shoudn't add 'clear:both' to the floated element - it should either be added as a separately clearing element, or on the element that FOLLOWS the floated item.

**ADAM Web Design** · 04-23-2007, 07:04 PM

That's why I bolded it.