|
Starhugger -> Side-by-side Divs (4/26/2006 0:08:49)
|
Here's a switch -- this works in IE but not in FireFox!
I have a top banner area at the top of each page. It consists of a logo at left, then to the right of the logo there are two stacked areas: a banner and a link bar. The banner and link bar are aligned just to the right of the logo. Each of these is defined as a separate div. The link bar is structured by a table (mostly because I don't have time to figure out how to do it without the table right now). All 3 divs are contained within a containing div. (Maybe this is overkill? I'm still learning how to handle divs instead of tables. [8|] )
It all lines up in IE, but in FF the banner gets shoved down below the logo (aligned at the left edge of the content area, as is the logo). The link bar is exactly where it should be, with a vacant space above it where the banner should be. I've looked at the code using FF and it validates. There must be something about how to position the divs that is treated differently in FF than IE. (Hardly a surprise, but usually it's IE that doesn't work!) IE was having the same problem until I put "float: left" in the logo's div definition, but that doesn't seem to solve the problem in FF.
Here's the HTML code for that section:
<div id="topheader">
<div id="toplogo">
<img border="0" src="images/logo.jpg" width="200" height="200" align="left" alt="logo" />
</div>
<div id="topbanner">
<img border="0" src="images/topbanner.jpg" width="453" height="61" alt="site title" /><br /><span>site title</span>
</div>
<div id="toplinks">
<table><tr><td>
<a class="linkhome" href="index.htm"><span>Home</span></a>
</td><td class="navspacer"></td><td>
<a class="linkarticles" href="astrology.htm"><span>Articles</span></a>
</td><td class="navspacer"></td><td>
<a class="linkservices" href="consultations.htm"><span>Services</span></a>
</td><td class="navspacer"></td><td>
<a class="linkcontact" href="contact.htm"><span>Contact</span></a>
</td></tr></table>
</div>
</div>
The "span" tags are an image replacement trick that allow me to have text that the SEs can read but use more interesting graphics instead as a visual.
Here's the CSS:
#topheader {
position: relative;
width: 100%;
height: 220px;
margin-top: 5px;
background-color: #FFFFFF;
}
#toplogo {
position: relative;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
float: left;
}
#topbanner {
position: relative;
width: 460px;
height: 70px;
left: 10px;
top:40px;
}
#toplinks {
position: relative;
width: 500px;
height: 40px;
left: 0px;
top: 45px;
}
Thanks for help with this!
Starhugger
|
|
|
|
