iframe and css

liunx

Guest
HiHi

Well you could try and place the code for the scroll bar colours like this in the 'style.css' file:

/* Only IE - does not affect the other Browsers */
* {scrollbar-face-color: #FFA600; scrollbar-highlight-color: #FFA600; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #FFFF00; scrollbar-arrow-color: #FFFF00; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #000000;}

As long as the file you are loading into the iframe is made to use the same style.css file then this should work. Obviously you have to place the code for the file to read the style.css file in the 'head' section of the file, something like this:

<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"where-ever your style.css file is here" />

That should work as it works fine on my own site.

Regards

MKJ
Sites-4u (<!-- m --><a class="postlink" href="http://sites-4u.com">http://sites-4u.com</a><!-- m -->)ThHi

Think you will find it does work but you looked at the wrong page on my site. The page you looked at is pulling in pages from an external site that I have no control over hence I can't apply any scrollbar colours. The page you should have looked at is this one:

Frozen Bubble Game with iframe scrollbar coloured orange (<!-- m --><a class="postlink" href="http://www.sites-4u.com/portal/modules/frozen_bubble/javawarning.php">http://www.sites-4u.com/portal/modules/ ... arning.php</a><!-- m -->)

You can see it is using this style.css file:

<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"http://sites-4u.com/portal/themes/fruity/style.css" />

The scrollbar code within that file is this:

/* Only IE that not affect the other Browsers */
* {scrollbar-face-color: #FFA600; scrollbar-highlight-color: #FFA600; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #FFFF00; scrollbar-arrow-color: #FFFF00; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #000000;}

Not sure why it isn't working for you though? You are definitely making the iframe file use the correct style.css? Have you placed the scrollbar code as in my example?

Regards
Sites-4u (<!-- m --><a class="postlink" href="http://sites-4u.com">http://sites-4u.com</a><!-- m -->)HmmHi

I have taken a look at your coding and all that appears wrong is the style.css code for the scrollbar. It should be as I stated. You can see it working here:

Scrollbar coloured white in iframe (<!-- m --><a class="postlink" href="http://www.sites-4u.com/show/webdev/firstpage.htm">http://www.sites-4u.com/show/webdev/firstpage.htm</a><!-- m -->)

Replace the style.css script with this one:

style.css file code (<!-- m --><a class="postlink" href="http://sites-4u.com/show/webdev/stylecsscode.htm">http://sites-4u.com/show/webdev/stylecsscode.htm</a><!-- m -->)

Also I notice the first page is still showing the vertical scrollbar in explorer when there is no need for it to show. I managed to remove this on my own site but I can't remember right now how I did it. I will get back to you on that.

Regards

MKJ
Sites-4u (<!-- m --><a class="postlink" href="http://sites-4u.com">http://sites-4u.com</a><!-- m -->)OhHi

I have remembered how to remove the vertical scrollbar in explorer when it is not needed. View the site with and without here:

With bar (<!-- m --><a class="postlink" href="http://sites-4u.com/show/webdev/firstpagewithbar.htm">http://sites-4u.com/show/webdev/firstpagewithbar.htm</a><!-- m -->)

Without bar (<!-- m --><a class="postlink" href="http://sites-4u.com/show/webdev/firstpage.htm">http://sites-4u.com/show/webdev/firstpage.htm</a><!-- m -->)

If you notice the bar completely disappears unless needed as in a lower resolution. Lot neater in my eyes and I need to reapply it back on my own site come to think of it.

Simply copy your existing style.css and create a new one with a different name. Add this code to it:

HTML, BODY { overflow: auto; }

Make your main page use the new style.css and the rest of the site your existing one and that should do it.

Regards

MKJ
Sites-4u (<!-- m --><a class="postlink" href="http://sites-4u.com">http://sites-4u.com</a><!-- m -->)We
 
Back
Top