|
| |
|
|
JBW
Posts: 54
Joined: 3/18/2004
Status: offline
 |
CSS Header Alignment - 3/14/2006 7:51:40
Hi All,
I am trying to build a header using CSS (get rid of tables) but am getting variable results between browsers (IE7/FF on Win). No matter what I try, fixing one problem creates another and so on. In short, I am hoping that somebody will be able to point out where I am going wrong in the following code:
<style type="text/css">
#Header {
width: 100%;
border: #000000 2px solid;
}
.HeaderLeft {
float: left;
clear: right;
border: #000000 2px solid;
}
.HeaderRight {
float: right;
clear: left;
border: #000000 2px solid;
}
</style>
<DIV id="Header">
<DIV class="HeaderLeft"><img src="logo.gif" width="50" height="50"></DIV>
<DIV class="HeaderRight"><a href="">LINK</a></DIV>
</DIV>
<DIV class="Content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sed dolor quis erat pharetra pretium. Sed vel neque quis ligula ultricies mattis. Praesent mollis vehicula quam. Morbi pulvinar fringilla eros. Nullam sem magna, sagittis quis, mollis vitae, malesuada nec, sem.
</DIV>
The above code works fine in IE, but FF gives me a totally different result whereby the main header div is collapsed. Which browser is rendering the code correctly and how do I correct the discrepancies? All I am trying to do is create a header with the logo on the left and some links on the right and have all other content fall under the main header div. I have included the border on each div so as to illustrate how each browser renders the pages...
Any help would be greatly appreciated.
John.
|
|
|
|
JBW
Posts: 54
Joined: 3/18/2004
Status: offline
|
RE: CSS Header Alignment - 3/14/2006 9:33:44
Womble,
Thank you so much for your swift reply. I have implemented the changes and everything is fine now. Easy when you know how, eh?
Cheers,
John.
| |
|
 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 
It gets easier as you use it more. 
