469,271 Members | 1,020 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

Alignment problem

5
I have put together a web page for a group and I am having an alignment problem.

The page is at:

I have a top banner divided into two parts - a top piece and a small clice at the bottom for the page name. Then I have a navigation div on the left. In IE the navigation div works fine at L: 10px T: 202px but in Firefox the div appears shifted up 5 px and to the right by 2 px.

I tried setting a page up with the div at L: 8px T: 197px and it looks fine in Firefox but is too low and pushed to the left.

How can I get this to work in both browsers?

Here is the code:

<div>
<table border="0" cellpadding="0" cellspacing="0" width="858">
<!-- fwtable fwsrc="TopBannerAGAtest.png" fwbase="TopBannerAGAtestslice.gif" fwstyle="Dreamweaver" fwdocid = "1614099162" fwnested="0" -->
<tr>
<td><img src="Images/spacer.gif" width="858" height="1" border="0" alt=""></td>

</tr>

<tr>
<td><img src="Images/TopBannerAGAtestslice_r1_c1.gif" class="noSpace" alt="" name="TopBannerAGA" width="858" height="145" border="0" usemap="#m_TopBannerAGAtestslice_r1_c1" ></td>

<tr>
<td><img name="TopBannerHome" src="Images/TopBannerAGAHome_r2_c1.gif" width="858" height="42" border="0" alt=""></td>

</tr>
<map name="m_TopBannerAGAtestslice_r1_c1">
<area shape="rect" coords="0,0,173,111" href="http://www.agacgfm.org" target="_blank" alt="" >
</map>
</table>
</div>
<!-- Navigation Div -->
<div id="Side">
<table align=center width=0 id="free-buttons.org:screxst0" cellpadding=0 cellspacing=0 border=0><tr>
...

and the CSS for #Side:

#Side {
width:160px;
position:absolute;
padding:0;
border-bottom:0px solid #fff;
top:202px;
left:10px;
z-index: 0;
height: 600px;
border: 0;
background-color: #0900B2;
}
Sep 9 '06 #1
5 1798
drhowarddrfine
7,435 Expert 4TB
Your link didn't show and, without the complete code, it is difficult to pinpoint the problem; especially since you use tables for layout (which you should never do).

Browsers have their own default margin and padding settings. It is usually best to set all these to zero at the head and give each their own setting. If not, then setting something to look right in IE may not look right in other browsers, and vice-versa.
Sep 10 '06 #2
jmcpa
5
Sorry, the page is at www.kcaga.org
Sep 10 '06 #3
drhowarddrfine
7,435 Expert 4TB
First, you should not be using xhtml 1.1. It's being served as text/html so you will only cause yourself grief.

Second, you have 120 html errors. Validate and fix these errors. Then come back.

Third, Firefox is displaying what you wrote. So get your code to work correctly in Firefox. Then we can adjust for IEs quirks and bugs.
Sep 10 '06 #4
jmcpa
5
This was posted on the Adobe, sorry, HTML discussion board:

"Here's a fix that works for me. It has the added advantage of correcting that annoying shift in positioning between IE and Firefox, so it's especially great for positioning CSS menus:

1. Make sure that the layer that's now floating is in the same div as your background image, or that they're both within the same container. The easiest way is to create a container that holds everything within the <body></body> tags.

2. Make the positioning of the outer div relative, for example, <div id="container" style="position:relative">

3. Set the positioning of the inner div (or both inner divs) to absolute, for example,
<div id="menu" style="position:absolute; left: 10px; top: 150px; width: 800px; height: 30px; z-index:10">

Sounds counterintuitive, I know, but it works. Note that as soon as you change the positioning of the div from relative to absolute or vice-versa, it will jump wildly to a different part of your page, and you may not be able to move it using drag-and-drop. No worries - just change the appropriate values in code view until it's exactly where you want it."

I tried it and it works. The side div now displays the same in both browsers.

That's not to say I don't need to fix the other problems. Thanks for the comments.
Sep 10 '06 #5
drhowarddrfine
7,435 Expert 4TB
The problem is debugging web pages is hard enough without having to debug pages with tons of errors built in. Some little things can be dealt with or ignored but when you get into the 120 area, it's just a house of cards and not worth dealing with until it's fixed. One little move and you'll have another problem.
Sep 11 '06 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

67 posts views Thread by S.Tobias | last post: by
13 posts views Thread by sachin_mzn | last post: by
5 posts views Thread by Hendrik Schober | last post: by
8 posts views Thread by Cardman | last post: by
3 posts views Thread by Bill Pursell | last post: by
12 posts views Thread by Yevgen Muntyan | last post: by
10 posts views Thread by haomiao | last post: by
4 posts views Thread by myfavdepo | last post: by
8 posts views Thread by Stephen Horne | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.