Internet Explorer Bug with HyperLinks & iframes

refae · 10-02-2011, 09:28 PM

Ok, admittedly bit of a newb here.

Tried my hand at snazzing up my website which you can see here:

http://www.yusifmusic.com/frame.html

Everything works great, except some people have mentioned that they cannot click on links when using Internet Explorer (dead links).

Is it because of my use of iframes? Is there a fix for this? If so what is it? Any other compatibility issues with IE (or other browsers) I should know about?

Here is the CSS and HTML:

Document: style.css

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

a {font-family:Georgia,sans-serif; font-size: medium;}
a:link {color:black; text-decoration: bold;}
a:visited {color: black;}
a:hover { color: #c8bf27; background-color: black;
font-weight:bold;}
a:active {color: #c8bf27; background-color: black; text-decoration: none}

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#content {
position:relative;
z-index:1;
}

#news{
position:fixed;
z-index:14;
width: 15%;
height: 7%;
left: 13%;
top: 12%;
}

#bio{
position:fixed;
z-index:14;
width: 17%;
height: 7%;
left: 24%;
top: 12%;
}

#media{
position:fixed;
z-index:14;
width: 17%;
height: 7%;
left: 37%;
top: 12%;
}

#events
{
position:fixed;
z-index:14;
width: 17%;
height: 7%;
left: 49%;
top: 12%;
}

#contact{
position:fixed;
z-index:14;
width: 17%;
height: 7%;
left: 62%;
top: 12%;
}

#shop{
position:fixed;
z-index:14;
width: 12%;
height: 7%;
left: 76%;
top: 12%;
}

#textarea{
position:fixed;
z-index:10;
left: 22%;
top: 18%;;
width: 55%;
height: 68%;
background-color: transparent;
overflow: auto;
}

#copyright{
position: fixed;
color:#c8bf27;
width: 100%;
top: 96%;
height: 10%;
background-color: transparent;
z-index: 11;
}

Document: frame.html

<html>
<head>
<title> Yusif!</title>
</head>

<iframe id="Player" src="player.html" width="320" height="65" align="bottom" scrolling="no" frameborder="0" style="position:absolute;Left:0%;top:0%" >
</iframe>

<IFRAME ID="News" SRC="news.html" allowTransparency="true" height = "100%" width = "100%" scrolling = "no" frameborder = "0" vspace=0 hspace=0 marginwidth=0 marginheight=0>
</IFRAME>
</head>
<body bgcolor="black">
</body>
</html>

PS-- Is there any way to scale the size of the text (links, content, etc) relative to the browser size, the way that I am able to scale images and the background image to the size of the browser?

Thanks! Any and all help appreciated.

Phreaddee · 10-05-2011, 05:57 AM

Scrap the lot and start again. Its all wrong. Too many to begin to cover but position:fixed for all elements? No doctype, iframes not even in the body, its a wonder it works on any browser!

Just google "why I hate ie" to find out issues regarding explorers blatant disregard for standards and compatibility.

mackonline · 10-05-2011, 12:16 PM

Quote:

Originally Posted by Phreaddee

Just google "why I hate ie" to find out issues regarding explorers blatant disregard for standards and compatibility.

LOL. And I wanted to ask - why, in the name of god, are there people who still use ie

anna · 10-05-2011, 07:28 PM

Unfortunately people usually use IE because it's preloaded on their computer and they don't know any better.

I believe you can scale the text by using .ems or percentages. The user can then ctl + or ctl - to increase or decrease the size. I think on a mac it's command + and command -

Someone help me out if I'm wrong, please.

mackonline · 10-07-2011, 07:05 AM

Quote:

Originally Posted by anna

Unfortunately people usually use IE because it's preloaded on their computer and they don't know any better.

I believe you can scale the text by using .ems or percentages. The user can then ctl + or ctl - to increase or decrease the size. I think on a mac it's command + and command -

Someone help me out if I'm wrong, please.

you're not wrong at all. thing is the default browser will open in a safari so no probs there normally.

10-02-2011, 09:28 PM	#1
refae New Member Join Date: Sep 2011 Posts: 2	Internet Explorer Bug with HyperLinks & iframes Ok, admittedly bit of a newb here. Tried my hand at snazzing up my website which you can see here: http://www.yusifmusic.com/frame.html Everything works great, except some people have mentioned that they cannot click on links when using Internet Explorer (dead links). Is it because of my use of iframes? Is there a fix for this? If so what is it? Any other compatibility issues with IE (or other browsers) I should know about? Here is the CSS and HTML: Document: style.css html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } a {font-family:Georgia,sans-serif; font-size: medium;} a:link {color:black; text-decoration: bold;} a:visited {color: black;} a:hover { color: #c8bf27; background-color: black; font-weight:bold;} a:active {color: #c8bf27; background-color: black; text-decoration: none} img#bg { position:fixed; top:0; left:0; width:100%; height:100%; } #content { position:relative; z-index:1; } #news{ position:fixed; z-index:14; width: 15%; height: 7%; left: 13%; top: 12%; } #bio{ position:fixed; z-index:14; width: 17%; height: 7%; left: 24%; top: 12%; } #media{ position:fixed; z-index:14; width: 17%; height: 7%; left: 37%; top: 12%; } #events { position:fixed; z-index:14; width: 17%; height: 7%; left: 49%; top: 12%; } #contact{ position:fixed; z-index:14; width: 17%; height: 7%; left: 62%; top: 12%; } #shop{ position:fixed; z-index:14; width: 12%; height: 7%; left: 76%; top: 12%; } #textarea{ position:fixed; z-index:10; left: 22%; top: 18%;; width: 55%; height: 68%; background-color: transparent; overflow: auto; } #copyright{ position: fixed; color:#c8bf27; width: 100%; top: 96%; height: 10%; background-color: transparent; z-index: 11; } Document: frame.html <html> <head> <title> Yusif!</title> </head> <iframe id="Player" src="player.html" width="320" height="65" align="bottom" scrolling="no" frameborder="0" style="position:absolute;Left:0%;top:0%" > </iframe> <IFRAME ID="News" SRC="news.html" allowTransparency="true" height = "100%" width = "100%" scrolling = "no" frameborder = "0" vspace=0 hspace=0 marginwidth=0 marginheight=0> </IFRAME> </head> <body bgcolor="black"> </body> </html> PS-- Is there any way to scale the size of the text (links, content, etc) relative to the browser size, the way that I am able to scale images and the background image to the size of the browser? Thanks! Any and all help appreciated.

10-05-2011, 05:57 AM	#2
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,135	Scrap the lot and start again. Its all wrong. Too many to begin to cover but position:fixed for all elements? No doctype, iframes not even in the body, its a wonder it works on any browser! Just google "why I hate ie" to find out issues regarding explorers blatant disregard for standards and compatibility. __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

10-05-2011, 07:28 PM	#4
anna Platinum Member Join Date: Jul 2009 Location: Michigan Posts: 549	Unfortunately people usually use IE because it's preloaded on their computer and they don't know any better. I believe you can scale the text by using .ems or percentages. The user can then ctl + or ctl - to increase or decrease the size. I think on a mac it's command + and command - Someone help me out if I'm wrong, please.