22 replies [Last post]
nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Hello there, my site is up and working - www.niknet.homeip.net (sort of) but I noticed today that it looks different in IE6 to Firefox.

well, the only difference is the location of the menu buttons that others have kindly helped me with in the past.

Basically, I want the firefox layout. I want my buttons inside of the logo - which I am altering to remove the transparency as IE cannot deal with it, and I am not sure what I need ot change. Should I change anything, or is this simply another example of IE being, err, duff?

Is there a workaround I could apply to have the two appear the same?

Many thanks,

Nick

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE 6 and Firefox CSS disparity

You've got an extra </body> just below your nav which you should get rid of. The reason it seems right in FF is cos you've set the height of header to the position at which you want your nav to appear and then haven't specified width & height on the image (which will cause a validation error). If you specified height for banner.png, you'll find it breaks in FF too.
So I'd suggest attending to some of your validation errors first.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

binarywebs
Offline
Regular
Sheffield
Last seen: 14 years 9 weeks ago
Sheffield
Joined: 2005-09-12
Posts: 20
Points: 0

IE 6 and Firefox CSS disparity

Here's a tutorial from alistapart that gives a workaround to make png's transparency work in ie.
http://www.alistapart.com/articles/pngopacity

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

Hello, the majority of the validation errors are for Netscape Navigator 4, and I really cannot worry about those.

I am concerned about the difference in spacing between Firefox and IE.

You mention the specification of height adn width - I didn't think I did. My header ( the top banner) is simply a picture called thus:

<body>
<div id="header"><IMG SRC="/pics/banner.png"></div>
<div id="topnav">
<ul>

I am also confused over opacity, as if this is a picture, how can I incorporate the transpacency code into the site?

Apologies for being thick. I really am not sure.

Many thanks for your help,

Nick

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

Hello, I have tried the opacity issue, however the code on the site does not work on the image I have created.

It simply makes it vanish, which is not really helpful at all.

Also, why are the top nav menus not sitting inside of the title in IE? How can I force them to render there?

drhowarddrfine
Offline
Leader
Last seen: 9 years 49 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

IE 6 and Firefox CSS disparity

Quote:
the majority of the validation errors are for Netscape Navigator 4, and I really cannot worry about those.
Say what? Your errors are way beyond that. You don't even have an html tag!

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

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

IE 6 and Firefox CSS disparity

Nick the validator does not validate against specific browsers it validates against the DTD you choose to use and the rules that that DTD instructs on. It has no notion of what browser a page may be viewed on just whether your markup follows proscribed rules for that DTD.

If it reports errors they must be fixed up regardless of any browser or else you would need to reduce your DTD to a loose standard that allowed more leeway in deprecated markup.

Hugo.

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

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

OK, that I understand. As an interim measure, could you let me know how I can keep the topnav words in the same place on both browsers?

What's causing these to shift about?

Also, I've worked on the CSS a little. I'll be honest guys, I am a primary school teacher, not a web designer. if i had infinite time and money I would obviously have a better site, but this is a hobby, not a life.

Currently, doing some reading suggests that Netscape Nav 4 was basically what diesel is to a petrol car for CSS, so ow do I go about change my doc type to include the modern (IE 5.5, IE6, Firefox, opera) browsers only?

Many thanks,

Nick

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE 6 and Firefox CSS disparity

nick.kirby wrote:
Currently, doing some reading suggests that Netscape Nav 4 was basically what diesel is to a petrol car for CSS, so ow do I go about change my doc type to include the modern (IE 5.5, IE6, Firefox, opera) browsers only?

Many thanks,

Nick

Eeeeeeeeeew, that couldn't be much more wrong. IE is bad, not netscape.

Anyway, you don;t use a doctype so NN will ignore your code. You need one there anyway.

Verschwindende wrote:
  • CSS doesn't make pies

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

that may be but most of the world uses IE6. No one likes it - me especially, but that's what people use.

I just wondered if I could change something to ease off the 150 netscape navigator only CSS issues as it supports CSS as well my cat eats dog food.

drhowarddrfine
Offline
Leader
Last seen: 9 years 49 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

IE 6 and Firefox CSS disparity

Quote:
but most of the world uses IE6.
That's no excuse for writing bad or illegal code. Bad or illegal code is unpredictable and hard to fix. Bad or illegal code needs hacks to fix them.

Do you teach your students bad grammar even if they all know what "ain't" means? Don't you teach them the basic fundamentals? Or do you work around improper grammar because they understand it?

I think most of the people here are not going to try and learn how to write bad code to help you with this.

I don't know what you've been reading but apparently it's something written in pre-historic times. Does anyone use NN4 anymore?

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

Please don't lecture me on my job, that's not what the forum is for. Your point is noted, but all I want to do is have my top menu in the same place in firefox as under IE.

Would you tell me how to do thi please.

Thank you

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE 6 and Firefox CSS disparity

Try this:

#header
{
	height: 180px;
	position: relative; z-index: 1;
	background:  #87AEC5 url(/pics/BannerTileBackground.gif) top left repeat-x;
	text-align:center;
}

ul#topnav
{
  position:relative; z-index: 2; 
  margin-top: -70px;
  list-style-type: none;
  text-align:center;
  font-size:1.3em;
}

ul#topnav li
{
  display: inline;
  line-height:1.8em; /*allows menu to wrap but not overlap*/
}
ul#topnav a
{
  text-decoration: none;
  padding: 0 1em;/*let line-height take care of vertical spacing*/
  color: #000;
  background: transparent;
}

ul#topnav a:hover,
ul#topnav li a:active
{
	position:relative;
	border-right:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
}


<div id="header"><img src="/pics/banner.png" width="780" height="180" />
		<ul id="topnav">	
			<li><a href="/index.php">home</a></li>
			<li><a href="/writing.php">writing</a></li>
			<li><a href="/waffle.php">waffle</a></li>

			<li><a href="/comps.php">comps</a></li>
			<li><a href="/articles.php">articles</a></li>
		</ul>
</div>

Make sure you take out the extra </body> just below #topnav which I mentioned before but which hasn't been done.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

Hello, I've changed the code, howeve now the list is now vertical, not "inline", and seems to hve ignored msot of the code set it.

Aside from revering to the previous, how do I go forward with this?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE 6 and Firefox CSS disparity

nick.kirby wrote:
Currently, doing some reading suggests that Netscape Nav 4 was basically what diesel is to a petrol car for CSS

I guess you don't live in Europe then - and certainly not in France.

Smile

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 28 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

IE 6 and Firefox CSS disparity

Or the UK! I have 2 diesel vehicles - wouldn't go back to petrol.

Nick, I understand that you feel that because you are not a web design professional you don't need to do things 100% properly.

The problem with Mark-up is that an error in your coding elsewhere on the page can have unexpected consequences on the bit you're trying to fix.

Going back to the automotive analogies - there's not much point in having carbon disc brakes if you haven't tightened up the wheel nuts - you're wheels are going to come off!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE 6 and Firefox CSS disparity

nick.kirby wrote:
Hello, I've changed the code, howeve now the list is now vertical, not "inline", and seems to hve ignored msot of the code set it.

Aside from revering to the previous, how do I go forward with this?

Here's the whole thing that seems to work OK in FF & IE for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title></title>
<body>
<head>
	<title>NIKNET: A grumpy old man on the web.</title>
		<style type="text/css">
body
{ 
	padding: 1em; /*outside around the sides */
	background: #87AEC5; 
	background-image:  url(http://www.niknet.homeip.net/pics/BannerTileBackground.gif);
	background-position: top left;
	background-repeat: repeat-x;
	font:"Georgia"; 
}
#header
{
	height: 180px;
	position: relative; z-index: 1;
	background:  #87AEC5 url(http://www.niknet.homeip.net/pics/BannerTileBackground.gif) top left repeat-x;
	text-align:center;
}

ul#topnav
{
  position:relative; z-index: 2; 
  margin-top: -70px;
  list-style-type: none;
  text-align:center;
  font-size:1.3em;
}

ul#topnav li
{
  display: inline;
  line-height:1.8em; /*allows menu to wrap but not overlap*/
}
ul#topnav a
{
  text-decoration: none;
  padding: 0 1em;/*let line-height take care of vertical spacing*/
  color: #000;
  background: transparent;
}

ul#topnav a:hover,
ul#topnav li a:active
{
	position:relative;
	border-right:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
}

/* the left hand column */
#leftcol,
#rightcol
{
  width:22%;
  float:left;
  background-color: #6969EB;
  margin:0 2% 0 0;
  font-size:1em;
}

#rightcol
{
  margin:0 0 0 2%;/*swap the margins*/
  text-align:justify;
  float:right;
}

#columnheadings
{
  text-align:center;
  font-size:1.2em;
  vertical-align:middle;
  color:#FFFFFF
}

#centreheading
{
	text-align:left;
	font-size:1.6em;
	vertical-align:middle;
	text-decoration:underline;
	border:8px solid #6969EB;
	border-left-color: #6969EB;
	border-left-style: solid;
	border-left-width:20px;
}

#maincol
{
  width: 50%;
  float:left;
  background-color: #6969EB;
  margin: 0% 0% 3% 0%;
  text-align:justify;
  margin:0 0 0 1em;
}

div.spacing
	{
	margin:3%;
	}

#midbox
{
	width: 40%;
	float:left;
	background-color: #B4B4F5;
	margin: 0% 0% 3% 0%;
}

a:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF }
a:hover {text-decoration: none;color: #FFFFFF }
a:active {text-decoration: none; color: #FFFFFF }
#sidenav ul {margin: 0; padding: 0; list-style-type: none;}
#sidenav a { display: block; font-size:1em; color: #FFF; background-color: #6969EB; width: 85%; padding: .2em .8em;  text-decoration: none; }
#sidenav a:hover {background-color: #B4B4F5;color: #FFFFFF;}

/*

 */
 
/* A fancy gallery */
ul#gallery
{
	margin:0;
	list-style-type:none;
	width:90%;
	font-family: Monotype Corsiva, Harlow Solid Italic, serif;
}
ul#gallery li
{
	float: left;
	margin:5px;
}
ul#gallery li p
{
	text-align: center;
}
		</style>

	<script type="text/javascript" src="http://www.niknet.homeip.net/scripts/nifty.js"></script>
	<script type="text/javascript" src="http://www.niknet.homeip.net/scripts/rounded_final.js"></script></script>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="header"><img src="http://www.niknet.homeip.net/pics/banner.png" width="780" height="180" />
		<ul id="topnav">	
			<li><a href="/index.php">home</a></li>
			<li><a href="/writing.php">writing</a></li>
			<li><a href="/waffle.php">waffle</a></li>

			<li><a href="/comps.php">comps</a></li>
			<li><a href="/articles.php">articles</a></li>
		</ul>
</div>

<div id="leftcol">
	<div id="columnheadings">Contents</div><br>
	<div id="sidenav">

		<ul>
			<li><a href='index.php?content=new'>What's new?</a></li>
			<li><a href='index.php?content=fabcon'>Other Fabulous Content</a></li>
			<li><a href='index.php?content=learn'>What I've Learned</a></li>
			<li><a href='index.php?content=quote'>Quote of the Day</a></li>
			<li><a href='index.php?content=teach'>Teaching Ideas</a></li>

			<li><a href='index.php?content=school'>School Work</a></li>
			<li><a href='index.php?content=newwrit'>New Writings</a></li>
		</ul>
	</div>
</div>

<div id="maincol">
	<div id="centreheading">Welcome!</div>
		<div class="spacing">

		 And yet some more gibberish I've no idea about.	But also here begins the start of genius, madness, and great adventure. No, you were right. Utter madness.
<p>Tomorrow will see the columns levelled, and hopefully the top nav bar aligned properly. Day after that I will be trying to get content relatively dynamic, loaded from external pages into this area. Hopefully spell checked before being sent off?</p>
		 </div>
	</div>

<div id="rightcol">
	<div id="columnheadings">Right Column.</div>
		<div class="spacing">
		<br>Although you wouldn't know it. These columns (left and right) are ostensibly the same size, yet they blatantly aren't.</div>

		</div>	
	</div>

</html>

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

It's not that I don't want to fix my validation errors, but being entirely honest, I am not sure where to start. I can make sure tags are closed/removed.

I think I have done that. I can take out " and replace them with &quot;. I can udnerstand those sorts fo things. My problem is that I often simply don't have either the time or the competency (often the latter!) to know what it is I am looking at.

I think I am making a little progress through small steps. I'll admit to cheating by pushing the list upwards and the columns downwards to get the spacing I am looking for while keeping the list in the place i want it.

Speaking of cars, I can't worry about the wheels falling off when 40 litres just cost me £40!

A thank you to everyone. If someone would like to look at my validation, maybe we can work out some way of return.

Cheers,

Nik

drhowarddrfine
Offline
Leader
Last seen: 9 years 49 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

IE 6 and Firefox CSS disparity

Quote:
Please don't lecture me on my job
It was an analogy.
Quote:
It's not that I don't want to fix my validation errors, but being entirely honest, I am not sure where to start.

Then perhaps you shouldn't be doing this at all but, I assume, you must. I should say that to a lot of people.
It may be better to replace your first line, your doctype, with this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Then follow it with <html> which you are missing but need.

Take your </body> end tag and put it at the end, before the </html> tag.

You have "columnheadings" as an 'id' twice but you can only define an id once per page. Change this to 'class=columnheadings". In your css change #columnheadings to .columnheadings (notice the period).

You are missing a <div> tag matching an end </div> under leftcol

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

IE 6 and Firefox CSS disparity

I have chnged as you suggest, however what you should be aware of is that the pages are composed of sets of PHP files. They are not fixed pages. The header information, for example, comes from ht.php, the left column is the core file "gluing" the remainder together.

Maybe many people "shouldn't" be doing things, heck, with that approach the hundreds of clients I've worked with shouldn't be allowed near a computer, let alone the internet because they don't understand how things work.

If no one tried, fell over, made mistakes and learned from them none of us would be able to walk, tie our shoe laces, write, read, cook, iron or anything.

Suggesting people shouldn't try would have stopped me starting niknet at all, as well, I suspect, as the many thousands of other professionals were not born with immediate knowledge and had to learn from thier own mistakes from other people who have already blundered and learnd from them.

gilmgallo
Offline
newbie
D.C.
Last seen: 13 years 43 weeks ago
D.C.
Joined: 2006-01-13
Posts: 7
Points: 0

ie6 and columns

i need code for only two columns with any type script(i'm using a left side menu) in the first column. Apparently, IE 6 doesn't render this correctly, where firefox does. In IE 6, my 2nd column falls below the first column. I need it to the right. you can see my site at www.oandm.net/client_review/oe/stage_test. Thanks for helping me put my brain back together.

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

IE 6 and Firefox CSS disparity

Hi gilmgallo, welcome,

Please do not dredge up old threads, start a new thread with your question.
and please read forum posting guidelines.

Hugo.

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

nick.kirby
Offline
Regular
Last seen: 14 years 14 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

A reply

Hello, sorry to err, dredge. I don't mean to.

My site is down at the moment, however I still have my CSS code used to create it.

Please email me at if this would be useful. Then, yes, please do post into a new thread.