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]

Originally Posted by 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.

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...

[jontywagener]

i agree, i find it is simpler to make cross browser sites if the code is validated and pure css (no duh? :P)

[PaulClark]

Originally Posted by Marcos117

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...

Whether or not you'd advocate using conditional comments, it remains the correct way to target specific styles at IE6/7, recommended by Microsoft for exactly that purpose. (See MSDN Article on Conditional Comments.)

The two most common strategies are to 'hide' a call to an additional external stylesheet within the conditional comment or, as I prefer to do, to use conditional comments to wrap an additional named DIV around your whole HTML page if the browser is IE, and then target tweaks using dependent selectors.

Regarding creating sites that work cross-browser without specific browser targeting, this is possible for some basic sites, but as soon as you get more sophisticated it is impossible. Reasons for this include:

• IE6 interprets the box model differently to other browsers. As such, if you are doing pixel perfect layout using padding, borders and margin you HAVE TO provide different dimensions to IE.
• IE6 does not recognise min-width and min-height. It also interprets 'height' as other browsers interpret min-height. In complex designs, you will frequently need to set min-height on a DIV, then set height for IE6. You can not just set height for all browsers, as Firefox etc will interpret this as a fixed value and truncate your content if it overflows.
• Certain effects can only be created in IE using microsoft-specific directives. Opacity is a good example. If you put microsoft-specific directives in your general CSS, it won't validate.