Fri, 2004-06-25 10:57
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.
Cheers
John
Mon, 2004-06-28 09:00
#1
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 
Is it that Netscape/non-ie browsers are such a low percentage of users that it's not worth building for them?
Mon, 2004-06-28 09:14
#2
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
Tue, 2004-06-29 10:31
#3
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
Tue, 2004-06-29 10:38
#4
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
Tue, 2004-06-29 10:48
#5
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. I'd been fiddling before I came back and spotted your post.
Cheers for the quick replies.
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
Tue, 2004-06-29 20:52
#6
NetScape 7 Vs. IE - Still learning how to format floats..
Hi EssentialBuyerGuides,
The page is still in Quirks mode. 
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
Wed, 2004-06-30 09:11
#7
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" . ?
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.
Cheers
John
Wed, 2004-06-30 23:01
#8
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.
Thu, 2004-07-01 11:10
#9
NetScape 7 Vs. IE - Still learning how to format floats..
Ah, cool, I just tried it on the forum, and got the CSS1Compat message.
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.
Thu, 2004-07-01 11:18
#10
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;
}
Thu, 2004-07-01 16:34
#11
NetScape 7 Vs. IE - Still learning how to format floats..
Woohoo.
I've got the news box thing working fine on IE6 and NN7 now, the doctype thing helped a lot, learning slowly here.
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. 
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.
Thu, 2004-07-01 20:11
#12
NetScape 7 Vs. IE - Still learning how to format floats..
Nice tips tony, the javascript thing is class.
John, did you suss the bullet thing?
Fri, 2004-07-02 09:52
#13
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 )
Fri, 2004-07-02 10:24
#14
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.
Wed, 2004-07-07 20:45
#15
NetScape 7 Vs. IE - Still learning how to format floats..
Tony wrote:
Hi EssentialBuyerGuides,
The page is still in Quirks mode.
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
Wed, 2004-07-07 22:35
#16
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