PDA

Click to See Complete Forum and Search --> : IE and Firefox

sabastious
06-13-2005, 04:35 PM
Check out this page:

Click Here (http://webwork.shasta.com/edc)

Check it out on IE, and mouse over the left navigation, its all choppy.

Check it out on FireFox, and the left navigation flows perfectly.

What can I do to make this code work smoothly on IE as well?
toicontien
06-13-2005, 06:38 PM
IE-Win needs positioning when you turn inline <a> tags (as they are by default) into block elements (as you have in the menu). Add position: relative; to the style declarations for those <a> tags.
sabastious
06-22-2005, 12:15 PM
I gave a position: relative to my a styles.

But it still is all choppy looking in IE :(

any other ideas?
byeee
06-22-2005, 12:29 PM
it's absolutely the same in ie, firefox and opera right now.
sabastious
06-22-2005, 12:37 PM
so the link at the top post. The left navigation doesnt seem jumpy to you at all. Its totally smooth mouseovers?
byeee
06-22-2005, 03:44 PM
yeah. it even looks better in ie than in firefox. it has a nice effect. and the layout is totally the same.
byeee
06-23-2005, 05:15 AM
I don't know what this could come from, just the other day it was working perfectly in IE.
http://www.webhosting4free.biz/ftest/index3.htm

<head>
<style>
div.backu {background:url('home/gbu.jpg') repeat;height:30px;position:absolute;top:0;left:30;right:30}
div.backl {background:url('home/gbl.jpg') repeat-y;width:30px;position:absolute;top:30;left:0;bottom:30}
div.backd {background:url('home/gbd.jpg') repeat;height:30px;position:absolute;left:30;bottom:0;right:30}
div.backr {background:url('home/gbr.jpg') repeat;width:30px;position:absolute;top:30;bottom:30;right:0}
div.backul {background:url('home/gclu.jpg') no-repeat;width:30px;height:30px;position:absolute;top:0;left:0}
div.backur {background:url('home/gclr.jpg') no-repeat;width:30px;height:30px;position:absolute;top:0;right:0}
div.backdl {background:url('home/gcl.jpg') no-repeat;width:30px;height:30px;position:absolute;bottom:0;left:0}
div.backdr {background:url('home/gcr.jpg') no-repeat;width:30px;height:30px;position:absolute;bottom:0;right:0}
body {margin:0;padding:0;background-color:#97d34d}
</style>
</head>
<body>

<div class="backu"></div>
<div class="backl"></div>
<div class="backd"></div>
<div class="backr"></div>
<div class="backul"></div>
<div class="backur"></div>
<div class="backdl"></div>
<div class="backdr"></div>

</body>

This is the code. I haven't modified anything in it, but it won't work. Why?
byeee
06-23-2005, 12:52 PM
I got it to work in IE, I just hope no browser will mess up the divs.

Do you have any better ideas for this?

www.webhosting4free.biz/ftest/index4.htm

<head>
<style type="text/css">
div.backu {background:url('home/gbu.jpg') repeat;width:100%;height:30px;position:absolute;top:0px}
div.backl {background:url('home/gbl.jpg') repeat;width:30px;height:100%;position:absolute;left:0px}
div.backd {background:url('home/gbd.jpg') repeat;width:100%;height:30px;position:absolute;bottom:0px}
div.backr {background:url('home/gbr.jpg') repeat;width:30px;height:100%;position:absolute;right:0px}
div.backul {background:url('home/gclu.jpg') no-repeat;width:30px;height:30px;position:absolute;top:0;left:0}
div.backur {background:url('home/gclr.jpg') no-repeat;width:30px;height:30px;position:absolute;top:0;right:0}
div.backdl {background:url('home/gcl.jpg') no-repeat;width:30px;height:30px;position:absolute;bottom:0;left:0}
div.backdr {background:url('home/gcr.jpg') no-repeat;width:30px;height:30px;position:absolute;bottom:0;right:0}
body {margin:0px;padding:0px;background-color:#97d34d}
</style>
<body>

<div class="backu"></div>
<div class="backl"></div>
<div class="backd"></div>
<div class="backr"></div>
<div class="backul"></div>
<div class="backur"></div>
<div class="backdl"></div>
<div class="backdr"></div>

</body>
byeee
06-23-2005, 01:34 PM
great, now ie is having problems with the inner frame.
is anything wrong with this line? any ideas why internet explorer doesn't "get it" ?

div#frame {position:absolute;top:130px;left:30px;right:30px;bottom:30px}