Forum Moderators: not2easy
as you can see there is a little gap on the right side, I want to extend menu and make it equal the width of the page, which is 679px(odd no. I know dont ask me why;), if I find solution it works in the firefox but doesn't in IE and vice-versa. For eg. when I ran out of coding css solutions I inserted the image the size and width of the missing bit(minus 1px gap) in the menu bar and works perfectly in the Firefox, but in the explorer the "bit" moves to the next line..I have tried wraping the whole menu into divs etc but still don't work...
and also in IE I have a gap between the header and the main image(slideshow) that I can't get rid of
Someone please help!
I would be very grateful
[edited by: SuzyUK at 8:39 am (utc) on Feb. 26, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
Not positive here, but you might be up against the infamous IE "box model" problem. Do a google search for "IE box model hack" and look for the Tan hack. IE6 and earlier measures boxes (div's n such) differently from other browsers so that might be throwing things off. Good luck!
I took screenshots of both menus in both Firefox 2.0 and IE 6 - both had exactly the same pixel widths (both maximum width of menu and current width of all menu items combined)
Currently, IE 6 is measuring the box the same as Firefox 2.0 - which is why I don't think it's quite that problem, but I think it has to do with IE's measurement of filled content that's doing it.
Technically, for example, if I had a 500px wide container, which had five 100px floated objects in them, nothing has margin, padding or border attached, then it should all fit on one line.
As if often the case with IE, the last 100px floated object will be bumped down to the next line, for no justifiable reason.
I think this has about a 3px margin of error, from my experimentations - you can approximate up to 497px of the 500px wide container, but then it will bump to the next line - feels a lot like a 3px text jog, but that only happens when a floated object meets an unfloated object, doesn't it :)
My best recommendation isn't really a solution, it's just: try not to make hard, pixel-perfect layouts that don't even have.. well.. a pixel of error margin :) What you can do is extend the width of each menu item so it gets close to the 769px wide menu you require, and then just use the spare two or three pixels as buffer - change the background colour of the
<ul><div>:)
Setek: "My best recommendation isn't really a solution, it's just: that don't even have.. well.. a pixel of error margin :) What you can do is extend the width of each menu item so it gets close to the 769px wide menu you require, and then just use the spare two or three pixels as buffer - change the background colour of the <ul> or <div> that contains the menu items so that it looks like the bar takes up the entire space anyway."
have already done that & it seems like the best solution for the moment, but it sort of p's me off that nothing else can be done(so I have my 1px mrgns btwn buttons)..grr... but thanks for the "try not to make hard, pixel-perfect layouts" tip.. i have learned that the hard way it seems :(
