Formatting iframes with CSS

[theMAD2]

Hi,

I've been trying to format an iframes element using CSS but no joy, is this code ok?

<iframe src="home.htm" id="content" height="300" width="200" scrolling="yes" frameborder="0" allowtransparency="yes" align="middle"></iframe>

iframe {
scrollbar-arrow-color: #000000;
scrollbar-face-color: #DEDAC6;
scrollbar-3dlight-color: #DEDAC6;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #DEDAC6;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #ACA899; 
}

Thanks,
Dan

 

[shifty_uk]

Am I right in thinking Iframes don't work in Firefox?

 

[theMAD2]

They seem to be working on my Firefox, although you get a greyed out horizontal scroll bar which you don't get in IE. Does anyone know how to format the iframes/scroll bars using CSS?

Thanks,

 

[Scam]

You can using the code above but its not valid CSS. It's for IE only, and so anyone on Firefox will see the ugly grey scrollbars no matter what you do.

 

[theMAD2]

So how do people normally change scroll bar colours / sizes?

 

[Scam]

So how do people normally change scroll bar colours / sizes?

Exactly like that. It's just that it doesnt work on anything other than IE.

As someone on these very forums once told me ages ago, if you think about it the scrollbar is part of the browser, not the page. Therefore you have no right changing it.

 

[theMAD2]

As someone on these very forums once told me ages ago, if you think about it the scrollbar is part of the browser, not the page. Therefore you have no right changing it.

Good way of putting it mate. I've seen these small scroll bars before, or just bits you hover over to move a section of page up or down, I guess these are little java scripts.

 

[richard1973]

You can make scrollers using javascript and make your own jpg/gif images to act as the scroller (i.e. when mouse hovers over it the page scrolls). As your using an image you make as the scroller you can control the colours. If you google 'dynamic drive' youll find their website which provides the javascript for this. The scrolling window you can define the height and width too, so you have full control of look and layout.

I have a demo site of this in action on my website, if you go to the websites section of my site and scroll down to the 'clangear' website you can see it working where i've used image arrows to scroll the embedded window.

www.richard1973.co.uk

 

[Moredhel]

Note that this is bad practice to do, companies like microsoft have spent millions upon millions on interface design to provide a consistent and clear interface for scroll bars. If you get rid of them and put your own custom scroll method in, you could confuse users. It might look obvious to you, but some users may stop and wonder how they can scroll up and down. We're back to Scam's point about the scroll bars being part of the browser not part of the page, you don't like it when someone uses javascript to position or size your window for you, by the same token it's not nice to tell someone what their scroll bars should look like.

 

[richard1973]

not really, if the navigation is clear and straight forward then thats fine to play about with different layouts. Otherwise all sites would just be single page sites with links down left hand side. Again it all depends on target audience, if your aiming at graphic, arty, creative related people they can adapt much easier. If your site is aimed at not so pc techy people it's probably best to stick to traditional page layouts.

 

[punky_munky]

Iframes are mostly pointless. People tend to use them to cram a load of text into a tiny space and then make you scroll more than is necessary. Why not just use the full height (and width?) of the browser? Makes for a much more pleasant experience.

 

[theMAD2]

I wanted to make a set size (height and width) site as I didn't want to have a lot of text, just something describing what we've done, do, contact info etc (just a descriptive company site). As I didn't want too much text I thought it might look better to have fixed size with small text box in the page. If I put the text on a 100% height page it might look empty, or it might force me to use more text and bore people lol. After what you've all said thought I might just use 100% height, set width and try to get every page similar size using text / pictures. Thanks for the advice everyone