IE Looks fine, Mozilla looks garbled, Positioning Help please

**Neal** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

On Sun, 13 Jun 2004 19:04:19 GMT, Applebrownbetty
<applebrown@del etethisspace_ga mebanshee.com> wrote:
[color=blue]
> Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
> completely CSS positioned page, and was wondering if any resident CSS
> guru
> might quickly be able to find the problem(s). Thank you.
>
> In IE, the page looks how I want it to look (picture below):
> www.sunbadgeco.com/sunmetal/ie.jpg
>
> In Mozilla Firefox, somehow it's not quite right (pic below):
> www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
>
> Here is the CSS and HTML (with some omissions for brevity):[/color]

Screenshots and incomplete code are not sufficient. One omission - whether
you used a doctype properly or not - might be critical. Please, instead of
snipped code, upload an example showing the problem and give us the URL.

**Applebrownbetty** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"Neal" <neal413@yahoo. com> wrote in message
news:opr9jrd4yg 6v6656@news.ind ividual.net...[color=blue]
> On Sun, 13 Jun 2004 19:04:19 GMT, Applebrownbetty
> <applebrown@del etethisspace_ga mebanshee.com> wrote:
>[color=green]
> > Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
> > completely CSS positioned page, and was wondering if any resident CSS
> > guru
> > might quickly be able to find the problem(s). Thank you.
> >
> > In IE, the page looks how I want it to look (picture below):
> > www.sunbadgeco.com/sunmetal/ie.jpg
> >
> > In Mozilla Firefox, somehow it's not quite right (pic below):
> > www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
> >
> > Here is the CSS and HTML (with some omissions for brevity):[/color]
>
> Screenshots and incomplete code are not sufficient. One omission - whether
> you used a doctype properly or not - might be critical. Please, instead of
> snipped code, upload an example showing the problem and give us the URL.[/color]

That is near complete code Neal and near complete CSS. The only things I
left out are the navbar information which work perfectly on both pages. Here
is the complete HTML but you'll find it just about the same. The logo,
navbar and footer sections work on both IE and Mozilla, it's just the
mainart class to the footer that's causing the problem:

Here's a link to the main page of the site. It's exactly the same without
the new CSS, except for the middle mainart class that I changed on the
artists page: www.sunbadgeco.com/sunmetal/index.htm

This is the relavant HTML of the page in discussion however. As you can see
I only cut out the navbar stuff.

<link href="css/sunstyle.css" rel="stylesheet " type="text/css" />
</head>

<body>
<div id="container" >

<div id="logo">
<a href="/sunmetalfineart/"><img src="images/logo.jpg" width="450"
height="120" border="0" alt="Sunmetal Fine Art Co. Home" /></a>
</div>

<div id="navmain">
<div>
<img src="images/navbar.jpg" alt="" />
</div>

<a href="artists.h tm" id="artists"><i mg src="images/artists_active. jpg"
class="pload" border="0" width="148" height="35" alt="" /><img
src="images/pixel.gif" border="0" width="148" height="35" alt="Featured
Artists" /></a><img src="images/diamond.gif" width="55" height="35" alt=""
/><a href="contact.h tm" id="contact"><i mg src="images/contact_active. jpg"
class="pload" border="0" width="163" height="35" alt="" /><img
src="images/pixel.gif" border="0" width="163" height="35" alt="Contact
Information" /></a><img src="images/diamond.gif" width="55" height="35"
alt="" /><a href="about.htm " id="about"><im g src="images/about_active.jp g"
class="pload" border="0" width="90" height="35" alt="" /><img
src="images/pixel.gif" border="0" width="90" height="35" alt="About Us"
/></a>

<div>
<img src="images/navbar.jpg" alt="" />
</div>
</div>

<div id="mainart">
<div class="artblock ">
<div class="artistna me">
<span class="artistfi rst">S</span>teven <span
class="artistfi rst">H</span>ofberger<b r /><span
class="limitede dition">Limited Editions: 50</span>
</div>
<div class="artimage ">
<img src="images/hofberger_miniv ase.jpg" height="200" width="200" alt=""
/>
</div>
</div>
</div>

<div id="footer">
<div class="hrgraphi c">
<img src="images/bottomlights.jp g" width="246" height="52" alt="" /><br />
<img src="images/hr.jpg" width="580" height="1" alt="" />
</div>

<div id="navfooter" >
<a href="artists.h tm" class="navfoote r">Artists</a>|<a href="contact.h tm"
class="navfoote r">Contact Information</a>|<a href="about.htm "
class="navfoote r">About Us</a>
</div>

<div id="copyright" >
Copyright ©2004 Sunmetal Fine Art Co. All Rights Reserved.
</div>
</div>

</div>
</body>
</html>

**Shawn K. Quinn** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

Applebrownbetty wrote:
[color=blue]
> Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
> completely CSS positioned page, and was wondering if any resident CSS guru
> might quickly be able to find the problem(s). Thank you.
>
> In IE, the page looks how I want it to look (picture below):
> www.sunbadgeco.com/sunmetal/ie.jpg
>
> In Mozilla Firefox, somehow it's not quite right (pic below):
> www.sunbadgeco.com/sunmetal/mozillafirefox.jpg[/color]

First, you should cite Web addresses as URLs (not just hostnames with a path
slapped on the end). Second, it's nearly impossible for those willing to
help you to actually do so unless you put the CSS and HTML on your server,
as opposed to slopping it on the end of your Usenet article.

--
Shawn K. Quinn

**Applebrownbetty** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"Shawn K. Quinn" <skquinn@xeviou s.kicks-ass.net> wrote in message
news:O_6dnbBgYb CXT1HdRVn-jA@speakeasy.ne t...[color=blue]
> Applebrownbetty wrote:
>[color=green]
> > Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
> > completely CSS positioned page, and was wondering if any resident CSS[/color][/color]
guru[color=blue][color=green]
> > might quickly be able to find the problem(s). Thank you.
> >
> > In IE, the page looks how I want it to look (picture below):
> > www.sunbadgeco.com/sunmetal/ie.jpg
> >
> > In Mozilla Firefox, somehow it's not quite right (pic below):
> > www.sunbadgeco.com/sunmetal/mozillafirefox.jpg[/color]
>
> First, you should cite Web addresses as URLs (not just hostnames with a[/color]
path[color=blue]
> slapped on the end).[/color]

Why?
[color=blue]
> Second, it's nearly impossible for those willing to
> help you to actually do so unless you put the CSS and HTML on your server,
> as opposed to slopping it on the end of your Usenet article.[/color]

And why is that? It seemed easy enough to read to me (not sloppy as you
suggested) and it would look hardly different if you chose "view source"
from the actual page.

DU · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

Applebrownbetty wrote:[color=blue]
> "Neal" <neal413@yahoo. com> wrote in message
> news:opr9jrd4yg 6v6656@news.ind ividual.net...
>[color=green]
>>On Sun, 13 Jun 2004 19:04:19 GMT, Applebrownbetty
>><applebrown@d eletethisspace_ gamebanshee.com > wrote:
>>
>>[color=darkred]
>>>Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
>>>completely CSS positioned page, and was wondering if any resident CSS
>>>guru
>>>might quickly be able to find the problem(s). Thank you.
>>>
>>>In IE, the page looks how I want it to look (picture below):
>>>www.sunbadgeco.com/sunmetal/ie.jpg
>>>
>>>In Mozilla Firefox, somehow it's not quite right (pic below):
>>>www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
>>>
>>>Here is the CSS and HTML (with some omissions for brevity):[/color]
>>
>>Screenshots and incomplete code are not sufficient. One omission - whether
>>you used a doctype properly or not - might be critical. Please, instead of
>>snipped code, upload an example showing the problem and give us the URL.[/color]
>
>
> That is near complete code Neal and near complete CSS.[/color]

[snipped]

You were asked to upload an example and to give an url. Neal's request
was reasonable and justified. You post code again. Maybe you need to
first understand why it is a lot better for you and your webpage to post
an url. Maybe anything else is secondary for now.

DU

DU · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

Applebrownbetty wrote:
[color=blue]
> "Shawn K. Quinn" <skquinn@xeviou s.kicks-ass.net> wrote in message
> news:O_6dnbBgYb CXT1HdRVn-jA@speakeasy.ne t...
>[color=green]
>>Applebrownbet ty wrote:
>>
>>[color=darkred]
>>>Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
>>>completely CSS positioned page, and was wondering if any resident CSS[/color][/color]
>
> guru
>[color=green][color=darkred]
>>>might quickly be able to find the problem(s). Thank you.
>>>
>>>In IE, the page looks how I want it to look (picture below):
>>>www.sunbadgeco.com/sunmetal/ie.jpg
>>>
>>>In Mozilla Firefox, somehow it's not quite right (pic below):
>>>www.sunbadgeco.com/sunmetal/mozillafirefox.jpg[/color]
>>
>>First, you should cite Web addresses as URLs (not just hostnames with a[/color]
>
> path
>[color=green]
>>slapped on the end).[/color]
>
>
> Why?
>
>[color=green]
>>Second, it's nearly impossible for those willing to
>>help you to actually do so unless you put the CSS and HTML on your server,
>>as opposed to slopping it on the end of your Usenet article.[/color]
>
>
> And why is that? It seemed easy enough to read to me (not sloppy as you
> suggested) and it would look hardly different if you chose "view source"
> from the actual page.
>
>[/color]

Ok, then, post the http headers, the doctype declaration and the
content-type of your external stylesheet along with the rest of your
code. If you don't understand why these are important, then someone will
explain what you obviously don't understand here.

DU

**Eric B. Bednarz** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"Applebrownbett y" <applebrown@del etethisspace_ga mebanshee.com> writes:
[color=blue]
> "Shawn K. Quinn" <skquinn@xeviou s.kicks-ass.net> wrote:[/color]
[color=blue][color=green]
>> First, you should cite Web addresses as URLs (not just hostnames with a[/color]
> path[color=green]
>> slapped on the end).[/color]
>
> Why?[/color]

Fair question. Dumping hostnames with trailing path components for
decorational purposes is aesthetically satisfying.
[color=blue][color=green]
>> Second, it's nearly impossible for those willing to
>> help you to actually do so unless you put the CSS and HTML on your server,
>> as opposed to slopping it on the end of your Usenet article.[/color]
>
> And why is that?[/color]

Right. You want to be on CSS-discuss, not Usenet.

(Supplementing info: CSS-discuss has a firm set of rules, 25% of which
are rigidly enforced; you need to lurk a while to recognise those.
Usenet, on the other hand, has no rules whatsoever; you need to lurk
considerably longer to understand them.)

HTH, HAND

--
| ) 111010111011 | http://bednarz.nl/
-(
| ) Distribute me: http://binaries.bednarz.nl/mp3/aicha

**Neal** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

On Sun, 13 Jun 2004 21:48:13 GMT, Applebrownbetty
<applebrown@del etethisspace_ga mebanshee.com> wrote:
[color=blue]
> "Neal" <neal413@yahoo. com> wrote in message
> news:opr9jrd4yg 6v6656@news.ind ividual.net...[color=green]
>> Screenshots and incomplete code are not sufficient. One omission -
>> whether
>> you used a doctype properly or not - might be critical. Please, instead
>> of
>> snipped code, upload an example showing the problem and give us the URL.[/color]
>
> That is near complete code Neal and near complete CSS. The only things I
> left out are the navbar information which work perfectly on both pages.[/color]

But you also omitted the doctype, which I mentioned is critical in
avoiding these things.
[color=blue]
> Here's a link to the main page of the site. It's exactly the same without
> the new CSS, except for the middle mainart class that I changed on the
> artists page: www.sunbadgeco.com/sunmetal/index.htm[/color]

On this page I see the doctype, is it on the new page? I simply don't know
that, and it's the first thing I'd look for.
[color=blue]
> This is the relavant HTML of the page in discussion however. As you can
> see
> I only cut out the navbar stuff.[/color]

Ok, my very best guess, assuming the doctype is correct: your floats have
no width assigned. Try adding widths. The searchlight image appears to be
going higher because it isn't clearing the floats. Exactly what to do,
it's hard to diagnose without my investing more time into this.

What I'd like you to appreciate is this: for anyone to see the problem
actually happening, we'd have to set up your HTML in a file on our own,
plus a css file, and then view it in IE and Mozilla. Either that, or some
true genius can read the code and figure it out in their head. The latter
implies more faith in the abilities of the regulars of this newsgroup than
I think it's safe to assume; the former assumes we have the time to devote
to recreating the problem.

When you provide a URL, stripped down to the essentials which show the
problem, you demonstrate that you've put some effort toward discovering
the problem, and you demonstrate respect for the fact that we're all here
to discuss CSS, not serve as free help gurus of some sort. I'm not
insinuating you really think we're all here just to help you, but as you
definitely have a server to which you can post a test case, and you
definitely have code ready to upload, the fact that you haven't simply
done so is confusing. It so obviously makes the process of finding the
problem so much easier.

Again, *please* post a URL to a test case which exhibits the problem - and
if possible, remove anything which you can which still leaves the problem
intact.

**e n | c k m a** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

> font-family: Trebuchet MS, Tahoma, Arial, "Times New Roman", sans-serif;

You need quotes around Trebuchet MS [like this: "Trebuchet MS"].
[color=blue]
> font-size: 100%;
> padding: 0;
> margin: 0;
> text-align: left;
> }
> #mainart {
> display: block;
> margin-left: auto;
> margin-right: auto;
> margin-top: 55px;
> margin-bottom: 35px;[/color]

Why not just use margin:55px auto 35px; ?

You're supposed to also specify widths when you're using float. I don't
know if these are the things that are making your site dodgy-looking but
keep at it.

Don't forget to specify relevant alt text for images.

HTH,

Nick.

**James Moe** · Jul 20 '05, 10:53 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

Applebrownbetty wrote:[color=blue]
>[color=green]
>>Second, it's nearly impossible for those willing to
>>help you to actually do so unless you put the CSS and HTML on your server,
>>as opposed to slopping it on the end of your Usenet article.[/color]
>
> And why is that? It seemed easy enough to read to me (not sloppy as you
> suggested) and it would look hardly different if you chose "view source"
> from the actual page.
>[/color]
Dude. Are you defective? You ask for help then complain when they ask
you provide your problem in a form that is easy to diagnose. Just do it.
Transcriptions into a post are guaranteed to have something missing,
misspelled, or otherwise incomplete. That is why a link to the problem is
requested.

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

**Applebrownbetty** · Jul 20 '05, 10:54 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"Eric B. Bednarz" <bednarz@fahr-zur-hoelle.org> wrote in message
news:m3k6yaizoj .fsf@email.bedn arz.nl...[color=blue]
> "Applebrownbett y" <applebrown@del etethisspace_ga mebanshee.com> writes:
>[color=green]
> > "Shawn K. Quinn" <skquinn@xeviou s.kicks-ass.net> wrote:[/color]
>[color=green][color=darkred]
> >> First, you should cite Web addresses as URLs (not just hostnames with a[/color]
> > path[color=darkred]
> >> slapped on the end).[/color]
> >
> > Why?[/color]
>
> Fair question. Dumping hostnames with trailing path components for
> decorational purposes is aesthetically satisfying.[/color]

Huh? It appears to be some sort of joke, but I don't see it.
[color=blue][color=green][color=darkred]
> >> Second, it's nearly impossible for those willing to
> >> help you to actually do so unless you put the CSS and HTML on your[/color][/color][/color]
server,[color=blue][color=green][color=darkred]
> >> as opposed to slopping it on the end of your Usenet article.[/color]
> >
> > And why is that?[/color]
>
> Right. You want to be on CSS-discuss, not Usenet.[/color]

What is CSS discuss? Sorry, I haven't lurked here often, though I have been
on usenet for quite some time. Just not on primarily on technical groups
where new people are berated (rather than helped) if they post reasonable
queries, yet not perfectly suited to a few regulars' style.

**Applebrownbetty** · Jul 20 '05, 10:54 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"James Moe" <jmm-list.TRSPAMTR@s ohnen-moe.com> wrote in message
news:cajgq4$mid $0@216.39.176.6 9...[color=blue]
> Applebrownbetty wrote:[color=green]
> >[color=darkred]
> >>Second, it's nearly impossible for those willing to
> >>help you to actually do so unless you put the CSS and HTML on your[/color][/color][/color]
server,[color=blue][color=green][color=darkred]
> >>as opposed to slopping it on the end of your Usenet article.[/color]
> >
> > And why is that? It seemed easy enough to read to me (not sloppy as you
> > suggested) and it would look hardly different if you chose "view source"
> > from the actual page.
> >[/color]
> Dude. Are you defective? You ask for help then complain when they ask
> you provide your problem in a form that is easy to diagnose. Just do it.
> Transcriptions into a post are guaranteed to have something missing,
> misspelled, or otherwise incomplete. That is why a link to the problem is
> requested.[/color]

Must Conform or be banished.

So exactly what are the problems with Copy and Paste? What I posted before
wasn't complete... missing a DOCTYPE as noted above, but there were no
errors, dude.

**Applebrownbetty** · Jul 20 '05, 10:54 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"e n | c k m a" <bob@marley.com > wrote in message
news:lCazc.2387 1$sj4.17436@new s-server.bigpond. net.au...[color=blue][color=green]
> > font-family: Trebuchet MS, Tahoma, Arial, "Times New Roman",[/color][/color]
sans-serif;[color=blue]
>
> You need quotes around Trebuchet MS [like this: "Trebuchet MS"].
>[color=green]
> > font-size: 100%;
> > padding: 0;
> > margin: 0;
> > text-align: left;
> > }
> > #mainart {
> > display: block;
> > margin-left: auto;
> > margin-right: auto;
> > margin-top: 55px;
> > margin-bottom: 35px;[/color]
>
> Why not just use margin:55px auto 35px; ?
>
> You're supposed to also specify widths when you're using float. I don't
> know if these are the things that are making your site dodgy-looking but
> keep at it.[/color]

Thanks, that might be a problem. I'll add widths and see what happens.

**Applebrownbetty** · Jul 20 '05, 10:54 PM

Re: IE Looks fine, Mozilla looks garbled, Positioning Help please

"Neal" <neal413@yahoo. com> wrote in message
news:opr9kfuwo0 6v6656@news.ind ividual.net...[color=blue]
> On Sun, 13 Jun 2004 21:48:13 GMT, Applebrownbetty
> <applebrown@del etethisspace_ga mebanshee.com> wrote:
>[color=green]
> > "Neal" <neal413@yahoo. com> wrote in message
> > news:opr9jrd4yg 6v6656@news.ind ividual.net...[color=darkred]
> >> Screenshots and incomplete code are not sufficient. One omission -
> >> whether
> >> you used a doctype properly or not - might be critical. Please, instead
> >> of
> >> snipped code, upload an example showing the problem and give us the[/color][/color][/color]
URL.[color=blue][color=green]
> >
> > That is near complete code Neal and near complete CSS. The only things I
> > left out are the navbar information which work perfectly on both pages.[/color]
>
> But you also omitted the doctype, which I mentioned is critical in
> avoiding these things.[/color]

Sorry, forgot and did not know prior to building it that the type made a
difference with respect to the CSS. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
[color=blue][color=green]
> > Here's a link to the main page of the site. It's exactly the same[/color][/color]
without[color=blue][color=green]
> > the new CSS, except for the middle mainart class that I changed on the
> > artists page: www.sunbadgeco.com/sunmetal/index.htm[/color]
>
> On this page I see the doctype, is it on the new page? I simply don't know
> that, and it's the first thing I'd look for.
>[color=green]
> > This is the relavant HTML of the page in discussion however. As you can
> > see
> > I only cut out the navbar stuff.[/color]
>
> Ok, my very best guess, assuming the doctype is correct: your floats have
> no width assigned. Try adding widths. The searchlight image appears to be
> going higher because it isn't clearing the floats. Exactly what to do,
> it's hard to diagnose without my investing more time into this.[/color]

Thanks, I'll start with widths, and appreciate you taking the time to
notice.
[color=blue]
> What I'd like you to appreciate is this: for anyone to see the problem
> actually happening, we'd have to set up your HTML in a file on our own,
> plus a css file, and then view it in IE and Mozilla. Either that, or some
> true genius can read the code and figure it out in their head.[/color]

This is where I made the mistake. I did assume that CSS regulars could
simply read simple HTML and CSS and "see" it in their head if it wasn't too
complicated. I try to do that when reading C-scripting for games, but it
would have been easier after all this mess to post it to the site.
[color=blue]
> When you provide a URL, stripped down to the essentials which show the
> problem, you demonstrate that you've put some effort toward discovering
> the problem, and you demonstrate respect for the fact that we're all here
> to discuss CSS, not serve as free help gurus of some sort. I'm not
> insinuating you really think we're all here just to help you, but as you
> definitely have a server to which you can post a test case, and you
> definitely have code ready to upload, the fact that you haven't simply
> done so is confusing. It so obviously makes the process of finding the
> problem so much easier.[/color]

I appreciate your answer and if the problem is not solved, post the new code
to the server after trying the widths.

IE Looks fine, Mozilla looks garbled, Positioning Help please

IE Looks fine, Mozilla looks garbled, Positioning Help please

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment