Firefox problems

Now I like Internet Explorer. I have a Windows Logo on my Avatar, a Windows Logo on my Signiture, it is kind of obvious then that I designed the first few bits of my frontend in Internet Explorer.

However, however much I despise, hate, loath, want to kill Firefox I realise that in order to get people using the eventual software that will bare my frontend, I need it working in Firefox. Hence I have a problem, because I like what I have so far and I do not wish to compromise its design.

The problem is this, the description bar I have that shows when you hover over a SubTab Item on the Menu seems to want to stretch beyond the page when in Firefox. Not to dig at Firefox, which of course I am, but this Div is actually perfect and should work. Its only real point is to be 100% wide. Call me stupid, but I would have thought 100% wide means as wide as the page without the margin. It works for everything else, it works for the Menu blocks.

I was wondering if anybody had any ideas about the page and how to fix it. I have tried implicetly setting the width with JavaScript so that it is actually the width of the page minus the margin, but it does not work. I have tried specifically taking off increasing amounts of width after the initial page width, but ultimately found that it did not work. It looks perfect in Internet Explorer, it would be great to look perfect in Firefox

Disregard the bit beneath the menu, that has a serious problem with Firefox (doesn't everything) but I am on fixing that, I know what that is.

Use CSS hacks.

More info on CSS hacks can be found on http://sitepoint.com, in the CSS section they have a great tutorial on it.

margin and padding values are added onto width values. 100% width + 20px of margin = browser width+40px.

i didn't bother diving into your css, but unless you're using something like float, just take away the width attribute. divs are a soft 100%.

Did you know that if IE was like Firefox, you wouldn't need all that Javascript and all those hover things could be done only with CSS?

I just can't understand where the description displays in the page source so I can't really help you.

Internet Explorer is not the only browser.
The only thing I use it for is to test pages.

browsershots http://browsershots.org/

When using CSS and <div></div> for positioning get into
the habbit of doubling up the <div></div> and using the
position:absolute; attribute when positioning with
<div></div>. Your suspension design will need this or will
be everywhere on other browsers. One set of <div></div>
should work but it doesn't so making doubles works well
without having to use CSS hacks.

body { margin:0; padding:0; } #container { width: 90%; height:90%; margin:auto; } #containerB { position:absolute; width: 100%; height:100%; } #containerB2 { position:absolute; width: 100%; height:100%; }

<div id="container"> <!-- container --> <div id="containerB"> <div id="containerB2"></div> </div> <!-- container --> </div>

_|

why unecessarily double up the amount of elements to be loaded?

Originally Posted by flez Did you know that if IE was like Firefox, you wouldn't need all that Javascript and all those hover things could be done only with CSS? I just can't understand where the description displays in the page source so I can't really help you.

Hardly any of that javascript is to sort out the hover items. Maybe... 20 lines or so. The point of it is to save me having to sort out the CSS for that (especially considering that I might have to use items that don't work in Internet Explorer), I am pretty sure that the JavaScript is less than whatever extra CSS I might have to do.

Originally Posted by <Isurfr> When using CSS and <div></div> for positioning get into the habbit of doubling up the <div></div> and using the position:absolute; attribute when positioning with <div></div>. Your suspension design will need this or will be everywhere on other browsers. One set of <div></div> should work but it doesn't so making doubles works well without having to use CSS hacks.

Hmmm... I think I see what you're saying... you mean that the first set are used to postition the item, and the second set are used to size the item?

I'll have a look into yor suggestion, and into those CSS Hacks. The problem is I know nothing about CSS or Firefox so a lot of what you're suggesting is going over my head :P

How would any of you do it? If you wanted to put a box the width of a page with text in it and have it positioned absolutely. Not how you would position it, not how you would generate it or put the text in it, just how you would get it the width of the page? Presume you know where it is meant to be positioned and that is all in the CSS from the beginning. Surely you would tell it to be 100% and it would be it? I cannot work out how a browser that claims to be set to the standards cannot set the width of a box properly.

Ok then, not generally a person to double post but I'd like to just finish off this thread with a pointer that Firefox is so insanely worthless. I decided I'd try the Tooltip approach, I sorted it out so they were the right size, wouldn't come off the margin, wouldn't do anything wrong, would be good little boxes. But no - Firefox decided it would add the padding to the width of the boxes! So in Internet Explorer, I get the right size, in Firefox, I get another that goes over the page and stretches it! What is the point of that, seriously? It makes no sense.

Regardless to say I have changed my original lovely vision in order to fit with a rendering engine that is to quote a well known film 'without meaning or purpose'. The world was fine without Firefox before, it would be fine without it now.

EDIT:

Ok, I managed to fix it. What I apparently did not realise was that for some strange I frankly stupid reason Firefox widths are content widths, not actual widths. They do not seem to include margins or padding! What is the point in that?! How does that help design? Once I worked out how to fix it in Firefox, I had managed to ruin it in Internet Explorer. It took me a whole ten minutes to make it to it didn't for Internet Explorer, and it did for Firefox.

If somebody has a good reason to set width by inner size rather than outer size, I would be grateful to hear!

margin and padding are *supposed* to be added on to the width value. IE gets it wrong. look at it in any standards compliant browser and it will be added on.

Too right. There are plenty of was to get around IE's infamous incorrect box model rendering. Just google!