Member Avatar for pencils44

Ok... I'm totally new to website creating. I started re-creating a site and was almost finished and I posted it and realized that in Firefox, the text shows, but nothing else does. There are boxes with little annoying "x"s in the corner. I am using publisher, saving them as web documents, opening the document in notepad, and then copying and pasting the html code to replace the already existing html code. I am using ipowerweb.com. I am doing everything through file folders. I am unsure if this makes any sense at all but I could really use some help. I have less than a month to finish the project I'm working on. Cuz it works in IE, but I need it to work at least in Mozilla too. Thanks in advance for any help!!
~Nikki~

  • 3 Contributors
  • 3 Replies
  • 115 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Quick diagnosis and concrete steps to fix it

The HTML you pasted is Publisher/Office output that uses VML and IE-only conditional blocks. Internet Explorer will honor those VML shapes; Firefox will ignore them and fall back to the plain HTML image elements. In the posted output the IE-only VML and the fallback image references do not line up, so Firefox tries to load files that either do not exist or are named differently — that produces the little broken-image boxes. is right that conditional comments target IE/CSS differences, but they don't solve a missing-file / VML-vs-HTML mismatch.

Immediate troubleshooting (fast checks you can apply now)

  • Open the page in Firefox, press F12 and check the Network/Console tabs. Look for 404s for image files or mixed-content/security errors.
  • Right-click a broken image -> open it in a new tab to see the exact URL the browser is requesting.
  • Using FTP or your host file manager, confirm the exported images folder was uploaded and that filenames match exactly (watch case sensitivity and spaces). Hosting on Linux is case-sensitive.
  • Inspect the source: the VML block and the plain <img> fallback must point to the same file. If they don’t, correct the fallback src or upload the missing file. Fixing the src to an existing file is the quickest practical fix.

Longer-term fixes and best practices

  • Don’t rely on Publisher-generated HTML for production. It produces IE-specific markup and bloated code. Rebuild the layout with semantic HTML and CSS or use an HTML editor that writes cross-browser markup.
  • Replace VML shapes with standard <img> tags and CSS positioning (or responsive CSS) so all browsers render the same elements.
  • Use a proper DOCTYPE, validate the page, and test in multiple browsers early. Avoid spaces/special characters in filenames to reduce URL-encoding and path problems.

These steps explain why it looks fine in IE but not in Firefox and give a clear path to restoring the images across browsers.

Recommended Answers

All 3 Replies

Member Avatar for ko ko

Post some your codes or link to the site. We can't help without seeing any codes.

Member Avatar for pencils44

This is a link to one of the pages. The images don't show in this one, but it is not my default file. I made them work in Explorer. But this is just to show what it is kinda suppose to look like.

This is just a bit of the html coding that is used for the page.

-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="3074" fill="f" fillcolor="white [7]"
strokecolor="black [0]">
<v:fill color="white [7]" color2="white [7]" on="f"/>
<v:stroke color="black [0]" color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow color="#ccc [4]"/>
<v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
<o:colormru v:ext="edit" colors="#2b1d0f,#6f4d2d,#6f4c2c,#2c1e11,#4b341f,#0266a4,#438ba5,#6d4a27"/>
</o:shapedefaults><o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
</head>

<body link="#0066FF" vlink=maroon style='margin:0'>

<div style='position:absolute;width:13.1093in;height:15.1709in'>
<!--[if gte vml 1]><v:rect id="_x0000_s1025" style='position:absolute;left:128.99pt;
top:93pt;width:813.76pt;height:54.72pt;z-index:1;mso-wrap-distance-left:2.88pt;
mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
mso-wrap-distance-bottom:2.88pt' o:preferrelative="t" filled="f" fillcolor="white [7]"
stroked="f" strokecolor="black [0]" o:cliptowrap="t">
<v:fill color2="white [7]"/>
<v:stroke color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:imagedata src="Link%20Page_files/image305.jpg" o:title="Lighthouse 2"/>
<v:shadow color="#ccc [4]"/>
<v:path o:extrusionok="f" insetpenok="f"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:rect><![endif]--><![if !vml]><span style='position:absolute;z-index:1;
left:172px;top:124px;width:1085px;height:73px'><img width=1085 height=73
src="Link%20Page_files/image3051.jpg" v:shapes="_x0000_s1025"></span><![endif]><!--[if gte vml 1]><v:rect
id="_x0000_s1026" style='position:absolute;left:0;top:0;width:737.99pt;
height:57pt;z-index:2;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="#5c1800"
strokecolor="black [0]" o:cliptowrap="t">
<v:fill color2="fill lighten(176)" rotate="t" angle="-90" method="linear sigma"
type="gradient"/>
<v:stroke color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
<o:top v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
<o:right v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]" joinstyle="miter"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow color="#ccc [4]"/>
<v:path insetpenok="f"/>
<v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
</v:rect><![endif]--><![if !vml]><span style='position:absolute;z-index:2;
left:-1px;top:-1px;width:986px;height:78px'><img width=986 height=78
src="Link%20Page_files/image344.gif" v:shapes="_x0000_s1026"></span><![endif]><!--[if gte vml 1]><v:line
id="_x0000_s1027" style='position:absolute;z-index:3;mso-wrap-distance-left:2.88pt;
mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
mso-wrap-distance-bottom:2.88pt' from="0,57pt" to="737.99pt,57pt"
strokecolor="black [0]" o:cliptowrap="t">
<v:stroke color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow color="#ccc [4]"/>
<v:path insetpenok="f"/>

I have been e-mailing others about it and they believe that my problem is probably with publisher. Something about it not working in Firefox because it was made to work in IE???

Edited by pencils44 because: n/a
Member Avatar for MJ Pieterse

you will need to use conditional commenting for your style sheets. make sure that it displayes correctly for webkit and mozilla and then create another style sheet for your ie style. you call it like this then on your page.

<link href="../style/FFStyle.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>  
<link href="../style/IEStyle.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.