Image Display in Firefox - CSS

[wige]

Hi everyone. I was working on a redesign of my home page, and noticed that although the image in the upper right corner of the text positions itself correctly in Internet Explorer, it overflows the next section of text (or in this case, a table in another div) when viewed in firefox. Any suggestions how I can get the image to show in the same position as it does in IE would be greatly appreciated.

The link to the test home page is http://www.ticketwarehouse.com/index2.php

[dharrison]

Hi wige

You mean the logo? Either make the border bigger or change the layer order so the grey background overlaps the logo. For example:

#sitetitleimg { z-index: 1; }
#content { z-index: 2; }

HTH

[wige]

Actually, I am looking more at the image on the right. In Internet Explorer it lines up perfectly with the right edge of the breadcrumbs above, and the div does not end until the bottom of the image (the grey line is the bottom of the div that the image and text are in.) In Firefox, the image flows past the end of the div and into the next container, and the image is down several pixels from the top of the container, and goes out the left side.

To give some more information, this seems to depend on how much space it takes to display the paragraph of text at the beginning. Firefox does not seem to expand the div container to fit the height of the image. Should it?

[weslinda]

Easiest way is to simply define a min-height...Firefox will accept that tag for the mainstory div and you should be all set.

You may also try and set the image to display as a "block" and that may help as well.

[dharrison]

Oh yeah. Oops.

Yeah as weslinda said. Or move the blue banner section down further.

HTH

[drummin]

Ya, your title area has a width of 100%.
Your content area has a width of 100% but a left position of 155px pushing this table past browser window.
You might restucture page within a container div.
Maybe make you leftbox area a width of 20% instead of 150px and content area 80%.
Just changing content to 80% makes page look fine at my resolution (800).
You could also play around with z-index and wrap your content area in another div, width 100% padding-left:155.
I assume you don't want a fixed width so you'll need to watch width of 100% plus 155px position.

Hope that helps.

[weslinda]

Drummin, how does it look on a 20" lcd with a width of 1680? Using 100% width designs can be a bit tough depending on the environment you are working in.

There are a lot of variables that need to be discussed when focusing on that, and that is beyond this specific issue.

[drummin]

weslinda you're exactly correct. Page width is up to the designer. Do you really want to go 100%?

If you view code and style sheet you will see widths are set at 100%. This was not my design.
I was just giving options within the sample given.

[weslinda]

that's the fun with web design...so much to learn, so many ways things go wrong.

[bj]

The coolest fluid width design I've ever seen was one that showed as two columns at 800 x 600 and as 5 at 1680. But I digress . . .

[mykiesee]

Try deleting that pesky

tag that is before the text near the graphic. For some reason, when I work in Dreamweaver it automatically puts the

tag there and it causes spaces in Firefox but looks OK in IE.

[weslinda]

Dreamweaver is automatic with putting information in containers. It will only do that if you hit enter by itself when inside of that div that the image is in. It's easy to remove.

[wige]

Great! Thanks for the advice, the min-height worked perfectly. I was kind of suprised Firefox doesn't force the container to be at least as large as the image inside it.

As for the wierd widths, 150px for the side and 100% for the rest, this causes the page to display fluidly on monitors down to 14" and up to 21" (haven't found any monitors larger or smaller to test on) without the sidebar getting overly wide. When I used a percentage for the sidebar (20%-80% as suggested) on larger monitors the navigation bar gets wide and then there is a lot of wasted white space.

[weslinda]

Only issue I see now is that in IE 6 you go beyond the actual frame size no matter the size of the window.

[drummin]

Your heading background image is still coming up short. Also check your css for duplication and conflicks. Your page itself is fairly simple and really should be restructured instead of patching. css is a mess.