Forum Moderators: not2easy
I've been following the S.O.P that I've picked up from here, which is to work in FF, hack for IE. My site shows up fine in FF and there is a large space between two horizontal DIVs.
Here is the relevant HTML from my page:
<div class="header" style="width:100%;">
<div class="headerleft" ></div>
<div class="headerlogo"><a href="http://www.example.com/"><img src="/images/logosmall.gif" title="example" alt="example"/></a></div>
<div class="headernav">
<ul class="topnavbuttons">
<li><img border="0" src="/images/email.gif" alt="Email me" title="Email me"/></li>
<li><img border="0" src="/images/home.gif" alt="Home Page" title="Home Page"/></li>
<li><img border="0" src="/images/tellafriend.gif" alt="Send this page to a friend" title="Send this page to a friend"/></li>
<li><img border="0" src="/images/links.gif" alt="Links" title="Links"/></li>
<li><img border="0" src="/images/about.gif" alt="About" title="About"/></li>
<li><img border="0" src="/images/help.gif" alt="Help" title="Help"/></li>
<li><img border="0" src="/images/guestbook.gif" alt="Guestbook" title="Guestbook"/></li>
<li><img border="0" src="/images/search.gif" alt="Search" title="Search"/></li>
</ul>
<ul class="topnavlinks">
<li class="current"><a href="/paranormal/"><img src="/images/downcurve2.gif" height="10" width="10"/>Paranormal</a></li>
<li> <a href="/thoughts/">Thoughts</a></li>
<li> <a href="/humor/">Humor</a></li>
<li> <a href="/mendhak/">Mendhak</a></li>
<li> <a href="/etc/">etc.</a></li>
</ul>
<ul class="topnavparanormallinks">
<li><a href="/paranormal/">UFO</a></li>
<li><a href="/paranormal/">Prophecy</a></li>
<li class="current"><a href="/paranormal/">Cryptozoology</a></li>
<li><a href="/paranormal/">Parascience</a></li>
<li><a href="/paranormal/">Conspiracy</a></li>
<li><a href="/paranormal/">Mythology</a></li>
<li><a href="/paranormal/">Mystery</a></li>
<li><a href="/paranormal/">Ghosts</a></li>
<li><a href="/paranormal/">Other</a></li>
</ul>
</div>
<div class="randomquote">Some random quote.</div>
</div>
As you can see, .header contains .headerleft, .headerlogo and .headernav.
I set all the contained DIVs to use float:left so that they would stay together on the same line:
.header
{
padding: 0 0 0 0;
FONT-SIZE: 10px;
WIDTH: 100%;
BORDER-COLLAPSE: collapse;
HEIGHT: 97px;
border-spacing: 0;
}
.headerleft
{
background:url(/images/topheaderfillleft.gif);
VERTICAL-ALIGN: bottom;
WIDTH: 189px;
height:100%;
float:left;
}
.headerlogo
{
width: 85px;
height: 100%;
float: left;
}
.headernav
{
BACKGROUND: url(/images/topheaderfill.gif);
background-repeat:repeat-x;
vertical-align: middle;
float: left;
height: 97px;
margin-left: 274px;
margin-right: 8px;
position: absolute;
padding:1px;
}
In IE, there is a large gap between .headerlogo and .headernav, but I am not sure as to why this is happening. I understand that external links are frowned upon here, but I feel that it may give you a better understanding of this problem if you have a look at the page I've been working on in both browsers:
Hmm... is the [code] tag not working?
[edited by: jatar_k at 4:33 pm (utc) on Dec. 28, 2007]
[edit reason] no urls thanks [/edit]
.headernav {
BACKGROUND: url(/images/topheaderfill.gif);
background-repeat:repeat-x;
vertical-align: middle;
float: left;
height: 97px;
margin-left: 274px;
margin-right: 8px;
position: absolute;
padding:1px;
}These styles are conflicting. Do you wish to float the container OR position it absolutely? If you were to float:left a container with margin-left:274px then you'd get a large gap as you see in IE. I'm guessing that FF is overriding the float:left with your position:absolute; IE is not? This may be just a difference in the way the browsers are handling the error condition - which one is correct?!? Either / neither?
IMHO, if you position:absolute a container then ideally you should also define left, top, width (and height) - as I believe their behaviour is undefined if you don't and down to the user agent to decide?
I understand that external links are frowned upon here, but I feel that it may give you a better understanding of this problem if you have a look at the page...
Frowned upon (read: not allowed). Yes, I agree, sometimes example pages can at times help understanding - but how long is that example page going to be available; days, weeks, months, years...?! And that's the problem, example pages are rarely examples for very long. As I understand it, WebmasterWorld is intended to be a resource for future developers - as I'm sure you have found some great posts lurking in the threads - tomorrows dead links are unfortunately not going to help. (See also: [webmasterworld.com...]
Hmm... is the [code] tag not working?
It does insert a <code> tag, but I don't think it effects formatting. A good thread on how to post code examples:
[webmasterworld.com...]
As for linking to external sites not being allowed, perhaps allowing attachments would help then. Just thinking out loud. Onto my keyboard.
Right... thanks! See you later.
