• Welcome to Twisted DIRT Forums.
 

Alternative Browsers

Started by AMA_DirtTwister, September 10, 2004, 03:24:02 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

AMA_DirtTwister

Guess what my default browser currently is?

Firefox 1.0

There are two things that have made me make the switch.  It's currently in experimental mode. 

The first is that since I updated to XP SP2 I am unable to download from my server using PHPMyAdmin in IE.  Don't know why and really haven't had the time to figure out if there is some option that I need to set.  It works fine in Fiirefox.

The second is the WebDeveloper toolbar. 

Bruce  (AMA_DirtTwister)

AMA_DirtTwister - http://dirttwister.com

MotoX395

Thats superb Bruce! I love the web developer toolbar meself, a neat tool. :D
^^^^^^^^^^^^^^

51

im starting to notice that firefox does not support iFrames? or at least they dont show up properly. maybe its the coding? im curious because i was going to use an iframe in a site im building and when i view it in IE it works fine, but in firefox the scrollbar for the iframe is over into the frame about 3px and the background image in the iframe MOVES in FF when it does not move in IE (which is what I want). ugh...

MotoX395

When something doesn't work in FF/other modern browser but do work in IE then it's the case of improper coding. Iframes are a bad idea in general though, google link wrong and have a hard time reading content from index pages and also it's a fairly useless thing in most cases. Iframes aren't supported by some newer in progress doctypes, they are aged/ageing.

Show the code that the problem is about and I'll take a peak at if. Unless you'd mind that of course. :)
^^^^^^^^^^^^^^

51

ok whats the alternative of an iframe that basically does the same thing as an iframe though? i think they are nice for putting in a scrollable area with content without totally adjusting the whole page or going to another page...but if there's a better way by all means let me know.

MotoX395

If you don't actually need the content to be taken from any sort of external source then a simple div would be enough... let me give an example..

First we have the html:
<div id="scrollarea">everything that shall be inside the scrolling area here...</div>


Then you got to add some Css to it since the div alone does nothing:
#scrollarea {
   width: 500px;
   height: 500px;
   overflow: auto; /* this is the part that stands for the magic */
   }


of course you got to change the width and height to w/e you actually need + add other kinds of selectors to be able to style everything as you need it to be but that's what you need basically.

In case you don't use Css yet then there is several ways to add Css, just make sure to never add it inline though (as in actual the actual html tag).

The best way is to make a new document named "whatever.css" and simply put the Css in there. Then you add that in between the <head></head> like this:

If its xhtml:
<link rel="stylesheet" type="text/css" media="screen" href="whatever.css" />

If its html:
<link rel="stylesheet" type="text/css" media="screen" href="whatever.css">

The diff is in the ending slash, you must close all tags in xhtml while in html you must not.


You can also add them like this:
<style type="text/css" media="screen">@import "whatever.css";</style>

This gives you a MS IE problem though, it's called "Flash of Unstyled Content" (FOUC). Nothing to worry about to much, it flashes the page for a second as if it had no style sheet (Css). This do not happen if you use the first way I showed here to import the Css though. In return the second way of importing hides the Css from really old school browsers, since you prolly won't use all that advanced Css that's nothing to bother about though.

If you'd like to both fix the FOUC IE bug + hide it from old school browsers though then this is the cleanest way:

1. Use the <link /> way to import the Css but then in the Css doc that you import have nothing but this written:

@import url("the-real-style-sheet.css");

Now you're free from both the MS IE FOUC bug is taken care of and so are the old school browsers.


To make the long story short though, this is a quick step by step'er on the easiest and most effective way:

1. Make a document called "whatever.css" and add the following too it and change what has to be changed:

#scrollarea {
   width: 500px;
   height: 500px;
   overflow: auto; /* this is the part that stands for the magic */
   }


2. Put this in between the <head></head> tags:

If its xhtml:
<link rel="stylesheet" type="text/css" media="screen" href="whatever.css" />

If its html:
<link rel="stylesheet" type="text/css" media="screen" href="whatever.css">

Then write this in the html instead of the iframe:

<div id="scrollarea">everything that shall be inside the scrolling area here...</div>



... Hope that helps and I hope I wasn't too messy on explaining this... I lose the track far too often when I explain things that can be oh so simple. :P
^^^^^^^^^^^^^^

51

clear as day.  :D

i hate to turn this into a help me out thread. do you have msn? ive got a few more coding questions...