/    Sign up×
Community /Pin to ProfileBookmark

IE and Firefox

Copy linkTweet thisAlerts:
Jun 13.2005

Check out this page:

[URL=http://webwork.shasta.com/edc]Click Here[/URL]

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?

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJun 13.2005 — 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.
Copy linkTweet thisAlerts:
@sabastiousauthorJun 22.2005 — I gave a position: relative to my a styles.

But it still is all choppy looking in IE ?

any other ideas?
Copy linkTweet thisAlerts:
@byeeeJun 22.2005 — it's absolutely the same in ie, firefox and opera right now.
Copy linkTweet thisAlerts:
@sabastiousauthorJun 22.2005 — so the link at the top post. The left navigation doesnt seem jumpy to you at all. Its totally smooth mouseovers?
Copy linkTweet thisAlerts:
@byeeeJun 22.2005 — yeah. it even looks better in ie than in firefox. it has a nice effect. and the layout is totally the same.
Copy linkTweet thisAlerts:
@byeeeJun 23.2005 — 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

[code=html]<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>[/code]

This is the code. I haven't modified anything in it, but it won't work. Why?
Copy linkTweet thisAlerts:
@byeeeJun 23.2005 — 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

[code=html]<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>[/code]
Copy linkTweet thisAlerts:
@byeeeJun 23.2005 — 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}
×

Success!

Help @sabastious spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...