SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
CSS & HTML: List items not align to right in Firefox 3, Safari, Chrome but working fine for IE7
Bottom of Page1 to 6 of 6
-
I’m having problem aligning my list items (.activity-item), I’m guessing that it has something to do with how WebKit interpret it.
When I resize my browser, there is a gap in the middle. I don’t want this to happen, that’s why I’m aligning it to the right in my .css so that the gap is on the left but Firefox 3, Safari and Chrome align it to the left. Firefox 2 and IE7 displays it correctly.
Is there any way I can fix this?
The website is http://www.jonkoay.com.
Any help will be greatly appreciated.
div#main {
float:right;
margin:15px 330px 15px 0px;
width: auto;
max-width: 880px;
min-height: 900px;
}
li.activity-item {
display:inline;
background:#F8F8F8 none repeat scroll 0;
float:left;
width:205px;
margin:0 0 15px 15px;
}
div#side {
margin:15px 15px 15px 0;
position:absolute;
right:0;
width:300px;
} -
It seems div#main is not collapsing; it’s using as much space as it’s allowed. This is because your inner items are floating left, which is pushing its container’s edge out as far as it can go in the effort to float. You don’t really have much choice in this matter; either your inner items are allowed to push their parent box out our the parent box is allowed to collapse down to the smallest width it can. In the former situation you will get this gap in the middle, in the latter situation you will get a single column of inner items. Your have a variety of options here:
1. Find a way to make that center column aesthetic, for instance you could give your UL and your #side a solid white background, but have something interesting in the body background with right alignment and an offset of -300px, so that it will fill that column with some kind of visual details and make it not look empty.
2. You can float your li items right; this will allow your #main to collapse properly. That will put them in a rtl, ttb layout though and you probably don’t want that.
3. You can use javascript to dynamically resize #main in multiples of the width of an li item + its margin and padding as your window resizes. That is a fairly easy script, and will solve your problem in probably 99.9% of your trouble cases (not many people will run a modern browser without JS).
-
Thanks for the tip, Justen.
Seems like I don't have much choice but to pursue option 3, although I'm not quite familiar with JS (Most of the time I tried to solve it with CSS instead).
But, I'll look into it and see whether I can come out with a script to do it. -
No problem. Just to be clear, javascript is *not* an optimal solution for solving layout issues by any stretch of the imagination. I think you have a situation of progressive enhancement here, though. Your layout works pretty damn well without javascript and isn't going any farther without that I know of (of course I could be wrong). Basically what you want to do is bind a function to the window resize event and perform some math against the width of the element. It'll look something like:
function fixWidth() {
var widthInc = 200px; // width of li including margin & padding
var el = document.getElementById('main');
var width = el.offsetWidth;
// divide the current width by the increment, round down, and multiply by the result
// then apply it to the element's style
el.style.width = (Math.floor(width/widthInc) * widthInc)+"px";
}
window.onresize = fixWidth;
Mind you that probably won't work out of the box, especially with browser compatibility issues, my javascript-in-the-raw is a little more than rusty. Should set you on the right track though. A proper js guru could set it straight. Life is so much easier on a framework :/Thankful People: jonkoay -
I've added the following codes. So far it's working fine for Safari, Firefox and IE. Not sure whether it's going to break for other browsers.
function adjustWidth(){
var itemWidth = 220;
var winWidth = window.document.body.clientWidth;
var main = document.getElementById("main");
main.style.width = (Math.floor((winWidth-330)/itemWidth) * itemWidth) + "px";
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", adjustWidth, false);
}
window.onload = adjustWidth;
window.onresize = adjustWidth; -
It works in chrome too, until it collapses down to 0 columns at which point it collapses under your sidebar. That could be corrected by using min, as in
main.style.width = Math.min(Math.floor((winWidth-330)/itemWidth) * itemWidth), itemWidth) + "px";
Glad it worked out for you :)
1 to 6 of 6