CSS and javascript

[Terry]

Hello,

During the past 2 days in an effort to learn CSS I've read 2 books and
today I've started the process of redesigning our footer. I've run into
an issue whereas I can't figure out how to float text around an image
produced by javascript. Any help will be greatly appreciated.

The footer in development is ...
http://www.4everhers.com/dev/footer.asp

The footer I want it to look like is on any other page.

Thanks,
Terry

 

[BootNic]

Hello,

During the past 2 days in an effort to learn CSS I've read 2 books
and today I've started the process of redesigning our footer. I've
run into an issue whereas I can't figure out how to float text
around an image produced by javascript. Any help will be greatly
appreciated.

The footer in development is ...
http://www.4everhers.com/dev/footer.asp

The footer I want it to look like is on any other page.

IE http://files.photojerk.com/BootNic/00.png
Opera http://files.photojerk.com/BootNic/01.png
Mozilla http://files.photojerk.com/BootNic/02.png

I am not sure, but I do not think these are the results you expected. You may wish
to make your example just a little more flexible.

--
BootNic Monday, May 29, 2006 7:12 PM

Assert your right to make a few mistakes. If people can't accept your
imperfections, that's their fault.
*Dr. David M. Burns*

 

[Mark Parnell]

Deciding to do something for the good of humanity, Terry

I've run into
an issue whereas I can't figure out how to float text around an image
produced by javascript.

Why use Javascript for the image?

 

[Terry]

Deciding to do something for the good of humanity, Terry


Why use Javascript for the image?

The javascript displays a COMODO SSL logo which displays our validation
information real-time. I have to use javascript --- so I believe.

I figured out the problem ... It was totally user error. I stopped
working on it for a couple of hours and when I came back I realized that
I had put the javascript and the span statement in the wrong location.
Should've been moved up "above" the text that I wanted to float around it.

I'm wondering if I can get help with something else. The footer
displays fine in IE and Opera but not Firefox. I've read that there are
various hacks that you have to do sometimes. Can anyone give me an idea
as how to make the right side line up?

Thanks!

 

[Mark Parnell]

Deciding to do something for the good of humanity, Terry

The javascript displays a COMODO SSL logo which displays our validation
information real-time. I have to use javascript --- so I believe.

So what happens for visitors with Javascript disabled/unavailable?

I figured out the problem ... It was totally user error.

I'm wondering if I can get help with something else. The footer
displays fine in IE and Opera but not Firefox.

Sorry, but I know from previous posts that you've made that the content
of your site is not something I want to be looking at - especially at
work. No doubt someone else will be able to help though.

 

[Terry]

Deciding to do something for the good of humanity, Terry


So what happens for visitors with Javascript disabled/unavailable?




Sorry, but I know from previous posts that you've made that the content
of your site is not something I want to be looking at - especially at
work. No doubt someone else will be able to help though.

Yep, you're right Mark. And I do apologize! I generally include a
disclaimer stating that we sell lingerie and therefore display pictures
of women wearing such.

As for javascript, I'm really not sure what I can do. The method for
displaying the logo is set by Comodo. I will go to there site and look
to se if there's an alternative, but I don't think so.

Terry

 

[Mark Parnell]

Deciding to do something for the good of humanity, Terry

Yep, you're right Mark. And I do apologize! I generally include a
disclaimer stating that we sell lingerie and therefore display pictures
of women wearing such.

That's OK - I recognised the domain name.

If you can create a page with your new footer without photos, I'm more
than happy to have a look.

As for javascript, I'm really not sure what I can do. The method for
displaying the logo is set by Comodo. I will go to there site and look
to se if there's an alternative, but I don't think so.

Yeah, if it's a 3rd-party thing you don't have much choice. Can't hurt
to check with them though - they really *should* provide a better
alternative.

 

[Terry]

Deciding to do something for the good of humanity, Terry


That's OK - I recognised the domain name.

If you can create a page with your new footer without photos, I'm more
than happy to have a look.


Yeah, if it's a 3rd-party thing you don't have much choice. Can't hurt
to check with them though - they really *should* provide a better
alternative.

Nothing but a footer "here" ...
http://www.4everhers.com/dev/footer.asp

I just need to get the right side to line up. Well, that's not all. As
BootNic pointed out, I need to correct the problem of discombobulation
when the text size is increased. But I'm learning and I'll tackle that
issue "next" week.

Thanks

 

[Mark Parnell]

Deciding to do something for the good of humanity, Terry

Nothing but a footer "here" ...
http://www.4everhers.com/dev/footer.asp

Well why didn't you say so?

I just need to get the right side to line up.

Line up with what? The menu?

Well, that's not all. As
BootNic pointed out, I need to correct the problem of discombobulation
when the text size is increased. But I'm learning and I'll tackle that
issue "next" week.

TBH, I think you're going to need to largely rewrite it to get it to
adjust nicely with larger font sizes, so you might as well do that
first.

 

[Terry]

Deciding to do something for the good of humanity, Terry


Well why didn't you say so?


Line up with what? The menu?


TBH, I think you're going to need to largely rewrite it to get it to
adjust nicely with larger font sizes, so you might as well do that
first.

It was in an earlier post. It appears to display fine in IE and Opera
but in Firefox the right side does not line up.

I will completely redo it this time focusing on text resizing. Anyway,
it's the best way to learn! Thanks for looking Mark.

Terry

 

[BootNic]

[snip]

I'm wondering if I can get help with something else. The footer
displays fine in IE and Opera but not Firefox. I've read that
there are various hacks that you have to do sometimes. Can anyone
give me an idea as how to make the right side line up?

The first thing I notice is that you have not given a doctype.

IMHO its much easier to work with when you give a document a doctype that
puts the document in standard compliance mode.

If you were to give your footer a doctype :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

you would find that is not likely the results you want in any of your test browsers,
but it would be more consistent.

At any rate, here is something you can go through and figure out what it all does.

Files used in the HTML example:

http://i.1asphost.com/BootNic/temp/hover.htc

http://i.1asphost.com/BootNic/temp/mainTestlte7.css

http://i.1asphost.com/BootNic/temp/mainTestlte6.css

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href=
"http://i.1asphost.com/BootNic/temp/mainTest.css" type="text/css">
<!--[if lte IE 7]>
<link rel="stylesheet"
href="http://i.1asphost.com/BootNic/temp/mainTestlte7.css" type="text/css">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet"
href="http://i.1asphost.com/BootNic/temp/mainTestlte6.css" type="text/css">
<![endif]-->
<title></title>
</head>
<body>
<div id="menu">
<div>
<p>Shopping</p>
<ul>
<li><a href=
"https://www.4everhers.com/4store/pc/Custva.asp?redSSL=1">My
Account</a></li>
<li><a href=
"http://www.4everhers.com/ctp/reward-points.asp">Reward
Points</a></li>
<li><a href=
"http://www.4everhers.com/ctp/reward-points.asp">Reward
Points</a></li>
</ul>
</div>
<div>
<p>Departments</p>
<ul>
<li><a href=
"http://www.4everhers.com/4store/pc/viewCat_h.asp?idCategory=4">
Sexy Lingerie</a></li>
<li><a href=
"http://www.4everhers.com/4store/pc/viewCat_h.asp?idCategory=24">
Romance &amp; Fantasy</a></li>
<li><a href=
"http://www.4everhers.com/4store/pc/viewCat_h.asp?idCategory=24">
Romance &amp; Fantasy</a></li>
</ul>
</div>
<div>
<p>Helpdesk</p>
<ul>
<li><a href=
"http://www.4everhers.com/ctp/size-chart.asp">Size
Chart</a></li>
<li><a href=
"http://www.4everhers.com/ctp/lingerie-definitions.asp">Lingerie
Definitions</a></li>
<li><a href=
"http://www.4everhers.com/ctp/lingerie-definitions.asp">Lingerie
Definitions</a></li>
</ul>
</div>
<div>
<p>Information</p>
<ul>
<li><a href="http://www.4everhers.com/ctp/about-us.asp">About
Us</a></li>
<li><a href=
"http://www.4everhers.com/ctp/contact-us.asp">Contact
Us</a></li>
<li><a href="http://www.4everhers.com">Home</a></li>
</ul>
</div>
<div>
<p>Webmasters</p>
<ul>
<li><a href=
"http://www.4everhers.com/links/webmasters-add-link.asp">Add
a Link</a></li>
<li><a href=
"http://www.4everhers.com/links/webmasters-modify-link.asp">Modify
a Link</a></li>
<li><a href=
"http://www.4everhers.com/links/webmasters-modify-link.asp">Modify
a Link</a></li>
</ul>
</div>
</div>
<div id="ssi">
<div class="borderright">
<p><span style="float:right;"><img src=
"http://www.4everhers.com/images/instantssl_site_seal.gif" alt=
""></span>Shop 4everHers.com in complete confidence. You are
protected by the world-class safety of SSL <a href=
"http://www.4everhers.com/ctp/security.asp">Secure
Shopping</a>. COMODO is a world leader in ensuring Identity
Trust &amp; Assurance on the web. If there is any way we can
improve your shopping experience, please <a href=
"http://www.4everhers.com/ctp/contact-us.asp">Contact
Us</a>.</p>
</div>
<div>
<p><span style="float:left;"><img src=
"http://www.4everhers.com/images/creditcards.gif" alt="">Click
to Verify</span>Copyright &copy; 4everHers, 2006. All rights
reserved. Images used herein are protected by copyright of
either 4everHers, the manufacturer of the goods, or stock photo
agencies and cannot be reprinted or sold without the written
permission of the copyright holder. <a href=
"/StoreMap.html">Site Map</a></p>
</div>
</div>
</body>
</html>

--
BootNic Tuesday, May 30, 2006 9:01 PM

Good communication is as stimulating as black coffee and just as hard
to sleep after.
*Anne Morrow Lindbergh*

 

[Terry]

[snip]

I'm wondering if I can get help with something else. The footer
displays fine in IE and Opera but not Firefox. I've read that
there are various hacks that you have to do sometimes. Can anyone
give me an idea as how to make the right side line up?

The first thing I notice is that you have not given a doctype.

<snip>
Yep, I'm working on getting a doctype declared. The problem is that
when I declare a doctype the footer gets thrown out of whack in IE. I
know that indicates a problem with the code, a problem I could not find.
So I figured I would just recreate the footer from scratch using CSS
since I want to learn it anyway. Once recreated I'll add the doctype to
the header of all pages. I hope my strategy is correct.

I kind of inherited this problem and I'm determined to fix it. I'm not a
programmer so there's a learning curve.

I'll have a look at the links you provided later this evening. Thanks.