Tried everywhere & no-one seems to be able to help!

Hi guys,

Sorry that my first post here is one asking for help - I've tried a few other forums and no-one seems to know how to fix this problem!

Basically, I know a little bit about CSS but not that much so I haven't been able to solve this IE6 CSS issue that I'm having. The code is nice and neat because I used a PSD-to-XHTML service originally - but I've made quite a few changes since then. Recently I tried to do a drop-shadow footer image (footer.gif) and was told to add this code to the CSS:

#wrapper img{margin-left:1px;}

Code (markup):

This fix works in Opera and Firefox but in IE6 (on Windows XP), the footer doesn't look right on the main page (http://www.pat-testing.co.uk). However, more importantly, the free guide page is now pretty messed up too.



The free guide page (http://www.pat-testing.co.uk/freeguide) should look a bit like this page ((http://www.pat-testing-guide.co.uk/) does.

I was hoping one of you CSS ninjas could help me with this glitch?

Thanks in advance!



Ps. Sorry about the lack of live links in this post - the forum software won't allow me to post proper linked URLs until I've made at least 10 posts. And this is only my first post.

 

Hiya, unfortunately I haven't got time right now to pin down the exact problem here but I can tell you that it's probably related to IE6's 'margin-doubling' bug. If you specify a particular margin property (e.g. margin-left) then IE6, bless it, will double that value so your margin-left:1px is effectively becoming margin-left: 2px.

The probably upshot of this is that one or more elements no longer 'fit' within others and IE6 is chucking them around (a technical term ). The solution is quite simple, add a 'display:inline' to your definition so it becomes:

img{margin-left:1px;display:inline}

(I can't see any need to cascade the #wrapper here, but add it if you like).

If this hasn't helped I'll try and find time tomorrow to look in more detail.

Jon

 

Move the image in the XHTML markup:

...
</div><!-- END Footer -->

<img src="http://www.pat-testing.co.uk/images/footer.gif" alt="Footer" height="8" width="709"> <= From here

</div><!-- END Container -->

<img src="http://www.pat-testing.co.uk/images/footer.gif" alt="Footer" height="8" width="709"> <= To here
...

 

First, since this is a new page (I'm assuming) I'd switch to a strict doctype then clean up the validation errors that WILL add.

Second, that's a presentational image, as such you really shouldn't be using a IMG tag.

Let's see... add actual FORMATTING to the code so I can tell what the *** is going on with it.

Paragraph wrapping an Image anchor - that's semantically incorrect. Is a image inside an anchor a paragraph? No it is NOT. So why did you mark it up as such. Another good hint of 'doing something wrong' is if you are using a class with the word 'header' in it instead of using a header tag... Well...

DEFINATELY axe that stupid link tracking CGI rubbish - waste of code and server process time.

You've got some wrapping DIV's that I'd just axe outright, but then I'd double-wrap the entire document and apply that bottom image not by an image tag, but by padding the bottom of the outermost wrapper and applying the image as a background via CSS. (just as your sides are applied)

Also, I'd suggest changing your commenting technique to something that makes SENSE. "</div><!-- END Container -->" - End? Really? I had no idea that's what </div> means. Also, putting the comment after a close can (if you are using floats) cause all sorts of rendering errors and issues in IE (even 7) - so I highly suggest putting the comment BEFORE the close, not after. I'd make that <!-- #container --></div> - say what you are closing - we know we are closing - that's what </div> means. The same goes for your starts. <div id="footer"><!-- START Footer --> is completely pointless as anyone who doesn't realize that's what <div id="footer"> means has no ******* business editing your code in the first place.

I would suggest a quick read of:
http://www.ibm.com/developerworks/linux/library/l-clear-code/

To help you with that - you have a very simple page with little or no code indentation, excess wrappers, pointless comments, and a whole host of other things that give other people looking at it headaches.

 

However, that is precisely what some of the Crustys at the other Point are telling people... that an image is somehow a "text equivliant" and thus belongs in a <p>.

Since I wouldn't put a smell or a sound in <p> tags, I wouldn't put an image either-- even though all of them would likely get alt text. But there are those who strongly disagree with this and the OP may have been explicitly told by a Crusty Old Guy Who Knows Stuff to do that.

 

Yeah, and there's a reason I got banned from there - and it has NOTHING to do with the excuse they handed me as to 'why' (honestly I was not aware that constituted a racial slur, since I'm fairly certain rich white kids with their pants around the ankles making gang signs are not technically a race - yeah, that's worth your first ban from a site being a lifetime one - RIGHT) - MOST of the rubbish the 'experts' on their forums (with TWO exceptions - Dan and Paul O'B) spew forth is some of the worst advice I've seen on the web - combine it with their more recent shit books (like that steaming pile of crap javascript one) and you are in instapermaban territory if you so much as say the slightest negative thing about ANYTHING over there.

It's an image, NOT a paragraph of text. Anyone advocating putting it inside a paragraph needs a brick upside their head. Serious whiskey tango foxtrot. Do search engines see images as text? Screen readers? If I turn images off does that make any sense?

Somebody get these dumbasses a dictionary.

 

That last line is priceless... Dan should link you to the thread... he was almost getting a little violent there, causing Paul to flee cause he doesn't like those sorts of threads : ) It had to do with a dictionary, and whapping upside some heads...

 

Let me guess, one of the biggest voices was the type of dumbass who uses code like:

<p class="p sf px12 lj fr q1 h cf tb1">

Oh, and sending me a link won't do any good - I've been completely banned from accessing ANY of the site by IP address, and I'm too lazy (and honest) to use a proxy.

 

No, no. The argument was that the image has a "text equivilant" (meaning that the alt text should be representing what the image has to say, and that when read should blend in with the rest of the text content) and that still didn't make any sense to me because if I look at what an image has to say (Chinese proverbs aside), then unless it's a chart or a map it never says anything. It's always decorative to me when I look at it in that light. Newspapers are simply decorating their text about the tragic housefire with an image of the sobbing mother, which according to me, if that's important to the story it should be in the normal <p> text anyway!!!. Which is now causing more problems as I'm moving almost all my images to the background when I can, meaning elements who prolly shouldn't be carrying them now have backgrounds.

 

Oh brother...

 

Thanks for your help everyone, I really appreciate your input.

@Cobnut: Tried your solution and it didn't seem to change anything.

@Maujor: Tried moving the <img> as you suggested. This just aligned the footer image to the left.

@deathshadow: I wasn't the one who added all that commenting. Like I said, I used a PSD-to-XHTML service and they're the ones that did it. I outsource my CSS/HTML requirements because I don't have much time to get into that at the moment. The CGI redirect on some of the links is there not to track links, it's for SEO reasons. I'm funnelling the pagerank to the links in the body of the text, not bleeding it to the footer links. I see what you're saying about the footer being a presentational image though.

I thought that this was a small problem that someone on a forum could help me with. Looks like I was wrong! So what I've done is gone back to the guys who originally coded this up for me and asked them to help. Hopefully they'll be able to fix it.

Thanks again everyone!

 

I wouldn't - I'd search for someone else to rewrite it with clean semantic markup, separation of presentation from content - in general try to find someone that actually KNOWS HTML/CSS.

If you paid to have that done by someone else, then you have my sympathy as you got taken for a HUGE ride... an increasingly common sight given the code some people vomit up and slap a price on.

 

hmmm.. noise > signal > noise

no-one can help?
CSS101 - a trip to the validator would've shown a missing closing </div>
http://validator.w3.org/

<div align="center">
  <!-- END alexButton0 -->
* Please Note: All fields are required and checked
</div>
[COLOR="Red"]</div> <!-- this one is missing -->[/COLOR]
</form>

Code (markup):

carry on debating

 

Damnit, Suzy, we've got dogma here. We don't need no stinkin' facts. Besides, any link belongs in a semantic block level element, eg. <p>, <hx>, <li>, and any image within the link should have a text equivalent as |alt| text. Search engines and assistive technologies read the alternative text.

Entropy increases and s:n→0.

cheers,

gary

 

I got in touch with the guys who coded it for me before and they have fixed it for me for free!

I think they did what deathshadow was saying needed to be done ie make the footer a "presentational image" instead of an inline image.

Feel free to take a look pat-testing.co.uk and pat-testing.co.uk/freeguide

Probably doesn't meet deathshadow's high standards but hey, it works for me and I'm as happy as a little piglet in the brown stuff

 

>>for free

aahhh, all is as it should be - balance and harmony are restored, you have a working page, ds is right, HTML is sorted, even if not perfect.. everyones happy