Topic: javascript or html problem (Page 1 of 1)

Hey all!
I wasn't sure which forum to post this problem to. I'm having a problem with spacing between images. They lined up before I changed the javascript applied to them. As some of you know, I'm on mac and everything looks fine here, but the client says IE 6.0 things are spaced out. Can one of you please take a look and let me know what you think I've done wrong here? I'm sure it's a simple fix.

2 pages,

1 with table rows:
http://www.jenicory.com/west/index.html

1 without
http://www.jenicory.com/west/contact.html

Thanks so much!

I don't see anything wrong with the code anywhere (other than the fact that you're using tables for layout!! arrgghhhh!).

This may be one of those cases where IE is adding space because of the hard breaks between the <a> and the <img>.

This also a case where coding this properly as a list (it is a list of links afterall) would allow greater control via CSS and avoid the problem altogether. =)

Hi DL,
The client requested tables and wanted to be able to edit in dreamweaver and make new pages, so yeah it was against my better judgement. I'll try removing the hard breaks. You think coding this as a list might work? I'll give that a try too! Thanks for the feedback

/me fails to see the relation between table based layout and the possibility to maintain a site with Dreamweaver.

Try a

a img {
 display: block;
}

I'm with poi on that ^
I have a very hard time with the idea of the client requesting tables too...sounds like a good time to sit down and explain how silly a request that is =)

but, oh well.

In my experience, coding as a list rather than simply images with <br>'s allows for a greater degree of control, as well as being far more semantically correct.
Removing the line break between the <a> and the <img> has been a hassle that has been necessary in many circumstances for years now. Ugh.




Edit TP: Giving DL a missing 'r'

(Edited by Tyberius Prime on 06-28-2006 17:25)

Thanks for the help. The issue I've had in the past with opening up websites I built just using css and includes is that everything was all over the place. It wasn't WYSIWYG at all. He doesn't know css and yeah this was the quickest way for me to get it done in a manner that he'd be able to edit it. Thanks again and I'll see if any of that helps.

DreamWeaver is quite capable on the CSS side. At least they made some efforts to edit the CSS in the 2-3 last versions. And opening a XHMTL+CSS website in previous versions shouldn't be a problem. ... though I guess MacroMedia was using Trident ... but hey, the websites should be made to, at least, gracefully degrade in less capable browsers such as IE 6, Netscape 4 and Lynx

DL,
How might I code this as a list? A ul gives me an indention...Sorry if it's a stupid question. As you well know, this is definitely not my forte

I've run into this problem before and I'm not sure what causes it, but if you bring you end table data tags up it will close the gap.

Go from this:

<td><a href="contact.html" onMouseOver="swap('contact','normal_imagee')" onMouseOut="swap('contact','mouseover_imagee')">
<img src="header/contact_off.gif" name="contact" width="100" height="26" border="0"></a>
</td>

To this:

<td><a href="contact.html" onMouseOver="swap('contact','normal_imagee')" onMouseOut="swap('contact','mouseover_imagee')">
<img src="header/contact_off.gif" name="contact" width="100" height="26" border="0"></a></td>

on all those nav links and it should close up the gaps.

- Butcher -

(Edited by butcher on 06-29-2006 03:22)

quote:

---

Jeni said:

DL,
How might I code this as a list? A ul gives me an indention...Sorry if it's a stupid question. As you well know, this is definitely not my forte

---

That's what the CSS is all about!

The "indentation" is just a matter of padding and margins.

Set padding and margins for both the <ul> and <li> elements to 0. Then, if needed, add margins and/or padding as needed to adjust.

Another stupid question, are the selectors declared as such...

.li

.ul

Cause its still indenting even with no margin, etc. Perhaps you know of a site that uses this that maybe I could look at the code? I hate to ask anyone to have to walk me through it...Thanks for your patience and help.

Edit: I tried Butcher's suggestion and went back to when I had each in their own row. Can you look at this page and let me know if things are still spacing out in PC IE? Thanks !

http://www.jenicory.com/west/services.html

(Edited by Jeni on 06-29-2006 04:26)

nope.

a "." preceding a selector means that selector is a class (so if you had <p class="this">, you would access it in the CSS as ".this { }")

it is simply

ul {
list-style:none;
margin:0;
padding:0;
}


li {
list-style:none;
margin:0;
padding:0;
}

Every HTML element can be accessed simply by its name in CSS.

The list-style:none; gets rid of the bullets.

I know of tons of sites that use this method, as it is really the "correct" method. But more importantly, the specifics of this application are far less important than the overall concept. Every element is a box. Strip it's margins and padding and build up as needed is the general approach I use.

We can easily get carried away with best methods and good practice and proper semantics here, but most of that os pointless in this case, what with the tabled layout.

It might not even be worth your time to continue the list approach at this point, unless you cannot get it to work with the other suggestions.

FWIW

Your edited link works fine in IE 6 for me.

IE is always picky about the damn line breaks. If you keep the <td><a><img></a></td> all on one line you should be fine all around.


I'm obligated to say this however: it is way past the time to get away from tabled layouts, and to learn the proper use of structural mark-up and good CSS!
We can help. of course...

Thanks so much for all of your help. And yeah I agree tables for layout suck.