Display issue twixt IE and Mozilla??

[WolfShade]

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:

<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>


What am I doing incorrectly?

Thanks,

WolfShade

[WolfShade]

Anyone??

WolfShade

[terrawolf]

What does the class NTopic do?

Also, you should put a specific measuring value after your widths...
width: 154px for example... firefox/mozilla will act funny without it.

[dera]

do you have the actual rendered source not the asp source?
probably better idea to post on the css forum any way

[drhowarddrfine]

If it display 'perfect' in IE but not FF then something is wrong. You have to make sure your code displays perfect in FF first, otherwise you are coding to the buggy browser. It's hard to debug js like this with snippets.

EDIT: It looks like you are having problems with margins in IE. You might try setting margins and padding to zero, then set the individual elements to what you want. Are you using a proper doctype?

Also, upgrade to FF1.5. No need to use 1.0.7 anymore.

[WolfShade]

What does the class NTopic do?

Also, you should put a specific measuring value after your widths...
width: 154px for example... firefox/mozilla will act funny without it.

I'll give that a shot, thanks. But before I do, I'll add the specific style code that pertains to this situation (NTopic).



.NTopic,.NTopic A:link,.NTopic A:visited {
position:static;
display:block;
width:149px;
height:18px;
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_10.gif);
background-repeat: repeat-y;
}

.NTopic a:hover,.NTopic a:active{
color:gray;
position:static;
display:block;
width:149px;
height:18px;
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_10.gif);
background-repeat: repeat-y;
}


WolfShade

[WolfShade]

do you have the actual rendered source not the asp source?
probably better idea to post on the css forum any way

I did post there, first. Got some help, but not at first. Posted here when I didn't get a response from CSS initially. Still having an issue, and the deadline is approaching.

Here is the "View Source" code for it:


<div id="MyMenu" style="position:static;" >
<div id="MyMenu2" style="position:static;" >
<div id="MyMenu3" class="Topic" style="position:static; width: 149;"><a href="default.asp?page=products&subpage=fixturedet&fixid=144&nme=Pendants" style="text-decoration:none; cursor:pointer; "><b>'06 New Products</b></a></div>
<div id="MyMenuImage" class="NTopic" style="position:static;" align="left"><div id="MyMenuImageCenter" class="NTopic" style="position:static;" align="center"><img src="../images/spacer.gif" height="6" width="66" border="0" /><br /><img src="../images/fixture/FixThumb/echo_pendant_smoke_thumb.jpg" height="66" width="66" border="0" style="border-color:black;" /></div></div>
<div id="MyMenuName" class="NTopic" style="position:static;"><a href="default.asp?page=products&subpage=fixturedet&fixid=144&nme=Pendants" style="position:static;"><b>Mini Echo</b></a></div>

<div id="MyMenuSpec" class="NTopic" style="position:static;"><a href="javascript:void(0);" onClick="showIt('SpecSheets/pnd_miniecho_spec.pdf','Spec',30,30,700,700);" style="position:static;">Spec Sheet</a></div>

<div id="MyMenuInstruct" class="NTopic" style="position:static;"><a href="javascript:void(0);" onClick="showIt('InstructionSheets/920fjecho.pdf','Spec',30,30,700,700);" style="position:static;">Instructions</a></div>
<img src="../images/nav_bottom_white.gif" width="149" height="18" hspace="0" vspace="0" border="0" align="left" />
</div>
</div>
</div>


I've included the most recent screenshots from IE and Mozilla.

Thanks,

WolfShade

[WolfShade]

If it display 'perfect' in IE but not FF then something is wrong. You have to make sure your code displays perfect in FF first, otherwise you are coding to the buggy browser. It's hard to debug js like this with snippets.

EDIT: It looks like you are having problems with margins in IE. You might try setting margins and padding to zero, then set the individual elements to what you want. Are you using a proper doctype?

Also, upgrade to FF1.5. No need to use 1.0.7 anymore.

I develop for IE first because IE has the biggest market share. And I'm not having any margin issues in IE because IE isn't having any issues; it's FF that is breaking. I'll play with padding and see if that does it. And it's in quirks mode because when I tried to declare the doctype, all the fonts went to black (other pages have coloured fonts.)

Thanks, and I'll let you know how the padding experiments work out.

WolfShade

[drhowarddrfine]

Please read the link in my sig "But it works in IE!"

[terrawolf]

Hi Wolfshade, I've just been checking your code and I think I might have found the source of your problem.

MyMenuImageCenter and MyMenuImage have a class of NTopic, which define their height as only being 18 pixels. Firefox takes this value literally, and even though you can still see the whole image, that's like saying "overflow: visible" - a large portion of the image is sitting outside of it's box.

If you remove the height attribute from your NTopic style you will see what I mean.