16 replies [Last post]
EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

Hi guys,

I'm working on building the new company website and am trying to build it with all the positioning and layout defined by CSS.

Up until this point I've only really used style sheets to format tables and text.

The site looks and works pretty good in Internet Explorer, but for the life of me I can't fathom what it is that'd causing such massive glitches in Netscape, nor through a couple of days trawling message boards, tutorials and the w3c site, can I find a workaround or a solution.

Here's the page, if you have both netscape and IE and stand the pages side by side, you'll instantly see that the newsie box is exploding out of place and leaking out of the main structure.

http://www.thepartymagazine.co.uk/essential

Thanks in advance for any advice forwarded, I'm stumped.
Smile

Cheers

John

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

I don't want to cross post, but I seem to have picked the only inactive forum Laughing out loud

Is it that Netscape/non-ie browsers are such a low percentage of users that it's not worth building for them?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

NetScape 7 Vs. IE - Still learning how to format floats..

Hi EssentialBuyerGuides,
I'd start by putting the page into standards mode, that should help later versions of IE and Mozilla format the box model correctly.
Then you may have to adjust the width of the #newsStuffHomePage to get it looking right.

Hope that helps

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Hi Tony, thanks for the reply

Ah? The bit :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Should I be changing that part to an XHTML thing instead?

Cheers

John

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

NetScape 7 Vs. IE - Still learning how to format floats..

Hi EssentialBuyerGuides,
Try replacing it with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

Hope that helps

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Hehe.. I replaced it with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and got : http://www.thepartymagazine.co.uk/essential/magazine-ekbb.htm

okay, gonna try what you suggested. Smile I'd been fiddling before I came back and spotted your post.

Cheers for the quick replies. Laughing out loud

John

___

Just tried the loose, and IE doesn't render it the same now.

Am I botching everything with too many ID's?

http://www.thepartymagazine.co.uk/essential/magazine-periodhouse.htm

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

NetScape 7 Vs. IE - Still learning how to format floats..

Hi EssentialBuyerGuides,
The page is still in Quirks mode. Shock
If you have firefox with the developers extension, under the information tab select "page information" and you can see what mode the page is in.
Without firefox you can typejavascript:alert(document.compatMode) into the browsers address bar and press enter.
Once you have it in standards Mode the site may be a little different in IE but you should find it easier to get it looking the same in all browsers.

Hope that helps

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

hmmm..

I tried the javascript link in IE6 and in NN7, I got a popup alert saying "BackCompat" . Smile?

Does that mean it's changed the formatting of the page or is it telling me that it is/isn't in quirks mode?

Thanks again for your help Tony, as always much apreciated. Smile

Cheers

John

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

NetScape 7 Vs. IE - Still learning how to format floats..

Hi EssentialBuyerGuides,
BackCompat is quirks mode, CSS1Compat is standards mode.
You want to get the page into standards mode.
Make sure nothing comes before the doctype.

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Ah, cool, I just tried it on the forum, and got the CSS1Compat message. Smile

Do you think changing the doctype will fix the issues with the homepage?

"Argh1" Is IE, "Argh2" is netscape.. Both are rendering the white backdrop thing okay, but the newsie box thing on the right leaks out to the right.

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

This is the CSS styles for the news box.

newsStuffHomePage {
	background: #FF9999 left;
	padding: 0px;
	height: 384px;
	width: 288px;
	display: inline;
	clear: none;
	float: right;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000033;
	text-decoration: none;
	text-align: left;
	margin: 6px 10px 6px -2px;
	text-indent: 2pt;
	vertical-align: top;
	white-space: normal;
	border-bottom: 1px solid #FA7070;
	border-left: 1px solid #FA7070;

}

#newsStuffHomePage p {

	background: #FF6666 left;
	padding: 4px 4px 2px 7px;
	width: 288px;
	display: table-cell;
	clear: both;
	float: none;
	border: 1px solid #FA7070;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000033;
	text-decoration: none;
	text-align: left;
	margin: 2px -1px -1px;
}
#newsStuffHomePage li {
	background: url(images/introbullet.jpg) no-repeat left top;
	padding: 6px 4px 2px 6px;
	width: 288px;
	display: table-cell;
	clear: none;
	float: right;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000033;
	text-decoration: none;
	text-align: left;
	margin: 0px 0px 4px;
	text-indent: 19px;
	list-style: none;

}
#newsStuffHomePage h1 {
	background: #FFFFFF url(images/tabthing.gif) no-repeat left top;
	padding: 6px 0px 0px 8px;
	width: 290px;
	display: block;
	clear: both;
	float: none;
	font: normal 16px/20px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	vertical-align: bottom;
	height: 27px;
}

#newsStuffHomePage li.classyheader{
	background: #990000;
	padding: 2px 0px 2px 5px;
	width: 288px;
	display: table-cell;
	clear: none;
	float: right;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	text-indent: 0px;
	list-style: none;
	text-transform: uppercase;


}


EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Woohoo. Smile

I've got the news box thing working fine on IE6 and NN7 now, the doctype thing helped a lot, learning slowly here. Smile

Since, when I viewed it in Internet Explorer in standards mode ( Pop-up says CSS1Compat ) I could see a lot of my layout was totally jiggled out of place. Crying

Now that I've spent some time sorting out the padding, margins and widths of the boxes, it all lines up neatly.

Just got to hunt down that random black bullet on some of the pages and try and figure out how I can get a nice menu working.

SabbathCat
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Nice tips tony, the javascript thing is class. Smile

John, did you suss the bullet thing?

w00t!

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Sadly not. It seems, just as soon as I fix one thing, something else breaks.

check out the homepage and then look at any other page.

I've not idea what's going on.

http://www.thepartymagazine.co.uk/essential/

I've set the padding and width correctly but of some reason everythng overlaps on the other pages.

What gives? Do I need to do some kind of box model hack thing? (Learning the terminology Smile)

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 14 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Hmmm. Still stumped on the main background:

If you compare these two pages in IE, you can see an obvious shift to the right.

http://www.thepartymagazine.co.uk/essential/

http://www.thepartymagazine.co.uk/essential/contact.html

or alternatively, click the contact and the then home links, and watch the whole of the middle content area jump left like a gazelle on steroids. Shock

statman2000
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2004-07-01
Posts: 6
Points: 0

NetScape 7 Vs. IE - Still learning how to format floats..

Tony wrote:
Hi EssentialBuyerGuides,
The page is still in Quirks mode. Shock
If you have firefox with the developers extension, under the information tab select "page information" and you can see what mode the page is in.
Without firefox you can typejavascript:alert(document.compatMode) into the browsers address bar and press enter.
Once you have it in standards Mode the site may be a little different in IE but you should find it easier to get it looking the same in all browsers.

Hope that helps

Tony,

I tried the javascript you posted on my site (using IE 5.5) and got "undefined". What does that mean?

Bruce

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

NetScape 7 Vs. IE - Still learning how to format floats..

Hi statman2000,
Standards mode is only supported by the newer browsers so if a browser says undefined it has no value for document.compatMode.

Hope that helps