Graphic Design Forum and Web Design Forum  

Go Back   Graphic Design Forum and Web Design Forum »Web Design Forum »CSS Forum

Notices

CSS Forum Cascading Style Sheets (CSS) and XHTML Forum


Reply
 
LinkBack (1) Thread Tools Display Modes
  1 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 13-03-2008, 10:28 AM
nisha's Avatar
Junior Member
 
Join Date: Mar 2008
Gender: Female
Posts: 25
Default image set as bg in css does not repeat as per the contents

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.
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #2 (permalink)  
Old 13-03-2008, 10:43 AM
jontywagener's Avatar
Experienced Member
 
Join Date: Oct 2007
Location: South Africa
Posts: 126
Default

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.
__________________
its just me :)
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #3 (permalink)  
Old 13-03-2008, 10:44 AM
jontywagener's Avatar
Experienced Member
 
Join Date: Oct 2007
Location: South Africa
Posts: 126
Default

BTW im also using firefox beta3 as well.
__________________
its just me :)
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #4 (permalink)  
Old 13-03-2008, 11:23 AM
nisha's Avatar
Junior Member
 
Join Date: Mar 2008
Gender: Female
Posts: 25
Default

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.
Attached Images
File Type: jpg menupage.jpg (175.9 KB, 4 views)
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #5 (permalink)  
Old 13-03-2008, 12:00 PM
Batfink
 
Join Date: Feb 2007
Posts: 52
Default

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.....
__________________
benchmarc
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #6 (permalink)  
Old 13-03-2008, 12:53 PM
Junior Member
 
Join Date: Mar 2008
Location: Kent, UK
Posts: 24
Default

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.
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #7 (permalink)  
Old 13-03-2008, 01:00 PM
jontywagener's Avatar
Experienced Member
 
Join Date: Oct 2007
Location: South Africa
Posts: 126
Default

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
__________________
its just me :)
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #8 (permalink)  
Old 13-03-2008, 01:01 PM
Batfink
 
Join Date: Feb 2007
Posts: 52
Default

Quote:
Originally Posted by PaulClark View Post
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...
__________________
benchmarc
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #9 (permalink)  
Old 13-03-2008, 01:03 PM
jontywagener's Avatar
Experienced Member
 
Join Date: Oct 2007
Location: South Africa
Posts: 126
Default

i agree, i find it is simpler to make cross browser sites if the code is validated and pure css (no duh? :P)
__________________
its just me :)
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #10 (permalink)  
Old 13-03-2008, 02:21 PM
Junior Member
 
Join Date: Mar 2008
Location: Kent, UK
Posts: 24
Default

Quote:
Originally Posted by Marcos117 View Post
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.
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Spliting image? Danyo Graphic Design and Web Design Help 10 27-03-2008 12:55 AM
Image masking : Image Editing Services Graphic Design Links Graphic Design Links 0 24-03-2008 10:50 AM
Help with image display! SidekickWD Graphic Design and Web Design Help 8 13-02-2008 08:38 PM
image ferdy PC Forum 4 06-06-2007 11:04 AM
.gif image not showing up? zammmm Graphic Design and Web Design Help 4 07-02-2007 10:46 PM


All times are GMT. The time now is 09:42 PM.



Estetica Design Forum's Privacy Policy
Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC5