5 replies [Last post]
Randominc
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2007-04-05
Posts: 24
Points: 0

Hi all,
i'm in the final stages of development on a new design template, but am experiencing a problem with my navigation image positioning between IE and other browsers [FF/Chrome]. Th dev page is here: http://www.klugemedia.com/dev/APFC/generic.html . The "tab" images have been made to sit 86 px below the top...

	.tab {
		float:right;
		position:relative;
		top: 86px;
		border: none;
		width: 167px;
		height: 27px;
	}

which does great in FF/Chrome, but is 1px too low in IE7. I have a suspicion that i've forgotten to define some header or body value, and IE is just throwing in a slightly different default. However, i can not for the life of me figure out what that is. Can anyone shed some light on this?
Thanks so much,
matt
p.s. xHTML and CSS validates

Header HTML:

</head>
<body onload="MM_preloadImages('images/tabs/news_hover.gif','images/tabs/publications_hover.gif','images/tabs/home_up.gif')">
 
<div id="header">
	<a href="http://www.klugemedia.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/tabs/news_hover.gif',1)"><img src="images/tabs/news_down.gif" id="news" alt="News" class="tab" /></a>  
    <a href="http://www.klugemedia.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('publications','','images/tabs/publications_hover.gif',1)"><img src="images/tabs/publications_down.gif" id="publications" alt="Publications" class="tab"/></a>  
    <img src="images/tabs/purpose_up.gif" alt="Purpose" class="tab"/>
    <a href="http://www.klugemedia.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/tabs/home_hover.gif',1)"><img src="images/tabs/home_down.gif" id="home" alt="Home" class="tab" /></a> 
    <img src="images/logo.png" alt="AFP Consortium"/>
    <p id="subheader">Search</p> 
</div>

Complete CSS:

@charset "utf-8";
/* CSS Document */
 
    /* <!-- */
    /* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			
        width:100%;
        background:#fff;
        min-width:900px;
		font-size:75%;
    }
	a {
    	color:#CC0000;
		text-decoration:none;
	}
	a:hover {
		color:#CC0000;
		text-decoration: underline;
	}
    p { 
		font-family:Verdana, Arial, Helvetica, sans-serif;
		margin:.4em 0 .8em 0;
        padding:0;
		color:#666666;
    }
	img {
		margin:10px 0px 5px;
	}
	/* Header styles */
    #header {
        clear:both;
        float:left;
        width:100%;
    }
	#header {
		border-bottom:1px solid #CC0000;
		background-color:#1E1E1E;
	}
	#header p,
	#header h1,
	#header h2 {
	    padding:.4em 15px 0 15px;
        margin:0;
	}
	#subheader {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.layer1 {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* 3 column blog style settings */
	.master {
	background-image:url(../images/members_bkg2.png);
	background-repeat:repeat;
 
	/*background:#9999FF;/* Right column background colour */
	}
    .master .layer2 {
        float:left;
        width:200%;
        margin-left:-200px; 	/* Width of right column */
        position:relative;
        right:100%;
		background-color:#fff;/* Centre column background colour */
    }
    .master .layer3 {
        float:left;
        width:100%;
        margin-left:-200px; 	/* Width of centre column */
        background:#fff;    	/* Left column background colour */
    }
    .master .contentwrapper {
        float:left;
	    width:50%;
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.master .content {
        margin:0 15px 0 415px;	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:100%;
	    overflow:hidden;
	}
    .master .important {
        float:right;
        width:170px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        left:185px;         	/* Width of the left-had side padding on the left column */
    }
    .master .members {
        float:right;
        width:170px;        	/* Width of right column content (right column width minus left and right padding) */
        position:relative;
        left:555px;
		/*background-image:url(images/members_bkg.png); background-repeat:repeat-y;*/
    }
	.archive{
		text-align:right;
	}
 
	.master .important p {
		color: #666666;
	}
	.master .members a {
		color:#369;
		text-decoration:none;
	}
 
	.master .members a:hover {
		color:#CC0000;
		text-decoration: underline;
	}
		.master .important a {
		color:#666666;
		text-decoration:none;
	}
 
	.master .important a:hover {
		color:#CC0000;
		text-decoration: underline;
	}
 
 
 
 
	/* Footer styles */
	#footer {
        clear:both;
        float:left;
        width:100%;
		border-top:1px solid #CC0000;
		background-color:#eee;
    }
    #footer p {
        padding:10px;
        margin:0;
		text-align:center;
		color: #999999;
    }
 
	#important p {
		color:#333333;
	}
 
	.tab {
		float:right;
		position:relative;
		top: 86px;
		border: none;
		width: 167px;
		height: 27px;
	}
 
	.master .content ul {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#666666;
	}

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

You have far worse problems

You have far worse problems than just a 1 pixel gap. You are putting IE6 into "quirks" mode with your xml prologue at the top of the file just for a start. So IE will be far different than you expect.

Your tiny font sizes and low contrasts will drive away any one with less than perfect eyes. Set your base font size to 100%. Set your font color as close to #000 as possible. Verdana is a poor font for the web. Avoid it if possible.

The web is not paper. It will never be paper. The more you try to treat it like paper the worse your sites will be. Your site is going to look different in different browsers because that's the way the web is desiged to be.

Quote:

In practice, different browsers can and do display the same page very differently. This is deliberate, and doesn't imply any kind of browser bug. A term sometimes used for this is WYSINWOG - What You See Is Not What Others Get (unless by coincidence). It is indeed one of the principal strengths of the web, that (for example) a visually impaired user can select very large print or text-to-speech without a publisher having to go to the trouble and expense of preparing a separate edition.

http://validator.w3.org/docs/why.html

Ed Seedhouse

Posting Guidelines

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

Randominc
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2007-04-05
Posts: 24
Points: 0

Ed Seedhouse wrote:You have

Ed Seedhouse wrote:

You have far worse problems than just a 1 pixel gap. You are putting IE6 into "quirks" mode with your xml prologue at the top of the file just for a start. So IE will be far different than you expect.

Yes, that's something i'll have to address. Not 100% sure how - i'm sure it will require more learning. Any thoughts?

Ed Seedhouse wrote:

Your tiny font sizes and low contrasts will drive away any one with less than perfect eyes.

With the understanding that this is an unsolicited over-exaggeration, i've taken this point into consideration and bumped up the fonts a bit, as well as increased the contrast a bit. Now, it could just be my display settings, but the page has far more contrast than the browser window itself, and the text is larger than many text-heavy sites like www.cnn.com.

Ed Seedhouse wrote:

Verdana is a poor font for the web. Avoid it if possible.

Really? Now i'm just totally confused. Verdana is undoubtedly one of the most used and most popular web fonts... right? A quick google search seems to confirm this...

Ed Seedhouse wrote:

The web is not paper. It will never be paper. The more you try to treat it like paper the worse your sites will be. Your site is going to look different in different browsers because that's the way the web is desiged to be.

I'm sorry - i just totally disagree. Browsers should display the same content in the same manner. Is that not why there is a standards push? Pressure on browser makers to comply? Are you suggesting that all browsers should move away from web standards and go back to doing things their own way? What does print size or text-to-speech have to do with IE vs. FF? Each should have this functionality, sure. But each should display a site written to modern standard spec equivalently. Personal browser choice should be based on functionality, speed, convenience, etc. Not the how it chooses to display the contents of the viewport.

I appreciate the input, and if you have any clues regarding the quirks mode, i would appreciate hearing them, as i am still a beginner and don't have a full grasp of these details. For those interested in the original technical question, i was unable to solve it, so i had to use IE conditional comments to modify the top: px dimension for IE.

Kind Regards,
matt

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

Randominc wrote:Ed Seedhouse

Randominc wrote:
Ed Seedhouse wrote:

Your tiny font sizes and low contrasts will drive away any one with less than perfect eyes.

With the understanding that this is an unsolicited over-exaggeration,

No. It isn't.

Quote:
Ed Seedhouse wrote:

Verdana is a poor font for the web. Avoid it if possible.

Really? Now i'm just totally confused.

Yes you are.http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Quote:

Ed Seedhouse wrote:

The web is not paper. It will never be paper. The more you try to treat it like paper the worse your sites will be. Your site is going to look different in different browsers because that's the way the web is desiged to be.

I'm sorry - i just totally disagree. Browsers should display the same content in the same manner. Is that not why there is a standards push?

You are wrong. The standards movement is not about how web sites look, it is about how they work. The Web is not paper! If you think it is you are completely ignorant of modern web design methodology.

Here is what the very people who maintain the standard say:

Quote:

In practice, different browsers can and do display the same page very differently. This is deliberate, and doesn't imply any kind of browser bug. A term sometimes used for this is WYSINWOG - What You See Is Not What Others Get (unless by coincidence). It is indeed one of the principal strengths of the web, that (for example) a visually impaired user can select very large print or text-to-speech without a publisher having to go to the trouble and expense of preparing a separate edition.

http://validator.w3.org/docs/why.html

You are off on the wrong tack. Your belief that the web is or can be paper and designed for as if it were paper is totally wrong. As long as you do believe that you will create bad web designs, such as the one in question here.

Sorry to be rough on you, but you'd better learn the right way to design web pages now before it is too late.

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: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You're right browsers should

You're right browsers should render in the same manner, and advances in the specs and standards worked at the 'working group' stage, however there is still the issue that the specs don't always specify how an element should be rendered - lists being a case in point where it is up to the browser to decide how they indent lists thus quite legitimate rendering differences, mores the pity.

!px differences tend to be somewhat frowned upon as they do indicate an attempt at web pages that are simply copies of a designers print mentality approach to page styling, although they can throw out a design and need to be dealt with, it's usually better to not have that rigid requirement though as simple bad maths or rounding errors can sometimes make it difficult to achieve pixel perfection. The approach you have taken to solve this will probably be best.

As for the xml declaration, you need to read up a little on the subject of doctypes and page delivery/content types. You have pretend XHTML it is not real XHTML delivered in the proscribed manner although you have attempted to code the page to that effect by stating application:xhtml+xml and including the xml declaration. Look at your server setup it's set to deliver pages as type text/html this overrides anything you may state in the page while it's called up from the server. You must change your content type to text/html in the page and loose the xml declaration completely, it's simply not required , not performing any function required and isn't strictly required even if you were serving the page as application:xhtml+xml utf-8.

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

Randominc
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2007-04-05
Posts: 24
Points: 0

Hugo, Thanks for the

Hugo,
Thanks for the insight. I'll have to read up a bit more to get that last paragraph, but i'll surely do so. I appreciate the input.

Ed, i think i see what you're getting at, despite your best attempts to obscure a good point with unnecessary agression. Guess what Ed - i AM pretty ignorant of modern web design methodology. That's why i'm posting in the BEGINNER's section. *looks around* This is the beginner's forum, right? Also, thanks for knocking the entire design. I appreciate THAT.

Truth be told, i think the page is *pretty* flexible as it is now. If i want to style the two columns with em widths, i may, in the future. It might just be a good idea. But for right now, the px width columns seem to respond reasonably well to text size adjustments in all browesrs i'm testing, so i'll leave that for later polishing. The only real problem i see is the positioning of the tab navigation menu. I GET that it's not ideal to have them "x"px from the top. But, i'm just not sure how to achieve the same look with better CSS.

The conditional comments did fix the problem, but i'm noticing that when the text is dramatically resized, the tabs still pop out of alignment. So, i think i've band-aided the problem, but (and i think we can all agree that this next part is going to be good) i'd like to learn to apply a better fix, one in line with Ed's "modern web design methodology" - one that doesn't rely on "cheap px tricks". DO i start stacking div's? One for the header, one for the nav "bar" and one for the subheader grey area?

Any advice or input would be much appreciated. Even from you Ed.
matt