Killersites.com Forum - Print Thread - IE conditional comments for Mozilla vs IE margins vs padding

Killersites.com Forum » List all forums » » Forum: CSS - Styling your pages with Cascading Style Sheets. » » » Thread: IE conditional comments for Mozilla vs IE margins vs padding
Print at May 19, 2013 10:44:52 AM

Posted by shelfimage at Nov 5, 2005 11:18:24 AM

IE conditional comments for Mozilla vs IE margins vs padding
Is there a way to use conditional comments to make an alternate style sheet for Mozilla based brosers?

My specs on a job I'm on specify that the target audience researched (MIS directors) will be using IE 6 or newer browsers. I know better. I've been in corp's and shools where the default brosers on the network is Firefox.

Well, this is the problem I'm having. It is with Margin working correctly for IE and Padding being correct for Mozilla. I'm not sure if the child of div hack is right (never had to use it before) and I tried a conditional statement for IE6. But, it significantly messed with the design.

Before creating an alternate css for IE, I tested margin in IE and padding in Ff and it worked great. here are screens.

Ie with margin and shared css: CORRECT

ff with padding and shared css: CORRECT

IE with Conditional Statement for an Alternative CSS with margin: WRONG!!!

Ff uses the css with the padding version and looks like the CORRECT screen shot above for Firefox when I use a conditional statement in the html for IE. ...? But, IE is all Wrong.

Here's the code:
<link rel="StyleSheet" type="text/css" href="css/global.css" />
<link rel="StyleSheet" type="text/css" href="css/sublevel.css" />

<link rel="StyleSheet" type="text/css" href="css/print.css" media="print" />

from ie_sublevel.css
#subCopy p {
color:#000;
font-size:75.5%;
margin:1px 0 10px 0;
}
#subCopy h1 {
color:#C80000;
font-size:103%;
margin:10px 0 5px 0;
padding-bottom:0;
letter-spacing:-.04em;
}
#subCopy h1.yellowbox {
margin:22px 25px 25px 20px; /* ie conditional *** if mozilla based this would be set to padding */
font-size:80%;
color:#000000;
letter-spacing:normal;
}

from the html:
<div id="subCopy">
<div style="background:url(img/text_box_yellow.gif) no-repeat;width:485px;height:103px;vertical-align:top;">
<h1 class="yellowbox">RedSky is the leading provider of automated E911 software solutions to the enterprise. Since 1999 more than 200 enterprises, including 50 in the Fortune 500, have turned to E911 Manager to automatically track and manage their location information.</h1><div>
<p>With the advent of VoIP technology, today?s workforce is increasingly mobile. In an emergency, when seconds count, enterprises need an automated and reliable E911 solution that can track the exact location of employees or visitors as they move from place to place, and deliver this information to first responders for effective emergency response.</p>

<p>Many state regulations now require enterprises to implement E911 on their communications systems. RedSky E911 solutions comply with all state and federal regulations and provide the reports and transaction logs to create an audit trail that helps protect the enterprise from civil or regulatory liabilities.</p>

<h1>E911 Manager?</h1>
<h2>Total E911 Automation for Digital, Analog and IP Phones</h2>

I first noticed that the inheritance of CSS will generate different results based on where you place the Conditional Statement in the <head></head> of hte document.

But, I still don't understand what is happening other than the "sublevel.css" is still affecting the page rendered by IE even though I have this conditional statement that says to use "ie_sublevel.css" instead.

I can adjust the margin, etc in ie_sublevel.css and it stil doesn't work correctly b/c my <p></p> is all wrong too.

confused

----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

Posted by tpattison at Nov 5, 2005 12:12:47 PM

Re: IE conditional comments for Mozilla vs IE margins vs padding
All stylesheets are loaded in order, as they appear. If color: black; is in the first stylesheet and color: red; is in a sheet referenced below the first, then the style used would be color: red;

In your IE-only sheet you have no padding under #subCopy h1.yellowbox, meaning it would adopt the padding you've used for FF as well as the margins you specify.

In other words, a browser will not "forget" the data found in the sublevel.css unless it is re-specified in the conditional stylesheet.
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen

Posted by LSW at Nov 5, 2005 1:10:45 PM

Re: IE conditional comments for Mozilla vs IE margins vs padding
I would make the site for standards (firefox and co.) and add the conditional comments for the IE versions... in the end no one will know unless they look at the code and it will support IE as wished plus all other browsers which is good for them too.

It falls into the catagory I wrote of once: Who do we really need to design for?, I may be paid by the owner... but I design for the user...

Posted by Broc at Nov 5, 2005 4:56:57 PM

Re: IE conditional comments for Mozilla vs IE margins vs padding
What Tim said.

Redefine your padding to 0px in your ie stylesheet
----------------------------------------
Broc
High Tide Web Services
High Tide Templates

Posted by RaptorRex at Nov 5, 2005 8:36:34 PM

Re: IE conditional comments for Mozilla vs IE margins vs padding
Does this help?

You can avoid a hack and float a box inside so as to fake a padding.

<div style="width: 500px; padding: 0px; margin: 0px; background-color: blue; text-align: center; position: absolute;">
<div style="width: 480px; margin-left: auto; margin-right: auto; margin-top: 10px; background-color: green; margin-bottom: 10px;">
ugly colours that should be the same of course...<br>
but it grows<br>
vertically for you too.
</div>
</div>

Personally, I'm not to happy having to use the "position" element because it is CSS2. But without it FF does not put in the top margin. I'm not sure why. I think it has to do with collapsing rules. Does anybody know for sure?

I am assuming FF is right to act this way since the newest release candidate does the same thing and they were supposed to fix even more of the few problems with Gecko rendering.

Posted by shelfimage at Nov 5, 2005 9:37:50 PM

Re: IE conditional comments for Mozilla vs IE margins vs padding
I tried padding:0 for IE's css before posting - didn't work. Did I add the conditional comment code correctly in the <head></head>?

Also, the paragraphs etc. ghet all messed up. I was really hoping not to have to write two completely different style sheets when the only real difference is mozilla want padding:/* values here */ and IE wants margin: /* same values here */

That kind of makes conditional statements less useful; unless you can use the css specified in the statement to respond like an @rule. In other words, could I have the IE css only contain what I need that is different than mozilla?

So, my css for IE would only have:

#subCopy h1.yellowbox {
margin:22px 25px 25px 20px; /* ie conditional *** if mozilla based this would be set to padding */
font-size:80%;
color:#000000;
letter-spacing:normal;
}

While the primary css would be the complete, full css document?

I'll also try floating a div in the div. That may also be an answer because I received more copy and each paragraph is different in character length and therefore I'd have to make a separate ID for each page to use the margind or padding to make this fit correctly.

-
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

Posted by shelfimage at Nov 5, 2005 10:09:24 PM

Re: IE conditional comments for Mozilla vs IE margins vs padding
Here I am proving once again for the public, my everlasting dorkness.

I didn't close my <div></div>! liar

<div style="background:url(img/text_box_yellow.gif) no-repeat;width:485px;height:103px;vertical-align:top;">
<h1 class="yellowbox">RedSky is the leading provider of automated E911 software solutions to the enterprise. Since 1999 more than 200 enterprises, including 50 in the Fortune 500, have turned to E911 Manager to automatically track and manage their location information.</h1></div>

Ahh, that's better, now the conditional IE works... Go figure.

No more wrestling and getting frustrated when something doesn't work when I know it should. Straight to the validator or code checker in my editor. I mean it this time. no really. wink

----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

Posted by Broc at Nov 6, 2005 12:17:15 AM

Re: IE conditional comments for Mozilla vs IE margins vs padding
forever and ever, amen
----------------------------------------
Broc
High Tide Web Services
High Tide Templates

Current timezone is GMT
May 19, 2013 10:44:52 AM