image set as bg in css does not repeat as per the contents

[nisha]

---

---

Hi,

I am learning css and have started developing my site with css codes without using tables in the page. Now the problem is that i have developed a page where i have placed one block as per my design. here i have 3 images. one is the top image, the bottom and the center image is set in the background of my element in css. the whole code works and looks fine in Internet explorer.

but when i look the page in firefox browser the middle image which should be repeating itself till the end on the text placed inside it stops after a certain height. where as i have not specified any height for it.

Here is the link to my page.

:: Mr. Chows

Also in firefox the whole block of menu card displayed in my page
moves to the bottom of the page instead of where it is placed actually.
so first look in Internet explorer to get an idea of the display of the contents in my page as per my design and then see the page in fire fox.
so u will understand the difference and can suggest me how to fix those
errors in my page.

Hope u guys understand my point.
Help and assistance from anyone will be appreciated.

[jontywagener]

ok, it looks worse to me in ie7 than in firefox3. could i have some more information on how the page is layed out so that i can get an idea of what is going wrong?

In ie7 the footer (copyright bar) has all raised itself to almost the top of the page. (BTW: ur copyright says 2007)

In firefox everything is layed out correctly, just the menu backgrounds are not doing what they should.

[jontywagener]

BTW im also using firefox beta3 as well.

[nisha]

Hi,

Thanks for the quick reply. I am using firefox 2 and IE 6 and 7.
but at the time of posting the thread i had only seen the page in firefox 2.2 and IE
6.

and i am also attaching an image of my layout.
so u will have a fair idea about my design.

Please suggest me how to fix all the errors on my page which
may be i have not yet notices. so u can also draw my attention
to those points too.

Thanks.

[Marc]

You need to place #inside_menucard_bottom just above the closing div of #inside_menucard_main. Then set #inside_menucard_bottom to:

#inside_menucard_bottom{
clear:both;
}

i.e.

<div class="inside_menucard_main">
<div class="inside_menucard_list">
</div>
<div class="inside_menucard_bottom"></div>
</div>

I haven't tested it but it should do the job.....

[PaulClark]

Some general tips:

• Use Firefox as your main browser while developing pages.
• Get the Firebug plug-in to help you tune your CSS
• Once the design is right for Firefox, tune as required for IE7, then IE6.
• Target any IE tweaks using conditional comments.

You'll find developing this way around much faster.

[jontywagener]

so what u want to do is hide the excess menu items. use overflow:hidden on the element that u wish to hide.

please tell me if that is too vague and completely un-useful and i will try again

J

[Marc]

---

---

Some general tips:

• Use Firefox as your main browser while developing pages.
• Get the Firebug plug-in to help you tune your CSS
• Once the design is right for Firefox, tune as required for IE7, then IE6.
• Target any IE tweaks using conditional comments.

You'll find developing this way around much faster.

I personally wouldn't advocate the use of conditional comments. It's actually not that hard to build a site without them that will render perfectly in IE6, IE7, firefox and safari...