SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
-
Jun 16, 2001, 06:18 #1
- Join Date
- Jan 2001
- Location
- Ottawa ON
- Posts
- 315
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How do you design for both IE5 and Mozilla? Separate versions of your page? JScript?
I've been working on http://rideau.prowsej.com/RHS/main/index.php?page=200 for the past couple of weeks. My design is now complete with the exception that it only works in Internet Explorer and not Netscape. I'm wondering what the best way is to bridge the gulf between these two platforms. For example, they each render font sizes differently, they render widths differently, etc, etc. One stylesheet will not serve for both platforms.
Do you suggest that I direct IE users to one stylesheet and Netscape users to another and Opera users to another, etc., etc. (actually, I'd probably end up ignoring Opera users =)? It'll be very nice when things are all standards compliant and I don't have to make two versions of the page.
With my JavaScript, it doesn't work on both platforms. I'm thinking of checking for the appname and giving users with IE a working set of menus and all other users a JavaScript-less version of the page. I'm not sure why the page doesn't work on Netscape6 so thats why I can't check for a specific attribute in my scripts, only the appname. I'm not very good with JavaScript (my menu script was created by someone else)
Any suggestions you may have about bridging the gulf between the browsers would be appreciated. With IE6 I'm not going to turn on standards compliant mode because it's too buggy with it on. However, from my initial tests, it appears to function almost exactly like Netscape6.
-
Jun 16, 2001, 08:29 #2
- Join Date
- Jun 2001
- Location
- Tallahassee, FL
- Posts
- 98
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
prowsej - Personally, if I write/find a good javascript, I make sure that it's cross-browser compatible ... if it isn't, there's always one out there that is ...
Only once in my experience have I HAD to direct IE to one page and Netscape to another ... the reason was because the image and table spacing in Netscape is a hair different than IE ... but now, with PHP or even javascript, I realize that I could have made the spacing dynamic, based on the browser ...
Also, if Netscape really stops making browsers, eventually the software will be phased out, and people won't design for Netscape compliance (keyword: eventually) ...
It's safe to ignore people with opera, web tv, etc ... you can't please everyone!
What about people at 640x460 with 256 colors ... we all know they're still out there ... but they're a minority now. If you're designing for high tech people, give them what they want! Design for 800x600 and up ... as most designers I know have been above 1024 for years ...
Restaurants don't carry all types of food to please everyone, that's why there are so many different kinds! Identify your target audience and move upward and onward from there!
-
Jun 16, 2001, 08:50 #3
- Join Date
- Jan 2001
- Location
- Ottawa ON
- Posts
- 315
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Re: How do you design for both IE5 and Mozilla? Separate versions of your page? JScript?
Thanks. I've been able to do rather well with using Javascript to direct users to different stylesheets.
<script type="text/javascript">
if (navigator.userAgent.indexOf("MSIE") != -1 &&
navigator.userAgent.indexOf("Windows") != -1 &&
navigator.appVersion.indexOf("5.") != -1) {
document.write('<link rel="stylesheet" href="../main-ie.css" type="text/css">');
}
else {
document.write('<link rel="stylesheet" href="../main-nav.css" type="text/css">');
}
</script>
My page is using PHP. I guess I should be doing the browser check server-side and then going from there. However, if the user doesn't have a recent browser that conforms to CSS1 my page won't be tolerable, so I guess it's not a huge issue.
Could you post PHP code that you've used to detect the user agent?
-
Jun 16, 2001, 09:11 #4
- Join Date
- Oct 2000
- Location
- Austin, TX
- Posts
- 1,438
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This is the code that I use:
PHP Code:if (eregi("msie.[4|5|6]",$HTTP_USER_AGENT))
$browser = "IE";
else if (preg_match("/Netscape6/",$HTTP_USER_AGENT))
$browser = "NS6";
else if(eregi("nav",$HTTP_USER_AGENT))
$browser = "NS";
else
$browser = "Other";
if (document.getElementById) // IE 5, 6, NS6, future browsers
-
Jun 16, 2001, 12:24 #5
- Join Date
- Jan 2001
- Location
- Milton Keynes, UK
- Posts
- 1,011
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
prowsej,
The link below shows how you can use the same stylesheet for multi browsers and get around the font-size differences. (I tried to post the link a couple of days ago for you but SPF was spitting out 'Server Busy' constantly).
http://www.alistapart.com/stories/sizematters/
There's a similar method to get around the way browsers apply the border and padding widths to elements as well.
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Stylesheets can end up pretty messy with these hacks but you may prefer it to using multiple stylesheets.Last edited by shane; Jun 16, 2001 at 12:26.
-
Jun 18, 2001, 07:53 #6
- Join Date
- Jul 2000
- Location
- Singapore
- Posts
- 2,103
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Depending on the styles you use.
I can have netscpae and IE using the same style sheet.
When using separate style sheets...here's how a typical style sheet would work.
style.css
works for IE, Mozilla and Opera
ns.css
as filename goes, only for netscpae 4"Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
-- Albert Einstein
-
Jun 18, 2001, 09:07 #7
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
prowsej...
I noticed a fairly substantial bug on your site when viewing it in IE 5.5 for the PC. Your dropdown menus are totally visible while loading [screenshot].
You should be able to change the default visibility of the menu to off to start with. That should solve it.Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Jun 21, 2001, 11:01 #8
- Join Date
- Sep 1999
- Location
- Singapore
- Posts
- 854
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Actually it seems pretty easy to make a site look good in IE5 and Mozilla. My latest project looks like a Yahoo! property without the CSS (i.e. black text on white background) but it looks perfectly fine in both IE5 and Mozilla using the same CSS with very minimal workarounds.
Netscape 4 is a problem though. I usually put the CSS which really screws with Netscape 4 into a seperate file and use the @import rule for that.
The advice given so far are probably more important than this one though, so pay attention to them.
-
Jun 24, 2001, 05:51 #9
- Join Date
- May 2001
- Location
- Channel Islands Girth: Footlong
- Posts
- 5,882
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I would add to this discussion that you have to be absolutely spot on with your stylesheets for NS to display them - it does not tolerate mistakes (that IE does...)
for example if you said:
BODY {
font-face: Verdana;
font-size: ;
}
IE would display in Verdana at default size. NS would display in default text and size (and any other styles in the sheet would display in IE and not in NS).I swear to drunk I'm not God.
» Matt's debating is not a crime «
Hint: Don't buy a stupid dwarf ö Clicky
-
Jun 24, 2001, 06:09 #10
- Join Date
- Jul 2000
- Location
- Singapore
- Posts
- 2,103
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
lol
if anyone actually used font-face....it own't work in any browsers...it does in IE? grr...IE sucks"Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
-- Albert Einstein
-
Jun 24, 2001, 10:33 #11
- Join Date
- May 2001
- Location
- Channel Islands Girth: Footlong
- Posts
- 5,882
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK so I meant font-family but you get the point!
I swear to drunk I'm not God.
» Matt's debating is not a crime «
Hint: Don't buy a stupid dwarf ö Clicky
-
Jun 24, 2001, 11:32 #12
- Join Date
- Jan 2001
- Location
- Ottawa ON
- Posts
- 315
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by duckie
Actually it seems pretty easy to make a site look good in IE5 and Mozilla. My latest project looks like a Yahoo! property without the CSS (i.e. black text on white background) but it looks perfectly fine in both IE5 and Mozilla using the same CSS with very minimal workarounds.
Netscape 4 is a problem though. I usually put the CSS which really screws with Netscape 4 into a seperate file and use the @import rule for that.
The advice given so far are probably more important than this one though, so pay attention to them.
Internet Explorer 6 fixes this whole problem by supporting the standards - if you turn on standards compliant mode then everything will appear the same in Netscape6 and IE.
-
Jun 24, 2001, 11:37 #13
- Join Date
- Jan 2001
- Location
- Ottawa ON
- Posts
- 315
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by creole
prowsej...
I noticed a fairly substantial bug on your site when viewing it in IE 5.5 for the PC. Your dropdown menus are totally visible while loading [screenshot].
You should be able to change the default visibility of the menu to off to start with. That should solve it.
-
Jun 24, 2001, 12:41 #14
- Join Date
- Sep 1999
- Location
- Singapore
- Posts
- 854
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by prowsej
If you try to make a page completly out of stylesheets rather than using table hacks with gif spacers, etc. then you'll probably encounter some of the stylesheet issues between Netscape and IE.
I still use tables for lay out. I have managed to do almost completely away with GIF spacers and still have the webpages look good in Netscape 4.x, IE4 and 5 as well as Mozilla though.
-
Jun 24, 2001, 13:12 #15
- Join Date
- Jan 2001
- Location
- Ottawa ON
- Posts
- 315
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by duckie
Of course, but the CSS I use is generally nothing too fancy. No CSS positioning for example.
I still use tables for lay out. I have managed to do almost completely away with GIF spacers and still have the webpages look good in Netscape 4.x, IE4 and 5 as well as Mozilla though.
Standards compliance != Browser compliance
[unfortunately]
Bookmarks