Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Slight Error in Firefox


  • Please log in to reply
23 replies to this topic

#1 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 03:20 PM

I'm having what is admittedly a small problem, but it's driving me nuts. My blog displays correctly in IE but there is a slight problem when it shows up in Firefox. The attached JPG shows the area in each browser with the problem circled. I know it's the CSS that causing me problems, but I have no clue how to fix it.

The address of the affected page is http://www.dcroe.com/blog.html.

I would appreciate any help that anyone could give.

Posted Image


The HTML for the page is attached
Attached File  blog.html   24.58KB   442 downloads

Edited by dcroe05, 24 January 2006 - 03:22 PM.


#2 FP_Guy

FP_Guy

    Mach 1 Member

  • 250 Posts Club
  • 421 posts

Posted 24 January 2006 - 03:32 PM

I noticed that the images are hyperlinked did you try doing a text-decoration none for the <img> tag?

#3 FP_Guy

FP_Guy

    Mach 1 Member

  • 250 Posts Club
  • 421 posts

Posted 24 January 2006 - 03:35 PM

Try adding this snippet of css and see if this will work.



img
{
text-decoration: none;
}

#4 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 03:35 PM

You are correct that the images right above the black line are hyperlinked. I really don't know anything about CSS so..

Are you suggesting adding text-decoration none to the actual tag or to the CSS portion of the HTML?

#5 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 03:43 PM

That didn't seem to do anything...assuming I added it in the right place

#6 JohnMu

JohnMu

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3,519 posts

Posted 24 January 2006 - 04:07 PM

It's the background color seeping through - you can see it by adding
#header td {background-color: blue; }
to the CSS - the black bar will turn blue.

I haven't got a clue as how to fix it, though :-) -- perhaps one of those 2px issues between Firefox / IE.

John

Edit: You can hide it a bit better, though, with the following:
#header td {background-color: #decbbd; }

Edited by softplus, 24 January 2006 - 04:11 PM.


#7 AbleReach

AbleReach

    Peacekeeper Administrator

  • Hall Of Fame
  • 6,471 posts

Posted 24 January 2006 - 04:51 PM

Why is this only happening on the rough draft page?

On all pages except "Rough Draft," the image you use for a heading is a smidge higher.



Elizabeth

#8 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 04:54 PM

I've changed the TD color as you suggested and it's a little better.

What I really don't understand is if the IMGs are showing up a little off in the table, why is it not throwing off the rest of the table?

#9 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 04:56 PM

Elizabeth,

All pages except rough draft are hard HTML. The Rough Draft page is a blogger blog that I publish to my own website.

#10 AbleReach

AbleReach

    Peacekeeper Administrator

  • Hall Of Fame
  • 6,471 posts

Posted 24 January 2006 - 05:02 PM

OK -- the rough draft page has more in the left and right columns than other pages, and the background loads a little differently. There is a twitch. Sometimes this happens when there's too much to fit into a space.

Did you recently put new links in one of the sidebars? Maybe including a link that is a little wider?

Yes, here it is:
I don't see the black underline or twitch on pages before "Sign of the Apocalypse," the longest title I see.

Try making your left side columns a little wider. Make sure that there are still enough pixels for what needs to fit in the center column. You may be able to get a few pixels out of making the black outside edge narrower at the sides of your pages.

Elizabeth

#11 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 05:50 PM

Elizabeth,

Actually the problem existed before I put anything in the sidebars. Plus the way I had to construct this page there are separate tables for header, body and footer, so the two aren't connected at all.

#12 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 06:55 PM

Elizabeth,

After rereading your post I realized that you and I were addressing different issues.

You're right that the vertical black line, or twitch, is due to something too wide in the left column. It's my counter taking too long for the graphic to load, it then goes away when the counter fully loads.

The problem I'm having is underneath the graphocal tabs in the header.

I'm sorry if I wasn't clear.

#13 AbleReach

AbleReach

    Peacekeeper Administrator

  • Hall Of Fame
  • 6,471 posts

Posted 24 January 2006 - 07:35 PM

No, we were talking about the same thing. I meant the underline.

I think you have a spacing problem, where too much is in that left column and the browser squeezes things in a bit. Click on rouch draft pages before "Sign of the Apocalypse," and the horizontal line under your nav images won't be there.

What is different before and after the Apocalypse? (! no pun intended!)
Is the html diffferent? Does that horizontal line go away if you take away the Apocalypse link?

I haven't tested it for you. The fact that it starts when Apocalype appears gets my attention.
It's worth a shot.

#14 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 24 January 2006 - 09:25 PM

Now, I'm even more puzzled :) because I still have the underline no matter how far back I go. In fact, just to test it I removed everything from the sidebars and published it and I still had the underline.

#15 whelanska

whelanska

    Mach 1 Member

  • Members
  • 286 posts

Posted 24 January 2006 - 09:37 PM

Sometimes I add negative margins on images to get them to display properly. I tested this on your site and if you give those tabs a -3px bottom margin, the black line disappears. I dont' know if this is the appropriate way to solve a problem like this, but it's what I usually do.

Here's what I did on a site last week:

html>body img
{
margin-bottom: -3px;
}

...and it should work in Firefox with that. This probably isn't the real way to do things, but it's worked for me a couple times. I don't know why the margins differ in the two browsers in situations such as this.

Edited by whelanska, 24 January 2006 - 09:38 PM.


#16 AbleReach

AbleReach

    Peacekeeper Administrator

  • Hall Of Fame
  • 6,471 posts

Posted 24 January 2006 - 10:58 PM

I should have taken a screen shot. Now I am getting the line on all draft pages.

I'll have time to take a real look over the weekend, if you haven't figured it out before then. I wish I could say more than "good luck!"

Elizabeth


-- whelanska - negative margin? wow - never thought of that before. Interesting. Does it work cross-browser?

#17 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 26 January 2006 - 07:22 PM

Elizabeth,

If you have time I'd appreciate a look. Last night I tried the negative margin and it sort of worked in FF but messed it up in IE.

I've timkered all I really know how with the CSS and I'm still blank.

#18 Wit

Wit

    Sonic Boom Member

  • 1000 Post Club
  • 1,599 posts

Posted 27 January 2006 - 05:02 AM

img{margin-bottom:-3px;}
...added to blog_control.css worked for me.

You may want to turn that into a class definition rather than a generic rule for all img elements...

If MSIE gets messed up, you can always use { ...; expression("whatever")} to overrule the firefox hack.
So it would be something like:

img.pleasepickaclassname{margin-bottom:expression("0 !important");margin-bottom:-3px;}


(and yeah yeah, I know, that's not very elegant, but it works)


{edit: oops messed-up code}

Edited by Wit_, 28 January 2006 - 02:47 AM.


#19 DianeV

DianeV

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 7,216 posts

Posted 27 January 2006 - 05:58 AM

I don't know that it's the CSS that's causing problems. What essentially is happening (forgive me if I've missed it above) is not a border on a link, but a gap below all of the linked images that displays the background. I played with it a bit, but wasn't able to solve it with the doctype you're using. If you switch, however, to XHTML transitional, it all fixes in a jiffy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The issue here is that you're telling the browser to display one way via XHTML and CSS, but the doctype is giving it another instruction altogether. Bear in mind, however, that before I did that, I'd taken out a lot of the extra spacing, indents, gaps, etc. from the code, so you may have to futz* with that a bit.

Interesting; I'd come across this site before, and blogged about it on DesignerJones.


* Bear in mind that I'm a Los Angeleno -- lots of Yiddish has fallen into the common vernacular here. However, even I was not entirely prepared for the actual definition of futz. :)

#20 dcroe05

dcroe05

    Ready To Fly Member

  • Members
  • 24 posts

Posted 27 January 2006 - 06:48 PM

DianeV,

Thank you, thank you, thank you, thank you, thank you....That did the trick. I won't pretend I know what the difference is, but I know the annoying line is now gone!

Also, my thanks to FP_Guy, SoftPlus, Elizabeth, whelanska and Wit_ for your help as well.

Dale

#21 Respree

Respree

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 5,901 posts

Posted 27 January 2006 - 07:32 PM

However, even I was not entirely prepared for the actual definition of futz.


In Hawaii, it means something slightly different. ;-)

#22 DianeV

DianeV

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 7,216 posts

Posted 27 January 2006 - 07:35 PM

I'm afraid to ask!

Here, it means "mess around with", more or less. I hope.

<added> Okay, what does it mean in Hawaii?

Edited by DianeV, 27 January 2006 - 07:36 PM.


#23 Respree

Respree

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 5,901 posts

Posted 27 January 2006 - 08:09 PM

:offtopic:

Sorry, Diane. Thought you spoke a little pidgin.

Plural of fut, passing gas Hawaiian style.

E.g.

Pidgin: Ho, you wen fut? --- Not, I nevah!-
Translation: Hey, did you pass gas? Of course not! That is inconceivable.

#24 DianeV

DianeV

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 7,216 posts

Posted 27 January 2006 - 08:11 PM

LOL!



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users