image set as bg in css does not repeat as per the contents - Page 2 - Graphic Design Forum and Web Design Forum

jontywagener · #11 (**permalink**) 13-03-2008, 02:36 PM

hmmmm, i was working on a site once where margins where different in ie6 than they where in firefox. i used a few hacks and it worked.

i am at the moment working on a site that requires a form. i am building it in css and ie would not display the margins correctly so i had to help it.

yeah, the ms things dont validate, interesting. but i spose their ie8 is better.

i find browsers annoying because they all display differently. I find that FF, Opera and Netscape generally work similar. It would be nice if maybe the browser developers would just create a single standard so that all their browsers displayed the same.

:)

Marc · #12 (**permalink**) 13-03-2008, 03:05 PM

Quote:

Originally Posted by PaulClark

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.

There are ways around these issues just using css. The sites I build range from sme sites to large publisher websites and I've never had to use any conditional statements or CSS hacks.
i.e if you want to add padding to a fixed width div you can simply place a div inside the one with the fixed width and add padding to that...

When I started in my current job they were using multiple stylesheets for all their sites so that they could target browsers. They now just use the one stylesheet as they now realise you can build pixel perfect cross browser sites without the need to conditional statements etc.

jontywagener · #13 (**permalink**) 13-03-2008, 03:18 PM

hmm, ive looked at using multiple stylesheets from time to time, but i always never use it as i never find it nesesary.

PaulClark · #14 (**permalink**) 13-03-2008, 04:38 PM

Marcos (Marc?) - It's clear from your comment that you know how to make sites do what you want them to do. This solution:

Quote:

Originally Posted by Marcos117

if you want to add padding to a fixed width div you can simply place a div inside the one with the fixed width and add padding to that...

works. But - what's so great about making your HTML more complex solely to avoid a standards-friendly, well supported use of conditional comments to target specific directives for browsers that have ideosynchratic rendering?

I agree with not having multiple stylesheets - hard to maintain, and extra round trips to the server to load up, but using conditional comments and dependent selectors it is very easy to target IE versions, as follows:

In the HTML page:

HTML Code:

<body>

    <!--[if lte IE 6]>
        <div id="isIE_version_LTE6">
    <![endif]-->
    
    <!--[if IE 7]>
        <div id="isIE_version_7">
    <![endif]-->
    
        [PAGE CONTENT GOES HERE]
    
    <!--[if lte IE 7]>
        </div>
    <![endif]-->

</body>

In the CSS file:

HTML Code:

.someclass {
      [rules for someclass that IE renders incorrectly]
      }

#isIE_version_7 .someclass {
      [any additional rules required for IE7]
      }

#isIE_version_LTE6 .someclass {
      [any additional rules required for IE6]
      }

This approach minimises the need to mess around with your HTML, as you suggest doing to get around peculiarities of IE6 box model rendering, it is standards-friendly, and it doesn't rely on any hacks (a hack, to my mind, being exploiting one bug to get around another).

Marc · #15 (**permalink**) 13-03-2008, 05:11 PM

Quote:

Originally Posted by PaulClark

Marcos (Marc?) - It's clear from your comment that you know how to make sites do what you want them to do. This solution:

works. But - what's so great about making your HTML more complex solely to avoid a standards-friendly, well supported use of conditional comments to target specific directives for browsers that have ideosynchratic rendering?

I agree with not having multiple stylesheets - hard to maintain, and extra round trips to the server to load up, but using conditional comments and dependent selectors it is very easy to target IE versions, as follows:

In the HTML page:

HTML Code:

<body>

    <!--[if lte IE 6]>
        <div id="isIE_version_LTE6">
    <![endif]-->
    
    <!--[if IE 7]>
        <div id="isIE_version_7">
    <![endif]-->
    
        [PAGE CONTENT GOES HERE]
    
    <!--[if lte IE 7]>
        </div>
    <![endif]-->

</body>

In the CSS file:

HTML Code:

.someclass {
      [rules for someclass that IE renders incorrectly]
      }

#isIE_version_7 .someclass {
      [any additional rules required for IE7]
      }

#isIE_version_LTE6 .someclass {
      [any additional rules required for IE6]
      }

This approach minimises the need to mess around with your HTML, as you suggest doing to get around peculiarities of IE6 box model rendering, it is standards-friendly, and it doesn't rely on any hacks (a hack, to my mind, being exploiting one bug to get around another).

Hi Paul,

I think we're going to have to agree to disagree on this one. Basically both methods achieve the same results. For me, conditional comments use more code overall than the way I would do it, I can get a bit anal about keeping my code as compact as possible. I've also always seen conditional comments as a hack, whether they are or not I really couldn't comment to be honest.

Marc · #16 (**permalink**) 13-03-2008, 05:29 PM

Just found this as well which is an interesting read:

Why “Conditional Comments” Are Bad, Repeat:*Bad – Jens Meiert

PaulClark · #17 (**permalink**) 13-03-2008, 08:24 PM

Yes, an interesting read, with arguments on both sides in the responses.

I think my take on this is that given the choice between CSS hacks and using Conditional Comments to either link an additional stylesheet or wrap an additional div (as I do), CCs is the way to go. That's because hacks rely on bugs in the way current browsers implement CSS; it is impossible to know how future browsers will fix / vary the way they respond to those hacks, but it is certain that no other browser is ever going to implement a behaviour that responds to IE Version Specific CCs.

In regard to the "don't use CCs because that's confusing presentation and content", I don't buy that. The fact is we all compromise continually on the way we structure our HTML for presentational reasons. Want two background images on a link? CSS3 will supposedly let you do it, but for now it has to be <a><span>SOME CONTENT</span></a>. What's that SPAN doing in there? It's not serving any semantic purpose, so even though it doesn't have any styling applied, it's still presentational in my book.

Same applies to your solution for IE6 box model issues. Imagine you have a page with 10 DIVs that you need to apply margin, padding and border to. In your approach, you need to nest an additional DIV inside each to allow you to work around the box model 'without browser targeting'. To me, this is browser targeting: you're just making Firefox, Opera, IE7, IE8 and all future browsers read and render 10 entirely redundant semantically irrelevant divs, and making your css for all browsers more complicated, purely so you can target IE6 and say you are doing everything with one set of styles. My approach: IE6 sees one additional DIV wrapped around the whole page - not ten; other browsers just ignore the comments and see the page as-is. The HTML is lighter, and the CSS is more 'natural'.

Finally, there is the issue of validation. I challenge you to do Opacity without browser-specific CSS for IE. Now, you can put both the 'standards' and the Microsoft opacity rules into your stylesheet with no browser targeting. IE will ignore the 'standards' version; Firefox etc will ignore the IE version. No problem, but the stylesheet won't validate.

Personally, I'm not bothered about making my HTML/stylesheets validate so long as the only validation errors are things I have chosen to put in. (I validate my pages to make sure those are the only errors, but I'm not bothered about putting 'validated' logos on my pages.) Where a client wants opacity (for example the overlays we use to display screenshots on http://www.integresis.com/opensites-build-process.aspx - click a screenshot to see the effect), and demands valid HTML and CSS, you have a problem. The solution: additional styles in your HTML file, hidden in a conditional comment where the validator won't see them. We shouldn't have to do this kind of thing, but sometimes it's just too much trouble to convince a client they are wrong.

As you say, we may have to agree to disagree.

nisha · #18 (**permalink**) 14-03-2008, 06:29 AM

hi,

thanks marcos for helping me out and your suggestion to put the inside_menucard_bottom div inside the the main inside_menucard_main
solved my problem as i wanted but in my next page i have another similar problem
of positioning my menu in an uneven manner.

here is the link to my next page ie. main course:

:: Mr. Chows

their I have placed more then 2 blocks of menu card items in that page
but the placement of those is not as per my design . so i am attaching an
image for u to get idea about my layout and so u can suggest me the changes
to fix my css to achieve the desired look .

Basically when u will see my page and my layout the difference is when i place my
menucard in this page as their r more then 2 blocks and each of them have uneven heights the vertical gap between the 2 blocks is not maintained as per design on the leftside of the page. where as in the in the right side the vertical gap is as per the margins set by my css elements.

hope u understand what am i trying to say.
And thanks all of u for all those good to read articles and suggestions on browsers compatibility
which will help me learn new things.

Thanks for helping.

Marc · #19 (**permalink**) 14-03-2008, 09:06 AM

The only time you NEED to use conditional statements is for PNG transparency or drop menus as "behavior: url('');" does not validate when including your .htc file. All other times there are ways around problems that use less code both in the HTML and CSS.

Agreed, we'll agree to disagree on this one as this could go on forever :)

jontywagener · #20 (**permalink**) 14-03-2008, 09:08 AM

you want the menu items to be underneath each other? remove the clear:both from all of the menu items blocks. this should fix your problem.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

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