16 replies [Last post]
ljCharlie
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

I have the following:

float:right;
\margin-top: 20px;
margin-top: -20px;
\margin-bottom: 0px;
margin-bottom: -20px;

For the IE7 browser, the margin needs to be -20px but for FireFox, it needs to be zero px. How do I write my margin-top and bottom so it works on both browsers or all browsers?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't ask us to show you how

Don't ask us to show you how to hack, most of us here dislike them; often there is a better approach so show us you real issue and let us decide what approach is needed and if you do need to filter rules to IE use conditional comments rather that the ugly mess you have shown us and which is about 5 years old Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ljCharlie
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

Thanks for the response, but

Thanks for the response, but in case you have not read my post thoroughly, I'll paste it in here one more time.

"For the IE7 browser, the margin needs to be -20px but for FireFox, it needs to be zero px. How do I write my margin-top and bottom so it works on both browsers or all browsers?"

In the body of my post, I did not ask you to hack. I simply ask if there is a better way so that my code will work on both browsers (IE7 and FF) or all browser. And yes, it's a 5 years old method that's why I need help in making it work in new and better ways as I've asked in the body of my post.

css-helper
Offline
Enthusiast
UK
Last seen: 10 years 43 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Okay, you can try this...

Add the following conditional statement into the of the page in question:

<!--[if IE 7]>
<style type="text/css" media="screen">
	@import url("/css/ms-ie7.css");
</style>
<![endif]-->

then created an ms-ie7.css file that contains

margin-top: -20px;
margin-bottom: -20px;

or more simply:

margin: -20px 0;

and in your main css file just leave the margin statements you want for Firefox. See how you get on. And like the previous comment, I agree you would get more help if you posted your full HTML and CSS. Unlike the previous comment though, I don't agree that it's the forum's job to "decide" what's best for you! Suggestions only is its role.

Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

ljCharlie wrote:Thanks for

ljCharlie wrote:

Thanks for the response, but in case you have not read my post thoroughly, I'll paste it in here one more time.

"For the IE7 browser, the margin needs to be -20px but for FireFox, it needs to be zero px. How do I write my margin-top and bottom so it works on both browsers or all browsers?"

In the body of my post, I did not ask you to hack. I simply ask if there is a better way so that my code will work on both browsers (IE7 and FF) or all browser. And yes, it's a 5 years old method that's why I need help in making it work in new and better ways as I've asked in the body of my post.

The real problem to be solved is not how to give IE7 a different margin, the question is why does IE7 require a different margin?

To throw stuff at the wall, hoping for stickage, without knowing why the wall is there in the first place, is to cover up the issue without a real solution. What happens when some bit of maintenance or debugging clears the original problem, but breaks the page because of a naive fix?

More often than not, it is a mistake to ask how to implement what you think is the solution.

Show us the page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

ljCharlie wrote: For the IE7

ljCharlie wrote:

For the IE7 browser, the margin needs to be -20px but for FireFox, it needs to be zero px.

if your page is properly designed and coded this should not be so. All modern browsers follow the box model correctly if you have coded right.

IE 5.5 doesn't, but is not "modern" in any sense. IE6 will follow the correct box model if your code is correct. If you are finding that it doesn't then there is something wrong with your code that hacks won't fix.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ljCharlie wrote:Thanks for

ljCharlie wrote:

Thanks for the response, but in case you have not read my post thoroughly, I'll paste it in here one more time.

"For the IE7 browser, the margin needs to be -20px but for FireFox, it needs to be zero px. How do I write my margin-top and bottom so it works on both browsers or all browsers?"

In the body of my post, I did not ask you to hack. I simply ask if there is a better way so that my code will work on both browsers (IE7 and FF) or all browser. And yes, it's a 5 years old method that's why I need help in making it work in new and better ways as I've asked in the body of my post.

No I did read your post, sadly you did not understand mine, I asked to see what the problem was then we could indeed suggest a better approach but how to do that with no sight of your markup or a clue as to what you are trying to correct? As you simply post the sight of a hacked ruleset there is little for us to help with you also seem to insist that this margin adjustment is necessary we might be able to suggest otherwise.

Note Gary's post a bit later on it says exactly what I did!

@CSS-helper please do not make out that I'm being dictatorial Smile decide,suggest it's one and the same thing essentially, people come here for the benefit of others perhaps greater experience, in that I am free to use the word 'Deside' it would be my considered opinion on the best approach based on a fair few years experience.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ljCharlie
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

I guess what you see as the

I guess what you see as the main problem is not exactly what I see as a problem. For me, the margin differences between the two browser is the problem. That is why I post just that. However, if you want to see the page, here it is.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="myMaster.master.cs" Inherits="myMaster" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>
        <% =SiteMap.CurrentNode.Title %>
    </title>
    <link href="CSS/basicSecure.css" rel="stylesheet" type="text/css" />
</head>
<body class="third">
    <div id="container">
        <div id="myCompnavnav">
            <form action="http://www.google.com/mySite" method="get">
                <label for="q">
                    Search My Site
                </label>
                <input maxlength="255" size="15" name="q" id="q" /><input type="submit" value="Go"
                    name="sa" /><input type="hidden" value="MySite.com" name="domains" /><input type="hidden"
                        value="MySite.com" name="sitesearch" /></form>
            <p>
                <a href="http://www.mySite.com/" title="Back to UW-myCompnav homepage">My Company Name Goes here.</a></p>
        </div>
        <div id="header">
            <form id="frmMain" runat="server">
            <h1>
                <% =SiteMap.CurrentNode.Title %>
            </h1>
            <div class="pic">
                <asp:Image ID="imgStaff" runat="server" Height="80px" />
            </div>
            <p>
                <asp:SiteMapPath ID="BreadcrumbPath" runat="server">
                </asp:SiteMapPath>
            </p>
        </div>
        <div id="content" style="width: 715px">
                <asp:ContentPlaceHolder ID="cpMain" runat="server">
                </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            <div id="copyright">
                <a href="http://www.mySite.com/about.shtml">About This Site</a> | <a href="http://www.mySite.com/contact.shtml">
                    Comments and Suggestions</a><br />
                Updated: <asp:Label ID="lblModDate" runat="server"></asp:Label>&nbsp;© My Site Logo Goes here.
            </div>
            <address>
                <a href="http://www.mySite.com/myWeb">My Site Company </a>
                And my address goes here.
            </address>
        </div>
            </form>
    </div>
</body>
</html>

My CSS:

/* CSS Document */
 
body { 
	margin: 0;
	padding: 0;
	font: 76% Verdana, Arial, Helvetica, sans-serif;
	background:#aeaeae url(../images/back.gif);
}
 
/* #container holds all the other divs and defines the page width */
	#container {
		width: 760px;
		\width: 780px;  /* box-model hack for bad browsers */
		w\idth: 760px;
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		padding: 0px;
		background-color: #ddf;
	}
	body.main #container, body.blogger #container { background-image: url(../images/content-main.gif); }
	body.second #container { background-image: url(../images/content.gif); }
	body.third #container { background-color: #fff; }
	#container span { font-weight:normal; }
/* end #container */
 
/* #myCompnav defines a site-wide link to home and search functionality */
	#myCompnav {
		margin: 0;
		padding: 5px;
		font: 12px Arial, Helvetica, sans-serif;
		vertical-align:top;
		background-color:#006;
		color:#fff;
		border-bottom: 2px solid #af5a4e;
		height:20px;
	}
	#myCompnav form {
		float:right;
		padding: 0;
		margin: 0;
	}
	#myCompnav input { 
		border: 1px solid black;
		margin: 0 0 0 5px;
		padding: 0;
	}
	#myCompnav p {
		margin: 0;
		padding: 5px 0 0;
		float:left;
	}
	#myCompnav a {
		text-decoration:none;
		color: #fff;
	}
/* end #myCompnav */
 
/* #header defines page title with subsite breadcrumbs */
	#header {
		padding: 0;
		margin: 0;
		color: #fff;
		background: #006; /* default administrative color */
	}
	#header .pic
	{
	    float:right;
	    margin-top: -20px;
	    margin-bottom: -20px;
	}
	body.second #header { margin: 0 0 0 200px; }
	#header a { color: #0000ff; }
	#header p 
	{
	    clear: both;
		padding: 5px 25px;
		font-size: 1.0em;
		margin:0;
		color: #000;
		background-color:#ddf; /* default administrative shade */
	}
/* end #header */
 
/* #content holds the page content */
	#content { margin: 0; }
	body.main #content, body.blogger #content {
		padding: 5px 5px 5px 10px;
		width: 450px;
		\width: 470px;
		w\idth: 450px;
	}
	body.blogger #content {
		float: left;
	}
	body.second #content {
		padding: 5px 15px;
		margin-left: 210px;
		width: 510px;
		\width: 540px;
		w\idth: 510px;
	}
	body.third #content {
		padding: 5px 15px;
		margin-left: 10px;
		width: 570px;
		\width: 600px;
		w\idth: 570px;
	}
/* end #content */
 
/* header goodness some with specificity */
	h2, h3, h4, h5 {
		font-family: Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
		color: #333;
	}	
	#header h1 
	{
	    float: left;
		margin: 0;
		font-size: 2.0em;
		padding: 0px 25px;
	}
	body.main #header h1 {
		padding: 0;
		display: block;
		height: 120px;
		text-indent: -9999px;
	}
	#content h2, #nav h2 {
		font-size: 1.7em;
		margin: 0 0 5px;
		padding: 0 0 2px;
		border-bottom: 1px solid #006;
	}
	h3 { font-size: 1.4em; }
	h4 { font-size: 1.2em; }
	h5 { font-size: 1.0em; }
	h6 { font-size: 0.8em; }
/* end headers */
 
/* #nav contains nav or goodies */ 
	#nav { 
		padding: 0; 
		clear: both; 
	} 
	body.main #nav, body.blogger #nav { 
		float:right;
		width: 220px; 
		\width: 250px; 
		w\idth: 220px; 
		margin: 10px 10px 0 0; 
		padding: 0; 
	} 
	body.second #nav { 
		float:left; 
		width: 200px; 
		\width: 210px; 
		w\idth: 200px; 
		padding:0 0 20px; 
		margin: 0; 
	} 
	body.second #nav img { 
		padding-bottom: 10px; 
	} 
	#nav a { color: #006; } 
	body.second #nav ul { 
		list-style: none; 
		padding: 0 0 0 5px; 
		margin: 0; 
	} 
	body.second #nav ul li { 
		margin: 0 0 7px 0; 
		font-size: 11px; 
	} 
	body.second #nav ul li ul li { margin: 0 0 5px 15px; }
	.skip { display:none; } 
/* end #nav */ 
 
#content p, #nav p {
	padding: 0;
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 140%;
}
#content li, #content ol {
	margin-top: 0;
	line-height: 140%;
}
code, pre { font-family:"Courier New", Courier, mono, monospace; }
 
/* definition lists, all that and a bag of chips! */
#content dl {
	margin:0px;
	padding:0;
}
#content dt { font-weight: bold; }
#content dd {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	padding: 0 5px 0 0;
}
/* end definition list*/
 
/* #footer defines a side wide convention of document and contact info */
	#footer {
		clear: both;
		padding: 5px 10px;
		margin: 0;
		border-top: solid 2px #AF5A4E;
		height: 120px;
		color: #fff;
		background: #006 url(../images/rev_logo.gif) no-repeat right top;
	}
	body.main #footer, body.blogger #footer { background-position: 510px; }
	body.second #footer { background-position: 0px; }
	#footer address {
		margin-top: 10px;
		white-space: pre;
		font-style: normal;
	}
	body.second #footer address, body.second #footer #copyright { margin-left: 215px; }
	#footer a { color: #BFBFD9; }
/* end #footer */
 
/* start of table section */
    .hdrRow
{
    background-color: Navy;
    padding-right: 5px;
    color: White;
    font-weight: bold;
}
    .hdrRowEdit
{
    background-color: #CD661D;
    padding-right: 5px;
    color: White;
    font-weight: bold;
}
    .hdrRowInsert
{
    background-color: #3B5E2B;
    padding-right: 5px;
    color: White;
    font-weight: bold;
}
    .itemRow
{
    background-color: #E6E8FA;
    padding-right: 5px;
}
    .itemAltRow
{
    background-color: #F8F8FF;
    padding-right: 5px;
}
/* end of table section */
/* start of form textbox formatting */
 
.frmTextBoxEdit
{
    background-color: #EEE5DE;
}
.frmTextBoxInsert
{
    background-color: #C0D9AF;
}
 
/* end of form textbox formatting */
/* controls the look in the adminAllStaff.aspx and allStaff.aspx page */
.bio-footer
{
	margin: 0 0 20px;
	padding: 0;
	display: block;
	width: 510px;
}
.bio-footer ul
{
	margin: 0 0 10px;
	padding: 0;
	list-style-type: none;
	clear: right;
	display: block;
	width: 100%;
}
.bio-footer li
{
	float: left;
	line-height: 11px;
	margin: 0;
	text-decoration: none;
	color: #999;
	font-size: 10px;
	width: 170px;
}
#staffFullName A, A:link, A:visited, A:active, A:hover 
{
    color: #000066;
    text-decoration: none;
}
/* end of controls the look in the adminAllStaff.aspx and allStaff.aspx page */

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Here's the problem:

Here's the problem:
<%@ Master Language="C#" AutoEventWireup="true"

This or anything else, even a comment in proper html format, before the doctype declaration puts IE 6 and 7 into "quirks" rendering mode where they get the box model wrong. You don't need any hacks to fix that, you need to put your doctype declaration on the first line of the file.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

css-helper
Offline
Enthusiast
UK
Last seen: 10 years 43 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Next Suggestion...

...is to put a link to your live web page so everyone can see the results after any pre-processing has taken place. Then, the experts (my meagre 18 posts does not entitle me to use that epithet) can tell you what is best for you in your particular case.

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

ljCharlie
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

Ed Seedhouse wrote:Here's

Ed Seedhouse wrote:

Here's the problem:
<%@ Master Language="C#" AutoEventWireup="true"

This or anything else, even a comment in proper html format, before the doctype declaration puts IE 6 and 7 into "quirks" rendering mode where they get the box model wrong. You don't need any hacks to fix that, you need to put your doctype declaration on the first line of the file.

Are you suggesting that I should put my Master page declaration after the doctype?

ljCharlie
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

Ed Seedhouse wrote:Here's

Ed Seedhouse wrote:

Here's the problem:
<%@ Master Language="C#" AutoEventWireup="true"

This or anything else, even a comment in proper html format, before the doctype declaration puts IE 6 and 7 into "quirks" rendering mode where they get the box model wrong. You don't need any hacks to fix that, you need to put your doctype declaration on the first line of the file.

Well, that is not it. I tried putting the master page declaration below the doctype and that doesn't solve the problem.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And have you not got the

And have you not got the page up live anywhere?

If not can you explain the issue a little more describing which margins, which elements (ignore this request if you did so earlier)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Source code

ljCharlie wrote:

However, if you want to see the page, here it is.

After you've taken the time to post (almost) what we asked of you, I hate to ask for more, but I will.

The code you posted contains server side instructions. What we really need to see is the document the browser sees. If you don't have this up on a public server, open the page in your browser, view source, and copy/paste to your comment. If it is available online, post the link.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ljCharlie
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

No, I'm working on my Vista

No, I'm working on my Vista PC. As I said before, the top and bottom margin is the problem. Normally, when the margin-top and margin-bottom is zero, there is no space above or below the picture. I already post my asp.net code above but here's the main problem:

 =SiteMap.CurrentNode.Title

Even if I comment out the the header 1 and just have the "pic" div, I still would have 20 pixel space above and below the image control in IE7 if the top and bottom margin is set to 0 instead of -20. I'm not sure what else could have caused the extra 20 pixel shifting.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Let me emphasize; we need to

Let me emphasize; we need to see the html that the browser gets, not the asp.net scripting. Please open the page in your browser, view source, and copy that to this thread. The browser renders html, not asp.net.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

ljCharlie wrote:Are you

ljCharlie wrote:

Are you suggesting that I should put my Master page declaration after the doctype?

I am saying that the html actually sent to a browser cannot have anything before the document type declaration. That's actually part of the specification. The DTD is SGML, not html, and identifies what follows it to be html, an SGML language. As such it should go first, before any html.

In practice most browsers can handle a comment before the DTD, but IE6 and IE7 cannot. They go into "quirks" mode and act like IE5.5, getting the box model wrong.

Nevertheless, the correct method is to put your DTD on the very first line of the html sent to the browser.

I was assuming you were posting your actual html, but it seems now, on reviewing other messages, that you may not have been. The only thing a browser has to go by is the actual code you send it. Server side languages always output actual code to go to the browser and that output has to be html. The only way we can help you is to see the actual html code that your browser sees, not the server-side .asp code.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.