IE/Firefox Button Placement

**puppynut5** · Jan 29th, 2007, 09:06 AM

I'm having a problem. I can get my page to display properly in Firefox..but in IE 7.0 it doesn't position my side buttons properly. Any help with this on what I can change?

<a href="index.html"><img src="Use/button_home.jpg" border="0" style="position:fixed;top:200px;left:5%;"></a>
<a href="info.html"><img src="Use/button_info.jpg" border="0" style="position:fixed;top:350px;left:5%;"></a>

Firefox drops those two buttons down the page properly...while Internet explorer leaves them up at the top.

**Web Design Forums** · Jan 29th, 2007 09:06 AM

**Shadowfiend** · Jan 29th, 2007, 12:14 PM

Don't suppose you can give us a link so we can see what it's supposed to look like? Or maybe screenshots of the two browsers?

**puppynut5** · Jan 29th, 2007, 04:21 PM

Here's some screen shots... Thanks for any help you give me.

**Kayo** · Jan 29th, 2007, 05:33 PM

could you give us the code for us to figure out the problem? both html and css

**puppynut5** · Jan 29th, 2007, 05:39 PM

<html>
<head><title>CA Quiet Wean</title></head>
<link rel=StyleSheet HREF="CSS/style.css" Type="text/css">
<img STYLE="position:absolute;TOP:10%;LEFT:30%;" src="Use/Home.jpg">
<a href="index.html"><img src="Use/button_home.jpg" border="0" style="position:fixed;top:200px;left:5%;"></a>
<a href="info.html"><img src="Use/button_info.jpg" border="0" style="position:fixed;top:350px;left:5%;"></a>
</body></html>

**Kayo** · Jan 29th, 2007, 06:01 PM

hmmm. try not using percents... use px instead

**puppynut5** · Jan 29th, 2007, 06:05 PM

It does use pixels to push it down from the top... The first one is 200px down and the second 350px. It only uses percentile to push it to the left 5%... I messed with percentiles and it does the same.. Works with Firefox but not with IE. Is it maybe the fact that I upgraded it to IE 7.0 it has some sort of retarded Microsoft like problems???

**Shadowfiend** · Jan 29th, 2007, 10:27 PM

Try nuking the border, padding, and margin on all the `p' elements.

**Steax** · Jan 30th, 2007, 04:12 AM

It seems to me like another box model problem. I'll look into it and post again later. And btw, don't use the border property on images. And instead of using inline styles, use an unordered list to display the links.

Like this in HTML:

Code:

<ul id="menu">
   <li><a href="">Link1</a></li>
   <li><a href="">Link2</a></li>
   <li><a href="">Link3</a></li>
</ul>

And like this in CSS:

Code:

#menu{
  position: fixed;
  top: 200px;
  left: 50px;
}

Don't forget to negate the list padding and margins and bullets.

PS: Where's the opening body tag in your code?

Thread: IE/Firefox Button Placement

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions