/    Sign up×
Community /Pin to ProfileBookmark

Issue with display of image in IE/Opera and FF/NN

I’m relatively decent with most development, but I’m pulling my hair out over this one:

On the site I’m developing, there is a container that needs to display an image (clickable) and 1-3 text links. The text is fine all the way around; the image is being a pain. Displays perfect in IE and Opera, not so much in FF and NN (the Mozillas.)

I’ve included a screenshot, and here’s the code:

[code]
<div id=”MyMenu” style=”position:relative; width: 154; display:inline;” >
<div id=”MyMenu2″ style=”position:relative; display:inline;” >
<div id=”MyMenu3″ class=”Topic” style=”position:relative; display:inline;”><a href=”default.asp>” style=”text-decoration:none; cursor:pointer; “><b>`<%= right(newProdYr,2) %> New Products</b></a></div>
<% IF newPid > 0 then %>
<% IF newPT <> “” then %>
<div id=”MyMenuSpacer” class=”NTopic” style=”display:inline;”><a href=”javascript:void(0);”><img src=”images/spacer.gif” height=”4″ width=”66″ border=”0″ /></a></div>
<div id=”MyMenuImage” class=”NTopic” style=”display:inline;” align=”center”><a href=”default.asp”><img src=”images/fixture/FixThumb/<%= newPT %>” width=”66″ height=”66″ border=”0″ alt=”” /></a></div>
<% End IF %>
<% IF newPN <> “” then %>
<div id=”MyMenuName” class=”NTopic” style=”display:inline;”><a href=”default.asp”><b><%= left(newPN,20) %><%IF len(newPN) > 20 then%>..<%end if%></b></a></div>
<% End IF %>
<% IF newPS <> “” then %>
<div id=”MyMenuSpec” class=”NTopic” style=”display:inline;”><a href=”javascript:void(0);” onClick=”showIt(‘<%= newPS %>’,’Spec’,30,30,700,700);”>Spec Sheet</a></div>
<% End IF %>
<% IF newPI <> “” then %>
<div id=”MyMenuInstruct” class=”NTopic” style=”display:inline;”><a href=”javascript:void(0);” onClick=”showIt(‘<%= newPI %>’,’Spec’,30,30,700,700);”>Instructions</a></div>
<% End IF %>
<% end if %><img src=”../images/nav_bottom_white.gif” width=”149″ height=”18″ hspace=”0″ vspace=”0″ border=”0″ align=”left” /></div>
</div>
</div>
[/code]

What am I doing incorrectly?

Thanks,

WolfShade

[upl-file uuid=8a84fb3c-f8fb-4a63-9c58-1eca018349d4 size=43kB]IEandOPERAwork_FFandNNdont.JPG[/upl-file]

to post a comment
CSS

10 Comments(s)

Copy linkTweet thisAlerts:
@ray326Dec 30.2005 — How 'bout if you strip that down to a single HTML instance that displays the problem without the imbedded ASP crap?
Copy linkTweet thisAlerts:
@WolfShadeauthorDec 30.2005 — How 'bout if you strip that down to a single HTML instance that displays the problem without the imbedded ASP crap?[/QUOTE]
<i>
</i>&lt;div id="MyMenu" style="position:relative; width: 154;" &gt;
&lt;div id="MyMenu2" style="position:relative;" &gt;
&lt;div id="MyMenu3" class="Topic" style="position:relative;"&gt;&lt;a href="default.asp" style="text-decoration:none; cursor:pointer;"&gt;&lt;b&gt;'06 New Products&lt;/b&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id="MyMenuSpacer" class="NTopic"&gt;&lt;a href="javascript:void(0);"&gt;&lt;img src="images/spacer.gif" height="4" width="66" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id="MyMenuImage" class="NTopic" align="center"&gt;&lt;a href="default.asp"&gt;&lt;img src="images/fixture/FixThumb/" width="66" height="66" border="0" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id="MyMenuName" class="NTopic"&gt;&lt;a href="default.asp"&gt;&lt;b&gt;...&lt;/b&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id="MyMenuSpec" class="NTopic"&gt;&lt;a href="javascript:void(0);" onClick="showIt('filename.asp','Spec',30,30,700,700);"&gt;Spec Sheet&lt;/a&gt;&lt;/div&gt;
&lt;div id="MyMenuInstruct" class="NTopic"&gt;&lt;a href="javascript:void(0);" onClick="showIt('filename.asp','Spec',30,30,700,700);"&gt;Instruction Sheet&lt;/a&gt;&lt;/div&gt;
&lt;img src="../images/nav_bottom_white.gif" width="149" height="18" hspace="0" vspace="0" border="0" align="left" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@WolfShadeauthorJan 03.2006 — I should have known that anyone who says what ray326 said couldn't help me.
Copy linkTweet thisAlerts:
@FangJan 03.2006 — and without the CSS we can't help you either!

How about giving a live link?
Copy linkTweet thisAlerts:
@WolfShadeauthorJan 03.2006 — and without the CSS we can't help you either!

How about giving a live link?[/QUOTE]

Hmm.. well, I don't think the client wants the URL to get out, but I'll risk it. A sample of what I'm talking about is located at:

http://site14.mind2create.com/menu/product_menu_new_productsB.asp

This is just a sample of the issue and not the actual page, itself. I'll add the related style, here.

Thanks,

WolfShade

<i>
</i>
.NTopic A:link,.NTopic A:visited {
position:relative;
display:block;
width:149px;
height:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: normal;
text-decoration: underline;
text-indent: 14px;
background:url(/images/nav_full_white.gif);
background-repeat: repeat-y;
}

.NTopic a:hover,.NTopic a:active{
color:gray;
text-decoration: underline;
background-repeat: repeat;

}
Copy linkTweet thisAlerts:
@ray326Jan 04.2006 — I should have known that anyone who says what ray326 said couldn't help me.[/QUOTE]Well excuse the hell out of me. I haven't been back on the board because my mother died in the interim. Frankly your realization of the the design is crap. EOT
Copy linkTweet thisAlerts:
@FangJan 04.2006 — The central image, which is the probable problem, is missing.

You are in [URL=http://www.w3.org/International/articles/serving-xhtml/#quirks]quirks mode[/URL] which will always cause problems.
Copy linkTweet thisAlerts:
@WolfShadeauthorJan 04.2006 — Well excuse the hell out of me. I haven't been back on the board because my mother died in the interim. Frankly your realization of the the design is crap. EOT[/QUOTE]

My deepest condolences for your loss. I can only imagine how devastating it is to have something like that happen, especially around the holidays. I'm sincerely sorry for your loss.

But, frankly if a few <% and %> make your eyes cross, your realization of ASP is crap, and that's not MY fault.

WolfShade
Copy linkTweet thisAlerts:
@WolfShadeauthorJan 04.2006 — The central image, which is the probable problem, is missing.

You are in [URL=http://www.w3.org/International/articles/serving-xhtml/#quirks]quirks mode[/URL] which will always cause problems.[/QUOTE]


A good suggestion; unfortunately adding a declaration made no difference, either. I had assumed that adding a border to the left and right would fix it, but that did nothing, as well. If I add text, it works great; anything else, and no dice.

WolfShade
Copy linkTweet thisAlerts:
@WolfShadeauthorJan 04.2006 — I just made an interesting discovery while googling for this; "position:static;" apparently places the div in the position within which it is in the flow of the code. So this eliminates one of the two issues I'm having. The image is properly placed (and not behind the text) in both IE/Op and the Mozillas. Now if I can just get the borders on the sides of the container to not disappear unless there is text or a hyperlink. One out of two ain't bad.

WolfShade
×

Success!

Help @WolfShade 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.16,
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,
)...