Wed, 2005-09-14 02:41
hello. First post for me, be kind 
http://www2.udec.cl/~jfuente_alba/test/
This is my (almost) finished layout. It looks almost exactly as I had envisioned it, validates XHTML strict, CSS and accessibility tests, and looks the same across Firefox, IE6 and Konkeror (i've been told). The links are all empty anchors and all the text is filler (even the logo area is empty!).
If you use firefox (1.0.6 at least) you'll notice the drop-down menu bar starts in the wrong position, and hops back to its place after the first rollover. If you have some other tabs open, sometimes it works as intended, when it's the first page you open it's always wrong.
Why does this happen? How should I fix it?
I've never seen this happen before and couldn't figure even how to search for a solution. Also it's pretty annoying considering I was aiming for Firefox first and then just get it readable for others (but somehow it worked right away... funny)
Comments appreciated, along with ideas to stop the initial hop of the menu bar.
Things still missing from the layout: icons for each post, a rightmost column, a proper footer.
Wed, 2005-09-14 03:06
#1
bouncing bar in firefox, layout ok otherwise
Quote:
validates XHTML strict
Oh?
Quote:
Sorry, I am unable to validate this document because on line 32-33, 49-50 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
Wed, 2005-09-14 03:09
#2
bouncing bar in firefox, layout ok otherwise
Remove position:absolute from #topmenu. You'll have to play around a bit with your background colours after that. By the way, your menu looks significantly different in IE6 and the dropdowns don't work.
Wed, 2005-09-14 05:18
#3
bouncing bar in firefox, layout ok otherwise
Thanks for the quick replies
the W3 validator is only complaining about content, which as I said is filler. Plus it's assuming UTF8 encoding which is incorrect (this layout is a template, the CMS will put it's own encoding tags). I validated with Tidy.
Tell the W3 validator to use iso-8859-1 and it will pass.
Anyways.
different in IE6? weird, it looks almost identical here (just a shift here and there as usual). Do you mean different as in the dropdowns not working? because they weren't supposed to work in IE. My target audience is firefox users so no biggie.
I'll try IE in other machines, just to be sure.
I removed the absolute positioning from the menu bar, but now I can't figure a proper way to get the color how it was before, without it showing seams and botching the colors of the submenus.
any hints on the background? This is the reason I had it absolutely positioned originally.
edit: I floated #topmenu which made the black background show up, then set width 100% which made it look like before, sans jumpage.
Thanks!
I'm still curious about the IE difference. The fix looks ok in it to me too.
Wed, 2005-09-14 05:53
#4
bouncing bar in firefox, layout ok otherwise
madster wrote:
I removed the absolute positioning from the menu bar, but now I can't figure a proper way to get the color how it was before, without it showing seams and botching the colors of the submenus.
Here's what I did:
div#topmenu {
width: 100%;
left: 0px;
}
div#topmenu ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0;
background: #000;
list-style: none;
}
div#topmenu ul li {
float: left;
position: relative;
background: #000;
width: 20%;
}
* html div div#topmenu ul li { /* only IE reads this rule */
width: 19.8%;
}
div#topmenu li ul {
display: none;
position: absolute;
background-color: gray;
border-left: medium solid black;
border-bottom: medium solid black;
border-right: medium solid black;
}
div#topmenu li:hover ul {
display: block;
}
div#topmenu li ul li {
clear: both;
background-color: gray;
}
See the attachment for what it looks like IE. As for your 'target audience' - are you creating this site for a company intranet with only Mozilla browsers installed? Cos that's the only way you're gonna guarantee that no IE user is going to see your site.