|
| |
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: online
 |
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.  )
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
|
|
|
|
rdouglass
Posts: 9186
From: Biddeford, ME USA
Status: offline
|
RE: Side-by-side Divs - 4/26/2006 23:22:37
quote:
It all lines up in IE, but in FF the banner gets shoved down below the logo
I'm not sure exactly what that means without a link to be sure but this is what I suspect.
Personally, when I see those kinds of problems with CSS, I almost always think that I need another containing div. (I don't think it's overkill at all by the way.)
I solve a lot of FF/IE issues by just nesting them inside 1 more div. So I suspect that 2 out of the 3 of those div's need to be inside another div.
Maybe. Again, a URL would help to see where it is now.
That any help?
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: online
|
RE: Side-by-side Divs - 4/26/2006 23:33:55
Thanks for replying. Sorry, it's not a live site yet. My client won't be going live until sometime next week.
Yes, I suppose I could try putting the two stacked divs inside another div and slapping that at the right of the logo div.
I actually got it to work finally by taking the individual containing divs out and just putting the elements together (the logo image, the banner image and the navigation table). I kept the surrounding div around these three. That seems to work across the board. I wasn't really declaring much that was unique in the individual divs anyway. *shrug*
Thanks for the help! If I have problems again I'll remember your suggestion and build the divs up differently.
Starhugger
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
